:root {
    --sidebar: #14181f;
    --sidebar-text: #c9d1dc;
    --accent: #e2a322;
    --accent-ink: #1c1403;
    --line: rgba(20, 24, 31, .08);
}
html[data-bs-theme="dark"] {
    --line: rgba(255, 255, 255, .08);
}
body { font-family: "Segoe UI", system-ui, sans-serif; background: #f3f5f7; }
html[data-bs-theme="dark"] body { background: #0e1218; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 268px; background: var(--sidebar); color: var(--sidebar-text);
    position: sticky; top: 0; height: 100vh; overflow: auto; flex-shrink: 0;
}
.brand { display: flex; gap: .75rem; align-items: center; padding: 1.25rem 1.1rem 1rem; color: white; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; }
.nav-section { padding: .85rem 1.15rem .25rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #7d8796; }
.side-link { display: flex; align-items: center; gap: .7rem; color: var(--sidebar-text); text-decoration: none; padding: .55rem 1rem; margin: .1rem .6rem; border-radius: .7rem; }
.side-link:hover, .side-link.active { background: rgba(226, 163, 34, .16); color: white; }
.app-main { flex: 1; min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .85rem 1.25rem; background: rgba(255,255,255,.85); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
.topbar-title { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.branch-switch { min-width: 0; }
.branch-switch .form-select { max-width: 11rem; }
.notify-menu { min-width: min(260px, calc(100vw - 1.5rem)); }
html[data-bs-theme="dark"] .topbar { background: rgba(18, 22, 28, .9); }
.content { padding: 1.25rem; }
.kpi { border: 1px solid rgba(20, 24, 31, .06); border-radius: .9rem; background: #fff; box-shadow: 0 8px 18px rgba(16, 24, 40, .04); }
.kpi .card-body { padding: .75rem .85rem .8rem; }
.kpi .value { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-top: .35rem; }
.dash-section { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5c6775; }
.dash-section::before { content: ""; width: .45rem; height: .45rem; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 4px rgba(226, 163, 34, .16); }
.kpi-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.kpi-link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16, 24, 40, .1); color: inherit; }
.kpi-icon { width: 1.7rem; height: 1.7rem; border-radius: .55rem; display: grid; place-items: center; font-size: .85rem; flex-shrink: 0; }
.kpi-gold { background: linear-gradient(160deg, #fff8e8 0%, #fff 62%); }
.kpi-green { background: linear-gradient(160deg, #f0fbf4 0%, #fff 62%); }
.kpi-red { background: linear-gradient(160deg, #fff1f1 0%, #fff 62%); }
.kpi-blue { background: linear-gradient(160deg, #f3f7ff 0%, #fff 62%); }
.kpi-slate { background: linear-gradient(160deg, #f4f6f8 0%, #fff 62%); }
.kpi-gold .kpi-icon { background: #e2a322; color: #1c1403; }
.kpi-green .kpi-icon { background: #16a34a; color: #fff; }
.kpi-red .kpi-icon { background: #dc2626; color: #fff; }
.kpi-blue .kpi-icon { background: #2563eb; color: #fff; }
.kpi-slate .kpi-icon { background: #64748b; color: #fff; }
html[data-bs-theme="dark"] .kpi { background: #171c24; border-color: rgba(255,255,255,.06); }
html[data-bs-theme="dark"] .kpi-gold { background: linear-gradient(160deg, rgba(226,163,34,.18), #171c24 62%); }
html[data-bs-theme="dark"] .kpi-green { background: linear-gradient(160deg, rgba(22,163,74,.18), #171c24 62%); }
html[data-bs-theme="dark"] .kpi-red { background: linear-gradient(160deg, rgba(220,38,38,.18), #171c24 62%); }
html[data-bs-theme="dark"] .kpi-blue { background: linear-gradient(160deg, rgba(37,99,235,.2), #171c24 62%); }
html[data-bs-theme="dark"] .kpi-slate { background: linear-gradient(160deg, rgba(148,163,184,.16), #171c24 62%); }
.dash-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .25rem; }
.dash-filter .form-control { width: auto; }
.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head .d-flex { flex-wrap: wrap; }
.chart-box { position: relative; height: 240px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.empty { padding: 2rem 1rem; text-align: center; color: #6b7280; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.auth-panel { background: #14181f; color: white; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-form { display: grid; place-items: center; padding: 2rem; }
.card, .modal-content { border-radius: 1rem; }
.card:has(> .table),
.card-body:has(> .table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
code, .text-break { overflow-wrap: anywhere; }
.pagination { flex-wrap: wrap; }
#mobileNav.offcanvas { width: min(320px, 88vw); background: var(--sidebar); color: white; }
#mobileNav .btn-close { filter: invert(1); }
#mobileNav .side-link { margin-left: 0; margin-right: 0; min-height: 44px; }
#mobileNav .nav-section { padding-left: .25rem; }
#mobileNav .form-select { background-color: #fff; color: #14181f; }
.app-tabbar { display: none; }
.app-tab { flex: 1; min-height: 52px; border: 0; background: transparent; color: #6b7280; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; font-size: .68rem; font-weight: 600; }
.app-tab i { font-size: 1.2rem; line-height: 1; }
.app-tab.active { color: #9a6b08; }
html[data-bs-theme="dark"] .app-tabbar { background: #12161c; }
html[data-bs-theme="dark"] .app-tab.active { color: #e2a322; }
@media (max-width: 991.98px) {
    .sidebar { display: none; }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-panel { display: none; }
    .app-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(10px); }
    .app-main { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
    .app-footer, .topbar-actions .d-none.d-sm-inline { display: none !important; }
    #toasts { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
    .topbar { flex-wrap: nowrap; }
    .topbar-actions { flex: 0 0 auto; width: auto; }
    .content { padding: .85rem .85rem 1.1rem; }
    .content form.d-flex,
    .content .d-flex.justify-content-between { flex-wrap: wrap; }
    .content form.d-flex > .form-control,
    .content form.d-flex > .form-select { flex: 1 1 8rem; min-width: 0; }
}
@media (max-width: 575.98px) {
    .topbar { flex-wrap: nowrap; padding: .7rem .9rem; }
    .topbar-title { flex: 1 1 auto; }
    .topbar-actions { flex: 0 0 auto; width: auto; justify-content: flex-end; }
    .content .row > .col-auto { flex: 1 1 100%; width: 100%; }
    .content .row > .col-auto > .form-control,
    .content .row > .col-auto > .form-select,
    .content .row > .col-auto > .btn { width: 100%; }
    .form-control, .form-select, .btn { font-size: 16px; }
    .dash-filter .form-control { width: 100%; }
    .kpi .value { font-size: 1.05rem; }
    .auth-form { padding: 1.25rem 1rem; }
    .auth-form h1, .auth-form .h3 { font-size: 1.5rem; }
}
@media print {
    .sidebar, .topbar, .app-tabbar, .no-print { display: none !important; }
    .content { padding: 0; }
}