/* Vocabulary List Styles
 *
 * The page's controls (buttons, chips, pager, audio button, the queue pill) are
 * built with Tailwind — see the "Vocabulary page controls" section of
 * assets/css/tailwind/input.css — and the bundle is linked from
 * templates/dictionary/vocabulary_list.html. This file keeps only the few rules
 * Tailwind utilities express poorly: things that depend on the sticky navbar,
 * scroll containers, line clamping and the Thai scale.
 */

/* Admin filter panel (superuser tooling): the shell around the segmented
   controls, which are themselves Tailwind (.vocab-seg). */
.admin-filters-wrap {
    background: linear-gradient(135deg, #ffffff 0%, var(--color-bg-warm) 100%);
    border: 1px solid rgba(245, 158, 11, 0.12);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

.admin-filters-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.admin-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-filter-group label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #868e96;
    margin-bottom: 0;
    padding-left: 0.1rem;
}

.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* Thai script sizes */
.thai-medium {
    font-size: 1.75rem;
}

.thai-large {
    font-size: 2rem;
    line-height: 1.3;
}

/* Word Card Styles */
.word-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    /* Ensure cards are same height in grid */
}

.word-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

/* The whole card is tappable through the word's stretched link: anywhere that
   is not a control opens the word. Controls (and the badges, whose tooltips
   would otherwise be covered) sit above the overlay. */
.word-card {
    position: relative;
}

.word-card .card-stretch-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.word-card .vocab-audio-btn,
.word-card .vocab-actions,
.word-card .badge {
    position: relative;
    z-index: 1;
}

.word-card-head {
    min-height: 2.6rem;
    margin-bottom: 0.5rem;
}

.word-card .thai-text {
    display: block;
    color: #0F172A;
    /* gray-900 */
}

.word-card .romanization {
    display: block;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.word-card .romanization-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.word-card .romanization-line .romanization {
    margin-bottom: 0;
}

.word-card .word-ipa {
    font-size: 0.875rem;
    cursor: help;
}

.word-card .definition {
    display: block;
    color: #475569;
    /* gray-600 */
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.vocab-audio-btn.playing {
    color: var(--color-primary);
}

/* Example sentence snippet: the Thai sentence and its translation, one line
   each so every card keeps the same height. */
.example-snippet {
    border-top: 1px dashed #e9ecef;
}

.example-snippet small {
    font-size: 0.78rem;
    line-height: 1.4;
}

.example-translation {
    font-style: italic;
}

/* Card actions: "add to review" and its options picker share the first row,
   "add to list" always starts a second one. Letting all three share a row only
   worked on a wide card and read as a jumble of half-height chips. */
.vocab-actions {
    flex-wrap: wrap;
    gap: 0.375rem;
    width: 100%;
    margin-top: 0.5rem;
}

.vocab-actions .vocab-review-toggle {
    flex: 1 1 auto;
    justify-content: center;
}

.vocab-actions .vocab-add-to-list {
    flex: 1 0 100%;
    justify-content: center;
}

.vocab-review-options {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Results header: word count + the compact pager */
#vocabulary-results {
    /* The navbar is `sticky-top`, so scrolling the results back into view would
       otherwise park the count line and pager underneath it — the reader sees a
       page that appears to "start" mid-card. 5rem clears the navbar (measured at
       78px on desktop, 66px on a phone) with a hair of breathing room. */
    scroll-margin-top: 5rem;
}

.vocab-results-header {
    min-height: 2rem;
}

/* The queue panel: one row per queued word — Thai, then its definition in the
   reader's language, and a remove button. */
.vocab-queue-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vocab-queue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.vocab-queue-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vocab-queue-item-text {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
}

.vocab-queue-item-word {
    font-size: 1.35rem;
    line-height: 1.3;
    color: #0F172A;
    text-decoration: none;
}

.vocab-queue-item-word:hover {
    color: var(--color-primary);
}

/* Long definitions are cut, never allowed to push the remove button around. */
.vocab-queue-item-def {
    overflow: hidden;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile "More filters" disclosure. Above 768px the wrapper disappears from the
   box tree (display: contents) so its columns are laid out by the Bootstrap row
   exactly as before; only the phone gets a collapsed panel. */
.vocab-filters-toggle.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Bootstrap's gutter rule is `.row > *` — a child combinator, which works on the
   DOM tree and therefore no longer reaches these columns once the wrapper stops
   being a flex item. Mirror the vertical gutter everywhere (the phone stacks the
   fields, so it needs the gaps), and add the horizontal half-gutter only at
   ≥768px: on a phone the wrapper is still a real box carrying its own padding,
   so repeating it there would inset the selects twice. */
.vocab-filter-fields > * {
    margin-top: var(--bs-gutter-y);
}

@media (min-width: 768px) {
    .vocab-filter-fields {
        display: contents !important;
    }

    .vocab-filter-fields > * {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }
}

/* Badges specifically for vocabulary context (the word detail page uses it too) */
.pos-badge {
    font-size: 0.75rem;
}

/* Mastery Bar inside cards */
.mastery-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.mastery-fill.level-0 {
    background: var(--mastery-0);
}

.mastery-fill.level-1 {
    background: var(--mastery-1);
}

.mastery-fill.level-2 {
    background: var(--mastery-2);
}

.mastery-fill.level-3 {
    background: var(--mastery-3);
}

.mastery-fill.level-4 {
    background: var(--mastery-4);
}

.mastery-fill.level-5 {
    background: var(--mastery-5);
}

.mastery-fill.level-6 {
    background: var(--mastery-6);
}

.mastery-fill.level-7 {
    background: var(--mastery-7);
}

/* ---------------------------------------------------------------------------
   Phone adjustments
   --------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    /* One scrollable strip instead of two wrapped rows: the chips are the
       fastest filter on a phone and should not push the first card down. */
    .quick-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .quick-filter-chips .chip-filter {
        flex: 0 0 auto;
    }

    /* Give the definition two lines to make its point instead of one. */
    .word-card .definition {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .example-snippet small {
        white-space: normal;
    }
}