/**
 * ACHunter.css
 *
 * Styling for the embedded Hanzi Hunter inside Amedeo Chinese.
 *
 * Phase 1: list management UI (🎯 badge, fullscreen panel, lists view,
 *          create/rename/delete modals).
 * Phase 2: full Hanzi Hunter UI (SRS, bubble hunt, list view, audio drill).
 * Phase 3: polish.
 *
 * All class names are prefixed with .hh- to avoid collisions with AC's
 * existing classes. The one exception is .nav-badge.nav-badge-hunter,
 * which deliberately piggybacks on AC's existing .nav-badge styling so
 * the 🎯 entry button looks like a sibling of T/W/G/P/W*/S.
 */

/* ============================================================
 * Hanzi Hunter (embedded) — Phase 1 / Step 1
 * 🎯 badge + fullscreen panel
 * ============================================================ */

/* The 🎯 badge in the nav strip — distinct red border so it reads as
   "different mode" rather than a normal lesson section. */
.nav-badge.nav-badge-hunter {
    border-left-color: #c62828; /* deep red */
    font-size: 1rem;
    /* Push to the right edge of the nav strip, creating visible space
       between the last AC badge (S) and the Hunter entry. */
    margin-left: auto;
}
.nav-badge.nav-badge-hunter:hover {
    background: #fff5f5;
}
html[data-theme="dark"] .nav-badge.nav-badge-hunter:hover {
    background: #2a1a1a;
}
.nav-badge.nav-badge-hunter.active {
    background: #c62828;
    border-left: 5px solid #7a0e0e;
    color: #fff;
}

/* Fullscreen panel that hosts the embedded Hanzi Hunter UI.
   Hidden by default. When .open is added it covers the viewport. */
.hh-panel {
    position: fixed;
    inset: 0;
    background: var(--bg-color, #ffffff);
    color: var(--text-primary, #222);
    z-index: 9000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.hh-panel.open {
    display: flex;
}

/* Header — distinct red gradient so users always see "I'm in Hunter,
   not Amedeo" at a glance (same idea as HH's hard-mode header). */
.hh-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
    background: linear-gradient(
        to right,
        #c62828, #e64f3f, #c62828, #7a0e0e
    );
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    min-height: 56px;
    /* Override AC's global `header { position: fixed }` rule so this
       header stays inside the panel rather than getting pinned to
       the viewport top. */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    z-index: auto;
}
.hh-panel-back {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease;
}
.hh-panel-back:hover {
    background: rgba(255,255,255,.28);
}
.hh-panel-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .3px;
}
.hh-panel-spacer {
    flex: 1;
}

/* Body — the area below the header where Hunter content lives. */
.hh-panel-body {
    flex: 1;
    overflow: auto;
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty / placeholder content (Step 1 only). */
.hh-empty {
    text-align: center;
    max-width: 420px;
    padding: 2rem;
}
.hh-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}
.hh-empty-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #222);
}
.hh-empty-hint {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary, #666);
}
html[data-theme="dark"] .hh-panel {
    background: #1a1a1a;
}


/* ============================================================
 * Hanzi Hunter (embedded) — Phase 1 / Step 2
 * Lists view (toolbar, list rows, action buttons, modals)
 * ============================================================ */

/* The body now scrolls but doesn't center its child — children
   handle their own layout. We override the Step 1 centered body
   since the Lists view isn't centered. */
.hh-panel .hh-panel-body {
    align-items: stretch;
    justify-content: flex-start;
    padding: 1rem;
}

.hh-lists-view {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.hh-lists-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
html[data-theme="dark"] .hh-lists-toolbar {
    border-bottom-color: rgba(255,255,255,.08);
}
.hh-lists-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.hh-lists-h {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #222);
}
.hh-lists-count {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
}

/* Generic Hunter buttons used here and in later steps. */
.hh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
    user-select: none;
    font-family: inherit;
}
.hh-btn-primary {
    background: #c62828;
    color: #fff;
    border-color: #c62828;
}
.hh-btn-primary:hover  { background: #b71c1c; border-color: #b71c1c; }
.hh-btn-primary:active { transform: translateY(1px); }
.hh-btn-ghost {
    background: transparent;
    color: var(--text-primary, #222);
    border-color: rgba(0,0,0,.18);
}
.hh-btn-ghost:hover { background: rgba(0,0,0,.04); }
html[data-theme="dark"] .hh-btn-ghost {
    color: #eee;
    border-color: rgba(255,255,255,.22);
}
html[data-theme="dark"] .hh-btn-ghost:hover { background: rgba(255,255,255,.06); }
.hh-btn-danger {
    background: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
}
.hh-btn-danger:hover { background: #b71c1c; border-color: #b71c1c; }

/* The collection of list cards. Each card is a row with metadata
   on the left and inline action buttons on the right. */
.hh-list-collection {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hh-list-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hh-list-card:hover {
    border-color: rgba(198,40,40,.35);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
html[data-theme="dark"] .hh-list-card {
    background: #242424;
    border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .hh-list-card:hover {
    border-color: rgba(230,79,63,.45);
}

/* Active-list emphasis — stronger left border, like the nav badges. */
.hh-list-card.is-active {
    border-left: 4px solid #c62828;
    padding-left: calc(1rem - 3px);
}

.hh-list-info {
    flex: 1;
    min-width: 0;
}
.hh-list-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}
.hh-list-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.hh-list-active-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #c62828;
    background: rgba(198,40,40,.10);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}
.hh-list-meta {
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
}

.hh-list-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.hh-icon-btn {
    background: transparent;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-primary, #444);
    transition: background .12s ease, border-color .12s ease;
    line-height: 1;
}
.hh-icon-btn:hover {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.22);
}
.hh-icon-btn.is-danger:hover {
    background: rgba(211,47,47,.10);
    border-color: rgba(211,47,47,.45);
    color: #b71c1c;
}
html[data-theme="dark"] .hh-icon-btn {
    color: #ddd;
    border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .hh-icon-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.28);
}

/* Empty state for the lists view (different from Step 1's empty;
   reuses .hh-empty / .hh-empty-icon / .hh-empty-title / .hh-empty-hint). */
.hh-empty-lists {
    margin-top: 2.5rem;
}
.hh-empty-cta {
    margin-top: 1.25rem;
}

/* Modals — name (create/rename) and confirm-delete share the same chrome. */
.hh-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hh-modal-overlay.open {
    display: flex;
}
.hh-modal {
    background: var(--card-bg, #fff);
    color: var(--text-primary, #222);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
html[data-theme="dark"] .hh-modal {
    background: #242424;
}
.hh-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin: 0;
    background: none;
    color: inherit;
    /* Override AC's global `header { position: fixed }` rule so this
       header stays inside the modal box rather than getting pinned
       to the viewport top. */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    z-index: auto;
    box-shadow: none;
}
html[data-theme="dark"] .hh-modal-header {
    border-bottom-color: rgba(255,255,255,.08);
}
.hh-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.hh-modal-close {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #888);
    padding: 0 0.25rem;
}
.hh-modal-close:hover { color: var(--text-primary, #222); }
.hh-modal-body {
    padding: 1rem;
    overflow: auto;
}
.hh-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0,0,0,.08);
}
html[data-theme="dark"] .hh-modal-footer {
    border-top-color: rgba(255,255,255,.08);
}
.hh-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--text-secondary, #555);
}
.hh-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #222);
    font-family: inherit;
    box-sizing: border-box;
}
.hh-input:focus {
    outline: none;
    border-color: #c62828;
    box-shadow: 0 0 0 2px rgba(198,40,40,.18);
}
html[data-theme="dark"] .hh-input {
    background: #1a1a1a;
    color: #eee;
    border-color: rgba(255,255,255,.18);
}
.hh-modal-hint {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    line-height: 1.4;
}
.hh-modal-hint.is-error {
    color: #d32f2f;
}


/* ============================================================
 * Step 3 — Per-list contents view
 * ============================================================ */

/* Contents view has same structure as lists view: toolbar + collection. */
.hh-contents-view {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.hh-contents-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    flex-wrap: wrap;
}
html[data-theme="dark"] .hh-contents-toolbar {
    border-bottom-color: rgba(255,255,255,.08);
}
.hh-contents-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}
.hh-contents-h {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hh-contents-count {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    flex-shrink: 0;
}

/* Word rows — similar structure to list cards but narrower layout
   since there are more fields. */
.hh-words-collection {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hh-word-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hh-word-row:hover {
    border-color: rgba(198,40,40,.25);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
html[data-theme="dark"] .hh-word-row {
    background: #242424;
    border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .hh-word-row:hover {
    border-color: rgba(230,79,63,.35);
}

.hh-word-info {
    flex: 1;
    min-width: 0;
}
.hh-word-zh {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #222);
    margin-bottom: 0.2rem;
}
.hh-word-meta {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hh-word-lang-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
    background: rgba(0,0,0,.04);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
}
html[data-theme="dark"] .hh-word-lang-badge {
    background: rgba(255,255,255,.08);
    color: #aaa;
}

.hh-word-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Empty state for words (inside a list) */
.hh-empty-words {
    margin-top: 2.5rem;
}


/* Mobile tweaks: tighter padding, smaller buttons. */
@media (max-width: 600px) {
    .hh-list-card {
        padding: 0.7rem 0.75rem;
    }
    .hh-icon-btn {
        padding: 0.35rem 0.5rem;
    }
    .hh-lists-h { font-size: 1.2rem; }
    .hh-modal { max-width: 96vw; }
    .hh-modal-wide { max-width: 96vw; }
    .hh-contents-h { font-size: 1.2rem; }
    .hh-word-row { padding: 0.65rem 0.75rem; }
    .hh-contents-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .hh-contents-title-row {
        order: -1;
    }
    .hh-contents-actions {
        width: 100%;
    }
}


/* ============================================================
 * Step 5 — Paste-import modal
 * ============================================================ */

/* Wider modal for the import UI (more horizontal space for preview table) */
.hh-modal-wide {
    max-width: 640px;
}

.hh-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
}

.hh-import-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.hh-import-preview {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 6px;
    padding: 0.75rem;
    background: rgba(0,0,0,.02);
    max-height: 300px;
    overflow: auto;
}

html[data-theme="dark"] .hh-import-preview {
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.12);
}

.hh-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.hh-import-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    vertical-align: top;
}

html[data-theme="dark"] .hh-import-table td {
    border-bottom-color: rgba(255,255,255,.08);
}

.hh-import-table tr:last-child td {
    border-bottom: none;
}

/* Button group for Import + Add word */
.hh-contents-actions {
    display: flex;
    gap: 0.5rem;
}