/* ── Brand colours ─────────────────────────────────────────────────────────── */

.navbar-default .navbar-nav > .active > a,
.navbar-default {
    background-color: #2c3e6b !important;
}

.navbar-header,
.navbar-collapse {
    background-color: #1e2d4f !important;
}

.btn-primary {
    background-color: #2c3e6b !important;
    border-color:     #1e2d4f !important;
}

.text-primary {
    color: #2c3e6b;
}

/* ── Page chrome ───────────────────────────────────────────────────────────── */

.memory-page {
    padding: 1rem;
}

@media (min-width: 768px) {
    .memory-page {
        padding: 1.5rem 2rem;
    }
}

/* ── Responsive table wrapper ──────────────────────────────────────────────── */
/*
 * Wraps the Wt WTableView so it scrolls horizontally rather than overflowing
 * the viewport on narrow screens. Also caps height and adds internal scroll.
 */
.memory-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* smooth momentum scroll on iOS */
    overflow-y: auto;
    max-height: 60vh;
    border: 1px solid #e0e4e8;
    border-radius: 4px;
}

/* ── Deck list ─────────────────────────────────────────────────────────────── */

.deck-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ── Flashcard face ────────────────────────────────────────────────────────── */

.memory-card-face {
    background:    #fff;
    border:        1px solid #d1d8e0;
    border-radius: 8px;
    min-height:    160px;
    padding:       2rem;
    text-align:    center;
    font-size:     1.3rem;
    line-height:   1.6;
    word-break:    break-word;
    box-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
}

.memory-card-face .card-label {
    font-size:     0.72rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         #8898aa;
    margin-bottom: 0.75rem;
}

@media (max-width: 767px) {
    .memory-card-face {
        font-size:  1rem;
        padding:    1rem;
        min-height: 120px;
    }
}

/* ── Study page ────────────────────────────────────────────────────────────── */

.study-page-wrap {
    max-width:  680px;
    margin:     0 auto;
    padding:    1rem;
}

@media (min-width: 768px) {
    .study-page-wrap {
        padding: 2rem 1rem;
    }
}

/* Progress bar above the card */
.study-progress-bar {
    margin-bottom: 1rem;
}

/* Rating button row — wraps on narrow screens so buttons don't overflow */
.memory-rate-bar {
    display:         flex;
    flex-wrap:       wrap;
    gap:             6px;
    justify-content: center;
    margin-top:      1rem;
}

.memory-rate-bar .btn {
    flex:      1 1 auto;
    min-width: 64px;
    max-width: 110px;
}

/* Ensure the "show answer" button spans full width on mobile */
.memory-show-answer-btn {
    width: 100%;
    margin-top: 0.75rem;
}

@media (min-width: 480px) {
    .memory-show-answer-btn {
        width: auto;
    }
}