/*
 * KOLSHI COMMAND / Admin Design System / 2026-10-09
 * Presentation-only theme applied after the existing stylesheet.
 * Functional IDs, data attributes, security policy, forms, data and JS remain unchanged.
 * Light: porcelain, graphite and Kolshi crimson. Dark: ink and warm gold.
 */
:root {
    color-scheme: light;
    --primary: #da3853;
    --primary-hover: #bb2843;
    --primary-light: #ffe0e6;
    --secondary: #189c76;
    --danger: #d93950;
    --warning: #d99727;
    --info: #367cce;
    --bg-main: #f5f6fa;
    --bg-card: #fff;
    --bg-sidebar: #121c2d;
    --text-main: #192339;
    --text-muted: #738097;
    --text-sidebar: #a9b4c7;
    --text-sidebar-active: #fff;
    --border: #e7ebf2;
    --border-sidebar: #28354b;
    --surface-muted: #f8f9fc;
    --surface-raised: #fff;
    --focus-ring: rgba(218, 56, 83, .18);
    --soft-primary: #fff1f3;
    --shadow-sm: 0 2px 8px rgba(25, 35, 57, .025);
    --shadow-md: 0 12px 30px rgba(28, 38, 61, .075);
    --shadow-lg: 0 24px 75px rgba(14, 22, 39, .18);
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
body.dark-mode {
    color-scheme: dark;
    --primary: #f3bf59;
    --primary-hover: #e4a839;
    --primary-light: #463620;
    --secondary: #65d5b0;
    --danger: #fa8493;
    --warning: #f3bf59;
    --info: #85bcff;
    --bg-main: #0e1520;
    --bg-card: #182231;
    --bg-sidebar: #0b111c;
    --text-main: #edf1f9;
    --text-muted: #a0adc3;
    --text-sidebar: #9eacc1;
    --border: #2a394d;
    --border-sidebar: #263144;
    --surface-muted: #1e2a3b;
    --surface-raised: #202d3f;
    --focus-ring: rgba(243, 191, 89, .22);
    --soft-primary: #372d25;
    --shadow-sm: 0 3px 12px rgba(0, 0, 0, .07);
    --shadow-md: 0 15px 42px rgba(0, 0, 0, .20);
    --shadow-lg: 0 22px 68px rgba(0, 0, 0, .35);
    background: var(--bg-main);
    color: var(--text-main);
}
html { scroll-behavior: smooth; }
body { background: var(--bg-main); color: var(--text-main); font-size: 14px; line-height: 1.65; }
body, button, input, textarea, select { font-family: 'Cairo', system-ui, sans-serif; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--focus-ring); outline-offset: 2px;
}
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .62; }
::selection { background: rgba(218, 56, 83, .18); }
:where(.content-area,.sidebar .nav-links,.modal-body,.table-responsive,.am-table) { scrollbar-color: #b7c1ce transparent; scrollbar-width: thin; }
:where(.content-area,.sidebar .nav-links,.modal-body,.table-responsive,.am-table)::-webkit-scrollbar { width: 8px; height: 8px; }
:where(.content-area,.sidebar .nav-links,.modal-body,.table-responsive,.am-table)::-webkit-scrollbar-thumb { border-radius: 20px; background: #cbd2de; }
body.dark-mode :where(.content-area,.sidebar .nav-links,.modal-body,.table-responsive,.am-table) { scrollbar-color: #41536d transparent; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }
.transition-fade { animation: command-appear .22s ease both; }
@keyframes command-appear { from {opacity: .35; transform: translateY(5px)} to {opacity: 1; transform: translateY(0)} }

/* Session boot: minimal, controlled, same visual language as sign-in */
.auth-boot-splash { background: radial-gradient(circle at 13% 8%, rgba(218,56,83,.10),transparent 25%),#f5f6fa; }
.auth-boot-card { min-width: min(420px,100%); border: 1px solid #e8eaf0; box-shadow: 0 24px 70px rgba(17,28,45,.08); border-radius: 25px; padding: 39px; background: #fff; }
.auth-boot-spinner { background: #fff1f3; color: #da3853; width: 68px; height: 68px; border-radius: 20px; font-size: 26px; }
.auth-boot-brand { direction: ltr; font-size: .72rem !important; color: #6d798f !important; letter-spacing: .14em; font-weight: 800; }
.auth-boot-brand b { color: #da3853; }

/* Auth / split-screen brand story. Login fields and auth actions retain original IDs. */
.login-container {
    width: 100%; min-height: 100vh; min-height: 100dvh; height: auto;
    display: grid; grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr);
    background: #f7f8fb; isolation: isolate; overflow: auto;
}
.login-showcase {
    position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(26px, 3.9vw, 64px); overflow: hidden; min-height: 100dvh;
    color: #f7f9fe; background: #131e31;
    background-image: radial-gradient(ellipse at 12% 83%,rgba(200,47,81,.24),transparent 43%),
                      radial-gradient(ellipse at 91% 14%,rgba(108,133,186,.13),transparent 34%);
}
.login-showcase::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .25;
    background-image: linear-gradient(#56647c55 1px,transparent 1px), linear-gradient(90deg,#56647c55 1px,transparent 1px);
    background-size: 62px 62px; mask-image: linear-gradient(130deg,transparent,black 45%,transparent);
}
.login-showcase::after { content: ''; position: absolute; inset-inline-end: -225px; inset-block-end: -370px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 50%; width: 750px; height: 750px; pointer-events: none;
    box-shadow: 0 0 0 60px rgba(255,255,255,.017), 0 0 0 130px rgba(255,255,255,.012);
}
.login-showcase-top, .login-showcase-main, .login-showcase-bottom { position: relative; z-index: 1; }
.login-showcase-top { display: flex; align-items: center; gap: 15px; }
.login-brandmark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px;
    background: #e24661; color: white; font-size: 24px; box-shadow: 0 15px 38px rgba(218,56,83,.23);
}
.login-brandword { font-size: 22px; font-weight: 900; letter-spacing: -.8px; line-height: 1.25; direction: ltr; text-align: right; }
.login-brandword>span { color: #f6c7d0; }
.login-brandword small { display: block; font-size: 12px; font-weight: 600; color: #abb7ca; letter-spacing: 0; direction: rtl; }
.login-showcase-main { max-width: 600px; margin: 56px 0 30px; }
.showcase-eyebrow { display: inline-flex; gap: 10px; align-items: center; color: #e4c4cf; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.showcase-eyebrow-dot { width: 8px; height: 8px; background: #ff6e8b; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,110,139,.12); }
.login-showcase-main h1 { font-size: clamp(39px,4.4vw,70px); line-height: 1.28; letter-spacing: -.035em; font-weight: 900; margin: 21px 0 16px; }
.login-showcase-main h1 em { font-style: normal; color: #ff8299; }
.login-showcase-main>p { max-width: 520px; font-size: clamp(13px,1.15vw,16px); font-weight: 500; line-height: 2; color: #b9c4d6; }
.showcase-preview { margin-top: 40px; border: 1px solid rgba(255,255,255,.15); border-radius: 23px; padding: 17px;
    background: linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.035)); box-shadow: 0 26px 50px rgba(0,0,0,.10);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); max-width: 560px;
}
.showcase-preview-header { display: flex; align-items: center; gap: 12px; color: #c9d3e1; font-size: 11px; font-weight: 700; padding: 3px 4px 16px; }
.showcase-preview-header>i { margin-inline-start: auto; color: #86dcb7; font-size: 14px; }
.showcase-preview-dots { display: flex; gap: 5px; }
.showcase-preview-dots b { width: 7px; height: 7px; background: #596b83; border-radius: 50%; }
.showcase-preview-dots b:first-child { background: #ed6984; }
.showcase-preview-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.showcase-preview-cards>div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 15px 12px;
    background: rgba(255,255,255,.085); border: 1px solid rgba(255,255,255,.045); border-radius: 12px;
}
.showcase-preview-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 13px; margin-bottom: 6px; }
.showcase-preview-icon.red { color:#ff9caf; background:rgba(242,99,128,.14); }
.showcase-preview-icon.amber { color:#f6ca75; background:rgba(244,187,96,.15); }
.showcase-preview-icon.blue { color:#97c0ff; background:rgba(100,151,226,.17); }
.showcase-preview-cards strong { font-size: 11px; font-weight: 800; }
.showcase-preview-cards small { font-size: 10px; color: #a4b2c8; }
.showcase-preview-chart { display: flex; align-items: end; gap: 9px; height: 76px; margin-top: 20px; padding: 0 10px; }
.showcase-preview-chart span { flex: 1; min-width: 5px; border-radius: 7px 7px 2px 2px; background: rgba(233,92,123,.23); height: 43%; }
.showcase-preview-chart span:nth-child(2),.showcase-preview-chart span:nth-child(7) {height: 63%}
.showcase-preview-chart span:nth-child(3),.showcase-preview-chart span:nth-child(8) {height: 38%}
.showcase-preview-chart span:nth-child(4),.showcase-preview-chart span:nth-child(10) {height: 80%}
.showcase-preview-chart span:nth-child(5) {height: 57%}
.showcase-preview-chart span:nth-child(6),.showcase-preview-chart span:nth-child(11) {height: 94%; background:rgba(241,108,138,.72)}
.showcase-preview-chart span:nth-child(9) {height: 70%}
.showcase-preview-chart span:nth-child(12) {height: 66%; background:rgba(241,108,138,.57)}
.login-showcase-bottom { display: flex; flex-wrap: wrap; gap: 15px; direction: ltr; justify-content: flex-end; font-size: 10px; letter-spacing: .16em; color: #798ba4; font-weight: 800; }
.login-box { z-index: 2; display: flex; flex-direction: column; justify-content: center; align-self: center;
    max-width: 490px; width: calc(100% - 70px); min-width: 0; margin: 60px auto; padding: 20px 28px;
    box-shadow: none; border-radius: 0; background: transparent;
}
.logo-area { text-align: right; margin-bottom: 30px; }
.logo-area .logo-icon { width: 62px; height: 62px; margin: 0 0 26px; border-radius: 18px; font-size: 24px;
    background: #fff0f3; color: #da3853; box-shadow: none; border: 1px solid #fbe0e6;
}
.login-form-eyebrow { display: inline-flex; align-items: center; color: #c83451; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.logo-area h2 { font-size: clamp(26px,2.8vw,39px); letter-spacing: -.025em; color: #172238; line-height: 1.3; }
.logo-area p { margin-top: 10px; line-height: 1.85; font-size: 13px; color: #748198; }
#login-form { display: grid; gap: 6px; }
.input-group { margin-bottom: 12px; }
.input-group label { margin-bottom: 9px; font-size: 12px; font-weight: 800; color: #344057; }
.input-with-icon input { min-height: 54px; padding: 12px 45px 12px 16px; border: 1px solid #dee5ee; border-radius: 12px;
    background: #fff; color: #172238; box-shadow: 0 3px 8px rgba(12,25,45,.025); direction: ltr; text-align: left; font-size: 13px;
}
/* Keep the icon on the left for LTR credential entry; padding is deliberately on that side. */
.input-with-icon input { padding-left: 46px; padding-right: 16px; }
.input-with-icon i { left: 16px; right: auto; font-size: 15px; color: #8e9bae; }
.input-with-icon input:focus { border-color: #da3853; box-shadow: 0 0 0 4px rgba(218,56,83,.10); background: #fff; }
#login-btn { min-height: 54px; width: 100%; margin-top: 10px; font-size: 13px; border-radius: 12px;
    box-shadow: 0 10px 22px rgba(218,56,83,.15); font-weight: 800; }
.btn-google { width: 100%; min-height: 52px; border: 1px solid #dfe5ed; border-radius: 12px; background: #fff; color: #243048;
    font-weight: 800; box-shadow: none; font-size: 12px;
}
.btn-google:hover { background: #f9fafc; border-color: #bbc6d5; box-shadow: none; }
.divider { margin: 12px 0 7px; color: #9aa4b4; font-size: 11px; }
.divider:before,.divider:after { border-color: #e7eaf0; }
.error-msg { min-height: 0; margin-top: 4px; text-align: right; font-weight: 600; font-size: 12px; }
.login-form-footnote { display: flex; gap: 8px; align-items: center; margin-top: 29px; padding-top: 19px;
    border-top: 1px solid #e9edf3; color: #8a96a7; font-size: 11px; line-height: 1.8;
}
.login-form-footnote i { color: #b1bbc9; }
.login-bg-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.login-bg-shapes .shape-1 { background: rgba(222,70,98,.1); width: 260px; height: 260px; top: -140px; left: -110px; right: auto; }
.login-bg-shapes .shape-2 { background: rgba(145,164,200,.1); width: 300px; height: 300px; bottom: -180px; left: 35%; }

/* Workspace / persistent navigation / typography */
.dashboard-container { height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg-main); }
.dashboard-container>.sidebar { width: 282px; background: var(--bg-sidebar); border-inline-end: 1px solid var(--border-sidebar);
    flex: 0 0 282px; box-shadow: -8px 0 28px rgba(9,16,30,.03); z-index: 55;
}
.sidebar-header { min-height: 91px; padding: 19px 24px 17px; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.075); }
.sidebar-header .logo-mini { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; background: #de415c; color: #fff;
    font-size: 18px; box-shadow: 0 9px 20px rgba(218,56,83,.2); }
.sidebar-header h2 { font-size: 19px; white-space: nowrap; font-weight: 900; letter-spacing: -.04em; line-height: 1.3; direction: ltr; }
.sidebar-header h2 span { color: #f78fa0; }
.sidebar-brand-name { min-width: 0; }
.sidebar-brand-name>span { display: block; margin-top: 4px; font-family: system-ui,sans-serif; font-size: 9px; font-weight: 700;
    color: #8592a9; letter-spacing: .13em; direction: ltr; }
.sidebar-workspace { margin: 20px 14px 10px; padding: 11px 10px; display: flex; align-items: center; gap: 10px;
    border-radius: 13px; background: #1e2b40; border: 1px solid #334155; }
.sidebar-workspace .workspace-avatar { width: 35px; height: 35px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 10px; background: #344259; color: #fff; font-size: 15px; font-weight: 900; direction: ltr;
}
.sidebar-workspace div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sidebar-workspace strong { font-size: 11px; color: #e6ebf3; font-weight: 800; }
.sidebar-workspace small { font-size: 10px; color: #98a7bf; }
.sidebar-workspace>i { color: #8190a8; font-size: 11px; }
.sidebar .nav-section { padding: 17px 27px 6px; font-weight: 800; font-size: 10px; letter-spacing: .03em; color: #8998af; }
.sidebar .nav-links { padding: 7px 12px 20px; overflow-y: auto; min-height: 0; flex: 1; }
.sidebar .nav-links li { position: relative; gap: 13px; min-height: 47px; padding: 9px 13px; border-radius: 11px;
    margin: 3px 0; font-size: 12px; color: #acb8cb; font-weight: 700;
    border: 1px solid transparent; transition: background-color .18s,border-color .18s,color .18s;
}
.sidebar .nav-links li>i:first-child { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center;
    font-size: 14px; color: #8d9bb3; border-radius: 10px; background: transparent;
}
.sidebar .nav-links li:hover { color: #fff; background: #202e44; }
.sidebar .nav-links li:hover>i:first-child { color: #f4a2af; }
.sidebar .nav-links li.active { color: #fff; background: #383047; background: rgba(218,56,83,.17); border-color: rgba(242,102,131,.19);
    box-shadow: inset -3px 0 0 #f26c84;
}
.sidebar .nav-links li.active>i:first-child { background: #da3853; color: white; }
.sidebar .nav-links li.active::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ff8ba0; margin-inline-start: auto; }
.sidebar .nav-count-badge { border-radius: 99px; background: #ed526e; color: white; padding: 1px 7px; font-size: 10px; margin-inline-start: auto; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.085); padding: 16px 14px 19px; background: var(--bg-sidebar); }
.sidebar-footer-note { display: flex; align-items: center; gap: 7px; border-radius: 10px; padding: 9px 11px; font-size: 10px;
    color: #a4b2c7; border: 1px solid #29374d; margin-bottom: 10px;
}
.sidebar-footer-dot { width: 7px; height: 7px; border-radius: 50%; background: #5dce9a; box-shadow: 0 0 0 4px rgba(93,206,154,.11); }
.sidebar-footer-version { direction: ltr; font: 700 9px system-ui,sans-serif; margin-inline-start: auto; color: #7689a5; letter-spacing: .07em; }
.sidebar .btn-logout { justify-content: flex-start; gap: 12px; padding: 11px 15px; min-height: 44px; color: #f8a5b1;
    border: 1px solid transparent; border-radius: 11px; font-size: 12px; }
.sidebar .btn-logout:hover { background: rgba(218,56,83,.12); border-color: rgba(218,56,83,.16); }
.main-content { flex: 1 1 0; min-width: 0; overflow: hidden; }
.topbar { min-height: 89px; height: auto; gap: 18px; background: var(--bg-card); border-bottom: 1px solid var(--border);
    padding: 14px clamp(20px,2.6vw,42px); box-shadow: 0 1px 0 rgba(20,29,44,.02); flex-wrap: nowrap;
}
.topbar-left, .topbar-end { min-width: 0; display: flex; align-items: center; gap: 16px; }
.page-heading { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.page-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 700; font-size: 10px; }
.page-breadcrumb i { font-size: 10px; color: var(--primary); }
.page-breadcrumb i.fa-chevron-left { color: #a9b4c4; font-size: 8px; }
.topbar h1 { color: var(--text-main); font-weight: 900; letter-spacing: -.015em; font-size: clamp(18px,1.5vw,23px); }
.topbar-context { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800;
    border: 1px solid var(--border); background: var(--surface-muted); padding: 9px 12px; border-radius: 11px; white-space: nowrap; color: var(--text-muted);
}
.topbar-context i { color: var(--primary); }
.user-info { gap: 13px; padding-inline-start: 16px; border-inline-start: 1px solid var(--border); }
.user-details { align-items: flex-start; min-width: 0; }
.admin-email { color: var(--text-main); font-size: 11px; font-weight: 800; direction: ltr; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.admin-role { font-size: 10px; color: var(--text-muted); font-weight: 700; }
.avatar { width: 41px; height: 41px; flex-shrink: 0; border-radius: 13px; background: var(--soft-primary); color: var(--primary); font-size: 17px; border: 1px solid var(--border); }
.content-area { flex: 1 1 0; min-width: 0; min-height: 0; padding: clamp(17px,2.3vw,35px) clamp(16px,2.8vw,43px) 48px;
    background: var(--bg-main); overscroll-behavior: contain;
}
.tab-content { width: 100%; min-width: 0; max-width: 1700px; margin-inline: auto; }
.tab-content>.card:last-child { margin-bottom: 0; }

/* Unified surfaces, tables, fields and actions across every feature screen */
.card, .settings-accordion { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 20px;
}
.card-header { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px;
    background: var(--bg-card); padding: 22px 25px; border-bottom: 1px solid var(--border);
}
.card-header>div:first-child { min-width: 0; }
.card-header h3 { font-size: 16px; font-weight: 900; line-height: 1.5; letter-spacing: -.01em; }
.card-header p { margin-top: 4px; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.card-header .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
:where(.btn-primary,.btn-secondary,.btn-danger,.btn-save,.btn-report-action) {
    min-height: 40px; border-radius: 11px; padding: 9px 15px; display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1.45;
}
.btn-primary, .btn-save { color: #fff; background: #da3853; border: 1px solid #da3853;
    box-shadow: 0 6px 14px rgba(218,56,83,.09);
}
.btn-primary:hover,.btn-save:hover { background: #bb2843; border-color: #bb2843; box-shadow: 0 9px 19px rgba(218,56,83,.13); transform: translateY(-1px); }
body.dark-mode :where(.btn-primary,.btn-save) { background: #f3bf59; border-color: #f3bf59; color: #181a20; box-shadow: none; }
body.dark-mode :where(.btn-primary:hover,.btn-save:hover) { background: #ffd07a; border-color: #ffd07a; }
.btn-secondary { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); box-shadow: none; }
.btn-secondary:hover { background: var(--surface-muted); border-color: #b9c2d1; color: var(--text-main); }
.btn-danger { background: #fff0f2; color: #b92d45; border: 1px solid #f8d9df; box-shadow: none; }
.btn-danger:hover { background: #fde2e8; color: #a41e38; }
.btn-icon,.btn-action { min-width: 39px; min-height: 39px; padding: 9px; border-radius: 11px;
    background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); box-shadow: none;
}
.btn-icon:hover,.btn-action:hover { background: var(--soft-primary); color: var(--primary); border-color: var(--focus-ring); transform: none; }
.btn-action.success { color: #138861; }
.btn-action.danger { color: var(--danger); }
.btn-action.success:hover { background: #ecfbf4; }
.btn-action.danger:hover { background: #fff0f3; }
body.dark-mode .btn-icon:hover,body.dark-mode .btn-action:hover { background: var(--surface-muted); }
button i { flex-shrink: 0; }
button:active:not(:disabled) { transform: translateY(0); }
:where(.content-area,.modal-body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) {
    color: var(--text-main); background-color: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    font-size: 12px; min-height: 40px; padding: 8px 11px; max-width: 100%;
}
:where(.content-area,.modal-body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea):focus {
    border-color: var(--primary); background: var(--bg-card); outline: none; box-shadow: 0 0 0 3px var(--focus-ring);
}
:where(.content-area,.modal-body) :where(input,textarea)::placeholder { color: #a1abba; opacity: 1; }
:where(.content-area,.modal-body) :where(label,.form-group>label) { font-weight: 700; color: var(--text-muted); font-size: 11px; }
:where(.content-area,.modal-body) textarea { min-height: 85px; resize: vertical; }
:where(.content-area,.modal-body) input[type="checkbox"],:where(.content-area,.modal-body) input[type="radio"] { accent-color: var(--primary); }
:where(.content-area,.modal-body) :where(input[type="search"],input[type="email"],input[type="url"],input[type="number"],input[type="tel"]) { min-width: 0; }
.table-responsive { border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow-x: auto; width: 100%; }
.data-table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--bg-card); }
.data-table th,.data-table td { padding: 15px 17px; text-align: right; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table th { background: var(--surface-muted); color: var(--text-muted); font-size: 10px; font-weight: 800; white-space: nowrap;
    text-transform: none; letter-spacing: .005em;
}
.data-table td { font-size: 11px; font-weight: 600; color: var(--text-main); line-height: 1.85; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-muted); }
.data-table tbody tr.clickable-row:hover { background: var(--soft-primary); }
.data-table td .btn-primary, .data-table td .btn-secondary { min-height: 33px; padding: 6px 10px; font-size: 10px; }
.badge { border-radius: 8px; padding: 5px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge-success { background: #eaf8f1; color: #157b54; }
.badge-warning { background: #fff7e8; color: #a96a13; }
.badge-danger { background: #ffedf0; color: #bf354d; }
.badge-info { background: #edf4ff; color: #376cb8; }
body.dark-mode .badge-success { background:#1b4035;color:#8ce4bb; }
body.dark-mode .badge-warning { background:#493821;color:#f6cb82; }
body.dark-mode .badge-danger { background:#4b2934;color:#ff9dab; }
body.dark-mode .badge-info { background:#223b5b;color:#a3c8ff; }
.loading-state,.empty-state { color: var(--text-muted); text-align: center; padding: 36px 20px; font-size: 12px; font-weight: 700; }
.loading-state i, .empty-icon { color: var(--primary); }
.empty-icon { opacity: .5; }
.toast { background: var(--bg-card); border: 1px solid var(--border); border-inline-start: 4px solid var(--secondary);
    color: var(--text-main); border-radius: 13px; padding: 13px 16px; box-shadow: var(--shadow-lg); max-width: min(430px,calc(100vw - 36px));
}
.toast.show { background: var(--bg-card); }
.toast-content { font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }

/* Delivery zones, stores, users and order browsing */
.zones-grid { padding: 20px; gap: 14px; grid-template-columns: repeat(auto-fill,minmax(min(100%,295px),1fr)); }
.zone-card { border: 1px solid var(--border); border-radius: 15px; background: var(--bg-card); padding: 19px;
    transition: border-color .18s,background-color .18s,box-shadow .18s; min-height: 118px;
}
.zone-card:hover { border-color: var(--primary); background: var(--soft-primary); box-shadow: var(--shadow-md); }
.zone-info h4 { color: var(--text-main); font-size: 13px; font-weight: 900; }
.zone-info p { color: var(--text-muted); font-size: 11px; line-height: 1.9; }
#orders-zones-list .zone-card { border-radius: 14px; }
#orders-table-container .card-header { gap: 12px; }
.users-stats-bar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.stat-item { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: 11px; padding: 15px 17px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow-sm);
    font-weight: 800; font-size: 11px; color: var(--text-muted); transition: border-color .18s;
}
.stat-item:hover { border-color: var(--primary); transform: none; box-shadow: var(--shadow-sm); }
.stat-item>i { width: 37px; height: 37px; display: grid; place-items: center; background: var(--soft-primary); border-radius: 11px;
    color: var(--primary); flex-shrink: 0; font-size: 15px;
}
.stat-item>span { font-weight: 900; font-size: 20px; line-height: 1.1; color: var(--text-main); font-variant-numeric: tabular-nums; }
.stat-item.stat-customer>i { background: #e8f2ff; color: #3a78bf; }
.stat-item.stat-seller>i { background: #fff3e7; color: #bc7924; }
.stat-item.stat-delivery>i { background: #e7f8f0; color: #19976b; }
.stat-item.stat-admin>i { background: #f0eaff; color: #8763c9; }
.users-filter-group { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 13px;
    padding: 4px; gap: 3px; flex-wrap: wrap;
}
.filter-btn { background: transparent; border-radius: 9px; color: var(--text-muted); font-size: 10px; font-weight: 800; padding: 9px 11px; }
.filter-btn:hover { color: var(--text-main); background: var(--bg-card); }
.filter-btn.active { background: var(--bg-card); color: var(--primary); box-shadow: 0 2px 9px rgba(28,38,61,.08); }
body.dark-mode .filter-btn.active { background: #344053; }
.users-actions-bar { gap: 8px; }
.user-detail-modal-content { border-radius: 19px; }
.user-info-grid>div,.user-docs-grid>div,.order-detail-grid>div,.order-item-row { background: var(--surface-muted); border-color: var(--border); }
.order-detail-grid,.order-items-list { border-radius: 12px; }
.order-item-row { border-bottom: 1px solid var(--border); }
.order-total-row { color: var(--primary); }

/* Settings navigation hub, accordions and editing forms */
.admin-settings-hub-card { margin-bottom: 16px; }
.admin-settings-hub-grid { padding: 21px; grid-template-columns: repeat(auto-fit,minmax(min(100%,225px),1fr)); gap: 12px; }
.admin-settings-hub-item { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
    padding: 17px; transition: var(--transition); }
.admin-settings-hub-item:hover { border-color: var(--primary); background: var(--soft-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.admin-settings-hub-item i:first-child { color: var(--primary); }
.admin-settings-hub-status { background: #edf3ff; color: #336cbb; border-radius: 7px; }
.admin-settings-hub-status.ready { background: #ecfbf4; color: #157b54; }
.admin-settings-hub-status.soon { background: #fff6e8; color: #a9691b; }
.settings-sync-bar { padding: 11px 15px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border);
    margin: 0 0 18px; color: var(--text-muted); font-size: 11px; font-weight: 700;
}
.settings-sync-bar>i { color: var(--primary); }
.settings-accordion:hover { border-color: #ccd5e1; box-shadow: var(--shadow-sm); }
.accordion-header { background: var(--bg-card); border-color: var(--border); padding: 18px 23px; }
.accordion-header.open { background: var(--soft-primary); }
.accordion-header h3,.accordion-header h4 { font-size: 13px; font-weight: 900; }
.settings-form { color: var(--text-main); }
.settings-form input[type="text"],.settings-form input[type="number"],.settings-form input[type="url"],
.settings-form input[type="email"],.settings-form input[type="tel"],.settings-form select,.settings-form textarea {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-main); font-size: 12px;
}
.settings-form input:focus,.settings-form select:focus,.settings-form textarea:focus {
    background: var(--bg-card); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-section-title { color: var(--primary); border-top-color: var(--border); }
.settings-panel-hero { background: var(--soft-primary); border-color: var(--border); border-radius: 14px; }
.settings-panel-hero h4,.settings-panel-hero p { color: var(--text-main); }
.settings-toolbar-grid { gap: 13px; }
.settings-modal-item,.settings-permission-note { background: var(--surface-muted); border-color: var(--border); border-radius: 13px; }
.delivery-pricing-tier-row,.zone-editor-panel,.zone-editor-summary,.zone-editor-stat { border-color: var(--border); background: var(--surface-muted); }
.zone-editor-map-toolbar { background: var(--bg-card); border-color: var(--border); }
.zone-editor-map-shell { overflow: hidden; border-radius: 15px; }

/* Operations board. Keep priority/status colors semantically meaningful. */
#tab-operations,#operations-candidate-modal,#operations-details-layer {
    --ops-surface: var(--bg-card); --ops-muted-surface: var(--surface-muted); --ops-page: var(--bg-main);
    --ops-border: var(--border); --ops-text: var(--text-main); --ops-muted: var(--text-muted);
    --ops-orange-soft: var(--soft-primary); --ops-orange-border: #f0adb9;
}
body.dark-mode #tab-operations,body.dark-mode #operations-candidate-modal,body.dark-mode #operations-details-layer {
    --ops-surface: #192536; --ops-muted-surface: #243143; --ops-page: #111a27;
    --ops-border: #344256; --ops-text: #eaf0f9; --ops-muted: #a8b4c8;
    --ops-orange-soft: #382e2d; --ops-orange-border: #ba8a55;
}
#tab-operations .operations-toolbar { background: var(--ops-surface); border-color: var(--ops-border); border-radius: 17px; padding: 19px 23px; }
#tab-operations .operations-toolbar h3 { font-size: 15px; font-weight: 900; }
#tab-operations .operations-counters { gap: 12px; margin: 17px 0; }
#tab-operations .operations-counter { min-height: 88px; border-radius: 15px; background: var(--ops-surface);
    border: 1px solid var(--ops-border); padding: 18px 19px; box-shadow: var(--shadow-sm);
}
#tab-operations .operations-counter strong { font-size: 24px; }
#tab-operations .operations-counter-1 { border-right: 3px solid #da3853; }
#tab-operations .operations-zone-panel { background: var(--ops-page); border: 1px solid var(--ops-border); border-radius: 17px; box-shadow: var(--shadow-sm); }
#tab-operations .operations-zone-head { background: var(--ops-surface); padding: 15px; }
#tab-operations .operations-zone-orders { gap: 11px; padding: 12px; }
#tab-operations .operations-order { background: var(--ops-surface); border-color: var(--ops-border); border-radius: 13px;
    padding: 16px; box-shadow: none;
}
#tab-operations .operations-order:hover { box-shadow: var(--shadow-sm); }
#tab-operations .operations-order-code { font-size: 12px; }
#tab-operations .operations-order-store { font-size: 13px; }
#tab-operations .operations-filter.active { color: var(--primary); }
#tab-operations .operations-order .operations-badge { border-radius: 7px; }
#operations-candidate-modal .operations-candidate-modal-content,
#operations-details-layer .operations-details-drawer { background: var(--ops-surface); color: var(--ops-text); border-color: var(--ops-border); }
#operations-details-layer .operations-details-drawer { box-shadow: -15px 0 58px rgba(8,15,27,.19); }
#operations-details-layer .operations-details-drawer > header { padding: 20px; }

/* Support inbox, receipt search and ticket details */
.support-dashboard-shell { gap: 17px; }
.support-dashboard-kpis { gap: 12px; }
.support-kpi { min-height: 100px; padding: 18px 20px; flex-wrap: nowrap; }
.support-kpi div { gap: 5px; }
.support-kpi span { font-size: 22px; color: var(--text-main); }
.support-kpi small { color: var(--text-muted); font-size: 11px; }
.support-kpi>i { width: 43px; height: 43px; border-radius: 13px; font-size: 17px; }
.support-order-search-bar { padding: 18px 24px; gap: 12px; background: var(--bg-card); }
.support-order-search-results { padding: 0 24px 18px; }
.support-order-search-empty { border: 1px dashed var(--border); background: var(--surface-muted); border-radius: 12px; color: var(--text-muted); }
.support-order-result,.support-receipt-result { background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; }
.support-order-result:hover,.support-receipt-result:hover { border-color: var(--primary); }
.support-dashboard-filters { background: var(--bg-card); border-color: var(--border); gap: 11px; padding: 20px 24px; }
.support-dashboard-filters :where(input,select) { background: var(--surface-muted); }
.support-mode-tabs { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 12px;
    padding: 5px; gap: 4px; width: fit-content; max-width: calc(100% - 40px); margin: 17px 24px;
}
.support-mode-tab { background: transparent; border: 0; border-radius: 9px; color: var(--text-muted); font-size: 11px; font-weight: 800; }
.support-mode-tab.active,.support-mode-tab:hover { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-sm); }
.support-ticket-detail,.support-ticket-note,.support-ticket-actions,
.support-message,.support-detail-grid>div,.support-money-status,.support-money-timeline,
.support-order-total-grid>div,.support-order-detail-item { border-radius: 13px; border-color: var(--border); }
.support-ticket-note,.support-ticket-actions,.support-detail-grid>div,.support-order-detail-item { background: var(--surface-muted); }
.support-message.customer { background: var(--surface-muted); border-color: var(--border); }
.support-message.support { background: var(--soft-primary); border-color: var(--border); }
.support-movement-summary>div,.support-movement-detail-grid>section { border-color: var(--border); border-radius: 12px; background: var(--bg-card); }
.support-movement-table th { background: var(--surface-muted); color: var(--text-muted); }
.support-money-status-amount,.support-order-total-grid .total { color: var(--primary); }

/* Mobile-widget editor, stores, catalogs and merchandising controls */
.mobile-widgets-admin-panel { color: var(--text-main); }
.mobile-widgets-admin-hero { border: 1px solid var(--border); border-radius: 18px;
    background: var(--bg-card); color: var(--text-main); box-shadow: var(--shadow-sm);
}
.mobile-widgets-admin-stats>div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; color: var(--text-main); }
.mobile-widgets-admin-controls { background: var(--bg-card); border-color: var(--border); border-radius: 13px; }
.mobile-widget-admin-row,.mobile-widget-item,.mobile-widget-section-card { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); border-radius: 15px;
    box-shadow: var(--shadow-sm);
}
.mobile-widget-admin-row:hover,.mobile-widget-item:hover { border-color: var(--primary); }
.mobile-widget-admin-row-icon { border-radius: 12px; }
.mobile-widget-tab { background: var(--surface-muted); color: var(--text-muted); border-color: var(--border); border-radius: 12px; }
.mobile-widget-tab.active { background: var(--soft-primary); border-color: var(--focus-ring); box-shadow: none; color: var(--primary); }
.mobile-widget-section-head strong { color: var(--text-main); }
.mobile-widget-section-head span,.mobile-widget-empty-state { color: var(--text-muted); }
.mobile-widget-empty-state { background: var(--surface-muted); border-color: var(--border); }
.mobile-widget-editor-header { border-color: var(--border); }

/* Finance v5: preserve calculation views, interactive state and printable documents. */
.finance-v5-shell { gap: 15px; color: var(--text-main); }
.finance-v5-rail { background: var(--bg-card); border: 1px solid var(--border); border-radius: 17px;
    padding: 16px 20px; gap: 11px; box-shadow: var(--shadow-sm);
}
.finance-v5-badge { border-radius: 13px; background: var(--soft-primary); color: var(--primary); }
.finance-v5-rail-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    min-width: 180px; padding: 11px 15px; color: var(--text-main); box-shadow: none;
}
.finance-v5-rail-btn:hover,.finance-v5-rail-btn.active { border-color: var(--primary); color: var(--primary);
    background: var(--soft-primary); box-shadow: none; transform: none;
}
.finance-v5-card,.finance-v5-account-card,.finance-v5-results-card,.finance-v5-panel,
.finance-v5-section-card,.finance-v5-subsection,.finance-manager-action-card,
.finance-v5-order-details-card,.finance-v5-result-item { border-color: var(--border); border-radius: 15px; background: var(--bg-card); color: var(--text-main); }
.finance-v5-result-item:hover,.finance-v5-result-item.active,.finance-manager-action-card:hover { border-color: var(--primary); background: var(--soft-primary); box-shadow: var(--shadow-sm); }
.finance-v5-search .finance-v5-results-card { background: transparent; border: none; border-top: 1px solid var(--border); }
.finance-v5-table-wrap { border-color: var(--border); border-radius: 13px; }
.finance-v5-table-wrap th,.finance-v5-table thead th { color: var(--text-muted); background: var(--surface-muted); }
.finance-v5-table-wrap td { border-color: var(--border); }
.finance-v5-panel-header,.finance-v5-subsection-head { border-color: var(--border); }
.finance-v5-search-input :where(input,select) { background: var(--bg-card); color: var(--text-main); }
.finance-manager-hero { border-color: var(--border); background: var(--bg-card); border-radius: 18px; }
.finance-manager-action-card { background: var(--bg-card); border-radius: 14px; padding: 15px; }
.finance-manager-action-card>i { background: var(--soft-primary); color: var(--primary); }
/* Original receipt/report/print document white-paper palettes are deliberately untouched. */

/* Accountant module / cash and daily receipts: targeted UI-only harmonization. */
.accounting-manager-dashboard { color: var(--text-main); }
.am-header,.am-filter,.am-panel,.am-metric,.am-equation,.am-zone-overview,.am-section-card {
    background: var(--bg-card); color: var(--text-main); border-color: var(--border); border-radius: 16px; box-shadow: var(--shadow-sm);
}
.am-header { padding: 15px 19px; gap: 18px; }
.am-header nav { gap: 6px; }
.am-header nav button { border-bottom-color: transparent; color: var(--text-muted); font-weight: 700; border-radius: 9px; }
.am-header nav button:hover { background: var(--surface-muted); }
.am-header nav button.active { color: var(--primary); background: var(--soft-primary); border-bottom-color: transparent; }
.am-brand-mark { background: var(--soft-primary); color: var(--primary); }
.am-brand h1,.am-panel h2,.am-section h2 { color: var(--text-main); }
.am-brand p,.am-user small,.am-filter span { color: var(--text-muted); }
.am-filter { padding: 12px 15px; }
.am-filter button,.am-date-range input,.am-movement-type select,.am-zone-toolbar select,.am-zone-overview-actions button {
    background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); border-radius: 10px;
}
.am-filter button.active,.am-filter #am-refresh { color: #fff; background: #da3853; border-color: #da3853; }
body.dark-mode .am-filter button.active,body.dark-mode .am-filter #am-refresh { color: #172033; background: var(--primary); border-color: var(--primary); }
.am-actions button { background: var(--bg-card); color: var(--text-main); border-color: var(--border); border-radius: 14px; }
.am-actions button:hover { background: var(--soft-primary); border-color: var(--primary); }
.am-metric { min-width: 0; padding: 17px; }
.am-metric span,.am-actions small,.am-equation p { color: var(--text-muted); }
.am-metric strong { color: var(--text-main); }
.am-metric.highlight { background: var(--soft-primary); border-color: var(--focus-ring); }
.am-equation { background: var(--soft-primary); border-color: var(--border); }
.am-equation-terms span,.am-zone-overview,.am-zone-detail .am-table { background: var(--bg-card); color: var(--text-main); border-color: var(--border); }
.am-panel>header,.am-table th,.am-table td { border-color: var(--border); }
.am-table th { color: var(--text-muted); background: var(--surface-muted); }
.am-table td { color: var(--text-main); }
.am-clickable-row:hover { background: var(--soft-primary); }
.am-clickable-row.active { background: var(--soft-primary); box-shadow: inset -3px 0 0 var(--primary); }
.am-receipts-layout>section,.am-receipts-layout header,.am-receipt-summary-pane,.am-order-title { border-color: var(--border); }
.am-order-financials>div,.am-order-details dl>div,.am-receipt-summary dl>div { border-color: var(--border); }
.am-order-note p { background: var(--surface-muted); color: var(--text-main); }
.am-receipt-detail-scroll { scrollbar-width: thin; }
.am-zone-detail>td { background: var(--surface-muted); }

/* Popups and panels; preserve all existing display/show/hide classes. */
.modal { background: rgba(11,19,34,.59); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal-content { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); border-radius: 21px; box-shadow: var(--shadow-lg); }
.modal-header { background: var(--bg-card); padding: 19px 22px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 15px; font-weight: 900; }
.modal-body { padding: 22px; color: var(--text-main); }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface-muted); }
.btn-close-modal { display: grid; place-items: center; min-width: 36px; min-height: 36px; border-radius: 10px;
    color: var(--text-muted); background: var(--surface-muted); border: 1px solid var(--border);
}
.btn-close-modal:hover { background: var(--soft-primary); color: var(--primary); }
#operations-candidate-modal .operations-candidate-modal-content { border-radius: 19px; }
.image-lightbox { background: rgba(9,15,26,.88); }

/* Dark mode: explicit protection for panels with legacy hard-coded whites. */
body.dark-mode .card-header,body.dark-mode .data-table,body.dark-mode .data-table th,
body.dark-mode .modal-content,body.dark-mode .modal-header,body.dark-mode .modal-footer,
body.dark-mode .settings-accordion,body.dark-mode .accordion-header,
body.dark-mode .settings-modal-item,body.dark-mode .settings-panel-hero,
body.dark-mode .settings-accordion .settings-form,
body.dark-mode .support-dashboard-filters,body.dark-mode .support-mode-tabs,
body.dark-mode .mobile-widget-section-card,body.dark-mode .mobile-widget-admin-row,
body.dark-mode .mobile-widget-item,body.dark-mode .finance-v5-rail { border-color: var(--border); color: var(--text-main); }
body.dark-mode .data-table th,body.dark-mode .modal-footer { background: var(--surface-muted); }
body.dark-mode .accordion-header.open { background: var(--soft-primary); }
body.dark-mode .stat-item>i { background: var(--surface-muted); color: var(--primary); }
body.dark-mode .finance-v5-rail-btn.active,body.dark-mode .finance-manager-action-card:hover { background: var(--soft-primary); }
body.dark-mode .support-order-result,body.dark-mode .support-receipt-result,
body.dark-mode .mobile-widget-section-card,body.dark-mode .mobile-widget-admin-row,
body.dark-mode .mobile-widget-item { background: var(--bg-card); }
body.dark-mode .mobile-widget-tab.active { background: var(--soft-primary); color: var(--primary); }
body.dark-mode .support-mode-tab.active { background: var(--surface-raised); }
body.dark-mode .am-actions button,body.dark-mode .am-metric,
body.dark-mode .am-equation-terms span,body.dark-mode .am-panel,
body.dark-mode .am-receipts-layout>section { background: var(--bg-card); color: var(--text-main); }
body.dark-mode .am-header nav button.active { background: var(--soft-primary); }
body.dark-mode .am-clickable-row.active,body.dark-mode .am-clickable-row:hover { background: var(--surface-muted); }

/* Responsive systems: keep controls usable, tables horizontally scrollable,
   and the mobile nav on the RTL leading edge. */
@media (max-width: 1280px) {
    .dashboard-container>.sidebar { width: 250px; flex-basis: 250px; }
    .sidebar-header { padding-inline: 17px; }
    .sidebar .nav-links { padding-inline: 8px; }
    .sidebar .nav-links li { gap: 8px; padding-inline: 10px; }
    .topbar { padding-inline: 22px; }
    .content-area { padding: 22px; }
    .users-stats-bar { gap: 8px; }
    .stat-item { padding: 12px; }
}
@media (max-width: 1100px) {
    .topbar-context { display: none; }
    .admin-email { max-width: 160px; }
    .users-stats-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #tab-operations .operations-counters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .showcase-preview { margin-top: 23px; }
    .login-showcase-main h1 { font-size: 41px; }
    .showcase-preview-cards>div { padding: 12px 9px; }
}
@media (max-width: 900px) {
    .login-container { grid-template-columns: 44% 56%; }
    .login-showcase { padding: 27px; }
    .login-showcase-main h1 { font-size: 35px; }
    .login-showcase-main>p { font-size: 12px; }
    .showcase-preview { padding: 12px; }
    .showcase-preview-cards { grid-template-columns: 1fr; }
    .showcase-preview-cards>div { flex-direction: row; gap: 9px; align-items: center; padding: 9px; }
    .showcase-preview-cards .showcase-preview-icon { margin-bottom: 0; }
    .showcase-preview-cards small { margin-inline-start: auto; }
    .showcase-preview-chart { display: none; }
    .login-box { width: calc(100% - 28px); padding: 14px 10px; }
    .dashboard-container>.sidebar { width: 235px; flex-basis: 235px; }
    .sidebar-header h2 { font-size: 17px; }
    .sidebar-brand-name>span { font-size: 8px; }
    .sidebar-workspace { padding: 9px 7px; }
    .sidebar .nav-links li { font-size: 11px; }
    .topbar { padding-inline: 16px; }
    .content-area { padding: 16px; }
}
@media (max-width: 768px) {
    .dashboard-container>.sidebar {
        position: fixed; top: 0; bottom: 0; right: 0; left: auto; inset-inline-start: 0;
        width: min(304px,87vw); height: 100dvh; max-height: 100dvh; flex-basis: auto;
        transform: translateX(106%); z-index: 220; visibility: hidden;
        transition: transform .23s ease, visibility .23s ease;
        box-shadow: -24px 0 48px rgba(0,0,0,.24);
    }
    .dashboard-container>.sidebar.open { transform: translateX(0); visibility: visible; right: 0; left: auto; }
    .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 205; background: rgba(9,16,30,.54);
        -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
        opacity: 0; visibility: hidden; transition: opacity .2s ease,visibility .2s ease;
    }
    .mobile-nav-backdrop.show { opacity: 1; visibility: visible; }
    .d-mobile { display: inline-flex; }
    .topbar { min-height: 77px; gap: 8px; }
    .topbar-left { gap: 10px; }
    .topbar-left #mobile-menu-btn { width: 40px; height: 40px; flex-shrink: 0; }
    .topbar h1 { font-size: 17px; }
    .page-breadcrumb { font-size: 9px; }
    .user-info { padding-inline-start: 10px; gap: 7px; }
    .user-details { display: none; }
    .avatar { width: 37px; height: 37px; border-radius: 10px; }
    .content-area { padding: 15px 13px 30px; }
    .card { margin-bottom: 14px; border-radius: 15px; }
    .card-header { padding: 17px; }
    .card-header h3 { font-size: 14px; }
    .data-table th,.data-table td { padding: 13px 12px; }
    .zones-grid { padding: 12px; grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); gap: 11px; }
    .users-stats-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .support-dashboard-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .support-order-search-bar,.support-dashboard-filters { padding: 15px; }
    .support-order-search-results { padding: 0 15px 15px; }
    .support-mode-tabs { margin: 13px 15px; }
    .modal-content { max-width: min(96vw,800px); }
}
@media (max-width: 700px) {
    .login-container { display: flex; flex-direction: column; justify-content: flex-start; background: #fff; }
    .login-showcase { min-height: 125px; height: 125px; padding: 24px; justify-content: center; flex-shrink: 0; }
    .login-showcase-main,.login-showcase-bottom { display: none; }
    .login-showcase-top { gap: 10px; }
    .login-brandmark { width: 43px; height: 43px; border-radius: 12px; font-size: 18px; }
    .login-brandword { font-size: 19px; }
    .login-brandword small { font-size: 10px; }
    .login-box { width: min(470px,100%); padding: 36px 25px 42px; margin: 0 auto; background: #fff; }
    .logo-area { margin-bottom: 25px; }
    .logo-area .logo-icon { width: 49px; height: 49px; border-radius: 14px; margin-bottom: 20px; font-size: 19px; }
    .logo-area h2 { font-size: 29px; }
    #login-btn { margin-top: 7px; }
    .login-bg-shapes { display: none; }
    .support-mode-tabs { width: auto; }
}
@media (max-width: 520px) {
    .topbar { padding: 10px 12px; min-height: 72px; }
    .topbar h1 { font-size: 15px; }
    .page-breadcrumb { gap: 5px; }
    .content-area { padding: 12px 10px 24px; }
    .card-header { gap: 11px; align-items: stretch; }
    .card-header>div:first-child { flex: 1 1 100%; }
    .card-header .actions { width: 100%; }
    .card-header :where(.btn-primary,.btn-secondary) { flex: 1 1 auto; }
    .users-stats-bar { gap: 8px; }
    .stat-item { padding: 11px; gap: 8px; min-height: 67px; }
    .stat-item>i { width: 33px; height: 33px; font-size: 13px; }
    .stat-item>span { font-size: 17px; }
    .support-kpi { min-height: 78px; }
    .support-kpi span { font-size: 20px; }
    .filter-btn { min-height: 33px; }
    #tab-operations .operations-counters { gap: 8px; }
    #tab-operations .operations-counter { min-height: 73px; padding: 13px; }
    #tab-operations .operations-counter strong { font-size: 20px; }
    .modal-content { width: 100%; max-width: 100%; max-height: 96dvh; border-radius: 18px 18px 0 0; }
    .modal-body { padding: 16px; }
    .modal-header,.modal-footer { padding: 14px 16px; }
    .am-header { padding: 12px; }
    .am-filter { flex-wrap: wrap; }
    .am-actions,.am-reconciliation { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .am-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .finance-v5-rail-btn { min-width: 0; flex: 1 1 auto; }
}
@media (max-width: 360px) {
    .login-showcase { min-height: 104px; height: 104px; padding: 16px 20px; }
    .login-box { padding: 26px 18px 32px; }
    .topbar h1 { font-size: 14px; }
    .users-stats-bar { grid-template-columns: 1fr 1fr; }
    .stat-item { font-size: 10px; }
    .stat-item>i { width: 29px; height: 29px; }
    .support-dashboard-kpis { grid-template-columns: 1fr 1fr; }
    #tab-operations .operations-counter { padding: 9px; }
    .sidebar .nav-links li { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    /* Reports own their print styles in the legacy stylesheet: do not restyle them. */
    .login-showcase,.mobile-nav-backdrop,.sidebar-workspace,.sidebar-footer-note,.topbar-context { display: none !important; }
}

/* Sign-in also follows system dark appearance without changing auth behavior. */
body.dark-mode .login-container { background: #111a27; }
body.dark-mode .login-box { background: #111a27; }
body.dark-mode .logo-area h2 { color: #f2f5fb; }
body.dark-mode .logo-area p,body.dark-mode .login-form-footnote { color: #a6b3c7; }
body.dark-mode .logo-area .logo-icon { background: #36292f; color: #f3bf59; border-color: #4e3b36; }
body.dark-mode .login-form-eyebrow { color: #f3bf59; }
body.dark-mode .input-group label { color: #dce3ee; }
body.dark-mode .input-with-icon input { background: #1b283b; border-color: #344256; color: #f5f7fc; }
body.dark-mode .input-with-icon input:focus { border-color: #f3bf59; box-shadow: 0 0 0 4px rgba(243,191,89,.16); }
body.dark-mode .btn-google { background: #1b283b; border-color: #344256; color: #f0f3f9; }
body.dark-mode .btn-google:hover { background: #243349; }
body.dark-mode .login-form-footnote { border-top-color: #2a394d; }
body.dark-mode .divider { color: #a9b5c8; }
body.dark-mode .divider::before,body.dark-mode .divider::after { border-color: #2d3a4e; }
body.dark-mode #login-btn { background: #f3bf59; color: #131d2a; box-shadow: none; border-color: #f3bf59; }
body.dark-mode #login-btn:hover { background: #ffd37d; border-color: #ffd37d; }