/* ═══════════════════════════════════════════════════════════════
   ALTAIIM Tezaurus — theme.css
   Yagona dizayn tizimi: Leader palitrasi va tipografiyasi.
   Bootstrap 5.3 dan KEYIN ulanadi (custom.css / public.css dan oldin).
   Tema: html[data-bs-theme="light|dark"] (header skriptlari o'rnatadi).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokenlar — yorug' (Leader: iliq qog'oz + to'q yashil) ─── */
:root,
[data-bs-theme="light"] {
    --bg: #F6F5F1;
    --surf: #FFFFFF;
    --line: #E3E1DA;
    --line2: #EFEDE7;
    --tx: #1B1E1C;
    --tx2: #3E4441;
    --mut: #5B615D;
    --pri: #17614A;
    --pri-hover: #0F4F3B;
    --pri-bg: #E4EFEA;
    --pri-bg2: #C9DFD5;
    --on-pri: #FFFFFF;
    --ok: #2E8B62;
    --warn: #D9A21B;
    --err: #B4452F;
    --danger: #8A3B2E;
    --warn-bg: #FBEBD0;
    --warn-tx: #7A4600;
    --grey-bg: #ECEAE4;
    --scrim: rgba(27, 30, 28, .45);
    --shadow-sm: 0 1px 3px rgba(27, 30, 28, .06);
    --shadow-md: 0 6px 20px rgba(27, 30, 28, .08);

    /* Tipografiya (Leader): tizim sans + serif matn + mono raqamlar */
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --serif: Georgia, "Source Serif 4", "Times New Roman", serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    --radius: 12px;
    --radius-sm: 8px;
}

/* ── 2. Tokenlar — qorong'i ───────────────────────────────────── */
[data-bs-theme="dark"] {
    --bg: #161916;
    --surf: #1E221F;
    --line: #2F3531;
    --line2: #2A2F2B;
    --tx: #ECEDEA;
    --tx2: #B8BDB8;
    --mut: #9AA09B;
    --pri: #6FCBA3;
    --pri-hover: #8AD8B5;
    --pri-bg: #1F3A30;
    --pri-bg2: #2B5243;
    --on-pri: #0E1A14;
    --ok: #4FBF8A;
    --warn: #E0A93B;
    --err: #E57A62;
    --danger: #E8917E;
    --warn-bg: #4A3A18;
    --warn-tx: #F0C46A;
    --grey-bg: #2A2F2B;
    --scrim: rgba(0, 0, 0, .6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
}

/* ── 3. Bootstrap o'zgaruvchilarini tokenlarga ulash ──────────── */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--tx);
    --bs-emphasis-color: var(--tx);
    --bs-secondary-color: var(--mut);
    --bs-tertiary-color: var(--mut);
    --bs-secondary-bg: var(--grey-bg);
    --bs-tertiary-bg: var(--grey-bg);
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-heading-color: var(--tx);
    --bs-link-color: var(--pri);
    --bs-link-hover-color: var(--pri-hover);
    --bs-primary: var(--pri);
    --bs-primary-bg-subtle: var(--pri-bg);
    --bs-primary-border-subtle: var(--pri-bg2);
    --bs-primary-text-emphasis: var(--pri);
    --bs-success: var(--ok);
    --bs-warning: var(--warn);
    --bs-warning-bg-subtle: var(--warn-bg);
    --bs-warning-text-emphasis: var(--warn-tx);
    --bs-danger: var(--err);
    --bs-font-sans-serif: var(--sans);
    --bs-body-font-family: var(--sans);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-focus-ring-color: color-mix(in srgb, var(--pri) 35%, transparent);
}
[data-bs-theme="light"] { --bs-primary-rgb: 23, 97, 74; --bs-body-bg-rgb: 246, 245, 241; --bs-link-color-rgb: 23, 97, 74; --bs-link-hover-color-rgb: 15, 79, 59; }
[data-bs-theme="dark"]  { --bs-primary-rgb: 111, 203, 163; --bs-body-bg-rgb: 22, 25, 22; --bs-link-color-rgb: 111, 203, 163; --bs-link-hover-color-rgb: 138, 216, 181; }

/* Muharrir sozlamalaridagi shrift tanlovi ([data-font]) ustun qoladi */
:root:not([data-font]) { --body-font: var(--sans); }
:root { --body-bg: var(--bg); --brand-color: var(--pri); }

/* ── 4. Tipografiya ───────────────────────────────────────────── */
h1, h2, h3, .h1, .h2, .h3,
.editor-word-title, .word-card-title, .word-detail-title {
    font-family: var(--serif);
    letter-spacing: -.005em;
}
h4, h5, h6 { font-family: var(--sans); font-weight: 600; }
.stat-card-value, .pub-stat-number, .pub-stat-value, .completeness-label, kbd, code,
.num, .font-monospace { font-family: var(--mono); }
.text-muted, .text-body-secondary { color: var(--mut) !important; }
:focus-visible { outline: 3px solid var(--pri); outline-offset: 2px; }

/* ── 5. Komponentlar ──────────────────────────────────────────── */
.btn { --bs-btn-border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--pri); --bs-btn-border-color: var(--pri); --bs-btn-color: var(--on-pri);
    --bs-btn-hover-bg: var(--pri-hover); --bs-btn-hover-border-color: var(--pri-hover); --bs-btn-hover-color: var(--on-pri);
    --bs-btn-active-bg: var(--pri-hover); --bs-btn-active-border-color: var(--pri-hover); --bs-btn-active-color: var(--on-pri);
    --bs-btn-disabled-bg: var(--pri); --bs-btn-disabled-border-color: var(--pri); --bs-btn-disabled-color: var(--on-pri);
}
.btn-success {
    --bs-btn-bg: var(--pri); --bs-btn-border-color: var(--pri); --bs-btn-color: var(--on-pri);
    --bs-btn-hover-bg: var(--pri-hover); --bs-btn-hover-border-color: var(--pri-hover); --bs-btn-hover-color: var(--on-pri);
    --bs-btn-active-bg: var(--pri-hover); --bs-btn-active-border-color: var(--pri-hover); --bs-btn-active-color: var(--on-pri);
    --bs-btn-disabled-bg: var(--pri); --bs-btn-disabled-border-color: var(--pri); --bs-btn-disabled-color: var(--on-pri);
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--pri); --bs-btn-border-color: var(--pri);
    --bs-btn-hover-bg: var(--pri); --bs-btn-hover-border-color: var(--pri); --bs-btn-hover-color: var(--on-pri);
    --bs-btn-active-bg: var(--pri); --bs-btn-active-border-color: var(--pri); --bs-btn-active-color: var(--on-pri);
}
.btn-outline-secondary {
    --bs-btn-color: var(--tx2); --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--grey-bg); --bs-btn-hover-border-color: var(--pri); --bs-btn-hover-color: var(--tx);
    --bs-btn-active-bg: var(--grey-bg); --bs-btn-active-border-color: var(--pri); --bs-btn-active-color: var(--tx);
}
.btn-warning, .btn-outline-warning { --bs-btn-color: var(--warn-tx); }
.btn-outline-warning { --bs-btn-border-color: var(--warn); --bs-btn-hover-bg: var(--warn-bg); --bs-btn-hover-border-color: var(--warn); --bs-btn-hover-color: var(--warn-tx); }
.btn-warning { --bs-btn-bg: var(--warn-bg); --bs-btn-border-color: var(--warn); --bs-btn-hover-bg: var(--warn-bg); --bs-btn-hover-border-color: var(--warn); --bs-btn-hover-color: var(--warn-tx); --bs-btn-active-bg: var(--warn-bg); --bs-btn-active-color: var(--warn-tx); }

.card {
    --bs-card-bg: var(--surf); --bs-card-border-color: var(--line); --bs-card-cap-bg: var(--surf);
    --bs-card-border-radius: var(--radius); --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    box-shadow: var(--shadow-sm);
}
.card.border-0 { border: 1px solid var(--line) !important; }
.modal { --bs-modal-bg: var(--surf); --bs-modal-border-color: var(--line); --bs-modal-border-radius: var(--radius); }
.offcanvas { --bs-offcanvas-bg: var(--surf); --bs-offcanvas-border-color: var(--line); }
.dropdown-menu { --bs-dropdown-bg: var(--surf); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-hover-bg: var(--grey-bg); --bs-dropdown-border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.dropdown-item.active, .dropdown-item:active { background: var(--pri-bg); color: var(--pri); }
.form-control, .form-select, .input-group-text { background-color: var(--surf); border-color: var(--line); color: var(--tx); }
.form-control:focus, .form-select:focus { border-color: var(--pri); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 25%, transparent); background-color: var(--surf); color: var(--tx); }
.form-check-input:checked { background-color: var(--pri); border-color: var(--pri); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--line2); --bs-table-hover-bg: var(--pri-bg); }
.table > thead { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.nav-tabs .nav-link.active { color: var(--pri); border-bottom-color: var(--pri); background: var(--surf); }
.nav-pills .nav-link.active { background: var(--pri); color: var(--on-pri); }
.page-link { color: var(--pri); background: var(--surf); border-color: var(--line); }
.page-item.active .page-link { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
.progress { background: var(--grey-bg); }
.progress-bar { background-color: var(--pri); }
.badge.bg-primary { background: var(--pri) !important; color: var(--on-pri); }
.badge.bg-success { background: var(--ok) !important; }
.badge.bg-danger  { background: var(--err) !important; }
.badge.bg-secondary { background: var(--grey-bg) !important; color: var(--tx2); }
.alert { border-radius: var(--radius-sm); }
.alert-warning { --bs-alert-bg: var(--warn-bg); --bs-alert-color: var(--warn-tx); --bs-alert-border-color: var(--warn); }

/* ── 6. Ilova qobig'i (header / chap panel / o'ng panel) ──────── */
.app-header, .app-sidebar, .app-right { background: var(--surf); border-color: var(--line) !important; }
.app-header { box-shadow: var(--shadow-sm); }
.app-brand-name { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; color: var(--pri); }
[data-bs-theme="dark"] .app-brand-name { color: var(--pri); }
.sidebar-link { color: var(--tx2); border-radius: var(--radius-sm); padding: .55rem .7rem; }
.sidebar-link:hover { background: var(--grey-bg); color: var(--tx); }
.sidebar-link.active { background: var(--pri-bg); color: var(--pri); font-weight: 600; }
.rp-item { border-radius: var(--radius-sm); }
.rp-item.active { background: var(--pri-bg); border-color: var(--pri); }
.rp-progress-bar { background: var(--pri); }

/* Maqola holatlari (statusBadge / .badge-status) — Leader ranglari */
:root, [data-bs-theme] {
    --status-new: #6B716D;
    --status-editing: var(--warn);
    --status-suggested: #3F8F7A;
    --status-regenerated: #8A5FA8;
    --status-checked: var(--pri);
    --status-edited: #2E8B62;
    --status-viewing: #C77B2B;
    --status-viewed: #3F8F7A;
    --status-reading: #5A6FA8;
    --status-accepted: var(--ok);
    --status-declined: var(--err);
    --status-removed: #4A4F4B;
}

/* Skip-link va harakat */
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--surf); padding: 8px 12px; border-radius: var(--radius-sm); z-index: 2000; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }