/* ============================================================
   ChatBot KZ — "Editorial Console" design system
   Warm paper tones, ink text, a single confident amber accent.
   Display serif (Fraunces) for headings, Sora for UI chrome.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,560;0,9..144,680;1,9..144,500&family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Palette: warm paper / ink / amber */
    --ink: #1f1b16;
    --ink-soft: #4a443c;
    --paper: #f7f3ec;
    --paper-raised: #ffffff;
    --paper-sunken: #efe9df;
    --line: #e3dccd;
    --line-strong: #cfc6b3;

    --accent: #c2682b;
    --accent-deep: #9c4f1d;
    --accent-soft: #f1ddc9;
    --accent-ink: #3c2410;

    --success: #4f7a5a;
    --success-soft: #e2eae3;
    --danger: #b3492f;
    --danger-soft: #f5ddd6;
    --warning: #c2902b;
    --warning-soft: #f3e7cc;
    --info: #3f6e8c;
    --info-soft: #dde7ee;

    /* Legacy aliases so existing Bootstrap utility overrides keep working */
    --primary-color: var(--accent);
    --primary-hover: var(--accent-deep);
    --secondary-color: var(--ink-soft);
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --info-color: var(--info);
    --light-color: var(--paper-sunken);
    --dark-color: var(--ink);
    --body-bg: var(--paper);
    --card-bg: var(--paper-raised);
    --text-color: var(--ink);
    --text-muted: var(--ink-soft);
    --border-color: var(--line);
    --border-radius: 14px;
    --box-shadow: 0 1px 2px rgba(31, 27, 22, 0.05), 0 8px 24px -12px rgba(31, 27, 22, 0.12);
    --transition: all 0.2s cubic-bezier(.4,0,.2,1);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Global type & surface ─────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(31,27,22,0.035) 1px, transparent 0);
    background-size: 22px 22px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: .85rem;
}

h1, .h1 { font-weight: 680; letter-spacing: -0.025em; }
h2, .h2 { font-weight: 620; letter-spacing: -0.02em; }

p { color: var(--ink-soft); }

a {
    color: var(--accent-deep);
    text-decoration: none;
    transition: var(--transition);
}
a:hover { color: var(--accent); }

code, .font-mono { font-family: var(--font-mono); font-size: .84em; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* Slim warm scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* ── Layout helpers ────────────────────────────────────────────────── */
.min-vh-85 { min-height: 85vh; }

/* ── Navbar (legacy / public pages) ────────────────────────────────── */
.navbar {
    background: var(--paper-raised) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    padding: .85rem 0;
}
.navbar-brand {
    font-family: var(--font-display);
    font-weight: 680;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: var(--ink) !important;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--card-bg);
    margin-bottom: 1.5rem;
    transition: var(--transition);
}
.card:hover { box-shadow: 0 2px 6px rgba(31,27,22,.06), 0 16px 32px -16px rgba(31,27,22,.18); }
.card.border-0 { border: 1px solid var(--line) !important; }

.card-header {
    border-bottom: 1px solid var(--line);
    background-color: transparent !important;
    padding: 1.1rem 1.4rem;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.card-body { padding: 1.4rem; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .86rem;
    padding: .55rem 1.3rem;
    border-radius: 10px;
    letter-spacing: .005em;
    transition: var(--transition);
    border-width: 1.5px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff8f0;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff8f0;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(156, 79, 29, .55);
}

.btn-outline-primary { color: var(--accent-deep); border-color: var(--accent); }
.btn-outline-primary:hover { background-color: var(--accent); border-color: var(--accent); color: #fff8f0; }

.btn-secondary, .btn-outline-secondary {
    color: var(--ink-soft);
    border-color: var(--line-strong);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background-color: var(--success); border-color: var(--success); }

.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); }

.btn-warning { background-color: var(--warning); border-color: var(--warning); color: var(--accent-ink); }
.btn-light { background-color: var(--paper-sunken); border-color: var(--line); color: var(--ink); }

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-control, .form-select {
    font-family: var(--font-body);
    font-size: .9rem;
    padding: .6rem .85rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background-color: var(--paper-raised);
    color: var(--ink);
    transition: var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background-color: var(--paper-raised);
    color: var(--ink);
}
.form-control::placeholder { color: #8a8074; }

.form-label {
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .01em;
    margin-bottom: .4rem;
    color: var(--ink);
}
.form-text { font-size: .78rem; color: var(--ink-soft); margin-top: .3rem; }

.input-group-text {
    background-color: var(--paper-sunken);
    border: 1.5px solid var(--line);
    color: var(--ink-soft);
}

.form-check-input { border: 1.5px solid var(--line-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }

/* ── Alerts ────────────────────────────────────────────────────────── */
.alert {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: .9rem 1.15rem;
    font-size: .88rem;
}
.alert-success { background: var(--success-soft); border-color: #cfe0d4; color: #2f4c38; }
.alert-danger  { background: var(--danger-soft);  border-color: #ecc9bf; color: #7a311e; }
.alert-warning { background: var(--warning-soft); border-color: #e9d6a8; color: #6e4f12; }
.alert-info    { background: var(--info-soft);    border-color: #c8d8e3; color: #28465c; }

/* ── Badges ────────────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 7px; }
.badge.bg-success { background-color: var(--success) !important; }
.badge.bg-secondary { background-color: var(--ink-soft) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: var(--accent-ink) !important; }
.badge.bg-success-subtle { background-color: var(--success-soft) !important; }

/* ── Tables ────────────────────────────────────────────────────────── */
.table { color: var(--ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--line); }
.table-light, thead.table-light th {
    background-color: var(--paper-sunken) !important;
    color: var(--ink-soft);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.table-hover > tbody > tr:hover > * { background-color: var(--paper-sunken); }

/* ── Utilities ─────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--accent-deep) !important; }
.bg-light { background-color: var(--paper-sunken) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-success { border-color: var(--success) !important; }
hr { border-color: var(--line); opacity: 1; }

.progress { background-color: var(--paper-sunken); border-radius: 999px; }
.progress-bar { background-color: var(--accent); }
.progress-bar.bg-success { background-color: var(--success) !important; }

/* ── Dropdowns / modals harmonised with paper palette ──────────────── */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    padding: .4rem;
}
.dropdown-item { border-radius: 8px; font-size: .87rem; padding: .5rem .7rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--paper-sunken); color: var(--ink); }
.dropdown-item.text-danger:hover { background-color: var(--danger-soft); color: var(--danger) !important; }
.dropdown-menu-dark {
    background-color: #2a2419;
    border-color: #3c3527;
}
.dropdown-menu-dark .dropdown-item { color: rgba(247,243,236,.8); }
.dropdown-menu-dark .dropdown-item:hover { background-color: #3c3527; color: #fff; }
.dropdown-divider { border-color: #3c3527; }

/* ── Back to Top Button ────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    box-shadow: var(--box-shadow);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--accent-deep); transform: translateY(-2px); }

/* ── Reveal animation ──────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn .5s cubic-bezier(.4,0,.2,1) forwards; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .card-body { padding: 1.1rem; }
    .container { padding-left: 1rem; padding-right: 1rem; }
}

.theme-toggle { cursor: pointer; font-size: 1.2rem; margin-left: 1rem; color: var(--ink); }

/* ── Selects ───────────────────────────────────────────────────────────
   Bootstrap paints its own chevron via an inline SVG data-URI in a hard-coded
   slate grey (#343a40), which reads cold against this warm paper palette and
   ignores the accent. Replace it with an ink-toned chevron and give selects the
   same 1.5px/10px frame the text inputs already use, so a row of mixed
   inputs and dropdowns lines up instead of looking like two design systems.

   Applies app-wide from one place — every template inherits it, so no page
   needs its own select rules (and can't drift from the others). */
.form-select {
    /* stroke='%234a443c' == var(--ink-soft) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a443c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 14px 11px;
    /* Room for the chevron so a long option never runs underneath it. */
    padding-right: 2.3rem;
    cursor: pointer;
    /* Long option text must ellipsize, not stretch the control or spill out. */
    text-overflow: ellipsis;
}
.form-select:hover:not(:disabled) { border-color: var(--line-strong); }
.form-select:focus {
    /* Accent the chevron too, so focus reads as one deliberate state. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c2682b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select:disabled {
    background-color: var(--paper-sunken);
    color: var(--ink-soft);
    cursor: not-allowed;
}
.form-select-sm {
    font-size: .82rem;
    padding: .35rem .55rem;
    padding-right: 1.9rem;
    border-radius: 8px;
    background-position: right .5rem center;
    background-size: 12px 9px;
}
.form-select-lg { font-size: 1rem; padding: .75rem 1rem; padding-right: 2.5rem; }
/* The dropdown list itself is OS-rendered; these are the parts we can reach. */
.form-select option { color: var(--ink); background-color: var(--paper-raised); }
.form-select option:disabled { color: #9a9086; }
.form-select optgroup { font-family: var(--font-body); font-weight: 600; color: var(--ink-soft); }

/* iOS zooms the page when a focused control's text is under 16px. Only bump the
   font on real touch screens so the desktop scale is untouched. */
@media (max-width: 767.98px) {
    .form-control, .form-select { font-size: 16px; }
    .form-select-sm, .form-control-sm { font-size: 15px; }
}

/* ── Checkboxes & switches ─────────────────────────────────────────────
   Sized up from Bootstrap's 1em default: at .82rem table text the box became a
   ~13px tap target, well under the ~24px minimum for reliable touch. */
.form-check-input { width: 1.15rem; height: 1.15rem; margin-top: .1rem; cursor: pointer; }
.form-check-input:hover:not(:checked):not(:disabled) { border-color: var(--line-strong); }
.form-check-input[type="checkbox"]:indeterminate { background-color: var(--accent); border-color: var(--accent); }
.form-switch .form-check-input { width: 2.1rem; border-radius: 2rem; }

/* ── File inputs ──────────────────────────────────────────────────────────
   A native file input renders its own button and status text ("Choose File",
   "No file chosen") from the browser's own locale. That text is not in the DOM,
   so it can't be translated, and `::file-selector-button` support is uneven —
   which is why a styled rule still left a default grey button on the page.

   So the input is hidden and a real <label> + <span> pair is drawn instead: fully
   styled, fully translatable, and clicking the label still opens the OS picker
   natively (no JS needed for the core interaction). Built by enhanceFileInputs().
   `.file-drop` wraps them; the original input keeps its name/value for the post. */
.file-drop {
    display: flex; align-items: center; gap: .6rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--paper-raised);
    padding: .3rem .6rem .3rem .3rem;
    transition: var(--transition);
}
.file-drop:hover { border-color: var(--line-strong); }
.file-drop.is-focused { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.file-drop.is-dragover { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }
.file-drop input[type="file"] {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.file-drop__btn {
    display: inline-flex; align-items: center; gap: .4rem;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: .82rem; font-weight: 600;
    padding: .35rem .8rem;
    border-radius: 8px;
    border: 1.5px solid var(--line-strong);
    background: var(--paper-sunken);
    color: var(--ink);
    cursor: pointer;
    transition: var(--transition);
    margin: 0;
}
.file-drop__btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.file-drop__name {
    min-width: 0; flex: 1;
    font-size: .82rem; color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-drop__name--empty { color: #8a8074; }
.file-drop__clear {
    flex-shrink: 0;
    background: none; border: 0; padding: .15rem .3rem;
    color: var(--ink-soft); cursor: pointer; border-radius: 5px; font-size: .78rem;
}
.file-drop__clear:hover { color: var(--danger); background: var(--danger-soft); }
.file-drop--sm { padding: .2rem .5rem .2rem .2rem; border-radius: 8px; }
.file-drop--sm .file-drop__btn { font-size: .76rem; padding: .25rem .6rem; }
.file-drop--sm .file-drop__name { font-size: .78rem; }
@media (max-width: 767.98px) {
    .file-drop__btn { font-size: 15px; }
    .file-drop__name { font-size: 14px; }
}

/* ── Custom select ─────────────────────────────────────────────────────
   The popup list of a native <select> is drawn by the OS, not the page — it
   ignores every CSS rule above, which is why an otherwise-styled form still
   dropped a black system menu with a blue highlight. To control it we replace the
   control with a real listbox (button + ul) and keep the original <select>
   hidden but authoritative, so form submission, Django validation and any
   existing JS that reads `.value` keep working untouched.

   Enhancement is opt-out: add `data-no-enhance` to keep a native select. */
.select-enhanced { position: relative; }
.select-enhanced__toggle {
    width: 100%;
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--font-body);
    font-size: .9rem;
    padding: .6rem .85rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--paper-raised);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}
.select-enhanced__toggle:hover:not([disabled]) { border-color: var(--line-strong); }
.select-enhanced__toggle:focus-visible,
.select-enhanced.is-open .select-enhanced__toggle {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.select-enhanced__toggle[disabled] { background: var(--paper-sunken); color: var(--ink-soft); cursor: not-allowed; }
.select-enhanced__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-enhanced__value--placeholder { color: #8a8074; }
.select-enhanced__chevron { flex-shrink: 0; font-size: .7rem; color: var(--ink-soft); transition: transform .18s ease; }
.select-enhanced.is-open .select-enhanced__chevron { transform: rotate(180deg); color: var(--accent); }

.select-enhanced__menu {
    position: absolute; z-index: 1060;
    top: calc(100% + 4px); left: 0; right: 0;
    margin: 0; padding: .3rem;
    list-style: none;
    max-height: 16rem; overflow-y: auto;
    background: var(--paper-raised);
    border: 1.5px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 10px 30px -8px rgba(31,27,22,.28), 0 2px 6px rgba(31,27,22,.08);
    display: none;
}
.select-enhanced.is-open .select-enhanced__menu { display: block; }
.select-enhanced.drops-up .select-enhanced__menu { top: auto; bottom: calc(100% + 4px); }
.select-enhanced__option {
    padding: .45rem .6rem;
    border-radius: 7px;
    font-size: .88rem;
    color: var(--ink);
    cursor: pointer;
    display: flex; align-items: center; gap: .5rem;
}
.select-enhanced__option:hover,
.select-enhanced__option.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.select-enhanced__option[aria-selected="true"] { font-weight: 600; }
.select-enhanced__option[aria-selected="true"]::after {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: auto; font-size: .7rem; color: var(--accent);
}
.select-enhanced__option--disabled { color: #9a9086; cursor: not-allowed; }
.select-enhanced__option--disabled:hover { background: none; color: #9a9086; }
.select-enhanced__group {
    padding: .5rem .6rem .25rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    font-weight: 700; color: var(--ink-soft);
}
.select-enhanced--sm .select-enhanced__toggle { font-size: .82rem; padding: .35rem .55rem; border-radius: 8px; }
.select-enhanced--sm .select-enhanced__option { font-size: .82rem; padding: .35rem .5rem; }

@media (max-width: 767.98px) {
    /* 16px keeps iOS from zooming when the control takes focus. */
    .select-enhanced__toggle { font-size: 16px; }
    .select-enhanced--sm .select-enhanced__toggle { font-size: 15px; }
    .select-enhanced__menu { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
    .select-enhanced__chevron { transition: none; }
}