html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

#app-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* General Styles */
body {
    /* Use Bootstrap CSS variables for theme-aware background and text color */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Flashcard Styles */
#flashcard-screen .card-flip {
    width: 100%;
    position: relative;
    cursor: pointer;
    min-height: 250px;
}

#flashcard-screen .card-inner {
    display: grid;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

#flashcard-screen .card-flip.is-flipped .card-inner {
    transform: rotateY(180deg);
}

#flashcard-screen .card-front,
#flashcard-screen .card-back {
    /* Place both cards in the same grid cell so they overlap */
    grid-row-start: 1;
    grid-column-start: 1;

    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-card-bg);
}

#flashcard-screen .card-back {
    transform: rotateY(180deg);
}

/* General Card Body */
.card-body {
    padding: 1.5rem;
}

/* Add min-height to prevent layout jiggle */
#practice-screen .card {
    min-height: 400px;
}

/* Make sure practice card body fills the card height */
#practice-screen .card-body {
    flex-grow: 1;
}

/* Study Mode Styles */
.study-item-card {
    margin-bottom: 1rem;
}

.study-item-card .card-header {
    font-weight: bold;
}

/* Test & Results Styles */
#results-details .card {
    margin-bottom: 1rem;
}

.correct-answer {
    background-color: #d1e7dd; /* Light green */
}

.wrong-answer {
    background-color: #f8d7da; /* Light red */
}

/* Practice Mode Styles */
#question-list-container {
    height: 450px;
    overflow-y: auto;
    padding: 0.25rem;
}

.question-list-item {
    padding: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    /* REMOVED white-space, overflow, and text-overflow to allow wrapping */
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.question-list-item:last-child {
    margin-bottom: 0;
}

.question-list-item:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.question-list-item.active {
    background-color: var(--bs-primary);
    color: var(--bs-light);
    border-color: var(--bs-primary);
}