/* view-manage-settings.css — settings, vocabulary management, form dialogs, card editor. Owner: Phase 8.
   Token-only colours so Light and Dark both pass WCAG AA (spec §1.4). */

/* ---------- Form controls (spec §3.2) ---------- */
.input {
    width: 100%;
    min-height: var(--control-h);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-1);
    color: var(--text-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--fs-md); /* 16px prevents iOS zoom */
}

.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--text-2); }
.input:disabled { background: var(--surface-2); color: var(--text-3); }
.input[aria-invalid="true"] { border-color: var(--danger); }
textarea.input { resize: vertical; line-height: var(--lh-body); }

.field-help { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-body); }
.field-note { font-size: var(--fs-sm); color: var(--text-brand); font-weight: var(--fw-medium); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-5); }
.field-error::before { content: '⚠ '; }

.btn-block { width: 100%; }

/* ---------- Settings (2 columns >= 1024) ---------- */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }

.settings-subnav { display: none; }

.settings-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

.settings-card {
    padding: var(--space-6);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    scroll-margin-top: var(--space-6);
}

.settings-card > * + * { margin-top: var(--space-4); }

.settings-card h2 {
    font-family: var(--font-ui);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-1);
}

.settings-card h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-1); }

.field-featured {
    padding: var(--space-4);
    background: var(--brand-soft);
    border-radius: var(--radius-md);
}

.field-featured .field-label { color: var(--text-1); }
.field-featured input[type="range"] { width: 100%; accent-color: var(--brand-1); }
#targetRetentionVal { color: var(--text-brand); font-weight: var(--fw-bold); }

/* Theme radiogroup as a segmented control (native radios stay keyboard/arrow operable) */
.segmented {
    display: inline-flex;
    padding: var(--space-1);
    gap: var(--space-1);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.segmented-item { position: relative; cursor: pointer; }

.segmented-item input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.segmented-item span {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.segmented-item input:checked + span { background: var(--surface-1); color: var(--text-brand); box-shadow: var(--shadow-1); }
.segmented-item input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.settings-save {
    position: sticky;
    bottom: var(--space-3);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

.file-button { cursor: pointer; position: relative; }
.file-button:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.danger-zone {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
    background: var(--danger-soft);
}

.danger-zone > * + * { margin-top: var(--space-2); }
.danger-zone h3 { color: var(--danger); }
.danger-zone .text-2 { color: var(--text-1); }

@media (min-width: 1024px) {
    .settings-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: var(--space-8); }

    .settings-subnav { display: block; position: sticky; top: var(--space-6); }
    .settings-subnav ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }

    .settings-subnav a {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--text-2);
        font-weight: var(--fw-medium);
        text-decoration: none;
    }

    .settings-subnav a:hover { background: var(--surface-2); color: var(--text-1); }
    .settings-subnav a.is-active { background: var(--brand-soft); color: var(--text-brand); }
}

/* ---------- Manage ---------- */
.manage-header { align-items: flex-start; }

.manage-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--fs-sm); }
.manage-breadcrumb .crumb + .crumb::before { content: '/'; margin-right: var(--space-2); color: var(--text-3); }
.manage-breadcrumb button { all: unset; cursor: pointer; color: var(--text-brand); font-weight: var(--fw-medium); border-radius: var(--radius-xs); }
.manage-breadcrumb button:hover { text-decoration: underline; }
.manage-breadcrumb button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.manage-breadcrumb [aria-current="page"] { color: var(--text-1); font-weight: var(--fw-bold); overflow-wrap: anywhere; }

.manage-subtitle { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-1); overflow-wrap: anywhere; }

.manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-4);
}

.manage-grid .collection-card { min-width: 0; }
.manage-card-body { cursor: pointer; border-radius: var(--radius-sm); }
.manage-card-body:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.manage-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.manage-card-actions { display: flex; align-items: center; gap: var(--space-2); }
.manage-card-actions .btn-grow { flex: 1; }
.manage-message { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-2); grid-column: 1 / -1; }
.manage-message.is-error { color: var(--danger); }

/* ---------- Manage cards table ---------- */
.manage-table td { white-space: normal; max-width: 360px; padding-block: var(--space-3); vertical-align: top; overflow-wrap: anywhere; }
.manage-table td.cell-word { font-weight: var(--fw-semibold); min-width: 140px; }
.manage-table .word-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.manage-table .cell-ipa { display: block; margin-left: 0; font-size: var(--fs-xs); }
.cell-ipa { color: var(--text-2); font-family: var(--font-ipa); font-weight: var(--fw-regular); } /* solid colour: the old .word-row-ipa opacity dropped it below 4.5:1 */
.manage-table .row-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
.manage-table td.col-actions { width: 1%; }
.manage-table .col-practice { min-width: 190px; }

/* Example: 2-line clamp + per-row expand button; the studied word is highlighted */
.example-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell-clamp.is-expanded { display: block; overflow: visible; }
.cell-expand { all: unset; box-sizing: border-box; cursor: pointer; color: var(--text-brand); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-xs); }
.cell-expand:hover { text-decoration: underline; }
.cell-expand:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.word-hl { background: var(--brand-soft); color: var(--text-brand); font-weight: var(--fw-semibold); padding: 0 2px; border-radius: 3px; }

/* Practice ("Luyện tập"): dot meter + count as text; the panel opens in flow (a floating one would be clipped by .table-scroll) */
.practice-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.practice-label { display: none; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
.practice-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); padding: 2px var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-full); color: var(--text-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; }
.practice-btn:hover, .practice-btn[aria-expanded="true"] { background: var(--surface-2); }
.practice-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.practice-btn.is-full { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.practice-dots { color: var(--text-brand); letter-spacing: 1px; }
.practice-btn.is-full .practice-dots { color: var(--success); }
.practice-missing { display: none; font-size: var(--fs-xs); color: var(--text-2); }
.practice-pop { width: 100%; max-width: 280px; padding: var(--space-2) var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-xs); line-height: var(--lh-body); }
.practice-pop p + p, .practice-pop p + .practice-add { margin-top: var(--space-1); }
.practice-add { all: unset; box-sizing: border-box; margin-top: var(--space-1); cursor: pointer; color: var(--text-brand); font-weight: var(--fw-semibold); border-radius: var(--radius-xs); }
.practice-add:hover { text-decoration: underline; }
.practice-add:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Summary line + "only missing" filter above the table */
.manage-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.manage-summary-text { font-size: var(--fs-sm); color: var(--text-2); }
.manage-empty-actions { justify-content: center; margin-top: var(--space-2); }

.btn-icon.is-danger { color: var(--danger); }
.btn-icon.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-icon svg { width: 16px; height: 16px; }

/* < 1024px: nothing is hidden: each row becomes a stacked card (word + actions, meaning, example, practice meta) */
@media (max-width: 1023px) {
    .manage-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .manage-table, .manage-table tbody { display: block; width: 100%; }
    .manage-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "word actions" "meaning meaning" "example example" "practice practice";
        gap: var(--space-1) var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border);
    }
    .manage-table td { display: block; width: auto; max-width: none; min-width: 0; padding: 0; border-bottom: 0; height: auto; }
    .manage-table td.cell-word { grid-area: word; min-width: 0; }
    .manage-table td.cell-meaning { grid-area: meaning; }
    .manage-table td.col-example { grid-area: example; color: var(--text-2); }
    .manage-table td.col-practice { grid-area: practice; min-width: 0; margin-top: var(--space-1); }
    .manage-table td.col-actions { grid-area: actions; width: auto; }
    .manage-table td.col-example:empty { display: none; }
    .practice-cell { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
    .practice-label, .practice-missing { display: inline; }
    .practice-pop { max-width: none; }
}

/* ---------- Form dialogs (spec §3.10) ---------- */
dialog.form-dialog { padding: 0; width: min(560px, calc(100% - 2 * var(--space-4))); }
dialog.form-dialog.dialog-lg { width: min(760px, calc(100% - 2 * var(--space-4))); }
dialog.form-dialog.dialog-md { width: min(560px, calc(100% - 2 * var(--space-4))); }

.dialog-form { display: flex; flex-direction: column; gap: var(--space-4); max-height: 85dvh; overflow-y: auto; padding: var(--space-6); }

.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.dialog-head .dialog-title { margin-bottom: 0; font-size: var(--fs-xl); color: var(--text-1); }

.dialog-form .dialog-actions { margin-top: var(--space-2); position: sticky; bottom: calc(-1 * var(--space-6)); padding: var(--space-3) 0; background: var(--surface-1); }

.recall-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

.recall-fieldset legend { padding: 0 var(--space-2); color: var(--text-brand); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.recall-cloze-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.recall-cloze-row .row-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-1); }
.recall-situation-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.recall-situation-row input { flex: 1; min-width: 0; }

@media (max-width: 767px) {
    dialog.form-dialog { margin: auto 0 0; width: 100%; max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
    .dialog-form .dialog-actions { flex-direction: column-reverse; }
    .dialog-form .dialog-actions .btn { width: 100%; }
    .recall-situation-row { flex-direction: column; }
}