/* Квадрат brand: ink #141414, cream #F4EFE6, vermilion #FF4D2E (see static/brand/mark.svg).
   Colour modes: <html data-bs-theme="light|dark"> (Bootstrap 5.3), chosen by the inline script in base.html
   and admin.js (Авто / Светлая / Тёмная). Every colour used below is a custom property defined in :root and
   redefined under [data-bs-theme=dark]; layout rules never hard-code a colour. */

/* ------------------------------------------------------------------ light tokens */
:root {
  --sidebar-w: 240px;
  --bg: #f6f4f0;               /* page background */
  --surface: #ffffff;          /* cards, sidebar, topbar, dropdowns */
  --surface-2: #f3f4f6;        /* hover / subtle fills */
  --border: #e5e7eb;
  --border-soft: #eef0f3;
  --input-border: #dee2e6;
  --text: #212529;
  --muted: #636b77;            /* 5.4:1 on white, 4.9:1 on --bg */
  --muted-2: #9ca3af;          /* icons only (drag handles) */
  --nav-text: #374151;
  --nav-hover: #f3f4f6;
  --ink: #141414;
  --cream: #f4efe6;
  --accent: #ff4d2e;
  --accent-ink: #c8331a;       /* accent dark enough for text on light backgrounds (4.8:1 on --accent-soft) */
  --accent-soft: #fff0eb;
  --link: #c8331a;
  --link-rgb: 200, 51, 26;
  --link-hover: #9e2612;
  --link-hover-rgb: 158, 38, 18;
  --brand-text: #141414;
  --primary: #141414;          /* primary buttons, pagination, pills */
  --primary-hover: #2b2b2b;
  --primary-active: #000000;
  --on-primary: #ffffff;
  --check-bg: #141414;         /* checked checkbox / switch */
  --focus: #c8331a;            /* outline for links, nav, dropdown items */
  --focus-shadow: rgba(255, 77, 46, .45);
  --input-focus-shadow: rgba(255, 77, 46, .2);
  --danger-text: #b02a37;      /* state text (.text-danger, outline buttons): 5.9:1 on --bg, 6.6:1 on white */
  --success-text: #146c43;     /* 5.8:1 on --bg */
  --warning-text: #7a5a00;     /* 5.9:1 on --bg */
  --btn-light-bg: #f8f9fa;
  --btn-light-hover: #e9ecef;
  --btn-light-border: #f8f9fa;
  --btn-light-text: #141414;
  --thead-bg: #f8f9fa;
  --mark-ring: transparent;
  /* Telegram-like preview */
  --tg-bg: #dfe7ef;
  --tg-bubble: #ffffff;
  --tg-text: #000000;
  --tg-link: #0f6fa8;
  --tg-quote: #3390ec;
  --tg-quote-text: #333333;
  --tg-code: #f1f3f5;
  --tg-spoiler: #c9ced6;
  --tg-spoiler-hover: #eceff3;
  --tg-shadow: rgba(0, 0, 0, .08);
  --tg-btn: rgba(30, 40, 50, .6);   /* white text 4.7:1 over --tg-bg */
  --tg-btn-text: #ffffff;
  /* charts (read by dashboard.js / admin.js) */
  --chart-text: #57534e;
  --chart-grid: rgba(20, 20, 20, .08);
  --chart-1: #141414;
  --chart-2: #ff4d2e;
  --chart-3: #9a948a;
  --theme-color: #141414;
  /* Bootstrap hooks */
  --bs-link-color: var(--link);
  --bs-link-color-rgb: var(--link-rgb);
  --bs-link-hover-color: var(--link-hover);
  --bs-link-hover-color-rgb: var(--link-hover-rgb);
  --bs-focus-ring-color: var(--focus-shadow);
}

/* ------------------------------------------------------------------ dark tokens */
[data-bs-theme=dark] {
  --bg: #0f0f10;
  --surface: #18181a;
  --surface-2: #222226;
  --border: #2a2a2e;
  --border-soft: #232327;
  --input-border: #3a3a40;
  --text: #e7e5e4;             /* 14:1 on --surface */
  --muted: #a8a29e;            /* 7:1 on --surface */
  --muted-2: #78716c;
  --nav-text: #d6d3d1;
  --nav-hover: #222226;
  --accent-ink: #ff7a5c;       /* 6.9:1 on --surface, 5.9:1 on --accent-soft */
  --accent-soft: rgba(255, 77, 46, .14);
  --link: #ff7a5c;
  --link-rgb: 255, 122, 92;
  --link-hover: #ffa38c;
  --link-hover-rgb: 255, 163, 140;
  --brand-text: #f4efe6;
  --primary: #f4efe6;          /* cream button with ink text */
  --primary-hover: #e7e0d3;
  --primary-active: #d8cfbf;
  --on-primary: #141414;
  --check-bg: #ff4d2e;
  --focus: #ff7a5c;
  --focus-shadow: rgba(255, 122, 92, .55);
  --input-focus-shadow: rgba(255, 122, 92, .35);
  --danger-text: #f1838c;      /* 6.6:1 on --surface */
  --success-text: #75b798;     /* 7.4:1 on --surface */
  --warning-text: #ffda6a;     /* 12:1 on --surface */
  --btn-light-bg: #26262a;
  --btn-light-hover: #303035;
  --btn-light-border: #2f2f34;
  --btn-light-text: #e7e5e4;
  --thead-bg: #202023;
  --mark-ring: rgba(244, 239, 230, .28);
  /* Telegram dark */
  --tg-bg: #0e1621;
  --tg-bubble: #182533;
  --tg-text: #f5f5f5;
  --tg-link: #6ab3f3;
  --tg-quote: #6ab3f3;
  --tg-quote-text: #c9d6e3;
  --tg-code: #0f1b27;
  --tg-spoiler: #3a4a5c;
  --tg-spoiler-hover: #22313f;
  --tg-shadow: rgba(0, 0, 0, .35);
  --tg-btn: rgba(255, 255, 255, .1);
  --tg-btn-text: #ffffff;
  --chart-text: #a8a29e;
  --chart-grid: rgba(244, 239, 230, .09);
  --chart-1: #f4efe6;
  --chart-2: #ff4d2e;
  --chart-3: #a39d92;
  --theme-color: #0f0f10;
  /* Bootstrap: surfaces follow the light design (body-bg = card surface, page bg = --bg) */
  --bs-body-bg: #18181a;
  --bs-body-bg-rgb: 24, 24, 26;
  --bs-body-color: #e7e5e4;
  --bs-body-color-rgb: 231, 229, 228;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(231, 229, 228, .72);
  --bs-secondary-color-rgb: 231, 229, 228;
  --bs-secondary-bg: #26262a;
  --bs-secondary-bg-rgb: 38, 38, 42;
  --bs-tertiary-color: rgba(231, 229, 228, .55);
  --bs-tertiary-color-rgb: 231, 229, 228;
  --bs-tertiary-bg: #1f1f22;
  --bs-tertiary-bg-rgb: 31, 31, 34;
  --bs-border-color: #2a2a2e;
  --bs-border-color-translucent: rgba(244, 239, 230, .12);
  --bs-heading-color: inherit;
  --bs-link-color: var(--link);
  --bs-link-color-rgb: var(--link-rgb);
  --bs-link-hover-color: var(--link-hover);
  --bs-link-hover-color-rgb: var(--link-hover-rgb);
  --bs-focus-ring-color: var(--focus-shadow);
}

/* ------------------------------------------------------------------ base */
body { background: var(--bg); }
.wordmark { font-family: "Unbounded", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.wordmark-lg { font-size: 1.6rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--brand-text); text-decoration: none; }
.brand:hover { color: var(--brand-text); }
.brand .wordmark { font-size: 1.15rem; }
.auth-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; color: var(--brand-text); }
/* the dark mark would melt into a dark surface: a hairline ring keeps its silhouette (rx 26/120 = 22%) */
.brand img, .auth-brand img { border-radius: 22%; box-shadow: 0 0 0 1px var(--mark-ring); }

/* focus rings: visible in both themes (a solid 2px --focus outline: >= 3:1 against the surface; the soft
   box-shadow halo alone is ~1.8:1 on white) */
.btn { --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--focus-shadow); }
a:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none;
}
.dropdown-item:focus-visible { outline-offset: -2px; }

/* the sticky .topbar must not cover the target of /page#anchor links (redirects to #terms, #banner, ...) */
html { scroll-padding-top: 4.5rem; }

/* state text: Bootstrap keeps the same mid-tone colours in both modes (3.9:1 on the dark surface, 4.1:1 on
   the cream page background) — remapped to tokens that pass 4.5:1 on every surface of both themes */
.text-danger { color: var(--danger-text) !important; }
.text-success { color: var(--success-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-secondary { color: var(--muted) !important; }
.btn-outline-danger { --bs-btn-color: var(--danger-text); --bs-btn-border-color: var(--danger-text); }
.btn-outline-success { --bs-btn-color: var(--success-text); --bs-btn-border-color: var(--success-text); }
.min-w-0 { min-width: 0 !important; }  /* not a Bootstrap 5.3 utility: lets a flex item shrink (text-truncate) */

.btn-primary {
  --bs-btn-color: var(--on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary-active); --bs-btn-active-border-color: var(--primary-active);
  --bs-btn-disabled-color: var(--on-primary); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
.btn-light {
  --bs-btn-color: var(--btn-light-text); --bs-btn-bg: var(--btn-light-bg); --bs-btn-border-color: var(--btn-light-border);
  --bs-btn-hover-color: var(--btn-light-text); --bs-btn-hover-bg: var(--btn-light-hover); --bs-btn-hover-border-color: var(--btn-light-hover);
  --bs-btn-active-color: var(--btn-light-text); --bs-btn-active-bg: var(--btn-light-hover); --bs-btn-active-border-color: var(--btn-light-hover);
  --bs-btn-disabled-color: var(--btn-light-text); --bs-btn-disabled-bg: var(--btn-light-bg); --bs-btn-disabled-border-color: var(--btn-light-border);
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--input-focus-shadow); }
.form-check-input:checked { background-color: var(--check-bg); border-color: var(--check-bg); }
.pagination {
  --bs-pagination-color: var(--primary); --bs-pagination-hover-color: var(--primary);
  --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-active-color: var(--on-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--focus-shadow);
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { border-bottom-color: var(--accent); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary); --bs-nav-pills-link-active-color: var(--on-primary); }
.progress { --bs-progress-bar-bg: var(--accent); }

/* ------------------------------------------------------------------ layout */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--surface); --bs-offcanvas-bg: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
/* Bootstrap makes .offcanvas-lg transparent (!important) on desktop: keep the sidebar surface there too */
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; } .sidebar.offcanvas-lg { background-color: var(--surface) !important; } }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-soft); }
.sidebar .nav { padding: .5rem; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar .nav-link { color: var(--nav-text); border-radius: .5rem; padding: .5rem .75rem; display: flex; gap: .6rem; align-items: center; }
.sidebar .nav-link:hover { background: var(--nav-hover); color: var(--nav-text); }
.sidebar .nav-link.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-foot { padding: .75rem 1.25rem; border-top: 1px solid var(--border-soft); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.topbar-title { font-weight: 600; font-size: 1.1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.content { padding: 1.5rem; max-width: 1400px; width: 100%; }
@media (max-width: 576px) { .content { padding: 1rem; } .topbar { padding: .6rem 1rem; } .topbar-user-role { display: none; } }
.card { --bs-card-bg: var(--surface); border: 1px solid var(--border); border-radius: .75rem; box-shadow: none; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table-card { overflow-x: auto; }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.kpi .kpi-label { color: var(--muted); font-size: .85rem; }
.kpi .kpi-delta { font-size: .8rem; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 380px; }
.auth-theme { position: fixed; top: .75rem; right: .75rem; z-index: 1030; }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: .5rem; background: var(--border-soft); }
.banner-preview { max-width: 100%; max-height: 260px; border-radius: .5rem; border: 1px solid var(--border); }

/* theme toggle (base.html / _macros.theme_toggle) */
.theme-btn { line-height: 1; padding: .3rem .5rem; }
.theme-menu { min-width: 11rem; }
.theme-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.theme-menu .theme-check { margin-left: auto; visibility: hidden; }
.theme-menu [aria-pressed="true"] .theme-check { visibility: visible; }
.theme-menu [aria-pressed="true"] { font-weight: 500; }

/* ------------------------------------------------------------------ Telegram-like preview */
.tg-preview { background: var(--tg-bg); border-radius: .75rem; padding: 1rem; }
.tg-bubble { background: var(--tg-bubble); color: var(--tg-text); border-radius: .9rem; max-width: 420px; overflow: hidden; box-shadow: 0 1px 1px var(--tg-shadow); }
.tg-bubble img { width: 100%; display: block; }
.tg-text { padding: .6rem .8rem; white-space: normal; word-wrap: break-word; font-size: .95rem; }
.tg-text a { color: var(--tg-link); }
.tg-text blockquote { border-left: 3px solid var(--tg-quote); padding-left: .5rem; margin: .25rem 0; color: var(--tg-quote-text); }
.tg-text pre, .tg-text code { background: var(--tg-code); color: inherit; border-radius: .25rem; padding: 0 .2rem; }
.tg-spoiler { background: var(--tg-spoiler); color: transparent; border-radius: .2rem; }
.tg-spoiler:hover { color: inherit; background: var(--tg-spoiler-hover); }
.tg-buttons { max-width: 420px; margin-top: 4px; display: grid; gap: 4px; }
.tg-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.tg-btn { background: var(--tg-btn); color: var(--tg-btn-text); text-align: center; border-radius: .5rem; padding: .45rem .5rem; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ HTML editor toolbar, misc */
.tg-toolbar .btn { padding: .15rem .5rem; }
.char-counter { color: var(--muted); }
.char-counter.over { color: var(--danger-text); font-weight: 600; }
.sortable-handle { cursor: grab; color: var(--muted-2); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state .bi { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* ------------------------------------------------------------------ dark: hard-coded light utilities
   Templates use a few light-only Bootstrap utilities (.table-light, .text-bg-light, .btn-light, ...);
   they are remapped here so every page works in the dark theme without template changes. */
[data-bs-theme=dark] .bg-white { background-color: var(--surface) !important; }
[data-bs-theme=dark] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme=dark] .bg-body { background-color: var(--surface) !important; }
[data-bs-theme=dark] .text-bg-light { color: var(--text) !important; background-color: var(--bs-secondary-bg) !important; }
[data-bs-theme=dark] .text-bg-dark { color: #fff !important; background-color: #3f3f46 !important; }
[data-bs-theme=dark] .text-dark, [data-bs-theme=dark] .text-black, [data-bs-theme=dark] .link-dark { color: var(--text) !important; }
[data-bs-theme=dark] .text-white-50 { color: var(--muted) !important; }
[data-bs-theme=dark] .border-light, [data-bs-theme=dark] .border-white { border-color: var(--border) !important; }
[data-bs-theme=dark] .table-light, [data-bs-theme=dark] .table-white {
  --bs-table-color: var(--text);
  --bs-table-bg: var(--thead-bg);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-striped-color: var(--text);
  --bs-table-active-bg: var(--surface-2);
  --bs-table-active-color: var(--text);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--text);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
[data-bs-theme=dark] .table { --bs-table-border-color: var(--border); }
[data-bs-theme=dark] .btn-dark {
  --bs-btn-color: var(--on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary-active); --bs-btn-active-border-color: var(--primary-active);
}
[data-bs-theme=dark] .btn-outline-dark {
  --bs-btn-color: var(--text); --bs-btn-border-color: var(--input-border);
  --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary);
}
[data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--nav-text); --bs-btn-border-color: var(--input-border); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--input-border); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--text); }
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select, [data-bs-theme=dark] .form-check-input:not(:checked) { border-color: var(--input-border); }
[data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus { border-color: var(--accent); }
[data-bs-theme=dark] .form-control::placeholder { color: var(--muted); }  /* 7:1: placeholders carry meaning («как в условии») */
[data-bs-theme=dark] .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-active-bg: var(--surface-2); --bs-dropdown-link-active-color: var(--text); --bs-dropdown-divider-bg: var(--border); }
[data-bs-theme=dark] .modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--border); }
[data-bs-theme=dark] .list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--border); }
[data-bs-theme=dark] .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .45) !important; }
[data-bs-theme=dark] img.thumb, [data-bs-theme=dark] .banner-preview { background-color: var(--surface-2); }