/* ============================================================
   Premium UI layer on top of Bootstrap 5.3
   Theme = colour palette (data-theme) + sidebar style (data-side)
   ============================================================ */
:root, [data-theme="indigo"]  { --brand:#3b5bdb; --brand-600:#364fc7; --brand-50:#edf2ff; --brand-900:#1c2a6b; --brand-rgb:59,91,219; }
[data-theme="emerald"] { --brand:#0ca678; --brand-600:#099268; --brand-50:#e6fcf5; --brand-900:#0b3d2e; --brand-rgb:12,166,120; }
[data-theme="ocean"]   { --brand:#1c7ed6; --brand-600:#1971c2; --brand-50:#e7f5ff; --brand-900:#0b3a63; --brand-rgb:28,126,214; }
[data-theme="violet"]  { --brand:#7048e8; --brand-600:#6741d9; --brand-50:#f3f0ff; --brand-900:#2d1b69; --brand-rgb:112,72,232; }
[data-theme="rose"]    { --brand:#d6336c; --brand-600:#c2255c; --brand-50:#fff0f6; --brand-900:#4a1230; --brand-rgb:214,51,108; }
[data-theme="amber"]   { --brand:#f76707; --brand-600:#e8590c; --brand-50:#fff4e6; --brand-900:#4a2406; --brand-rgb:247,103,7; }
[data-theme="slate"]   { --brand:#495057; --brand-600:#343a40; --brand-50:#f1f3f5; --brand-900:#14181d; --brand-rgb:73,80,87; }

:root { --ink:#1f2a44; --mut:#6b7691; --line:#e7ebf3; --bg:#f4f6fb; --card:#fff; --radius:14px;
  --side-bg:#1b2336; --side-ink:#aeb8d0; --side-head:#6f7fa3; --side-hover:rgba(255,255,255,.06); --side-border:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(31,42,68,.04), 0 6px 18px rgba(31,42,68,.05); }
[data-side="brand"] { --side-bg:var(--brand-900); --side-ink:rgba(255,255,255,.72); --side-head:rgba(255,255,255,.45); --side-hover:rgba(255,255,255,.08); }
[data-side="light"] { --side-bg:#ffffff; --side-ink:#56627f; --side-head:#98a2bb; --side-hover:var(--brand-50); --side-border:#e7ebf3; }

html, body { background:var(--bg); }
body { font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased; }
a { color:var(--brand); } a:hover { color:var(--brand-600); }
h1,h2,h3,h4,h5,h6 { color:var(--ink); letter-spacing:-.2px; }
h6 { font-weight:700; }

/* ---------- Sidebar ---------- */
.sidebar { width:248px; height:100vh; background:var(--side-bg); position:fixed; top:0; left:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:30px; border-right:1px solid var(--side-border); z-index:50; }
.sidebar::-webkit-scrollbar { width:6px; } .sidebar::-webkit-scrollbar-thumb { background:rgba(128,138,170,.35); border-radius:3px; }
.sidebar .brand { display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid var(--side-border); position:sticky; top:0; background:var(--side-bg); z-index:2; }
.sidebar .brand .logo { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--brand),var(--brand-600)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 6px 14px rgba(var(--brand-rgb),.35); flex:none; }
.sidebar .brand .t { color:#fff; font-weight:700; font-size:14px; line-height:1.25; letter-spacing:-.1px; }
[data-side="light"] .sidebar .brand .t { color:var(--ink); }
.sidebar .brand .t small { display:block; font-weight:500; font-size:11px; opacity:.6; margin-top:1px; }
.sidebar .nav-head { color:var(--side-head); font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; padding:18px 20px 6px; font-weight:700; list-style:none; }
.sidebar .nav-link { color:var(--side-ink); padding:9px 14px; margin:1px 10px; border-radius:10px; font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:11px; position:relative; transition:background .15s,color .15s; }
.sidebar .nav-link i { font-size:16px; width:18px; text-align:center; opacity:.9; }
.sidebar .nav-link:hover { background:var(--side-hover); color:#fff; } [data-side="light"] .sidebar .nav-link:hover { color:var(--brand-600); }
.sidebar .nav-link.active { background:linear-gradient(135deg,var(--brand),var(--brand-600)); color:#fff; box-shadow:0 6px 14px rgba(var(--brand-rgb),.30); }
.sidebar ul { padding:0; margin:0; list-style:none; }

/* ---------- Layout ---------- */
.main { margin-left:248px; min-height:100vh; }
.topbar { background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:12px 24px; position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:center; }
.topbar h5 { margin:0; font-weight:700; font-size:17px; }
.content { padding:22px 24px 40px; max-width:1700px; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-600)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.user-chip { display:flex; align-items:center; gap:10px; }
.user-chip .nm { line-height:1.15; font-weight:600; font-size:13px; } .user-chip .rl { font-size:11px; color:var(--mut); font-weight:500; }
.swatch { width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; display:inline-block; transition:transform .15s; }
.swatch:hover { transform:scale(1.15); } .swatch.on { box-shadow:0 0 0 2px var(--ink); }
.icon-btn { border:1px solid var(--line); background:#fff; border-radius:10px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; color:var(--mut); }
.icon-btn:hover { background:var(--brand-50); color:var(--brand); }

/* ---------- Cards / panels ---------- */
.card, .panel { background:var(--card); border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; }
.card-body { padding:20px 22px; }
.card .card-body > h6:first-child { padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--line); font-size:13px; text-transform:uppercase; letter-spacing:.7px; color:var(--mut); }
.card .card-body > h6:first-child small { text-transform:none; letter-spacing:0; font-weight:500; }

/* ---------- Tables ---------- */
.table { --bs-table-bg:transparent; margin-bottom:0; font-size:13.5px; }
.table > :not(caption) > * > * { padding:.7rem .7rem; border-bottom-color:#eef1f7; }
.table td .btn-sm { padding:.22rem .5rem; }
.table td form.d-inline { margin:0; }
.table thead th, .table-light, .table > thead.table-light > tr > th { background:#f7f9fd !important; color:var(--mut) !important; font-size:11px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; border-bottom:1px solid var(--line) !important; white-space:nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg:#fafbff; background:#fafbff; }
.table tfoot td, .table tfoot.table-light td { background:#f7f9fd !important; font-weight:700; border-top:2px solid var(--line); }
.table-bordered > :not(caption) > * { border-color:var(--line); }
.table-responsive { border-radius:var(--radius); }
.card > .table-responsive > .table > thead th:first-child { border-top-left-radius:var(--radius); } .card > .table-responsive > .table > thead th:last-child { border-top-right-radius:var(--radius); }

/* ---------- Forms ---------- */
.form-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.55px; font-weight:600; color:var(--mut); margin-bottom:5px; }
.form-control, .form-select { border:1px solid #dfe5f0; border-radius:10px; padding:.5rem .8rem; font-size:14px; color:var(--ink); background-color:#fff; }
.form-control-sm, .form-select-sm { border-radius:8px; padding:.3rem .6rem; font-size:13px; }
.form-control:focus, .form-select:focus { border-color:var(--brand); box-shadow:0 0 0 3.5px rgba(var(--brand-rgb),.14); }
.form-control:disabled, .form-select:disabled { background:#f3f5fa; }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }
.form-check-input:focus { box-shadow:0 0 0 3.5px rgba(var(--brand-rgb),.14); border-color:var(--brand); }
.input-group-text { border-radius:10px; }

/* ---------- Buttons ---------- */
.btn { border-radius:10px; font-weight:600; font-size:13.5px; padding:.5rem 1rem; transition:all .15s; }
.btn-sm { padding:.28rem .65rem; font-size:12.5px; border-radius:8px; }
.btn-primary { --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand-600); --bs-btn-hover-border-color:var(--brand-600); --bs-btn-active-bg:var(--brand-600); --bs-btn-active-border-color:var(--brand-600); --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand); --bs-btn-focus-shadow-rgb:var(--brand-rgb); box-shadow:0 4px 12px rgba(var(--brand-rgb),.25); }
.btn-outline-primary { --bs-btn-color:var(--brand); --bs-btn-border-color:rgba(var(--brand-rgb),.45); --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand); --bs-btn-active-bg:var(--brand); --bs-btn-active-border-color:var(--brand); --bs-btn-focus-shadow-rgb:var(--brand-rgb); }
.btn-outline-secondary { --bs-btn-color:#56627f; --bs-btn-border-color:#d9dfec; --bs-btn-hover-bg:#f1f4fb; --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:#c8d0e3; }
.btn-outline-danger { --bs-btn-border-color:rgba(224,49,49,.4); }
.btn-light { --bs-btn-bg:#fff; --bs-btn-border-color:var(--line); --bs-btn-hover-bg:#f4f6fb; --bs-btn-hover-border-color:#d5dcec; color:var(--ink); }
.btn-link { text-decoration:none; }

/* ---------- Badges / status pills ---------- */
.badge { font-weight:600; border-radius:999px; padding:.4em .75em; font-size:11.5px; letter-spacing:.1px; }
.badge.bg-primary { background:var(--brand-50) !important; color:var(--brand-600) !important; }
.badge.bg-secondary { background:#eef1f6 !important; color:#56627f !important; }
.badge.bg-success { background:#e3f8ea !important; color:#2b8a3e !important; }
.badge.bg-danger { background:#ffe8e8 !important; color:#c92a2a !important; }
.badge.bg-warning { background:#fff4db !important; color:#b26a00 !important; }
.badge.bg-info { background:#e3f0ff !important; color:#1c63c9 !important; }
.badge.bg-dark { background:var(--ink) !important; color:#fff !important; }
.st { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.st:before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-secondary { background:#eef1f6; color:#5b6784; } .st-warning { background:#fff4db; color:#b26a00; } .st-success { background:#e3f8ea; color:#2b8a3e; }
.st-primary { background:var(--brand-50); color:var(--brand-600); } .st-danger { background:#ffe8e8; color:#c92a2a; } .st-info { background:#e3f0ff; color:#1c63c9; }

/* ---------- Alerts / pagination / tabs / list ---------- */
.alert { border:0; border-radius:12px; font-size:13.5px; border-left:4px solid; }
.alert-success { background:#e8f8ee; color:#1e6b34; border-left-color:#2f9e44; } .alert-danger { background:#ffecec; color:#a61e1e; border-left-color:#e03131; }
.alert-warning { background:#fff6e0; color:#8a5a00; border-left-color:#f59f00; } .alert-info { background:#e8f1ff; color:#1a4fa3; border-left-color:#1c7ed6; }
.page-link { border-radius:9px !important; margin:0 2px; border:1px solid var(--line); color:var(--ink); font-size:13px; }
.page-item.active .page-link { background:var(--brand); border-color:var(--brand); color:#fff; }
.nav-tabs { border-bottom:1px solid var(--line); } .nav-tabs .nav-link { border:0; color:var(--mut); font-weight:600; border-bottom:2px solid transparent; }
.nav-tabs .nav-link.active { color:var(--brand); border-bottom-color:var(--brand); background:transparent; }
.list-group { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.list-group-item { border-color:var(--line); padding:.8rem 1rem; font-weight:500; color:var(--ink); }
.list-group-item.active { background:var(--brand-50); color:var(--brand-600); border-color:var(--line); border-left:3px solid var(--brand); font-weight:700; }
.dropdown-menu { border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(31,42,68,.14); }

/* ---------- Reusable premium components ---------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-bottom:18px; }
.kpi { padding:16px 18px; }
.kpi .ic { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:12px; }
.kpi .l { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--mut); font-weight:700; }
.kpi .v { font-size:24px; font-weight:800; color:var(--ink); line-height:1.2; letter-spacing:-.5px; }
.kpi .s { font-size:12px; color:var(--mut); }
.sub-t { font-size:12px; color:var(--mut); }
.bar { height:5px; background:#edf0f7; border-radius:99px; overflow:hidden; } .bar > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand-600)); }
.empty { padding:46px 20px; text-align:center; color:var(--mut); } .empty i { font-size:34px; color:#c3cbe0; display:block; margin-bottom:8px; }
.page-title { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.page-title h4 { font-weight:800; margin:0; letter-spacing:-.4px; } .page-title .sub { color:var(--mut); font-size:13px; }
.quick { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:#fff; text-decoration:none; color:var(--ink); font-weight:600; transition:all .15s; }
.quick:hover { border-color:var(--brand); box-shadow:0 6px 18px rgba(var(--brand-rgb),.14); transform:translateY(-1px); color:var(--brand-600); }
.quick .qi { width:38px; height:38px; border-radius:11px; background:var(--brand-50); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:17px; }
.swatch-pick { display:flex; gap:12px; flex-wrap:wrap; }
.swatch-pick label { cursor:pointer; text-align:center; font-size:12px; font-weight:600; color:var(--mut); text-transform:none; letter-spacing:0; }
.swatch-pick input { display:none; } .swatch-pick .dot { display:block; width:46px; height:46px; border-radius:14px; margin:0 auto 5px; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); transition:all .15s; }
.swatch-pick input:checked + .dot { box-shadow:0 0 0 3px var(--ink); transform:scale(1.06); }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; background:#fff; }
.login-art { background:linear-gradient(145deg,var(--brand-900),var(--brand)); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.login-art:before, .login-art:after { content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.07); }
.login-art:before { width:420px; height:420px; right:-120px; top:-120px; } .login-art:after { width:300px; height:300px; left:-90px; bottom:-90px; }
.login-art > * { position:relative; z-index:1; }
.login-art h1 { color:#fff; font-weight:800; font-size:34px; letter-spacing:-.8px; line-height:1.15; }
.login-art .feat { display:flex; gap:12px; align-items:center; margin-top:14px; font-size:14.5px; opacity:.92; }
.login-art .feat i { width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; }
.login-form { display:flex; align-items:center; justify-content:center; padding:40px; }
.login-form .box { width:100%; max-width:380px; }
@media (max-width:900px){ .login-wrap{grid-template-columns:1fr} .login-art{display:none} }

@media (max-width:991px){ .sidebar{position:static;width:100%;height:auto;max-height:55vh}.main{margin-left:0}.content{padding:16px} }
@media print { .sidebar, .topbar, .no-print { display:none !important; } .main { margin:0; } .content { padding:0; } }

/* row action buttons stay on one line */
.table td .text-nowrap { display:flex; gap:4px; flex-wrap:nowrap; }
.table td .text-nowrap .btn { flex:none; }
.table th:last-child, .table td:last-child { white-space:nowrap; }

/* ---------- Live filter bar (all listing screens) ---------- */
.filter-panel { padding:16px 18px; margin-bottom:16px; }
.filter-panel.fp-collapsed { padding-top:10px; padding-bottom:10px; }
.filter-panel.fp-collapsed .fp-head { margin-bottom:0; }
.filter-panel.fp-collapsed .fp-body { display:none; }
.filter-panel .fp-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.filter-panel .ttl { font-weight:700; color:var(--ink); font-size:14px; display:flex; align-items:center; gap:8px; }
.filter-panel label { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--mut); font-weight:700; margin-bottom:4px; display:block; }
.filter-panel .form-control, .filter-panel .form-select { height:38px; font-size:13.5px; }
.filter-panel .input-group-text { background:#fff; border-color:#dfe5f0; color:var(--mut); padding:0 .5rem; }
.filter-panel .input-group .form-control { min-width:0; padding-left:.55rem; padding-right:.35rem; }
.filter-panel .input-group > :not(:first-child) { margin-left:0; }
.search-wrap { position:relative; } .search-wrap i { position:absolute; left:12px; top:11px; color:#9aa5bd; } .search-wrap input { padding-left:34px; }
.btn-soft { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; font-size:13px; font-weight:600; padding:6px 13px; cursor:pointer; }
.btn-soft:hover { background:var(--brand-50); color:var(--brand-600); border-color:rgba(var(--brand-rgb),.3); }
#list-results { transition:opacity .15s; } #list-results.is-loading { opacity:.45; pointer-events:none; }
.res-head { display:flex; justify-content:space-between; align-items:center; margin:0 2px 10px; color:var(--mut); font-size:13px; }
.page-actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.page-actions h4 { margin:0; font-weight:800; letter-spacing:-.4px; }

/* ---------- Keyboard friendliness ---------- */
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.form-control:focus-visible, .form-select:focus-visible { outline:none; }
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible { box-shadow:0 0 0 3px rgba(var(--brand-rgb),.35); outline:none; }
tr.kb-row > td { background:rgba(var(--brand-rgb),.09) !important; }
tr.kb-row > td:first-child { box-shadow:inset 3px 0 0 var(--brand); }
kbd { background:#f1f4fb; border:1px solid #d9dfec; border-bottom-width:2px; border-radius:6px; padding:1px 7px; font-size:12px; color:var(--ink); font-family:inherit; font-weight:600; }
.kb-pal { position:fixed; inset:0; background:rgba(20,28,50,.45); backdrop-filter:blur(3px); z-index:3000; display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; }
.kb-pal-box { width:min(640px,92vw); background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(20,28,50,.35); overflow:hidden; }
.kb-pal-in { width:100%; border:0; border-bottom:1px solid var(--line); padding:18px 20px; font-size:16px; outline:none; }
.kb-pal-list { max-height:50vh; overflow:auto; padding:8px; }
.kb-pal-it { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:500; }
.kb-pal-it small { color:var(--mut); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; }
.kb-pal-it.on, .kb-pal-it:hover { background:var(--brand-50); color:var(--brand-600); }
.kb-pal-none { padding:22px; text-align:center; color:var(--mut); }
.kb-pal-foot { padding:9px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--mut); background:#fafbff; }
.kb-help { padding:0; max-height:80vh; overflow:auto; } .kb-help-h { display:flex; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; } .kb-help-h span { color:var(--mut); font-size:12px; }
.kb-help table { width:100%; font-size:13.5px; } .kb-help td { padding:9px 20px; border-bottom:1px solid #f0f2f8; vertical-align:top; } .kb-help td:first-child { white-space:nowrap; width:1%; }
.pill-key { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--mut); border-radius:10px; padding:6px 10px; font-size:12.5px; cursor:pointer; }
.pill-key:hover { background:var(--brand-50); color:var(--brand-600); }

/* Tom Select (searchable dropdowns) aligned with the theme */
.ts-wrapper.form-select, .ts-wrapper.form-control { padding:0; border:0; background:transparent; box-shadow:none; }
.ts-wrapper .ts-control { border:1px solid #dfe5f0; border-radius:10px; padding:.45rem .8rem; min-height:38px; box-shadow:none; background:#fff; font-size:14px; color:var(--ink); }
.ts-wrapper.form-select-sm .ts-control { min-height:31px; padding:.22rem .6rem; border-radius:8px; font-size:13px; }
.ts-wrapper.focus .ts-control { border-color:var(--brand); box-shadow:0 0 0 3.5px rgba(var(--brand-rgb),.14); }
.ts-wrapper.single .ts-control:after { border-color:#8793ad transparent transparent; right:12px; }
.ts-wrapper.disabled .ts-control { background:#f3f5fa; }
.ts-dropdown { border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(31,42,68,.16); z-index:3500; font-size:13.5px; overflow:hidden; }
.ts-dropdown .option { padding:8px 12px; } .ts-dropdown .active { background:var(--brand-50); color:var(--brand-600); }
.ts-control > input { min-width:30px !important; }
.filter-panel .ts-wrapper .ts-control { min-height:38px; }
td .ts-wrapper { min-width:150px; }

/* quick-add "+" button beside master dropdowns */
.qa-group { display:flex; gap:6px; align-items:stretch; width:100%; }
.qa-group > .ts-wrapper, .qa-group > select { flex:1 1 auto; min-width:0; }
.qa-add { flex:none; padding:0 .7rem; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; }
.qa-add.btn-sm { padding:0 .5rem; border-radius:8px; }
.ts-control .item[data-value=""] { color:#8793ad; }
td .qa-group { min-width:190px; }

/* ============================================================
   Responsive / mobile-first layer
   ============================================================ */
html { -webkit-text-size-adjust:100%; }
img, svg { max-width:100%; }
.content { overflow-x:hidden; }
.menu-btn, .side-backdrop { display:none; }
.table-responsive { -webkit-overflow-scrolling:touch; }

/* ---- Tablet & phone: off-canvas sidebar ---- */
@media (max-width:991.98px) {
  .sidebar { position:fixed; top:0; left:0; width:280px; max-width:84vw; height:100%; max-height:none; transform:translateX(-100%); transition:transform .25s ease; z-index:2000; box-shadow:none; padding-bottom:80px; }
  body.side-open .sidebar { transform:none; box-shadow:0 0 40px rgba(0,0,0,.35); }
  body.side-open { overflow:hidden; }
  .side-backdrop { display:block; position:fixed; inset:0; background:rgba(20,28,50,.5); z-index:1990; opacity:0; visibility:hidden; transition:opacity .25s; }
  body.side-open .side-backdrop { opacity:1; visibility:visible; }
  .menu-btn { display:inline-flex; flex:none; }
  .sidebar .nav-link { padding:12px 14px; font-size:14.5px; }
  .main { margin-left:0; }
  .topbar { padding:10px 14px; gap:10px; }
  .topbar > .tb-left { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
  .topbar h5 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .content { padding:14px 14px 90px; }
}

/* ---- Phone ---- */
@media (max-width:767.98px) {
  body { font-size:14px; }
  /* 16px inputs stop iOS zooming on focus; bigger tap targets */
  .form-control, .form-select, .ts-wrapper .ts-control, .ts-control > input { font-size:16px !important; }
  .form-control, .form-select { min-height:44px; }
  .form-control-sm, .form-select-sm { min-height:40px; font-size:16px; padding:.4rem .65rem; }
  .ts-wrapper .ts-control { min-height:44px; }
  .ts-wrapper.form-select-sm .ts-control { min-height:40px; }
  input[type=checkbox], input[type=radio] { width:1.15em; height:1.15em; }
  .btn { min-height:42px; padding:.55rem 1rem; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .btn-sm { min-height:38px; padding:.4rem .75rem; }
  .table td .btn-sm { padding:.4rem .7rem; }
  .icon-btn { width:40px; height:40px; }
  .card-body { padding:16px; }
  .page-title h4 { font-size:19px; }
  .page-actions, .page-title { align-items:stretch; }
  .page-actions > div:last-child .btn { width:100%; }
  .page-actions > div:last-child { flex:1 1 100%; }
  .filter-panel { padding:12px 14px; }
  .filter-panel .fp-head .ttl .fp-count { margin-left:2px; }
  .filter-panel .fp-body > [class*="col-"] { width:100%; }
  .filter-panel .form-control, .filter-panel .form-select { height:44px; font-size:16px; }
  .search-wrap i { top:14px; }
  .btn-soft { padding:9px 14px; min-height:40px; }
  .res-head { font-size:13px; }
  .kpis { grid-template-columns:repeat(2,1fr); gap:10px; }
  .kpi { padding:12px 14px; }
  .kpi .v { font-size:19px; word-break:break-word; }
  .kpi .ic { width:32px; height:32px; margin-bottom:8px; font-size:15px; }
  .quick { padding:12px; gap:10px; font-size:13px; }
  .quick .qi { width:34px; height:34px; flex:none; }
  .login-form { padding:24px 18px; align-items:flex-start; padding-top:12vh; }
  .login-form .box { max-width:none; }
  .pagination { flex-wrap:wrap; justify-content:center; }
  .page-link { padding:.5rem .75rem; }
  nav .d-none.flex-sm-fill, nav .flex-sm-fill > div:first-child { text-align:center; }
  .dropdown-menu { max-width:92vw; }
  .modal-dialog { margin:.6rem; }
  .kb-pal { padding-top:6vh; }
  .btn-group-sm > .btn { min-height:40px; }

  /* form action buttons: full width, thumb friendly */
  .content form > .btn, .content form > a.btn { display:flex; width:100%; margin-top:8px; }
  .content form > .btn-primary { margin-top:4px; }
  .content .card .btn.w-sm-auto { width:auto; }
  .row > [class*="col-"] > .btn:only-child { width:100%; }

  /* Header strips with a title on the left & buttons on the right wrap nicely */
  .card-body > .d-flex.justify-content-between { flex-wrap:wrap; gap:10px; }

  /* ---- Tables turn into stacked cards (data-label is added by responsive.js) ---- */
  .table-responsive > .table.m-stack { min-width:0; }
  .table.m-stack, .table.m-stack tbody, .table.m-stack tr, .table.m-stack td { display:block; width:100% !important; }
  .table.m-stack thead { display:none; }
  .table.m-stack tbody tr { border:1px solid var(--line); border-radius:12px; margin:0 0 10px; padding:6px 12px; background:#fff; box-shadow:0 1px 2px rgba(31,42,68,.04); }
  .card > .table-responsive > .table.m-stack tbody { padding:10px; background:var(--bg); border-radius:var(--radius); }
  .table.m-stack > :not(caption) > * > * { border-bottom:0; }
  .table.m-stack td { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:8px 0 !important; border-bottom:1px dashed #edf0f7 !important; text-align:right !important; min-height:36px; word-break:break-word; background:transparent !important; }
  .table.m-stack td:last-child { border-bottom:0 !important; }
  .table.m-stack td[data-label]:not([data-label=""])::before { content:attr(data-label); flex:none; max-width:42%; text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; color:var(--mut); }
  .table.m-stack td:not([data-label]), .table.m-stack td[data-label=""] { justify-content:flex-end; }
  .table.m-stack td[colspan] { display:block; text-align:center !important; }
  .table.m-stack td > .form-control, .table.m-stack td > .form-select, .table.m-stack td > .ts-wrapper, .table.m-stack td > .qa-group, .table.m-stack td > input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { flex:1 1 auto; min-width:0 !important; max-width:62%; margin-left:auto; text-align:left; }
  .table.m-stack td .qa-group { min-width:0; }
  .table.m-stack td[data-label] > .ts-wrapper, .table.m-stack td[data-label] > .qa-group { max-width:62%; }
  .table.m-stack td .text-nowrap { justify-content:flex-end; }
  .table.m-stack tfoot { display:block; }
  .table.m-stack tfoot tr { background:var(--brand-50); border-color:rgba(var(--brand-rgb),.2); }
  .table.m-stack tfoot td { border-top:0 !important; }
  .table.m-stack tr.kb-row { outline:2px solid var(--brand); }
  /* two-column summary tables (totals) stay as they are */
  .table.m-stack.m-keep { display:table; }

  /* Settings / vertical tab lists scroll sideways */
  .list-group { flex-direction:row; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .list-group-item { flex:none; border-left:0; }
  .list-group-item.active { border-left:0; border-bottom:3px solid var(--brand); }
  .nav-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; white-space:nowrap; }
  .nav-tabs .nav-link { flex:none; }

  /* Job Work Register keeps its own wide table: horizontal swipe */
  .reg .tbl-wrap { max-height:none; -webkit-overflow-scrolling:touch; }
  .reg .flt { padding:12px 14px; }
  .reg .flt .form-control, .reg .flt .form-select { height:44px; font-size:16px; }
  .reg .kpis { grid-template-columns:repeat(2,1fr); }
  .reg .tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .reg .tab { flex:none; }
  .reg .page-head .d-flex { width:100%; } .reg .page-head .btn-soft { flex:1; text-align:center; justify-content:center; display:inline-flex; align-items:center; gap:6px; }
  .reg .dgrid { grid-template-columns:1fr; }
}

/* ---- Small phones ---- */
@media (max-width:420px) {
  .content { padding:12px 10px 90px; }
  .topbar { padding:8px 10px; }
  .topbar .gap-3 { gap:.5rem !important; }
  .kpi .v { font-size:17px; }
  .quick { flex-direction:column; text-align:center; gap:6px; padding:12px 6px; }
}

/* Landscape phones: keep the topbar slim */
@media (max-height:480px) and (orientation:landscape) { .topbar { position:static; } .sidebar .brand { position:static; } }

/* ---- Print preview pages (invoice / challan print) on small screens ---- */
@media screen and (max-width:820px) {
  body > .no-print { width:auto; padding:0 10px; }
  body > .sheet, .sheet { width:auto; max-width:100%; margin:8px; padding:10px; overflow-x:auto; }
  .sheet table { font-size:11.5px; }
}

/* ============================================================
   PREMIUM "ENGLISH HERITAGE" LAYER
   Navy / racing-green / burgundy + brass-gold accent, warm ivory canvas
   ============================================================ */
[data-theme="royal"]    { --brand:#1f3a68; --brand-600:#162c52; --brand-50:#eef2f9; --brand-900:#0d1a33; --brand-rgb:31,58,104; }
[data-theme="racing"]   { --brand:#1b5e3b; --brand-600:#134a2d; --brand-50:#ecf5ef; --brand-900:#0a2a1a; --brand-rgb:27,94,59; }
[data-theme="burgundy"] { --brand:#7a1f2e; --brand-600:#621825; --brand-50:#f9eef0; --brand-900:#2e0b12; --brand-rgb:122,31,46; }
:root { --accent:#b8923a; --accent-600:#9c7a2c; --accent-50:#faf4e4; --accent-rgb:184,146,58;
  --ink:#18203a; --mut:#6a6e80; --line:#e9e3d6; --bg:#f6f3ec; --card:#fffefb; --radius:14px;
  --shadow:0 1px 2px rgba(24,32,58,.05), 0 8px 24px rgba(24,32,58,.06); }
[data-side="dark"] { --side-bg:linear-gradient(180deg,#0f1b34 0%,#0a1427 100%); --side-ink:#b4bdd3; --side-head:#b8923a; }
[data-theme="racing"][data-side="dark"] { --side-bg:linear-gradient(180deg,#0c2a1c 0%,#071a11 100%); }
[data-theme="burgundy"][data-side="dark"] { --side-bg:linear-gradient(180deg,#2e0b12 0%,#1c070b 100%); }
[data-side="brand"] { --side-bg:linear-gradient(180deg,var(--brand-900),var(--brand-600)); --side-head:#d9b866; }
[data-side="light"] { --side-bg:#fffefb; --side-head:var(--accent-600); }

html, body { background:var(--bg); }
body { background:radial-gradient(1200px 500px at 85% -10%, rgba(var(--accent-rgb),.10), transparent 60%), var(--bg); background-attachment:fixed; }
h1,h2,h3,.page-title h4,.login-art h1,.login-form h3 { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing:0; }
.page-title h4 { font-weight:700; font-size:26px; }
.topbar h5 { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight:700; font-size:19px; letter-spacing:0; }

/* sidebar */
.sidebar { background:var(--side-bg); border-right:0; box-shadow:2px 0 24px rgba(10,20,39,.18); }
.sidebar .brand { background:transparent; border-bottom:1px solid var(--side-border); }
.sidebar .brand .logo { background:linear-gradient(135deg,#d9b866,var(--accent) 55%,var(--accent-600)); color:#0d1a33; box-shadow:0 6px 16px rgba(var(--accent-rgb),.38); }
.sidebar .brand .t { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size:15px; letter-spacing:.2px; }
.sidebar .brand .t small { font-family:Inter,sans-serif; letter-spacing:1.4px; text-transform:uppercase; font-size:9.5px; color:var(--side-head); opacity:.9; }
.sidebar .nav-head { letter-spacing:1.8px; font-size:10px; display:flex; align-items:center; gap:10px; }
.sidebar .nav-head:after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(var(--accent-rgb),.45),transparent); }
.sidebar .nav-link:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar .nav-link.active { background:linear-gradient(90deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.04)); color:#fff; box-shadow:inset 3px 0 0 var(--accent); border-radius:0 10px 10px 0; margin-left:0; padding-left:24px; }
.sidebar .nav-link.active i { color:#e3c779; opacity:1; }
[data-side="light"] .sidebar .nav-link.active { color:var(--brand-600); background:linear-gradient(90deg,var(--accent-50),transparent); }
[data-side="light"] .sidebar { box-shadow:2px 0 18px rgba(24,32,58,.06); border-right:1px solid var(--line); }

/* topbar */
.topbar { background:rgba(255,254,251,.88); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(var(--accent-rgb),.35), 0 6px 20px rgba(24,32,58,.04); }
.avatar { background:linear-gradient(135deg,var(--brand),var(--brand-900)); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
.icon-btn, .pill-key { background:var(--card); }
.icon-btn:hover, .pill-key:hover { background:var(--accent-50); color:var(--accent-600); border-color:rgba(var(--accent-rgb),.4); }

/* cards & panels */
.card, .panel { background:var(--card); border:1px solid var(--line) !important; box-shadow:var(--shadow) !important; position:relative; }
.card .card-body > h6:first-child { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; text-transform:none; letter-spacing:.2px; font-size:15px; color:var(--brand); border-bottom:1px solid var(--line); position:relative; }
.card .card-body > h6:first-child:after { content:''; position:absolute; left:0; bottom:-1px; width:38px; height:2px; background:var(--accent); }
.kpi { overflow:hidden; }
.kpi:before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--accent),transparent); }
.kpi .v { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight:700; color:var(--brand); }
.quick { background:var(--card); }
.quick:hover { border-color:var(--accent); box-shadow:0 8px 22px rgba(var(--accent-rgb),.18); color:var(--brand); }
.quick .qi { background:linear-gradient(135deg,var(--brand),var(--brand-900)); color:#e3c779; }

/* tables */
.table thead th, .table-light, .table > thead.table-light > tr > th { background:#f8f4ea !important; color:#6e6247 !important; border-bottom:1px solid #e3d9bf !important; }
.table tfoot td, .table tfoot.table-light td { background:#f8f4ea !important; border-top:2px solid #e3d9bf; }
.table > :not(caption) > * > * { border-bottom-color:#f0ebdf; }
.table-hover > tbody > tr:hover > * { background:#fbf8f0; --bs-table-hover-bg:#fbf8f0; }
.reg thead th { background:#f8f4ea; color:#6e6247; } .reg tfoot td { background:#f8f4ea; }
.reg .detail > td { background:#fbf8f0; }

/* forms */
.form-control, .form-select, .ts-wrapper .ts-control, .filter-panel .input-group-text { border-color:#ddd5c3; background-color:#fff; }
.form-control:focus, .form-select:focus, .ts-wrapper.focus .ts-control { border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(var(--accent-rgb),.18); }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }
.form-label, .filter-panel label { color:#756a4f; }
.form-control:disabled, .form-select:disabled { background:#f4f0e6; }

/* buttons */
.btn-primary { --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand-900); --bs-btn-hover-border-color:var(--brand-900); --bs-btn-active-bg:var(--brand-900); --bs-btn-active-border-color:var(--brand-900); background-image:linear-gradient(180deg,rgba(255,255,255,.10),transparent); box-shadow:0 4px 14px rgba(var(--brand-rgb),.30); }
.btn-primary:hover { box-shadow:0 6px 18px rgba(var(--brand-rgb),.38), 0 0 0 1px rgba(var(--accent-rgb),.5); }
.btn-outline-primary:hover { color:#fff; }
.btn-light, .btn-soft { background:var(--card); }
.btn-soft:hover { background:var(--accent-50); color:var(--accent-600); border-color:rgba(var(--accent-rgb),.4); }
.btn-outline-secondary { --bs-btn-border-color:#d8cfba; --bs-btn-hover-bg:var(--accent-50); --bs-btn-hover-border-color:rgba(var(--accent-rgb),.5); }

/* misc */
.badge.bg-primary, .st-primary { background:var(--brand-50) !important; color:var(--brand) !important; }
.page-item.active .page-link { background:var(--brand); border-color:var(--brand); }
.page-link { background:var(--card); border-color:var(--line); }
.list-group-item { background:var(--card); }
.list-group-item.active { background:var(--accent-50); color:var(--brand); border-left-color:var(--accent); }
.nav-tabs .nav-link.active { color:var(--brand); border-bottom-color:var(--accent); }
.dropdown-menu { background:var(--card); border-color:var(--line); }
.ts-dropdown { background:var(--card); } .ts-dropdown .active { background:var(--accent-50); color:var(--brand); }
.reg .tab.on { background:var(--brand); border-color:var(--brand); }
.reg .panel, .reg .dcard { background:var(--card); }
.alert-info { background:#eef2f9; color:var(--brand); border-left-color:var(--brand); }
.bar > i, .reg .bar > i { background:linear-gradient(90deg,var(--brand),var(--accent)); }
hr { border-color:var(--line); }
::selection { background:rgba(var(--accent-rgb),.3); }

/* login */
.login-wrap { background:var(--bg); }
.login-art { background:linear-gradient(150deg,var(--brand-900) 0%,var(--brand) 100%); }
.login-art:before, .login-art:after { background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.25); }
.login-art h1 { font-size:38px; font-weight:700; }
.login-art h1:after { content:''; display:block; width:64px; height:3px; background:var(--accent); margin-top:18px; }
.login-art .feat i { background:rgba(var(--accent-rgb),.22); color:#e3c779; }
.login-art .avatar { background:linear-gradient(135deg,#d9b866,var(--accent)) !important; color:#0d1a33; box-shadow:none; }
.login-form { background:var(--card); }
.login-form h3 { font-size:30px; }

@media (max-width:767.98px) {
  .page-title h4 { font-size:21px; }
  .table.m-stack tbody tr { background:var(--card); border-color:var(--line); }
  .card > .table-responsive > .table.m-stack tbody { background:var(--bg); }
  .table.m-stack tfoot tr { background:var(--accent-50); border-color:rgba(var(--accent-rgb),.3); }
  .sidebar .nav-link.active { margin-left:0; }
}

/* ============================================================
   Modals, buttons & tooltips (premium)
   ============================================================ */
.modal-backdrop { --bs-backdrop-bg:#0d1a33; --bs-backdrop-opacity:.55; }
.modal-backdrop.show { backdrop-filter:blur(3px); }
.modal-content { border:0; border-radius:18px; background:var(--card); box-shadow:0 30px 80px rgba(13,26,51,.35); overflow:hidden; }
.modal.fade .modal-dialog { transform:translateY(24px) scale(.97); transition:transform .28s cubic-bezier(.2,.9,.3,1.2); }
.modal.show .modal-dialog { transform:none; }
.modal-header { background:linear-gradient(135deg,var(--brand-900),var(--brand)); color:#fff; border:0; padding:16px 22px; position:relative; }
.modal-header:after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--accent),#e3c779,var(--accent)); }
.modal-title { color:#fff; font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight:700; font-size:18px; display:flex; align-items:center; gap:10px; }
.modal-title i { color:#e3c779; }
.modal-header .btn-close { filter:invert(1) grayscale(1) brightness(2); opacity:.8; border-radius:50%; padding:.6rem; background-color:rgba(255,255,255,.12); background-size:.8em; min-height:0; }
.modal-header .btn-close:hover { opacity:1; background-color:rgba(255,255,255,.25); }
.modal-body { padding:22px; }
.modal-footer { background:#f8f4ea; border-top:1px solid var(--line); padding:14px 22px; gap:10px; }
.modal-footer .btn { min-width:110px; }

/* confirm dialog */
.cfm .modal-content { max-width:420px; margin:auto; }
.cfm .modal-body { padding:30px 28px 26px; }
.cfm-ic { width:68px; height:68px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:30px; animation:cfmPop .45s cubic-bezier(.2,1.4,.4,1); }
.cfm-danger .cfm-ic { background:#ffe8e8; color:#c92a2a; box-shadow:0 0 0 8px #fff3f3; }
.cfm-warning .cfm-ic { background:var(--accent-50); color:var(--accent-600); box-shadow:0 0 0 8px #fdf9ee; }
.cfm-primary .cfm-ic { background:var(--brand-50); color:var(--brand); box-shadow:0 0 0 8px #f6f8fc; }
.cfm-t { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight:700; font-size:21px; margin-bottom:6px; }
.cfm-m { color:var(--mut); font-size:14px; margin-bottom:22px; white-space:pre-line; }
.cfm-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cfm-btns .btn { flex:1 1 140px; }
@keyframes cfmPop { 0% { transform:scale(.4); opacity:0; } 100% { transform:scale(1); opacity:1; } }

/* buttons */
.btn { position:relative; letter-spacing:.1px; }
.btn:not(:disabled):hover { transform:translateY(-1px); }
.btn:not(:disabled):active { transform:translateY(0) scale(.98); box-shadow:none; }
.btn:disabled, .btn.disabled { opacity:.55; }
.btn-danger { --bs-btn-bg:#d03a3a; --bs-btn-border-color:#d03a3a; --bs-btn-hover-bg:#b32b2b; --bs-btn-hover-border-color:#b32b2b; --bs-btn-active-bg:#a02424; box-shadow:0 4px 14px rgba(208,58,58,.3); }
.btn-warning { --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-color:#fff; --bs-btn-hover-bg:var(--accent-600); --bs-btn-hover-border-color:var(--accent-600); --bs-btn-hover-color:#fff; box-shadow:0 4px 14px rgba(var(--accent-rgb),.35); }
.btn-success { --bs-btn-bg:#2f9e5a; --bs-btn-border-color:#2f9e5a; --bs-btn-hover-bg:#257f48; --bs-btn-hover-border-color:#257f48; box-shadow:0 4px 14px rgba(47,158,90,.28); }
.btn-outline-danger { --bs-btn-color:#c92a2a; --bs-btn-hover-bg:#d03a3a; --bs-btn-hover-border-color:#d03a3a; --bs-btn-hover-color:#fff; }
.btn-outline-success { --bs-btn-color:#2b8a3e; --bs-btn-hover-bg:#2f9e5a; --bs-btn-hover-border-color:#2f9e5a; }
.btn-light:hover { border-color:rgba(var(--accent-rgb),.5); }
/* icon-only action buttons in tables */
.table td .btn-sm:not(:has(:not(i))):not(.btn-link) { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; }
.table td .btn-sm i { font-size:14px; }
.table td .btn-outline-primary { background:var(--brand-50); }
.table td .btn-outline-danger { background:#fff4f4; }
.table td .btn-outline-secondary { background:#f8f4ea; }
.table td .btn-outline-primary:hover, .table td .btn-outline-danger:hover { background:var(--bs-btn-hover-bg); }

/* tooltips */
.tooltip { --bs-tooltip-bg:#0d1a33; --bs-tooltip-color:#fff; --bs-tooltip-opacity:1; --bs-tooltip-border-radius:9px; --bs-tooltip-padding-x:.75rem; --bs-tooltip-padding-y:.4rem; --bs-tooltip-font-size:12.5px; z-index:6000; pointer-events:none; }
.tooltip .tooltip-inner { font-weight:600; letter-spacing:.2px; border:1px solid rgba(var(--accent-rgb),.55); box-shadow:0 8px 22px rgba(13,26,51,.3); max-width:240px; }
.tooltip .tooltip-arrow:before { border-top-color:#0d1a33; border-bottom-color:#0d1a33; }

@media (max-width:767.98px) {
  .modal-dialog:not(.modal-dialog-centered) { margin:.5rem; }
  .modal-footer .btn { flex:1 1 0; }
  .modal-header { padding:14px 16px; } .modal-body { padding:16px; }
  .cfm .modal-body { padding:26px 20px 20px; }
  .table.m-stack td .btn-sm:not(:has(:not(i))) { width:40px; height:40px; }
}

/* ============================================================
   SIDEBAR — "Midnight Aurora" (data-side="dark", all theme colours)
   Matches the dashboard hero: midnight navy + teal / violet glow + gold
   ============================================================ */
[data-side="dark"] { --sa-teal:#5eead4; --sa-violet:#a78bfa; --sa-gold:#e9d08a; --side-ink:#a9b3cf; --side-head:#7d89ab; --side-border:rgba(255,255,255,.07); }
[data-side="dark"] .sidebar {
  background:
    radial-gradient(260px 220px at 0% 0%, rgba(45,212,191,.22), transparent 70%),
    radial-gradient(300px 260px at 100% 100%, rgba(139,92,246,.30), transparent 70%),
    radial-gradient(200px 300px at 110% 40%, rgba(139,92,246,.10), transparent 70%),
    linear-gradient(180deg, #0b1124 0%, #0a0f1f 55%, #0d1230 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.05), 8px 0 40px -10px rgba(10,15,31,.55); }
[data-side="dark"] .sidebar::-webkit-scrollbar-thumb { background:rgba(167,139,250,.25); }

/* brand */
[data-side="dark"] .sidebar .brand { background:rgba(11,17,36,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.06); padding:20px 18px 18px; }
[data-side="dark"] .sidebar .brand:after { content:''; position:absolute; left:18px; right:18px; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, rgba(94,234,212,.6), rgba(167,139,250,.6), transparent); }
[data-side="dark"] .sidebar .brand .logo { position:relative; width:40px; height:40px; border-radius:12px; color:#fff; font-size:17px;
  background:linear-gradient(135deg, #2dd4bf 0%, #7c5cf0 55%, #e3b860 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 8px 22px -4px rgba(124,92,240,.65), 0 0 24px -2px rgba(45,212,191,.45); }
[data-side="dark"] .sidebar .brand .logo:after { content:''; position:absolute; inset:-5px; border-radius:15px; border:1px solid rgba(167,139,250,.35); animation:saPulse 3.2s ease-in-out infinite; }
[data-side="dark"] .sidebar .brand .t { color:#fff; font-weight:800; letter-spacing:-.2px; }
[data-side="dark"] .sidebar .brand .t small { color:var(--sa-gold); opacity:.85; }

/* section heads */
[data-side="dark"] .sidebar .nav-head { color:var(--side-head); padding:20px 22px 8px; font-size:10px; letter-spacing:2px; }
[data-side="dark"] .sidebar .nav-head:after { background:linear-gradient(90deg, rgba(94,234,212,.35), rgba(167,139,250,.15) 60%, transparent); }

/* links */
[data-side="dark"] .sidebar .nav-link { color:var(--side-ink); margin:2px 12px; padding:6px 12px 6px 7px; border-radius:12px; gap:12px; font-weight:500; border:1px solid transparent;
  transition:background .2s, color .2s, transform .2s, border-color .2s, box-shadow .2s; }
[data-side="dark"] .sidebar .nav-link i { width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-size:15px; opacity:1;
  color:#8f9bbd; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); transition:all .2s; }
[data-side="dark"] .sidebar .nav-link:hover { color:#fff; background:rgba(255,255,255,.045); transform:translateX(3px); }
[data-side="dark"] .sidebar .nav-link:hover i { color:var(--sa-teal); background:rgba(45,212,191,.12); box-shadow:inset 0 0 0 1px rgba(94,234,212,.3), 0 0 16px -2px rgba(45,212,191,.45); }

/* active: glass pill with gradient border + glowing rail */
[data-side="dark"] .sidebar .nav-link.active { color:#fff; font-weight:600; margin:2px 12px; padding:6px 12px 6px 7px; border-radius:12px; transform:none; border:1px solid transparent;
  background:
    linear-gradient(100deg, rgba(45,212,191,.16), rgba(124,92,240,.20) 60%, rgba(124,92,240,.08)) padding-box,
    linear-gradient(100deg, rgba(94,234,212,.75), rgba(167,139,250,.55) 55%, rgba(167,139,250,.08)) border-box;
  box-shadow:0 10px 26px -12px rgba(124,92,240,.75), 0 0 0 1px rgba(255,255,255,.02); }
[data-side="dark"] .sidebar .nav-link.active:before { content:''; position:absolute; left:-12px; top:50%; width:4px; height:22px; transform:translateY(-50%); border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--sa-teal), var(--sa-violet)); box-shadow:0 0 14px 2px rgba(94,234,212,.55); }
[data-side="dark"] .sidebar .nav-link.active i { color:#fff; background:linear-gradient(135deg, #2dd4bf, #7c5cf0); box-shadow:0 6px 16px -4px rgba(124,92,240,.8), inset 0 1px 0 rgba(255,255,255,.3); }
[data-side="dark"] .sidebar .nav-link:focus-visible { box-shadow:0 0 0 2px rgba(94,234,212,.6); }

@keyframes saPulse { 0%,100% { opacity:.35; transform:scale(1); } 50% { opacity:.9; transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce) { [data-side="dark"] .sidebar .brand .logo:after { animation:none; } [data-side="dark"] .sidebar .nav-link:hover { transform:none; } }
@media (max-width:991.98px) { [data-side="dark"] .sidebar .nav-link { padding:8px 12px 8px 7px; } }

/* ============================================================
   THEME — "Midnight Aurora" (data-theme="aurora")
   Violet brand + teal accent on a cool, airy canvas
   ============================================================ */
[data-theme="aurora"] { --brand:#6d5cf6; --brand-600:#5a48e6; --brand-50:#f0eeff; --brand-900:#1b1446; --brand-rgb:109,92,246;
  --accent:#14b8a6; --accent-600:#0f9488; --accent-50:#e6faf6; --accent-rgb:20,184,166;
  --ink:#141a33; --mut:#6b7190; --line:#e7e9f3; --bg:#f4f5fb; --card:#ffffff;
  --shadow:0 1px 2px rgba(20,26,51,.04), 0 10px 28px -14px rgba(20,26,51,.16); }
[data-theme="aurora"] body { background:
    radial-gradient(900px 420px at 100% -8%, rgba(109,92,246,.10), transparent 60%),
    radial-gradient(700px 380px at 30% -12%, rgba(20,184,166,.08), transparent 60%), var(--bg); background-attachment:fixed; }
[data-theme="aurora"] .topbar { background:rgba(255,255,255,.78); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); box-shadow:0 1px 0 var(--line), 0 8px 24px -16px rgba(20,26,51,.18); }
[data-theme="aurora"] .avatar { background:linear-gradient(135deg,#2dd4bf,#7c5cf0); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px rgba(124,92,240,.45), 0 6px 14px -4px rgba(124,92,240,.6); }
[data-theme="aurora"] .card .card-body > h6:first-child:after, [data-theme="aurora"] .kpi:before { background:linear-gradient(90deg,var(--accent),var(--brand)); }
[data-theme="aurora"] .btn-primary { background-image:linear-gradient(135deg,#7c6cf8,#5a48e6); border:0; box-shadow:0 8px 20px -8px rgba(109,92,246,.7); }
[data-theme="aurora"] .btn-primary:hover { background-image:linear-gradient(135deg,#6d5cf6,#4a38d6); box-shadow:0 10px 24px -8px rgba(109,92,246,.8); }
[data-theme="aurora"] .quick .qi { background:linear-gradient(135deg,#2dd4bf,#7c5cf0); color:#fff; }
/* cool neutrals in place of the warm ivory ones */
[data-theme="aurora"] .table thead th, [data-theme="aurora"] .table-light, [data-theme="aurora"] .table > thead.table-light > tr > th,
[data-theme="aurora"] .table tfoot td, [data-theme="aurora"] .reg thead th, [data-theme="aurora"] .reg tfoot td { background:#f6f6fc !important; color:#565d82 !important; border-color:#e5e7f2 !important; }
[data-theme="aurora"] .table > :not(caption) > * > * { border-bottom-color:#eef0f7; }
[data-theme="aurora"] .table-hover > tbody > tr:hover > * { background:#f7f6ff; --bs-table-hover-bg:#f7f6ff; }
[data-theme="aurora"] .reg .detail > td { background:#f8f8fd; }
[data-theme="aurora"] .form-control, [data-theme="aurora"] .form-select, [data-theme="aurora"] .ts-wrapper .ts-control, [data-theme="aurora"] .filter-panel .input-group-text { border-color:#dfe2ee; }
[data-theme="aurora"] .form-label, [data-theme="aurora"] .filter-panel label { color:#5d6486; }
[data-theme="aurora"] .form-control:disabled, [data-theme="aurora"] .form-select:disabled { background:#f3f4f9; }
[data-theme="aurora"] .btn-outline-secondary { --bs-btn-border-color:#dcdfeb; }
[data-theme="aurora"] .modal-footer, [data-theme="aurora"] .table td .btn-outline-secondary { background:#f6f6fc; }
[data-theme="aurora"] .modal-header { background:linear-gradient(135deg,#0b1124,#1b1446 60%,#2a1f6b); }
[data-theme="aurora"] .modal-header:after { background:linear-gradient(90deg,#5eead4,#a78bfa,#e9d08a); }
[data-theme="aurora"] .modal-title i { color:#5eead4; }
[data-theme="aurora"] .login-art { background:radial-gradient(500px 300px at 90% 0%, rgba(45,212,191,.3), transparent 60%), radial-gradient(500px 340px at 10% 110%, rgba(139,92,246,.4), transparent 60%), linear-gradient(150deg,#0a0f1f,#151f3d); }
[data-theme="aurora"] .login-art .feat i { color:#5eead4; background:rgba(45,212,191,.14); }
[data-theme="aurora"] .login-art h1:after { background:linear-gradient(90deg,#5eead4,#a78bfa); }
[data-theme="aurora"] ::selection { background:rgba(109,92,246,.25); }

/* ============================================================
   TOPBAR — premium glass bar
   ============================================================ */
.topbar.tb { display:flex; align-items:center; gap:18px; padding:12px 24px; min-height:68px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-bottom:0; box-shadow:none; transition:box-shadow .25s, background .25s; }
.topbar.tb:after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(94,234,212,0), rgba(45,212,191,.55) 20%, rgba(124,92,240,.55) 55%, rgba(233,208,138,.5) 80%, rgba(233,208,138,0)); }
.topbar.tb.scrolled { box-shadow:0 14px 30px -18px rgba(20,26,51,.28); background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84)); }

/* left: icon + crumb + title */
.tb-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.tb-ic { width:40px; height:40px; flex:none; border-radius:12px; align-items:center; justify-content:center; font-size:17px; color:#fff;
  background:linear-gradient(135deg, #2dd4bf, #7c5cf0); box-shadow:0 8px 18px -8px rgba(124,92,240,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.tb-title { min-width:0; }
.tb-crumb { font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--mut); line-height:1; margin-bottom:4px; }
.topbar.tb h5 { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size:19px; font-weight:800; letter-spacing:-.4px; line-height:1.15; margin:0; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* centre: command search */
.tb-search { position:relative; align-items:center; gap:10px; width:min(380px, 32vw); height:42px; padding:0 8px 0 14px; border-radius:13px; cursor:pointer;
  font-size:13.5px; color:var(--mut); text-align:left; border:1px solid transparent;
  background:linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--line), var(--line)) border-box;
  box-shadow:0 1px 2px rgba(20,26,51,.04), inset 0 1px 0 #fff; transition:box-shadow .2s, transform .2s; }
.tb-search > span { flex:1; }
.tb-search > i { font-size:15px; color:var(--brand); }
.tb-search kbd { font-size:11px; padding:2px 7px; background:#f4f5fb; border:1px solid #e3e6f1; border-bottom-width:2px; color:#565d82; }
.tb-search:hover, .tb-search:focus-visible { outline:none;
  background:linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #2dd4bf, #7c5cf0, #e9b860) border-box;
  box-shadow:0 10px 26px -14px rgba(124,92,240,.55); }

/* right: dock + user */
.tb-right { display:flex; align-items:center; gap:12px; flex:none; }
.tb-dock { display:flex; align-items:center; gap:2px; padding:3px; border-radius:13px; background:rgba(244,245,251,.9); border:1px solid var(--line); }
.tb-btn { width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:#5b6285; display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:all .2s; }
.tb-btn:hover, .tb-btn[aria-expanded="true"] { background:#fff; color:var(--brand); box-shadow:0 4px 12px -6px rgba(20,26,51,.3); }
.tb-btn:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }

.tb-user { display:flex; align-items:center; gap:10px; padding:4px 12px 4px 4px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); text-align:left;
  box-shadow:0 1px 2px rgba(20,26,51,.04); transition:box-shadow .2s, border-color .2s; }
.tb-user:hover, .tb-user[aria-expanded="true"] { border-color:color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow:0 10px 24px -14px rgba(124,92,240,.6); }
.tb-user:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.tb-user .avatar { position:relative; width:34px; height:34px; font-size:13.5px; font-weight:800; background:linear-gradient(135deg, #2dd4bf, #7c5cf0); box-shadow:0 6px 14px -6px rgba(124,92,240,.7); }
.tb-online { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid #fff; }
.tb-user-t { line-height:1.15; }
.tb-user-t .nm { display:block; font-size:13px; font-weight:700; }
.tb-user-t .rl { display:inline-block; margin-top:2px; font-size:10.5px; font-weight:700; letter-spacing:.3px; color:var(--brand); background:var(--brand-50); padding:1px 7px; border-radius:999px; }
.tb-chev { font-size:11px; color:var(--mut); transition:transform .2s; }
.tb-user[aria-expanded="true"] .tb-chev { transform:rotate(180deg); }

.tb-menu { min-width:250px; padding:8px; border-radius:16px; border:1px solid var(--line); box-shadow:0 24px 50px -20px rgba(20,26,51,.35); margin-top:8px !important; }
.tb-menu-h { display:flex; align-items:center; gap:12px; padding:12px; margin:-8px -8px 8px; border-radius:16px 16px 0 0; color:#fff;
  background:radial-gradient(200px 120px at 100% 0%, rgba(45,212,191,.35), transparent 70%), linear-gradient(135deg, #0b1124, #1b1446 60%, #2a1f6b); }
.tb-menu-h .avatar.lg { width:42px; height:42px; font-size:16px; font-weight:800; background:linear-gradient(135deg, #2dd4bf, #7c5cf0); box-shadow:0 0 0 2px rgba(255,255,255,.25); flex:none; }
.tb-menu-h .nm { font-weight:700; font-size:14px; }
.tb-menu-h .em { font-size:12px; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-menu .min-w-0 { min-width:0; }
.tb-menu .dropdown-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:13.5px; font-weight:500; }
.tb-menu .dropdown-item i { width:18px; color:var(--mut); }
.tb-menu .dropdown-item:hover { background:var(--brand-50); color:var(--brand-600); } .tb-menu .dropdown-item:hover i { color:var(--brand); }
.tb-menu .tb-logout:hover { background:#fff1f2; color:#be123c; } .tb-menu .tb-logout:hover i { color:#e11d48; }

@media (max-width:991.98px) { .topbar.tb { padding:10px 14px; min-height:60px; gap:10px; } .tb-ic { width:36px; height:36px; } }
@media (max-width:575.98px) { .tb-crumb { display:none; } .topbar.tb h5 { font-size:17px; } .tb-right { gap:8px; } .tb-dock { padding:2px; } }
.topbar.tb { z-index:1020; }
/* glass blur lives on a background layer, so dropdowns that overflow the bar paint above the page */
.topbar.tb, [data-theme] .topbar.tb { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.topbar.tb:before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; transition:background .25s;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%); }
.topbar.tb.scrolled:before { background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86)); }

/* Tom Select: the library draws the border on the wrapper (.form-select/.form-control) and forces
   .ts-control to border:none!important — so the border must live on the wrapper, like a native input. */
.ts-wrapper.form-select, .ts-wrapper.form-control { border-width:1px !important; border-style:solid !important; border-radius:10px; background-color:#fff; background-image:none; padding:0; transition:border-color .15s, box-shadow .15s, background-color .15s; }
.ts-wrapper.form-select-sm, .ts-wrapper.form-control-sm { border-radius:8px; }
.ts-wrapper.form-select.focus, .ts-wrapper.form-control.focus { border-color:var(--brand); box-shadow:0 0 0 3.5px rgba(var(--brand-rgb),.14); }
.ts-wrapper.form-select .ts-control, .ts-wrapper.form-control .ts-control { background:transparent; box-shadow:none; }
.ts-wrapper.form-select.disabled, .ts-wrapper.form-control.disabled { background-color:#f3f4f9; }
.filter-panel .ts-wrapper.form-select, .filter-panel .ts-wrapper.form-control { border-radius:11px; }
.filter-panel .ts-wrapper.form-select.focus { border-color:#8b7bfa; box-shadow:0 0 0 4px rgba(124,92,240,.14); background-color:#fff; }

/* Tom Select wrapper border colour (the earlier "border:0" shorthand reset it to currentColor = dark) */
.ts-wrapper.form-select, .ts-wrapper.form-control { border-color:#dde1ec; }
.ts-wrapper.form-select.focus, .ts-wrapper.form-control.focus { border-color:#8b7bfa; }

/* ============================================================
   MODALS — premium (all themes; quick-add and others)
   ============================================================ */
.modal-backdrop { --bs-backdrop-bg:#070b17; --bs-backdrop-opacity:.6; }
.modal-content { border-radius:22px; background:#fff; box-shadow:0 40px 90px -20px rgba(7,11,23,.6), 0 0 0 1px rgba(255,255,255,.06); }
.modal.fade .modal-dialog { transform:translateY(30px) scale(.96); transition:transform .32s cubic-bezier(.2,.9,.3,1.15), opacity .2s; }
.modal-header { position:relative; overflow:hidden; padding:18px 22px; border:0;
  background:radial-gradient(320px 160px at 100% -20%, rgba(45,212,191,.35), transparent 65%), radial-gradient(360px 200px at 0% 140%, rgba(139,92,246,.45), transparent 65%), linear-gradient(135deg, #0a0f1f, #151f3d) !important; }
.modal-header:after { height:2px; background:linear-gradient(90deg, transparent, #5eead4, #a78bfa, #e9d08a, transparent) !important; }
.modal-title { font-family:'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight:800; font-size:19px; letter-spacing:-.3px; color:#fff; }
.modal-title i { color:#5eead4 !important; }
.qa-head { display:flex; align-items:center; gap:14px; }
.qa-ic { width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:20px; color:#fff; background:linear-gradient(135deg, #2dd4bf, #7c5cf0); box-shadow:0 10px 22px -8px rgba(124,92,240,.9), inset 0 1px 0 rgba(255,255,255,.35); }
.qa-ttl { flex:1; min-width:0; }
.qa-sub { font-size:12.5px; color:rgba(232,236,247,.65); margin-top:2px; }
.modal-header .btn-close { width:34px; height:34px; padding:0; margin:0; border-radius:11px; opacity:1; filter:none; background:rgba(255,255,255,.1) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/11px no-repeat; border:1px solid rgba(255,255,255,.14); transition:all .2s; }
.modal-header .btn-close:hover { background-color:rgba(244,63,94,.85); border-color:transparent; transform:rotate(90deg); }
.modal-body { padding:22px 24px 8px; background:#fff; }
.modal-body .form-label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#5d6486 !important; margin-bottom:6px; }
.modal-body .form-label .text-danger { color:#e11d48 !important; }
.modal-body .form-control, .modal-body .form-select, .modal-body .ts-wrapper.form-select { border-radius:11px; background-color:#f8f9fc; border-color:#e4e7f1; }
.modal-body .form-control:not(textarea), .modal-body .form-select, .modal-body .ts-wrapper .ts-control { min-height:42px; }
.modal-body .form-control:hover, .modal-body .ts-wrapper.form-select:hover { background-color:#fff; }
.modal-body .form-control:focus, .modal-body .ts-wrapper.form-select.focus { background-color:#fff; border-color:#8b7bfa; box-shadow:0 0 0 4px rgba(124,92,240,.14); }
.modal-body .qa-group .btn, .modal-body .qa-add { border-radius:11px; }
.modal-footer { background:#fafbfe !important; border-top:1px solid #eef0f7 !important; padding:14px 22px; gap:10px; }
.modal-footer .btn { border-radius:12px; padding:10px 18px; font-weight:700; }
.modal-footer .btn-light { background:#fff; border:1px solid #e2e5ef; }
.modal-footer .btn-primary { border:0; color:#0b1124; background-image:linear-gradient(135deg, #99f6e4, #5eead4 40%, #c4b5fd); box-shadow:0 10px 22px -10px rgba(94,234,212,.9); }
.modal-footer .btn-primary:hover { color:#0b1124; box-shadow:0 14px 26px -10px rgba(94,234,212,1); }
.qa-hint { margin-right:auto; font-size:12px; color:#8a90ab; }
.qa-hint kbd { font-size:10.5px; padding:1px 6px; }
@media (max-width:575.98px) { .qa-hint { display:none; } .qa-sub { display:none; } .modal-body { padding:18px 16px 4px; } }

/* ============================================================
   SIDEBAR — "Aurora Light" (data-side="light", the default)
   White panel, ink text, teal/violet accents matching the rest of the app
   ============================================================ */
[data-side="light"] { --side-bg:#ffffff; --side-ink:#4b5275; --side-head:#9aa0b8; --side-border:#eceef6; }
[data-side="light"] .sidebar {
  background:
    radial-gradient(240px 200px at 0% 0%, rgba(45,212,191,.10), transparent 70%),
    radial-gradient(280px 240px at 100% 100%, rgba(139,92,246,.10), transparent 70%),
    #ffffff;
  border-right:1px solid #eceef6; box-shadow:4px 0 24px -12px rgba(20,26,51,.12); }
[data-side="light"] .sidebar::-webkit-scrollbar-thumb { background:rgba(124,92,240,.22); }
[data-side="light"] .sidebar .brand { background:rgba(255,255,255,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #eceef6; padding:20px 18px 18px; }
[data-side="light"] .sidebar .brand:after { content:''; position:absolute; left:18px; right:18px; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, rgba(45,212,191,.55), rgba(124,92,240,.55), transparent); }
[data-side="light"] .sidebar .brand .logo { position:relative; width:40px; height:40px; border-radius:12px; color:#fff; font-size:17px;
  background:linear-gradient(135deg, #2dd4bf 0%, #7c5cf0 55%, #e3b860 100%); box-shadow:0 8px 20px -6px rgba(124,92,240,.55); }
[data-side="light"] .sidebar .brand .t { color:#141a33; font-weight:800; letter-spacing:-.2px; }
[data-side="light"] .sidebar .brand .t small { color:#7c5cf0; opacity:1; }
[data-side="light"] .sidebar .nav-head { color:#9aa0b8; padding:20px 22px 8px; font-size:10px; letter-spacing:2px; }
[data-side="light"] .sidebar .nav-head:after { background:linear-gradient(90deg, rgba(124,92,240,.25), rgba(45,212,191,.12) 60%, transparent); }
[data-side="light"] .sidebar .nav-link { color:#4b5275; margin:2px 12px; padding:6px 12px 6px 7px; border-radius:12px; gap:12px; font-weight:500; border:1px solid transparent;
  transition:background .2s, color .2s, transform .2s, border-color .2s, box-shadow .2s; }
[data-side="light"] .sidebar .nav-link i { width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-size:15px; opacity:1;
  color:#6b7190; background:#f4f5fb; box-shadow:inset 0 0 0 1px #eceef6; transition:all .2s; }
[data-side="light"] .sidebar .nav-link:hover { color:#141a33; background:#f6f4ff; transform:translateX(3px); }
[data-side="light"] .sidebar .nav-link:hover i { color:#7c5cf0; background:#fff; box-shadow:inset 0 0 0 1px #ddd6fe, 0 4px 10px -4px rgba(124,92,240,.5); }
[data-side="light"] .sidebar .nav-link.active { color:#141a33; font-weight:700; margin:2px 12px; padding:6px 12px 6px 7px; border-radius:12px; transform:none; border:1px solid transparent;
  background:linear-gradient(100deg, #effcf9, #f3f0ff 60%, #faf9ff) padding-box, linear-gradient(100deg, rgba(45,212,191,.7), rgba(124,92,240,.55) 55%, rgba(124,92,240,.1)) border-box;
  box-shadow:0 10px 22px -14px rgba(124,92,240,.6); }
[data-side="light"] .sidebar .nav-link.active:before { content:''; position:absolute; left:-12px; top:50%; width:4px; height:22px; transform:translateY(-50%); border-radius:0 4px 4px 0; background:linear-gradient(180deg, #2dd4bf, #7c5cf0); }
[data-side="light"] .sidebar .nav-link.active i { color:#fff; background:linear-gradient(135deg, #2dd4bf, #7c5cf0); box-shadow:0 6px 14px -4px rgba(124,92,240,.7); }
[data-side="light"] .sidebar .nav-link:focus-visible { box-shadow:0 0 0 2px rgba(124,92,240,.5); }
@media (prefers-reduced-motion: reduce) { [data-side="light"] .sidebar .nav-link:hover { transform:none; } }
@media (max-width:991.98px) { [data-side="light"] .sidebar .nav-link { padding:8px 12px 8px 7px; } }
/* sidebar brand is a link to the dashboard */
a.brand, a.brand:hover { text-decoration:none; color:inherit; }
.sidebar a.brand { cursor:pointer; }
.sidebar a.brand .logo { transition:transform .2s; }
.sidebar a.brand:hover .logo { transform:rotate(-8deg) scale(1.05); }
.sidebar a.brand:focus-visible { outline:2px solid #7c5cf0; outline-offset:-4px; border-radius:12px; }

/* topbar sidebar-style picker */
.side-pick { min-width:250px; padding:12px !important; border-radius:16px !important; }
.side-pick .sp-h { font-size:11px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--mut); margin-bottom:10px; }
.side-pick .sp-g { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.side-pick .sp-g button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px; border-radius:12px; border:1.5px solid #e4e7f1; background:#fff; font-size:12.5px; font-weight:700; color:var(--ink); transition:all .15s; }
.side-pick .sp-g button:hover { border-color:#c4b5fd; }
.side-pick .sp-g button.active { border-color:#7c5cf0; box-shadow:0 8px 18px -10px rgba(124,92,240,.9); }
.side-pick .sp-prev { display:flex; width:100%; height:46px; border-radius:8px; overflow:hidden; border:1px solid #e4e7f1; background:#f4f5fb; }
.side-pick .sp-prev i { width:34%; display:block; }
.side-pick .sp-prev.light i { background:#fff; border-right:1px solid #e4e7f1; }
.side-pick .sp-prev.dark i { background:linear-gradient(180deg,#0b1124,#1b1446); }
.side-pick .sp-prev b { flex:1; margin:8px; border-radius:5px; background:linear-gradient(135deg,#0b1124,#2a1f6b 55%,#14b8a6); }
.side-pick .sp-n { margin-top:10px; font-size:11.5px; color:var(--mut); }