/* ==========================================================================
   Ostaz admin — theme
   Light and dark are driven by <html data-bs-theme="light|dark">.
   Every colour below goes through a token so child pages follow the theme.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --o-canvas: #F5F4F7;
    --o-surface: #FFFFFF;
    --o-raised: #FAF9FB;
    --o-sunken: #EFEDF2;
    --o-ink: #1D1A22;
    --o-ink-2: #3B3743;
    --o-muted: #6E6979;
    --o-line: #E3E0E8;
    --o-line-strong: #CFCAD6;
    --o-brand: #6B2C7A;
    --o-brand-hover: #58226A;
    --o-brand-soft: #F3ECF6;
    --o-brand-ink: #5A2268;
    --o-focus: rgba(107, 44, 122, .22);
    --o-shadow-pop: 0 10px 30px -12px rgba(29, 26, 34, .25), 0 2px 6px rgba(29, 26, 34, .06);
    --o-row-hover: #F8F7FA;

    --o-ok: #157347;      --o-ok-soft: #E7F4EC;
    --o-warn: #A15C07;    --o-warn-soft: #FDF3E1;
    --o-bad: #B42318;     --o-bad-soft: #FDECEA;
    --o-info: #1F5FA8;    --o-info-soft: #E8F0FA;

    /* sidebar stays plum in both themes — the one brand surface */
    --o-side-bg: #2A1531;
    --o-side-line: rgba(255, 255, 255, .08);
    --o-side-text: #D9CFDD;
    --o-side-muted: #9D8DA4;
    --o-side-hover: rgba(255, 255, 255, .06);
    --o-side-active: rgba(255, 255, 255, .11);
    --o-side-accent: #E7B6F0;
}

[data-bs-theme="dark"] {
    --o-canvas: #131116;
    --o-surface: #1B181F;
    --o-raised: #211E26;
    --o-sunken: #17151A;
    --o-ink: #ECE9F0;
    --o-ink-2: #CBC6D2;
    --o-muted: #9893A2;
    --o-line: #2D2933;
    --o-line-strong: #3C3743;
    --o-brand: #B57DC4;
    --o-brand-hover: #C796D4;
    --o-brand-soft: rgba(181, 125, 196, .14);
    --o-brand-ink: #D9B3E3;
    --o-focus: rgba(181, 125, 196, .3);
    --o-shadow-pop: 0 14px 34px -10px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .4);
    --o-row-hover: #221F27;

    --o-ok: #4CC38A;      --o-ok-soft: rgba(76, 195, 138, .13);
    --o-warn: #E7A94B;    --o-warn-soft: rgba(231, 169, 75, .13);
    --o-bad: #F0857A;     --o-bad-soft: rgba(240, 133, 122, .13);
    --o-info: #7DB2EE;    --o-info-soft: rgba(125, 178, 238, .13);

    --o-side-bg: #1A0F1E;
    --o-side-line: rgba(255, 255, 255, .06);
}

/* Solid fills that carry white text in both themes */
:root, [data-bs-theme="light"] { --o-brand-solid: #6B2C7A; --o-info-solid: #1F5FA8; --o-ok-solid: #157347; --o-bad-solid: #B42318; --o-warn-solid: #A15C07; }
[data-bs-theme="dark"] { --o-brand-solid: #7A3A8B; --o-info-solid: #2D64A6; --o-ok-solid: #1F7A50; --o-bad-solid: #B03A2E; --o-warn-solid: #9A5E12; }

/* Aliases for variables that older page templates still reference */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --p1: var(--o-brand-solid); --p2: var(--o-brand); --p3: var(--o-brand-hover);
    --accent: var(--o-brand); --text: var(--o-ink); --muted: var(--o-muted);
    --bg: var(--o-canvas); --bg2: var(--o-raised);
    --glass: var(--o-brand-soft); --glass-b: var(--o-line);
}

/* ── Bootstrap variable bridge ─────────────────────────────────────────── */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-font-sans-serif: "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --bs-body-font-size: .9rem;
    --bs-body-line-height: 1.6;
    --bs-body-bg: var(--o-canvas);
    --bs-body-color: var(--o-ink);
    --bs-emphasis-color: var(--o-ink);
    --bs-secondary-color: var(--o-muted);
    --bs-tertiary-color: var(--o-muted);
    --bs-secondary-bg: var(--o-sunken);
    --bs-tertiary-bg: var(--o-raised);
    --bs-border-color: var(--o-line);
    --bs-border-color-translucent: var(--o-line);
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-link-color: var(--o-brand);
    --bs-link-color-rgb: 107, 44, 122;
    --bs-link-hover-color: var(--o-brand-hover);
    --bs-heading-color: var(--o-ink);
    --bs-primary: var(--o-brand);
    --bs-primary-rgb: 107, 44, 122;
    --bs-focus-ring-color: var(--o-focus);
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 181, 125, 196; --bs-primary-rgb: 181, 125, 196; }

/* ── Base ──────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--bs-font-sans-serif);
    background: var(--o-canvas);
    color: var(--o-ink);
    direction: rtl;
    min-height: 100vh;
    font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--o-ink); font-weight: 600; letter-spacing: 0; }
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.08rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .92rem; }
a { color: var(--o-brand); text-decoration: none; }
a:hover { color: var(--o-brand-hover); }
::selection { background: var(--o-brand-soft); color: var(--o-ink); }
:focus-visible { outline: 2px solid var(--o-brand); outline-offset: 2px; }
hr { border-color: var(--o-line); opacity: 1; }
code { color: var(--o-brand-ink); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
:root { --sidebar-w: 264px; }
.sidebar {
    position: fixed; inset-block: 0; right: 0;
    width: var(--sidebar-w);
    background: var(--o-side-bg);
    color: var(--o-side-text);
    z-index: 1040;
    display: flex; flex-direction: column;
    transition: transform .25s ease;
}
.sidebar-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--o-side-line); flex-shrink: 0; }
.sidebar-brand { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.sidebar-brand:hover { color: #fff; }
.brand-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
}
.brand-icon img { width: 26px; height: 26px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 1rem; font-weight: 700; }
.brand-text small { font-size: .74rem; color: var(--o-side-muted); font-weight: 500; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .6rem .6rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
.nav-group-label {
    font-size: .72rem; font-weight: 600; color: var(--o-side-muted);
    padding: 1rem .75rem .35rem;
}
.sidebar .nav-item { margin-bottom: 1px; }
.sidebar .nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .75rem;
    color: var(--o-side-text);
    font-size: .875rem; font-weight: 500;
    border-radius: 7px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar .nav-link i { width: 18px; text-align: center; font-size: .85rem; color: var(--o-side-muted); flex-shrink: 0; }
.sidebar .nav-link:hover { background: var(--o-side-hover); color: #fff; }
.sidebar .nav-link:hover i { color: var(--o-side-text); }
.sidebar .nav-link.active { background: var(--o-side-active); color: #fff; }
.sidebar .nav-link.active i { color: var(--o-side-accent); }
.sidebar .nav-link.dropdown-toggle::after {
    content: "\f104"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    border: 0; margin: 0 auto 0 0; font-size: .7rem; color: var(--o-side-muted);
    transition: transform .2s ease; vertical-align: 0;
}
.sidebar .nav-link.dropdown-toggle.expanded::after { transform: rotate(-90deg); }

.sidebar .sidebar-nav .dropdown-menu {
    position: static; float: none; display: none;
    background: transparent; border: 0; box-shadow: none;
    margin: 2px 0 6px; padding: 0 1.9rem 0 0;
    min-width: 0; transform: none !important; inset: auto !important;
}
.sidebar .sidebar-nav .dropdown-menu.open { display: block; }
.sidebar .sidebar-nav .dropdown-item {
    display: flex; align-items: center; gap: .55rem;
    color: var(--o-side-muted); font-size: .84rem; font-weight: 500;
    padding: .4rem .75rem; border-radius: 6px; white-space: normal;
}
.sidebar .sidebar-nav .dropdown-item i { font-size: .72rem; width: 14px; text-align: center; opacity: .8; }
.sidebar .sidebar-nav .dropdown-item:hover { background: var(--o-side-hover); color: #fff; }
.sidebar .sidebar-nav .dropdown-item.active { background: var(--o-side-hover); color: #fff; font-weight: 600; }
.sidebar .sidebar-nav .dropdown-item.active i { color: var(--o-side-accent); opacity: 1; }
.sidebar .sidebar-nav .dropdown-divider { border-color: var(--o-side-line); margin: .3rem .75rem; }

.sidebar-footer { border-top: 1px solid var(--o-side-line); padding: .6rem; flex-shrink: 0; }
.theme-toggle {
    width: 100%; display: flex; align-items: center; gap: .65rem;
    background: transparent; border: 0; color: var(--o-side-text);
    padding: .5rem .75rem; border-radius: 7px; font: inherit; font-size: .84rem; font-weight: 500;
}
.theme-toggle i { width: 18px; text-align: center; color: var(--o-side-muted); }
.theme-toggle:hover { background: var(--o-side-hover); color: #fff; }
.user-chip {
    width: 100%; display: flex; align-items: center; gap: .65rem;
    background: transparent; border: 0; padding: .5rem .6rem; border-radius: 8px;
    color: var(--o-side-text); text-align: right; font: inherit;
}
.user-chip:hover { background: var(--o-side-hover); }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--o-side-accent); color: var(--o-side-bg);
    display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.user-details { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-weight: 600; font-size: .84rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: .72rem; color: var(--o-side-muted); }
.user-more { color: var(--o-side-muted); font-size: .8rem; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.main-content { margin-right: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; background: var(--o-canvas); }
.main-content > .container-fluid { padding: 1.75rem 2rem 2rem; flex: 1; max-width: 1480px; }
.top-bar {
    display: none; position: sticky; top: 0; z-index: 1020;
    background: var(--o-surface); border-bottom: 1px solid var(--o-line);
    padding: .6rem 1rem; align-items: center; justify-content: space-between; gap: .75rem;
}
.top-bar-title { font-weight: 600; font-size: .95rem; }
.sidebar-toggle {
    width: 38px; height: 38px; border-radius: 8px;
    border: 1px solid var(--o-line); background: var(--o-surface); color: var(--o-ink-2);
    display: grid; place-items: center; cursor: pointer;
}
.sidebar-toggle:hover { background: var(--o-sunken); }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(10, 6, 12, .5); z-index: 1035; display: none; }
.sidebar-overlay.show { display: block; }

.admin-footer {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 1rem 2rem; border-top: 1px solid var(--o-line);
    color: var(--o-muted); font-size: .8rem;
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(100%); }
    .sidebar.show { transform: translateX(0); box-shadow: var(--o-shadow-pop); }
    .main-content { margin-right: 0; }
    .top-bar { display: flex; }
    .main-content > .container-fluid { padding: 1.25rem 1rem 1.5rem; }
    .admin-footer { padding: 1rem; }
}

/* Page headers built by child templates: title + actions on one row */
.page-body > .d-flex.justify-content-between:first-child,
.page-body > .alerts-container + .d-flex.justify-content-between,
.page-header {
    flex-wrap: wrap; gap: .75rem;
}
.page-body h1, .page-body > .d-flex h2, .page-body > .d-flex h1, .page-body > .row > div > h2 { font-size: 1.35rem; font-weight: 600; }
.page-body h2 > i:first-child, .page-body h1 > i:first-child, .page-body h3 > i:first-child { color: var(--o-muted); font-size: .85em; }
.page-subtitle { color: var(--o-muted); font-size: .875rem; margin: .15rem 0 0; }

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alerts-container { margin-bottom: 1.25rem; display: grid; gap: .5rem; }
.alert {
    --bs-alert-border-radius: 8px;
    border: 1px solid transparent; font-size: .875rem; font-weight: 500;
    padding: .75rem 1rem; display: flex; align-items: flex-start; gap: .6rem;
}
.alert.alert-dismissible { padding-left: 3rem; }
.alert > i:first-child { margin-top: .2rem; }
.alert-success { background: var(--o-ok-soft);   color: var(--o-ok);   border-color: color-mix(in srgb, var(--o-ok) 25%, transparent); }
.alert-danger  { background: var(--o-bad-soft);  color: var(--o-bad);  border-color: color-mix(in srgb, var(--o-bad) 25%, transparent); }
.alert-warning { background: var(--o-warn-soft); color: var(--o-warn); border-color: color-mix(in srgb, var(--o-warn) 25%, transparent); }
.alert-info, .alert-primary { background: var(--o-info-soft); color: var(--o-info); border-color: color-mix(in srgb, var(--o-info) 25%, transparent); }
.alert-secondary, .alert-light { background: var(--o-sunken); color: var(--o-ink-2); border-color: var(--o-line); }
.alert .alert-link { color: inherit; }
.alert .btn-close { padding: 1rem; }
.alert-heading { color: inherit; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
    --bs-card-bg: var(--o-surface);
    --bs-card-border-color: var(--o-line);
    --bs-card-border-radius: 10px;
    --bs-card-inner-border-radius: 9px;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.15rem;
    --bs-card-spacer-y: 1.15rem;
    --bs-card-spacer-x: 1.15rem;
    color: var(--o-ink);
    box-shadow: none;
}
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: none !important; }
.card-header { border-bottom: 1px solid var(--o-line); font-weight: 600; }
.card-header .card-title, .card-header h5, .card-header h6 { font-size: .95rem; font-weight: 600; margin: 0; }
.card-header .card-title > i:first-child, .card-header h5 > i:first-child, .card-header h6 > i:first-child { color: var(--o-muted); }
.card-footer { background: var(--o-raised); border-top: 1px solid var(--o-line); }
.card-title { color: var(--o-ink); }

/* Coloured stat cards (bg-primary text-white …) become calm tiles with a coloured edge */
.card.bg-primary, .card.bg-success, .card.bg-info, .card.bg-warning, .card.bg-danger, .card.bg-secondary, .card.bg-dark {
    background: var(--o-surface) !important;
    border-color: var(--o-line) !important;
    color: var(--o-ink) !important;
}
.card.bg-primary   { --tile: var(--o-brand); }
.card.bg-success   { --tile: var(--o-ok); }
.card.bg-info      { --tile: var(--o-info); }
.card.bg-warning   { --tile: var(--o-warn); }
.card.bg-danger    { --tile: var(--o-bad); }
.card.bg-secondary, .card.bg-dark { --tile: var(--o-muted); }
.card[class*="bg-"] .text-white, .card[class*="bg-"].text-white,
.card[class*="bg-"] .text-white-50, .card[class*="bg-"] .text-white-75 { color: var(--o-ink) !important; }
.card[class*="bg-"] .text-white-50, .card[class*="bg-"] .text-white-75, .card[class*="bg-"] .small { color: var(--o-muted) !important; }
.card.bg-primary .fa-2x, .card.bg-success .fa-2x, .card.bg-info .fa-2x, .card.bg-warning .fa-2x, .card.bg-danger .fa-2x, .card.bg-secondary .fa-2x,
.card.bg-primary .fa-3x, .card.bg-success .fa-3x, .card.bg-info .fa-3x, .card.bg-warning .fa-3x, .card.bg-danger .fa-3x {
    color: var(--tile) !important; font-size: 1.05rem;
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: inline-grid; place-items: center;
    background: color-mix(in srgb, var(--tile) 12%, transparent);
}
.card.bg-primary .h5, .card.bg-success .h5, .card.bg-info .h5, .card.bg-warning .h5, .card.bg-danger .h5,
.card.bg-primary .text-lg, .card.bg-success .text-lg, .card.bg-info .text-lg, .card.bg-warning .text-lg, .card.bg-danger .text-lg,
.card.bg-primary h3, .card.bg-success h3, .card.bg-info h3, .card.bg-warning h3, .card.bg-danger h3,
.card.bg-primary h2, .card.bg-success h2, .card.bg-info h2, .card.bg-warning h2, .card.bg-danger h2 {
    font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0;
}
.card.bg-primary .card-header, .card.bg-success .card-header, .card.bg-info .card-header, .card.bg-warning .card-header, .card.bg-danger .card-header { color: var(--o-ink); }
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info, .card-header.bg-warning, .card-header.bg-danger, .card-header.bg-secondary, .card-header.bg-dark {
    background: var(--o-raised) !important; color: var(--o-ink) !important;
    box-shadow: inset 0 2px 0 var(--hdr, var(--o-brand));
}
.card-header.bg-success { --hdr: var(--o-ok); }
.card-header.bg-info    { --hdr: var(--o-info); }
.card-header.bg-warning { --hdr: var(--o-warn); }
.card-header.bg-danger  { --hdr: var(--o-bad); }
.card-header.bg-secondary, .card-header.bg-dark { --hdr: var(--o-muted); }
.card-header.text-white, .card-header .text-white { color: var(--o-ink) !important; }
.card-header .btn-close-white, .modal-header .btn-close-white { filter: none; }
[data-bs-theme="dark"] .card-header .btn-close-white, [data-bs-theme="dark"] .modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* SB-admin style tiles used on some pages */
.border-left-primary   { border-inline-start: 3px solid var(--o-brand) !important; }
.border-left-success   { border-inline-start: 3px solid var(--o-ok) !important; }
.border-left-info      { border-inline-start: 3px solid var(--o-info) !important; }
.border-left-warning   { border-inline-start: 3px solid var(--o-warn) !important; }
.border-left-danger    { border-inline-start: 3px solid var(--o-bad) !important; }
.border-left-secondary { border-inline-start: 3px solid var(--o-muted) !important; }
.text-gray-800, .text-gray-900 { color: var(--o-ink) !important; }
.text-gray-300, .text-gray-400 { color: var(--o-line-strong) !important; }
.text-gray-500, .text-gray-600 { color: var(--o-muted) !important; }
.text-xs { font-size: .75rem; }
.font-weight-bold { font-weight: 600 !important; }
.font-weight-normal { font-weight: 400 !important; }
.mr-1 { margin-left: .25rem !important; } .mr-2 { margin-left: .5rem !important; } .mr-3 { margin-left: 1rem !important; }
.ml-1 { margin-right: .25rem !important; } .ml-2 { margin-right: .5rem !important; } .ml-3 { margin-right: 1rem !important; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.text-lg { font-size: 1.35rem; }

/* Reusable stat tile */
.stat-tile {
    background: var(--o-surface); border: 1px solid var(--o-line); border-radius: 10px;
    padding: 1rem 1.15rem; height: 100%;
}
.stat-tile .stat-label { color: var(--o-muted); font-size: .8rem; font-weight: 500; }
.stat-tile .stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat-tile .stat-meta { color: var(--o-muted); font-size: .78rem; }

/* Generic stat classes used across older pages */
.stats-card, .stat-card { background: var(--o-surface) !important; border: 1px solid var(--o-line) !important; color: var(--o-ink) !important; box-shadow: none !important; }
.stats-card .text-white, .stat-card .text-white { color: var(--o-ink) !important; }
.stat-number { font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--o-muted); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-font-size: .875rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-border-radius: 7px;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--o-focus);
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn > i + *, .btn > i { margin: 0 !important; }
.btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; --bs-btn-border-radius: 6px; }
.btn-lg { --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.2rem; --bs-btn-font-size: .95rem; }
.btn-primary {
    --bs-btn-bg: var(--o-brand); --bs-btn-border-color: var(--o-brand); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--o-brand-hover); --bs-btn-hover-border-color: var(--o-brand-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--o-brand-hover); --bs-btn-active-border-color: var(--o-brand-hover);
    --bs-btn-disabled-bg: var(--o-brand); --bs-btn-disabled-border-color: var(--o-brand);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #1A0F1E; --bs-btn-hover-color: #1A0F1E; --bs-btn-active-color: #1A0F1E; --bs-btn-disabled-color: #1A0F1E; }
.btn-secondary, .btn-light {
    --bs-btn-bg: var(--o-surface); --bs-btn-border-color: var(--o-line-strong); --bs-btn-color: var(--o-ink-2);
    --bs-btn-hover-bg: var(--o-sunken); --bs-btn-hover-border-color: var(--o-line-strong); --bs-btn-hover-color: var(--o-ink);
    --bs-btn-active-bg: var(--o-sunken); --bs-btn-active-border-color: var(--o-line-strong); --bs-btn-active-color: var(--o-ink);
    --bs-btn-disabled-bg: var(--o-surface); --bs-btn-disabled-color: var(--o-muted); --bs-btn-disabled-border-color: var(--o-line);
}
.btn-success { --bs-btn-bg: var(--o-ok); --bs-btn-border-color: var(--o-ok); --bs-btn-hover-bg: color-mix(in srgb, var(--o-ok) 88%, #000); --bs-btn-hover-border-color: transparent; }
.btn-danger  { --bs-btn-bg: var(--o-bad); --bs-btn-border-color: var(--o-bad); --bs-btn-hover-bg: color-mix(in srgb, var(--o-bad) 88%, #000); --bs-btn-hover-border-color: transparent; }
[data-bs-theme="dark"] .btn-success, [data-bs-theme="dark"] .btn-danger { --bs-btn-color: #131116; --bs-btn-hover-color: #131116; }
/* Info / warning solid buttons look loud; render them as soft tinted actions */
.btn-info {
    --bs-btn-bg: var(--o-info-soft); --bs-btn-border-color: transparent; --bs-btn-color: var(--o-info);
    --bs-btn-hover-bg: color-mix(in srgb, var(--o-info) 18%, transparent); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--o-info);
    --bs-btn-active-bg: color-mix(in srgb, var(--o-info) 24%, transparent); --bs-btn-active-color: var(--o-info);
}
.btn-warning {
    --bs-btn-bg: var(--o-warn-soft); --bs-btn-border-color: transparent; --bs-btn-color: var(--o-warn);
    --bs-btn-hover-bg: color-mix(in srgb, var(--o-warn) 18%, transparent); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--o-warn);
    --bs-btn-active-bg: color-mix(in srgb, var(--o-warn) 24%, transparent); --bs-btn-active-color: var(--o-warn);
}
.btn-outline-primary {
    --bs-btn-color: var(--o-brand); --bs-btn-border-color: color-mix(in srgb, var(--o-brand) 45%, transparent);
    --bs-btn-hover-bg: var(--o-brand-soft); --bs-btn-hover-color: var(--o-brand-ink); --bs-btn-hover-border-color: var(--o-brand);
    --bs-btn-active-bg: var(--o-brand-soft); --bs-btn-active-color: var(--o-brand-ink); --bs-btn-active-border-color: var(--o-brand);
}
.btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
    --bs-btn-color: var(--o-ink-2); --bs-btn-border-color: var(--o-line-strong);
    --bs-btn-hover-bg: var(--o-sunken); --bs-btn-hover-color: var(--o-ink); --bs-btn-hover-border-color: var(--o-line-strong);
    --bs-btn-active-bg: var(--o-sunken); --bs-btn-active-color: var(--o-ink); --bs-btn-active-border-color: var(--o-line-strong);
}
.btn-outline-success { --bs-btn-color: var(--o-ok); --bs-btn-border-color: color-mix(in srgb, var(--o-ok) 45%, transparent); --bs-btn-hover-bg: var(--o-ok-soft); --bs-btn-hover-color: var(--o-ok); --bs-btn-hover-border-color: var(--o-ok); }
.btn-outline-danger  { --bs-btn-color: var(--o-bad); --bs-btn-border-color: color-mix(in srgb, var(--o-bad) 45%, transparent); --bs-btn-hover-bg: var(--o-bad-soft); --bs-btn-hover-color: var(--o-bad); --bs-btn-hover-border-color: var(--o-bad); }
.btn-outline-warning { --bs-btn-color: var(--o-warn); --bs-btn-border-color: color-mix(in srgb, var(--o-warn) 45%, transparent); --bs-btn-hover-bg: var(--o-warn-soft); --bs-btn-hover-color: var(--o-warn); --bs-btn-hover-border-color: var(--o-warn); }
.btn-outline-info    { --bs-btn-color: var(--o-info); --bs-btn-border-color: color-mix(in srgb, var(--o-info) 45%, transparent); --bs-btn-hover-bg: var(--o-info-soft); --bs-btn-hover-color: var(--o-info); --bs-btn-hover-border-color: var(--o-info); }
.btn-link { --bs-btn-color: var(--o-brand); --bs-btn-hover-color: var(--o-brand-hover); }
.btn-group > .btn { gap: .35rem; }
.btn-group-sm > .btn, .btn-group .btn-sm { --bs-btn-padding-x: .55rem; }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 .2rem var(--o-focus); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme="light"] .btn-close-white { filter: none; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-label { color: var(--o-ink-2); font-weight: 500; font-size: .85rem; margin-bottom: .35rem; }
.form-text { color: var(--o-muted); font-size: .78rem; }
.form-control, .form-select {
    background-color: var(--o-surface);
    border: 1px solid var(--o-line-strong);
    border-radius: 7px;
    color: var(--o-ink);
    font-size: .875rem;
    padding: .48rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-select { padding-left: 2.25rem; background-position: left .75rem center; }
.form-control:focus, .form-select:focus {
    background-color: var(--o-surface); color: var(--o-ink);
    border-color: var(--o-brand); box-shadow: 0 0 0 .2rem var(--o-focus);
}
.form-control::placeholder { color: var(--o-muted); opacity: .8; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--o-sunken); color: var(--o-muted); }
.form-control-sm, .form-select-sm { font-size: .8rem; padding-block: .3rem; }
.form-select option { background: var(--o-surface); color: var(--o-ink); }
.form-check-input { border-color: var(--o-line-strong); background-color: var(--o-surface); }
.form-check-input:checked { background-color: var(--o-brand); border-color: var(--o-brand); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--o-focus); border-color: var(--o-brand); }
.form-check-label { color: var(--o-ink-2); }
.input-group-text { background: var(--o-sunken); border-color: var(--o-line-strong); color: var(--o-muted); font-size: .875rem; }
.form-group { margin-bottom: 1rem; }
.required::after, label.required::after { content: " *"; color: var(--o-bad); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: var(--o-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--o-surface) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--o-bad); }
.invalid-feedback { color: var(--o-bad); }
.form-control-color { padding: .25rem; }
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--o-ink);
    --bs-table-border-color: var(--o-line);
    --bs-table-striped-bg: var(--o-raised);
    --bs-table-striped-color: var(--o-ink);
    --bs-table-hover-bg: var(--o-row-hover);
    --bs-table-hover-color: var(--o-ink);
    --bs-table-active-bg: var(--o-sunken);
    font-size: .865rem; margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .65rem .8rem; }
.table-sm > :not(caption) > * > * { padding: .4rem .6rem; }
.table thead th, .table > thead > tr > th {
    background: var(--o-raised) !important; color: var(--o-muted) !important;
    font-weight: 600; font-size: .78rem; white-space: nowrap;
    border-bottom: 1px solid var(--o-line) !important;
}
.table td { vertical-align: middle; }
.table-light, .table-dark, .thead-light, .thead-dark, .table > thead.table-light, .table > thead.table-dark {
    --bs-table-bg: var(--o-raised); --bs-table-color: var(--o-muted); --bs-table-border-color: var(--o-line);
}
.table-bordered > :not(caption) > * { border-color: var(--o-line); }
.table-success { --bs-table-bg: var(--o-ok-soft); --bs-table-color: var(--o-ink); }
.table-danger  { --bs-table-bg: var(--o-bad-soft); --bs-table-color: var(--o-ink); }
.table-warning { --bs-table-bg: var(--o-warn-soft); --bs-table-color: var(--o-ink); }
.table-info    { --bs-table-bg: var(--o-info-soft); --bs-table-color: var(--o-ink); }
.card > .card-body > .table-responsive:only-child, .card > .table-responsive { margin: 0; }
.card-body > .table-responsive:first-child:last-child { margin: calc(-1 * var(--bs-card-spacer-y)) calc(-1 * var(--bs-card-spacer-x)); }
.card-body > .table-responsive:first-child:last-child .table > :not(caption) > * > *:first-child { padding-right: 1.15rem; }
.card-body > .table-responsive:first-child:last-child .table > :not(caption) > * > *:last-child { padding-left: 1.15rem; }
.table-responsive { scrollbar-width: thin; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 500; font-size: .74rem; padding: .3em .6em; border-radius: 5px;
    border: 0; letter-spacing: 0;
}
.badge.bg-primary,   .badge.text-bg-primary   { background: var(--o-brand-soft) !important; color: var(--o-brand-ink) !important; }
.badge.bg-success,   .badge.text-bg-success   { background: var(--o-ok-soft) !important;    color: var(--o-ok) !important; }
.badge.bg-danger,    .badge.text-bg-danger    { background: var(--o-bad-soft) !important;   color: var(--o-bad) !important; }
.badge.bg-warning,   .badge.text-bg-warning   { background: var(--o-warn-soft) !important;  color: var(--o-warn) !important; }
.badge.bg-info,      .badge.text-bg-info      { background: var(--o-info-soft) !important;  color: var(--o-info) !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light,     .badge.bg-dark           { background: var(--o-sunken) !important;     color: var(--o-ink-2) !important; }
.badge.rounded-pill { border-radius: 999px; }

/* ── Utilities remapped to tokens ──────────────────────────────────────── */
.text-muted, .text-body-secondary, .text-secondary { color: var(--o-muted) !important; }
.text-dark, .text-black, .text-body { color: var(--o-ink) !important; }
.text-primary { color: var(--o-brand) !important; }
.text-success { color: var(--o-ok) !important; }
.text-danger  { color: var(--o-bad) !important; }
.text-warning { color: var(--o-warn) !important; }
.text-info    { color: var(--o-info) !important; }
.bg-white, .bg-body { background-color: var(--o-surface) !important; }
.bg-light, .bg-body-tertiary, .bg-body-secondary { background-color: var(--o-raised) !important; color: var(--o-ink); }
.bg-primary.bg-opacity-10, .bg-primary-subtle { background-color: var(--o-brand-soft) !important; }
.bg-success.bg-opacity-10, .bg-success-subtle { background-color: var(--o-ok-soft) !important; }
.bg-danger.bg-opacity-10,  .bg-danger-subtle  { background-color: var(--o-bad-soft) !important; }
.bg-warning.bg-opacity-10, .bg-warning-subtle { background-color: var(--o-warn-soft) !important; }
.bg-info.bg-opacity-10,    .bg-info-subtle    { background-color: var(--o-info-soft) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--o-line) !important; }
.border-primary { border-color: var(--o-brand) !important; }
.border-success { border-color: var(--o-ok) !important; }
.border-danger  { border-color: var(--o-bad) !important; }
.border-warning { border-color: var(--o-warn) !important; }
.border-info    { border-color: var(--o-info) !important; }
.shadow, .shadow-sm { box-shadow: none !important; }
.shadow-lg { box-shadow: var(--o-shadow-pop) !important; }
.rounded { border-radius: 8px !important; }
.fw-bold { font-weight: 600 !important; }
.display-4, .display-5, .display-6 { font-weight: 600; }

/* Elements outside cards that use bg-* as a block colour (avatars, icon wells, progress) keep a calm look */
.avatar-title, .avatar-circle, .avatar-large, .member-avatar, .asker-avatar, .rounded-circle.bg-primary {
    background: var(--o-brand-soft) !important; color: var(--o-brand-ink) !important;
}
.progress { --bs-progress-bg: var(--o-sunken); --bs-progress-height: .5rem; border-radius: 99px; }
.progress-bar { background-color: var(--o-brand); }
.progress-bar.bg-success { background-color: var(--o-ok) !important; }
.progress-bar.bg-warning { background-color: var(--o-warn) !important; }
.progress-bar.bg-danger  { background-color: var(--o-bad) !important; }
.progress-bar.bg-info    { background-color: var(--o-info) !important; }

/* ── Navigation bits ───────────────────────────────────────────────────── */
.breadcrumb { --bs-breadcrumb-divider-color: var(--o-muted); --bs-breadcrumb-item-active-color: var(--o-muted); font-size: .82rem; margin-bottom: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: var(--bs-breadcrumb-item-padding-x); padding-right: 0; }
.pagination { --bs-pagination-font-size: .84rem; gap: 4px; margin-top: 1rem; flex-wrap: wrap; }
.page-link {
    background: var(--o-surface); border: 1px solid var(--o-line); color: var(--o-ink-2);
    border-radius: 6px !important; min-width: 34px; text-align: center;
}
.page-link:hover { background: var(--o-sunken); color: var(--o-ink); border-color: var(--o-line-strong); }
.page-link:focus { box-shadow: 0 0 0 .2rem var(--o-focus); }
.page-item.active .page-link { background: var(--o-brand); border-color: var(--o-brand); color: #fff; }
[data-bs-theme="dark"] .page-item.active .page-link { color: #1A0F1E; }
.page-item.disabled .page-link { background: transparent; color: var(--o-muted); border-color: var(--o-line); opacity: .6; }
.nav-tabs { --bs-nav-tabs-border-color: var(--o-line); --bs-nav-tabs-link-active-bg: var(--o-surface); --bs-nav-tabs-link-active-color: var(--o-ink); --bs-nav-tabs-link-active-border-color: var(--o-line) var(--o-line) var(--o-surface); }
.main-content .nav-tabs .nav-link, .main-content .nav-pills .nav-link { color: var(--o-muted); font-weight: 500; font-size: .875rem; }
.main-content .nav-tabs .nav-link:hover { color: var(--o-ink); border-color: transparent; }
.main-content .nav-pills .nav-link.active { background: var(--o-brand-soft); color: var(--o-brand-ink); }
.list-group { --bs-list-group-bg: var(--o-surface); --bs-list-group-color: var(--o-ink); --bs-list-group-border-color: var(--o-line); --bs-list-group-action-hover-bg: var(--o-row-hover); --bs-list-group-action-hover-color: var(--o-ink); --bs-list-group-active-bg: var(--o-brand-soft); --bs-list-group-active-color: var(--o-brand-ink); --bs-list-group-active-border-color: var(--o-line); }

/* ── Overlays ──────────────────────────────────────────────────────────── */
.main-content .dropdown-menu, body > .dropdown-menu, .user-menu .dropdown-menu {
    --bs-dropdown-bg: var(--o-surface);
    --bs-dropdown-color: var(--o-ink);
    --bs-dropdown-border-color: var(--o-line);
    --bs-dropdown-link-color: var(--o-ink-2);
    --bs-dropdown-link-hover-bg: var(--o-sunken);
    --bs-dropdown-link-hover-color: var(--o-ink);
    --bs-dropdown-link-active-bg: var(--o-brand-soft);
    --bs-dropdown-link-active-color: var(--o-brand-ink);
    --bs-dropdown-divider-bg: var(--o-line);
    --bs-dropdown-font-size: .86rem;
    border-radius: 9px; padding: .35rem; box-shadow: var(--o-shadow-pop);
}
.main-content .dropdown-item, .user-menu .dropdown-item { border-radius: 6px; padding: .45rem .7rem; display: flex; align-items: center; gap: .55rem; }
.main-content .dropdown-item i, .user-menu .dropdown-item i { width: 16px; text-align: center; color: var(--o-muted); font-size: .8rem; }
.user-menu .dropdown-item.text-danger, .user-menu .dropdown-item.text-danger i { color: var(--o-bad) !important; }
.modal { --bs-modal-bg: var(--o-surface); --bs-modal-color: var(--o-ink); --bs-modal-border-color: var(--o-line); --bs-modal-border-radius: 12px; --bs-modal-header-border-color: var(--o-line); --bs-modal-footer-border-color: var(--o-line); }
.modal-content { box-shadow: var(--o-shadow-pop); }
.modal-header .modal-title { font-size: 1rem; font-weight: 600; }
.modal-header.bg-primary, .modal-header.bg-danger, .modal-header.bg-success, .modal-header.bg-warning, .modal-header.bg-info {
    background: var(--o-surface) !important; color: var(--o-ink) !important;
}
.modal-header.bg-danger .modal-title { color: var(--o-bad) !important; }
.modal-header.text-white, .modal-header .text-white { color: var(--o-ink) !important; }
.modal-backdrop { --bs-backdrop-bg: #0d0910; --bs-backdrop-opacity: .45; }
.tooltip { --bs-tooltip-bg: var(--o-ink); --bs-tooltip-color: var(--o-surface); --bs-tooltip-font-size: .78rem; }
.popover { --bs-popover-bg: var(--o-surface); --bs-popover-border-color: var(--o-line); --bs-popover-header-bg: var(--o-raised); --bs-popover-body-color: var(--o-ink); }
.toast { --bs-toast-bg: var(--o-surface); --bs-toast-color: var(--o-ink); --bs-toast-border-color: var(--o-line); }

/* ── Inline-style safety net (old templates with hard-coded light colours) ── */
.main-content [style*="background-color: #fff"], .main-content [style*="background-color:#fff"],
.main-content [style*="background: #fff"], .main-content [style*="background:#fff"],
.main-content [style*="background-color: white"], .main-content [style*="background: white"],
.main-content [style*="background-color: #f8f9fa"], .main-content [style*="background: #f8f9fa"],
.main-content [style*="background-color: #f7fafc"] {
    background-color: var(--o-raised) !important; color: var(--o-ink) !important;
}
.main-content [style*="color: #212529"], .main-content [style*="color: #333"], .main-content [style*="color: #2d3748"],
.main-content [style*="color: #1a1a1a"], .main-content [style*="color: #4a5568"] { color: var(--o-ink) !important; }

/* Empty states */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--o-muted); }
.empty-state i { font-size: 1.75rem; margin-bottom: .75rem; color: var(--o-line-strong); }
.empty-state h5, .empty-state h6 { color: var(--o-ink); margin-bottom: .35rem; }

/* Images / media in the theme */
img { max-width: 100%; }
[data-bs-theme="dark"] .img-thumbnail { background: var(--o-raised); border-color: var(--o-line); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Row actions in tables: quiet outlined icon buttons, colour only on the icon */
.table .btn-group > .btn, .table td > .btn-sm, .table td .btn-group-sm > .btn, .table td > a.btn-sm, .table td > form > .btn-sm {
    --bs-btn-bg: transparent; --bs-btn-border-color: var(--o-line); --bs-btn-hover-bg: var(--o-sunken); --bs-btn-hover-border-color: var(--o-line-strong);
    --bs-btn-active-bg: var(--o-sunken); --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .25rem;
    color: var(--o-ink-2);
}
.table .btn-info, .table .btn-outline-info { --bs-btn-color: var(--o-info); --bs-btn-hover-color: var(--o-info); }
.table .btn-warning, .table .btn-outline-warning { --bs-btn-color: var(--o-warn); --bs-btn-hover-color: var(--o-warn); }
.table .btn-danger, .table .btn-outline-danger { --bs-btn-color: var(--o-bad); --bs-btn-hover-color: var(--o-bad); }
.table .btn-success, .table .btn-outline-success { --bs-btn-color: var(--o-ok); --bs-btn-hover-color: var(--o-ok); }
.table .btn-primary, .table .btn-outline-primary { --bs-btn-color: var(--o-brand); --bs-btn-hover-color: var(--o-brand); }
.table .btn-secondary, .table .btn-outline-secondary { --bs-btn-color: var(--o-ink-2); --bs-btn-hover-color: var(--o-ink); }
.table .btn-group > .btn:not(:first-child) { margin-inline-start: -1px; }