:root{--blue:#2f80ed;--teal:#19a98a;--purple:#7957d5;--orange:#f2994a;--ink:#23344d;--muted:#718096;--line:#e4eaf2;--canvas:#f7f9fc;--nav:#eef6ff}*{box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--canvas)}a{color:var(--blue);text-decoration:none}.btn{border-radius:9px;font-weight:600}.btn-primary{background:var(--blue);border-color:var(--blue)}.form-control,.form-select{border-color:var(--line);border-radius:9px;padding:.7rem .85rem}.form-label{font-size:.88rem;font-weight:600;color:#45556b}.app-shell{display:flex;min-height:100vh}.sidebar{width:245px;flex:0 0 245px;background:var(--nav);padding:25px 15px;display:flex;flex-direction:column;border-right:1px solid #e0ebf8}.brand{display:flex;align-items:center;gap:10px;color:var(--blue);font-weight:800;padding:0 12px 30px}.brand small{display:block;color:var(--muted);font-size:.65rem;letter-spacing:.13em}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--blue);color:white}.nav-stack{display:flex;flex-direction:column;gap:5px}.nav-caption{font-size:.65rem;color:#94a4b8;font-weight:800;padding:17px 13px 4px;letter-spacing:.12em}.nav-link{color:#53657d;padding:12px 14px;border-radius:10px;font-size:.9rem;font-weight:600}.nav-link:hover,.nav-link.active{background:#d9ebff;color:var(--blue)}.sidebar-user{margin-top:auto;border-top:1px solid #dce8f5;padding:18px 10px 0;font-size:.8rem}.sidebar-user small{display:block;color:var(--muted)}.main-area{flex:1;min-width:0}.topbar{min-height:100px;padding:20px 34px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.topbar-eyebrow,.eyebrow{font-size:.66rem;font-weight:800;letter-spacing:.12em;color:var(--blue)}.topbar h1{font-size:1.45rem;font-weight:750;margin:3px 0}.topbar-actions{display:flex;align-items:center;gap:12px}.user-pill{border:1px solid var(--line);padding:9px 13px;border-radius:25px;font-size:.8rem}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:7px}.content-area{padding:28px 34px}.kpi-card,.panel-card{background:white;border:1px solid var(--line);border-radius:15px;box-shadow:0 4px 18px #223e5e08}.kpi-card{padding:21px;min-height:145px}.kpi-top{display:flex;justify-content:space-between;color:var(--muted);font-size:.83rem}.kpi-icon{width:30px;height:30px;border-radius:9px;background:#eaf3ff}.kpi-icon.orange{background:#fff0df}.kpi-icon.purple{background:#f0eaff}.kpi-icon.red{background:#ffe9e9}.kpi-value{font-size:2rem;font-weight:800;margin:10px 0}.kpi-foot,.panel-heading p{font-size:.76rem;color:var(--muted)}.panel-card{padding:22px 24px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.panel-heading h2{font-size:1.05rem;font-weight:750;margin:0}.panel-heading p{margin:5px 0 0}.table thead th{background:#f0f5fa;color:#74849a;font-size:.72rem;text-transform:uppercase;border:0;padding:13px}.table tbody td{font-size:.84rem;padding:14px;border-color:#edf1f6}.status-badge{display:inline-block;background:#e7f7ef;color:#18835b;padding:5px 10px;border-radius:20px;font-size:.72rem;font-weight:750}.quick-actions>a{display:flex;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid #edf1f6;color:var(--ink)}.quick-actions strong,.quick-actions small{display:block}.quick-actions strong{font-size:.83rem}.quick-actions small{font-size:.72rem;color:var(--muted);margin-top:3px}.quick-actions b{margin-left:auto;color:#9aa8b9}.quick-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eaf3ff;color:var(--blue)}.quick-icon.teal{background:#e1f8f1;color:var(--teal)}.quick-icon.purple{background:#f0eaff;color:var(--purple)}.filter-row{display:flex;gap:12px;align-items:end;margin-bottom:20px}.form-actions{display:flex;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid #edf1f6}.form-panel{max-width:1000px}.auth-body{min-height:100vh;background:var(--canvas)}.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(350px,39%) 1fr}.auth-brand-panel{background:#eaf4ff;padding:10vh 7vw}.auth-brand{color:var(--blue);font-weight:800}.auth-brand strong{display:block;color:var(--ink)}.auth-brand-panel h2{font-size:2.5rem;line-height:1.15;font-weight:800;margin:70px 0 15px}.auth-brand-panel h2 span{color:var(--teal)}.auth-brand-panel p{color:var(--muted)}.feature-chip{background:white;border:1px solid var(--line);border-radius:11px;padding:13px 16px;width:260px;margin:9px 0;font-size:.86rem}.auth-form-wrap{display:grid;place-items:center;padding:35px}.auth-card,.recovery-card{background:white;border:1px solid var(--line);border-radius:20px;padding:42px;width:min(100%,570px);box-shadow:0 15px 45px #223e5e0f}.auth-card h1,.recovery-card h1{font-size:2rem;font-weight:800;margin:10px 0 5px}.auth-divider{display:flex;align-items:center;gap:15px;color:#a0adbb;margin:22px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.btn-sso{background:#eaf4ff;color:var(--blue);border:1px solid #d8e9ff}.auth-footnote{font-size:.72rem;color:var(--muted);margin:24px 0 0}.public-auth-header{padding:24px 5vw}.recovery-wrap{display:grid;place-items:start center;padding:40px 20px}.recovery-card p{line-height:1.6;margin:12px 0 28px}@media(max-width:900px){.auth-page{grid-template-columns:1fr}.auth-brand-panel{display:none}.auth-card,.recovery-card{padding:28px}.filter-row{flex-wrap:wrap}}


/* ===== Dashboard UI (matches dashboard_recreation.html) ===== */
:root{--blue:#2563eb;--bg:#f3f4f6;--card:#fff;--sidebar:#fff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--hover:#f3f4f6;--accent-soft:#eff6ff;--accent-text:#2563eb;--soft:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);--canvas:var(--bg)}
html.dark{--bg:#0f172a;--card:#1e293b;--sidebar:#1e293b;--ink:#f8fafc;--muted:#94a3b8;--line:#334155;--hover:#0f172a;--accent-soft:rgba(59,130,246,.1);--accent-text:#60a5fa;--soft:none;--canvas:var(--bg)}
html,body{height:100%}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
body.app-body{overflow:hidden;display:flex;flex-direction:column}
a{color:var(--blue)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideRight{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.app-shell{display:flex;flex:1;min-height:0;height:100%}
.mobile-header{display:none}
#sidebar-overlay{display:none}

/* Sidebar */
.sidebar{width:256px;flex:0 0 256px;background:var(--sidebar);border-right:1px solid var(--line);padding:0;display:flex;flex-direction:column;height:100%;transition:width .3s ease,transform .3s ease,background-color .3s,border-color .3s;animation:slideRight .5s ease both;z-index:40}
.brand-row{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);flex:none}
.brand{display:flex;align-items:center;gap:12px;padding:0;color:var(--ink);font-weight:700;font-size:1rem;letter-spacing:-.01em;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:.62rem;letter-spacing:.14em;font-weight:600}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#3b82f6;color:#fff;font-size:.85rem;box-shadow:0 4px 6px -1px rgba(59,130,246,.35);transition:transform .3s;flex:none}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.icon-link{background:none;border:0;color:var(--muted);padding:4px;transition:color .2s}
.icon-link:hover{color:#3b82f6}
.nav-stack{flex:1;overflow-y:auto;padding:24px 16px;display:flex;flex-direction:column;gap:4px;scrollbar-width:none}
.nav-stack::-webkit-scrollbar{display:none}
.nav-caption{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:18px 16px 6px}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:8px;color:var(--muted);font-size:.875rem;font-weight:500;transition:background-color .2s,color .2s,transform .2s}
.nav-link:hover{background:var(--hover);color:var(--ink);transform:translateX(3px)}
.nav-link.active,.nav-link.active:hover{background:var(--accent-soft);color:var(--accent-text);font-weight:600;transform:none}
.nav-ico{width:20px;text-align:center;font-size:1rem;flex:none;transition:transform .2s}
.nav-link:hover .nav-ico{transform:scale(1.15)}
.sidebar-foot{padding:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;flex:none}
.theme-row{display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:.875rem;font-weight:500;color:var(--muted)}
.theme-switch{position:relative;width:36px;height:20px;border-radius:999px;border:0;background:#d1d5db;padding:0;transition:background-color .3s}
html.dark .theme-switch{background:#2563eb}
.theme-knob{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .3s}
html.dark .theme-knob{transform:translateX(16px)}
.sidebar-user{margin:0;border:0;padding:8px;display:flex;align-items:center;gap:12px;border-radius:8px;cursor:pointer;font-size:.8rem;transition:background-color .2s}
.sidebar-user:hover{background:var(--hover)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#9333ea);color:#fff;font-weight:700;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);flex:none}
.user-meta{min-width:0}.user-meta strong{display:block;font-size:.875rem;font-weight:700}.user-meta small{display:block;color:var(--muted);font-size:.75rem}
.sidebar-collapsed{width:80px!important;flex-basis:80px!important}
.sidebar-collapsed .logo-text,.sidebar-collapsed .nav-link span,.sidebar-collapsed .nav-caption,.sidebar-collapsed .theme-row,.sidebar-collapsed .user-meta{display:none}
.sidebar-collapsed .brand-row{padding:0;justify-content:center;height:80px}
.sidebar-collapsed .brand{display:none}
.sidebar-collapsed .nav-link{justify-content:center;padding:10px}
.sidebar-collapsed .sidebar-user{justify-content:center}

/* Main + top bar */
.main-area{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;overflow:hidden}
.topbar{height:80px;min-height:80px;padding:0 32px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;transition:background-color .3s,border-color .3s;animation:fadeIn .5s ease both}
.search-box{position:relative;flex:1;max-width:448px}
.search-box i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);transition:color .2s}
.search-box:focus-within i{color:#3b82f6}
.search-box input{width:100%;background:var(--bg);color:var(--ink);border:0;border-radius:999px;padding:10px 16px 10px 44px;font-size:.875rem;outline:0;transition:box-shadow .2s,background-color .3s}
.search-box input::placeholder{color:var(--muted)}
.search-box input:focus{box-shadow:0 0 0 2px rgba(59,130,246,.5)}
.topbar-actions{display:flex;align-items:center;gap:16px;margin-left:auto}
.topbar-actions form{margin:0}
.round-btn{position:relative;width:40px;height:40px;border-radius:50%;background:var(--bg);color:var(--muted);display:grid;place-items:center;transition:color .2s,transform .2s}
.round-btn:hover{color:#3b82f6;transform:translateY(-2px)}
.bell-dot{position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid var(--card)}
.v-divider{width:1px;height:32px;background:var(--line)}
.user-pill{display:inline-flex;align-items:center;background:var(--bg);border:0;border-radius:999px;padding:9px 16px;font-weight:600;font-size:.8rem;color:var(--ink)}
.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:8px;animation:pulseDot 2s infinite}
.btn{border-radius:8px;font-weight:500;transition:background-color .2s,color .2s,box-shadow .2s,transform .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:#2563eb;border-color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.btn-outline-primary{color:#2563eb;border-color:var(--line)}
.btn-outline-primary:hover{background:#2563eb;border-color:#2563eb;color:#fff}
.btn-light{background:var(--accent-soft);color:var(--accent-text);border-color:transparent;font-weight:600}
.btn-light:hover{background:rgba(59,130,246,.18);color:var(--accent-text)}

/* Content */
.content-area{flex:1;overflow-y:auto;padding:32px}
.content-inner{max-width:80rem;margin:0 auto}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;animation:fadeUp .5s ease both}
.page-head h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:2px 0 0;color:var(--ink)}
.topbar-eyebrow,.eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.12em;color:var(--blue)}
.date-pill{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 16px;font-size:.875rem;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.date-pill i{color:var(--muted)}

/* Cards */
.kpi-card,.panel-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--soft);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background-color .3s;animation:fadeUp .6s ease both}
.panel-card{padding:24px}
.panel-card:hover{box-shadow:0 10px 20px -8px rgba(17,24,39,.12)}
.kpi-card{padding:20px;min-height:0;position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px}
.kpi-card::after{content:"\f142";font:900 .95rem/1 "Font Awesome 6 Free";color:var(--muted);position:absolute;top:20px;right:22px}
.kpi-card:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.4);box-shadow:0 12px 24px -8px rgba(37,99,235,.2)}
.row>div:nth-child(1)>.kpi-card{animation-delay:.05s}.row>div:nth-child(2)>.kpi-card{animation-delay:.12s}.row>div:nth-child(3)>.kpi-card{animation-delay:.19s}.row>div:nth-child(4)>.kpi-card{animation-delay:.26s}
.row>.col-xl-8>.panel-card{animation-delay:.3s}.row>.col-xl-4>.panel-card{animation-delay:.4s}
.kpi-top{grid-column:1/-1;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:4px;font-size:.875rem;font-weight:500;color:var(--muted)}
.kpi-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:900 1rem/1 "Font Awesome 6 Free";background:#eff6ff;color:#2563eb;margin-bottom:12px;transition:transform .3s}
.kpi-icon::before{content:"\f1b2"}
.kpi-icon.orange{background:#fff7ed;color:#f97316}.kpi-icon.orange::before{content:"\f0b1"}
.kpi-icon.purple{background:#faf5ff;color:#9333ea}.kpi-icon.purple::before{content:"\f058"}
.kpi-icon.red{background:#fef2f2;color:#ef4444}.kpi-icon.red::before{content:"\f071"}
html.dark .kpi-icon{background:rgba(59,130,246,.1);color:#60a5fa}
html.dark .kpi-icon.orange{background:rgba(249,115,22,.1);color:#fb923c}
html.dark .kpi-icon.purple{background:rgba(168,85,247,.1);color:#c084fc}
html.dark .kpi-icon.red{background:rgba(239,68,68,.1);color:#f87171}
.kpi-card:hover .kpi-icon{transform:scale(1.12)}
.kpi-value{font-size:1.5rem;font-weight:700;margin:4px 0 0;color:var(--ink)}
.kpi-foot{font-size:.75rem;font-weight:600;color:#22c55e;background:rgba(34,197,94,.1);padding:2px 10px;border-radius:999px;margin-bottom:4px;white-space:nowrap}
.panel-heading h2{font-size:1.125rem;font-weight:700;color:var(--ink)}
.panel-heading p{font-size:.875rem;color:var(--muted)}

/* Table */
.table{--bs-table-bg:transparent;--bs-table-color:var(--ink);--bs-table-border-color:var(--line);margin:0}
.table thead th{background:transparent;color:var(--muted);font-size:.875rem;font-weight:600;text-transform:none;letter-spacing:0;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.table tbody td{padding:14px;font-size:.875rem;color:var(--muted);border-bottom:1px solid var(--line);background:transparent;transition:background-color .2s}
.table tbody tr:last-child td{border-bottom:0}
.table tbody td:first-child{color:var(--ink);font-weight:600}
.table tbody tr{animation:fadeUp .5s ease both}
.table tbody tr:nth-child(1){animation-delay:.45s}.table tbody tr:nth-child(2){animation-delay:.5s}.table tbody tr:nth-child(3){animation-delay:.55s}.table tbody tr:nth-child(4){animation-delay:.6s}.table tbody tr:nth-child(5){animation-delay:.65s}
.table tbody tr:hover td{background:rgba(148,163,184,.1)}
.status-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.2);padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:500}
.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e}

/* Quick actions */
.quick-actions>a{display:flex;align-items:center;gap:12px;padding:12px;margin:0 -12px;border:0;border-radius:12px;color:var(--ink);transition:background-color .25s,transform .25s;animation:fadeUp .5s ease both}
.quick-actions>a:nth-child(1){animation-delay:.5s}.quick-actions>a:nth-child(2){animation-delay:.6s}.quick-actions>a:nth-child(3){animation-delay:.7s}
.quick-actions>a:hover{background:var(--hover);transform:translateX(4px)}
.quick-actions strong{font-weight:700;font-size:.875rem;transition:color .2s}
.quick-actions small{color:var(--muted)}
.quick-actions>a:hover strong{color:#3b82f6}
.quick-actions b{margin-left:auto;color:var(--muted);transition:transform .25s,color .25s}
.quick-actions>a:hover b{transform:translateX(5px);color:#3b82f6}
.quick-icon{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;font-weight:700;transition:transform .3s;flex:none}
.quick-icon.teal{background:#f0fdf4;color:#22c55e}
.quick-icon.purple{background:#faf5ff;color:#9333ea}
html.dark .quick-icon{background:rgba(59,130,246,.15);color:#60a5fa}
html.dark .quick-icon.teal{background:rgba(34,197,94,.15);color:#4ade80}
html.dark .quick-icon.purple{background:rgba(168,85,247,.15);color:#c084fc}
.quick-actions>a:hover .quick-icon{transform:scale(1.12)}

/* Forms (shared pages) */
.form-control,.form-select{border-radius:8px;border-color:var(--line);background-color:var(--bg);color:var(--ink);transition:border-color .2s,box-shadow .2s,background-color .3s}
.form-control:focus,.form-select:focus{background-color:var(--card);color:var(--ink);border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.form-label{color:var(--muted)}
.filter-row,.form-actions{border-color:var(--line)}

::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(156,163,175,.5);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:rgba(156,163,175,.8)}

/* Mobile (below md) */
@media(max-width:767.98px){
 .mobile-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--card);border-bottom:1px solid var(--line);z-index:50;flex:none}
 .sidebar{position:fixed;inset:0 auto 0 0;width:256px;transform:translateX(-100%)}
 .sidebar.open{transform:none}
 #sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:30;opacity:0;pointer-events:none;transition:opacity .3s}
 #sidebar-overlay.show{opacity:1;pointer-events:auto}
 .collapse-btn{display:none}
 .topbar{padding:0 16px;height:64px;min-height:64px}
 .search-box,.v-divider{display:none}
 .content-area{padding:16px}
}
@media(max-width:575.98px){.user-pill{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* ===== Login page (matches login_page.html) ===== */
@keyframes lgFloat{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes lgIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lgRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.lg-body{min-height:100vh;height:auto;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;background:var(--bg);color:var(--ink)}
.lg-card{width:100%;max-width:72rem;min-height:600px;display:flex;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);overflow:hidden;animation:lgIn .6s ease both;transition:background-color .3s,border-color .3s}
.lg-left{display:none;position:relative;width:50%;padding:48px;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(135deg,#2563eb,#312e81);color:#fff}
.lg-blob{position:absolute;border-radius:50%;pointer-events:none}
.lg-blob1{top:-96px;left:-96px;width:384px;height:384px;background:#fff;opacity:.05;filter:blur(48px)}
.lg-blob2{bottom:0;right:0;width:320px;height:320px;background:#60a5fa;opacity:.1;filter:blur(24px)}
.lg-float{position:absolute;display:grid;place-items:center;color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);box-shadow:0 20px 25px -5px rgba(0,0,0,.2)}
.lg-f1{top:25%;right:48px;width:64px;height:64px;border-radius:12px;font-size:1.5rem;rotate:12deg;animation:lgFloat 6s ease-in-out infinite}
.lg-f2{bottom:33%;left:48px;width:80px;height:80px;border-radius:50%;font-size:1.875rem;color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);animation:lgFloat 8s ease-in-out 2s infinite}
.lg-f3{top:50%;right:33%;width:48px;height:48px;border-radius:8px;font-size:1.25rem;color:rgba(255,255,255,.6);rotate:-6deg;animation:lgFloat 7s ease-in-out infinite}
.lg-left-top,.lg-chips{position:relative;z-index:10}
.lg-logo{display:flex;align-items:center;gap:12px;margin-bottom:64px}
.lg-logo-mark{width:40px;height:40px;border-radius:8px;background:#fff;color:#2563eb;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.2);flex:none}
.lg-logo-text{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.15}
.lg-logo-text span{display:block;color:#93c5fd;font-size:.8rem;letter-spacing:.06em}
.lg-left h1{font-size:2.25rem;font-weight:700;line-height:1.25;margin:0 0 24px;color:#fff;animation:lgRise .7s .2s ease both}
.lg-left p{color:#dbeafe;font-size:1.125rem;line-height:1.7;max-width:28rem;margin:0;animation:lgRise .7s .3s ease both}
.lg-chips{display:flex;flex-direction:column;gap:12px;margin-top:48px;align-items:flex-start}
.lg-chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);border-radius:12px;padding:12px 16px;font-size:.875rem;font-weight:600;color:#fff;animation:lgRise .7s ease both;transition:transform .25s,background-color .25s}
.lg-chip:hover{transform:translateX(6px);background:rgba(255,255,255,.18)}
.lg-chip i{font-size:.5rem;color:#93c5fd}
.lg-chip:nth-child(1){animation-delay:.4s}.lg-chip:nth-child(2){animation-delay:.5s}.lg-chip:nth-child(3){animation-delay:.6s}

.lg-right{width:100%;display:flex;flex-direction:column;background:var(--card);transition:background-color .3s}
.lg-topbar{display:flex;align-items:center;justify-content:space-between;padding:24px}
.lg-mobile-logo{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.lg-mini-mark{width:32px;height:32px;border-radius:8px;background:#3b82f6;color:#fff;display:grid;place-items:center}
.lg-theme{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.875rem}
.lg-switch{position:relative;width:44px;height:24px;border-radius:999px;border:0;background:#e5e7eb;padding:0;transition:background-color .3s}
.lg-switch:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
html.dark .lg-switch{background:#2563eb}
.lg-knob{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .3s}
html.dark .lg-knob{transform:translateX(20px)}
.lg-form-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:32px}
.lg-form{width:100%;max-width:28rem;animation:lgRise .7s .15s ease both}
.lg-head{text-align:center;margin-bottom:40px}
.lg-head h2{font-size:1.875rem;font-weight:700;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)}
.lg-head p{margin:0;color:var(--muted)}
.lg-field{margin-bottom:24px}
.lg-field label{display:block;font-size:.875rem;font-weight:500;color:var(--ink);margin-bottom:8px}
.lg-input{position:relative}
.lg-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:color .2s}
.lg-input:focus-within .lg-ico{color:#3b82f6}
.lg-input input{display:block;width:100%;padding:12px 16px 12px 44px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;font-size:.875rem;outline:0;transition:border-color .2s,box-shadow .2s,background-color .3s}
.lg-input input::placeholder{color:var(--muted)}
.lg-input input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.5)}
.lg-input input:-webkit-autofill,.lg-input input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 30px var(--bg) inset!important;-webkit-text-fill-color:var(--ink)!important}
.lg-eye{position:absolute;top:0;bottom:0;right:0;padding:0 16px;background:none;border:0;color:var(--muted);transition:color .2s}
.lg-eye:hover{color:#3b82f6}
.lg-options{display:flex;align-items:center;justify-content:space-between;padding-top:8px;font-size:.875rem}
.lg-remember{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;user-select:none;margin:0}
.lg-remember input{width:16px;height:16px;accent-color:#2563eb;cursor:pointer}
.lg-options a{font-weight:500;color:#2563eb;transition:color .2s}
.lg-options a:hover{color:#3b82f6}
html.dark .lg-options a{color:#60a5fa}
.lg-submit{display:flex;justify-content:center;width:100%;margin-top:24px;padding:14px 16px;border:0;border-radius:12px;background:#2563eb;color:#fff;font-size:.875rem;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:background-color .2s,box-shadow .2s,transform .15s}
.lg-submit:hover{background:#1d4ed8;box-shadow:0 6px 12px -2px rgba(37,99,235,.35);transform:translateY(-1px)}
.lg-submit:active{transform:scale(.98)}
.lg-divider{position:relative;margin-top:32px;text-align:center;font-size:.875rem;color:var(--muted)}
.lg-divider::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.lg-divider span{position:relative;padding:0 16px;background:var(--card);transition:background-color .3s}
.lg-sso{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:24px;padding:10px 16px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;font-size:.875rem;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:background-color .2s}
.lg-sso i{color:#3b82f6}
.lg-sso:disabled{opacity:.75}
.lg-foot{margin:40px 0 0;text-align:center;font-size:.8rem;color:var(--muted)}
.lg-form .alert{border-radius:12px;font-size:.875rem}

@media(min-width:992px){
 body.lg-body{padding:0}
 .lg-left{display:flex}
 .lg-right{width:50%}
 .lg-topbar{justify-content:flex-end}
 .lg-mobile-logo{display:none}
 .lg-form-wrap{padding:64px}
 .lg-head{text-align:left}
}
@media(max-width:575.98px){.lg-card{border-radius:20px}.lg-form-wrap{padding:24px}}
@media(prefers-reduced-motion:reduce){.lg-card *,.lg-card{animation:none!important}}


/* Login: compact + full screen */
body.lg-body{padding:0;min-height:100vh;height:100vh;overflow:hidden;align-items:stretch}
.lg-card{max-width:none;width:100%;height:100vh;min-height:0;border:0;border-radius:0;box-shadow:none}
.lg-left{padding:32px 40px}
.lg-logo{margin-bottom:36px;gap:10px}
.lg-logo-mark{width:34px;height:34px;font-size:.95rem}
.lg-logo-text{font-size:.9rem}
.lg-logo-text span{font-size:.7rem}
.lg-left h1{font-size:1.85rem;margin-bottom:14px}
.lg-left p{font-size:.95rem;max-width:24rem}
.lg-chips{margin-top:24px;gap:8px}
.lg-chip{padding:9px 14px;font-size:.78rem;border-radius:10px}
.lg-f1{width:52px;height:52px;font-size:1.2rem}
.lg-f2{width:64px;height:64px;font-size:1.5rem}
.lg-f3{width:40px;height:40px;font-size:1rem}
.lg-topbar{padding:14px 24px}
.lg-form-wrap{padding:16px 32px;overflow-y:auto}
.lg-form{max-width:22rem}
.lg-head{margin-bottom:22px}
.lg-head h2{font-size:1.5rem;margin-bottom:6px}
.lg-head p{font-size:.85rem}
.lg-field{margin-bottom:14px}
.lg-field label{font-size:.8rem;margin-bottom:5px}
.lg-input input{padding:9px 14px 9px 40px;font-size:.82rem;border-radius:10px}
.lg-ico{left:14px;font-size:.85rem}
.lg-options{padding-top:0;font-size:.8rem}
.lg-submit{margin-top:16px;padding:10px 14px;font-size:.82rem;border-radius:10px}
.lg-divider{margin-top:18px;font-size:.8rem}
.lg-sso{margin-top:14px;padding:8px 14px;font-size:.8rem;border-radius:10px}
.lg-foot{margin-top:18px;font-size:.72rem}
.lg-form .alert{padding:8px 12px;margin-bottom:12px;font-size:.8rem}
@media(min-width:992px){.lg-form-wrap{padding:16px 48px}}


/* Login: balanced left panel + larger form */
.lg-left{padding:clamp(32px,4vw,64px);justify-content:flex-start}
.lg-left .lg-logo{margin:0;position:relative;z-index:10}
.lg-hero{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:34rem;padding-bottom:4vh}
.lg-left h1{font-size:clamp(2.2rem,3.6vw,3.6rem);line-height:1.15;margin:0 0 20px}
.lg-left p{font-size:clamp(1rem,1.2vw,1.2rem);max-width:30rem}
.lg-chips{margin-top:36px;gap:12px;align-items:stretch;max-width:21rem}
.lg-chip{padding:14px 18px;font-size:.95rem;border-radius:14px;gap:14px}
.lg-chip i{font-size:1rem;width:20px;text-align:center;color:#bfdbfe}
.lg-logo-mark{width:44px;height:44px;font-size:1.15rem}
.lg-logo-text{font-size:1.1rem}
.lg-logo-text span{font-size:.8rem}
.lg-f1{top:14%;right:8%;width:72px;height:72px;font-size:1.7rem}
.lg-f2{bottom:10%;right:12%;left:auto;width:88px;height:88px;font-size:2.1rem}
.lg-f3{top:auto;bottom:34%;right:30%;width:52px;height:52px;font-size:1.3rem}

.lg-form{max-width:clamp(24rem,26vw,31rem)}
.lg-head{margin-bottom:32px}
.lg-head h2{font-size:clamp(1.8rem,2.2vw,2.4rem);margin-bottom:10px}
.lg-head p{font-size:1rem}
.lg-field{margin-bottom:22px}
.lg-field label{font-size:.95rem;margin-bottom:8px}
.lg-input input{padding:14px 16px 14px 46px;font-size:1rem;border-radius:12px}
.lg-ico{left:16px;font-size:1rem}
.lg-options{font-size:.95rem}
.lg-remember input{width:18px;height:18px}
.lg-submit{margin-top:26px;padding:15px 16px;font-size:1rem;border-radius:12px}
.lg-divider{margin-top:28px;font-size:.95rem}
.lg-sso{margin-top:22px;padding:13px 16px;font-size:.95rem;border-radius:12px}
.lg-foot{margin-top:28px;font-size:.82rem}
.lg-topbar{padding:20px 32px}
.lg-form-wrap{padding:16px 48px}
@media(max-height:760px){.lg-field{margin-bottom:14px}.lg-head{margin-bottom:20px}.lg-input input{padding:11px 16px 11px 46px}.lg-submit{margin-top:18px;padding:12px}.lg-divider{margin-top:18px}.lg-sso{margin-top:14px;padding:10px}.lg-foot{margin-top:16px}.lg-chips{margin-top:24px}.lg-chip{padding:10px 16px}}


/* Login: light, inventory-themed left panel */
@keyframes lgGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.lg-left{background:linear-gradient(145deg,#f8fbff 0%,#e0efff 55%,#dbe4ff 100%);color:#0f172a}
.lg-left::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(circle at 70% 60%,#000 0,transparent 75%);mask-image:radial-gradient(circle at 70% 60%,#000 0,transparent 75%)}
.lg-blob1{background:#93c5fd;opacity:.35;filter:blur(70px)}
.lg-blob2{background:#a5b4fc;opacity:.35;filter:blur(60px)}
.lg-logo-mark{background:#2563eb;color:#fff;box-shadow:0 8px 16px -4px rgba(37,99,235,.4)}
.lg-logo-text{color:#0f172a}
.lg-logo-text span{color:#2563eb}
.lg-left h1{color:#0f172a}
.lg-left h1::first-line{color:#0f172a}
.lg-left p{color:#475569}
.lg-chip{background:#fff;border:1px solid #dbeafe;color:#1e293b;box-shadow:0 4px 12px -4px rgba(37,99,235,.15);backdrop-filter:none}
.lg-chip:hover{background:#fff;border-color:#93c5fd;transform:translateX(6px)}
.lg-chip i{color:#2563eb;background:#eff6ff;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:.85rem}
.lg-float{background:#fff;border:1px solid #dbeafe;color:#2563eb;backdrop-filter:none;box-shadow:0 14px 28px -10px rgba(37,99,235,.28)}
.lg-f1{top:12%;right:9%;width:76px;height:76px;border-radius:18px;font-size:1.9rem;rotate:8deg}
.lg-f2{top:38%;bottom:auto;right:26%;left:auto;width:60px;height:60px;border-radius:16px;font-size:1.4rem;color:#0ea5e9;rotate:-6deg;background:#fff;border-color:#dbeafe}
.lg-f3{top:auto;bottom:30%;right:7%;width:56px;height:56px;border-radius:14px;font-size:1.35rem;color:#6366f1;rotate:5deg}
.lg-f4{position:absolute;top:auto;bottom:9%;right:34%;width:68px;height:68px;border-radius:50%;font-size:1.6rem;color:#2563eb;animation:lgFloat 7s ease-in-out 1s infinite;display:grid;place-items:center;background:#fff;border:1px solid #dbeafe;box-shadow:0 14px 28px -10px rgba(37,99,235,.28)}
.lg-stock{position:absolute;bottom:7%;right:7%;display:flex;align-items:flex-end;gap:8px;width:150px;height:96px;padding:14px;background:#fff;border:1px solid #dbeafe;border-radius:16px;box-shadow:0 14px 28px -10px rgba(37,99,235,.25)}
.lg-stock span{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#60a5fa,#2563eb);transform-origin:bottom;animation:lgGrow .9s ease-out both}
.lg-stock span:nth-child(2){animation-delay:.1s;background:linear-gradient(180deg,#a5b4fc,#6366f1)}.lg-stock span:nth-child(3){animation-delay:.2s}.lg-stock span:nth-child(4){animation-delay:.3s;background:linear-gradient(180deg,#38bdf8,#0ea5e9)}.lg-stock span:nth-child(5){animation-delay:.4s}

/* dark mode keeps a calm deep panel */
html.dark .lg-left{background:linear-gradient(145deg,#1e293b 0%,#172554 100%);color:#f8fafc}
html.dark .lg-left::before{background-image:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px)}
html.dark .lg-logo-text,html.dark .lg-left h1{color:#f8fafc}
html.dark .lg-logo-text span{color:#93c5fd}
html.dark .lg-left p{color:#cbd5e1}
html.dark .lg-chip,html.dark .lg-float,html.dark .lg-f4,html.dark .lg-stock{background:#0f172a;border-color:#334155;color:#e2e8f0}
html.dark .lg-chip i{background:rgba(59,130,246,.15);color:#60a5fa}
html.dark .lg-float,html.dark .lg-f4{color:#60a5fa}
@media(max-width:1199.98px){.lg-f2,.lg-f4{display:none}}


/* ===== Toast notifications (top right) ===== */
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px) scale(.96)}}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#toast-stack{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:12px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast-item{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;overflow:hidden;pointer-events:auto;background:var(--card,#fff);color:var(--ink,#111827);border:1px solid var(--line,#e5e7eb);border-left:4px solid var(--tc);border-radius:12px;box-shadow:0 12px 28px -8px rgba(17,24,39,.25);animation:toastIn .35s cubic-bezier(.2,.8,.2,1) both}
.toast-item.out{animation:toastOut .3s ease forwards}
.toast-success{--tc:#22c55e}.toast-error{--tc:#ef4444}.toast-info{--tc:#3b82f6}
.toast-ico{color:var(--tc);font-size:1.15rem;margin-top:2px}
.toast-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.toast-body strong{font-size:.875rem;font-weight:700}
.toast-body span{font-size:.84rem;line-height:1.45;color:var(--muted,#6b7280);word-break:break-word}
.toast-x{background:none;border:0;color:var(--muted,#6b7280);padding:2px 4px;font-size:.85rem;transition:color .2s}
.toast-x:hover{color:var(--ink,#111827)}
.toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--tc);opacity:.6;transform-origin:left;animation:toastBar linear forwards}
.toast-item.paused .toast-bar{animation-play-state:paused}
@media(max-width:575.98px){#toast-stack{top:12px;right:16px}}

.lg-back{margin:26px 0 0;font-size:.95rem;text-align:center}.lg-back a{font-weight:500;color:#2563eb;transition:color .2s}.lg-back a:hover{color:#3b82f6}.lg-back i{margin-right:6px;transition:transform .2s}.lg-back a:hover i{transform:translateX(-3px)}html.dark .lg-back a{color:#60a5fa}


/* ===== Mobile fixes ===== */
/* undo old <=900px icon-only rules from the original stylesheet */
:where(.brand>span:last-child){display:block}
:where(.nav-link span){display:inline}
:where(.nav-caption){display:block}
:where(.sidebar-user small){display:block}

@media(max-width:767.98px){
 html,body{overflow-x:hidden}
 body.app-body{height:100dvh}
 .app-shell{display:block;flex:1;min-height:0;height:auto;position:relative}
 /* animation fill-mode would override transform, so turn it off here */
 .sidebar{animation:none!important;position:fixed;top:0;bottom:0;left:0;width:272px!important;max-width:84vw;flex:none;height:100dvh;transform:translateX(-100%);visibility:hidden;box-shadow:none;transition:transform .3s ease,visibility 0s linear .3s}
 .sidebar.open{transform:none;visibility:visible;box-shadow:0 0 40px rgba(0,0,0,.25);transition:transform .3s ease,visibility 0s}
 .sidebar .logo-text,.sidebar .nav-link span,.sidebar .nav-caption,.sidebar .theme-row,.sidebar .user-meta{display:revert}
 .sidebar .nav-caption{display:block}
 .sidebar .brand-row{padding:0 20px}
 .sidebar .nav-link{justify-content:flex-start;padding:10px 16px}
 .main-area{width:100%;height:100%}
 .topbar{height:60px;min-height:60px;padding:0 16px;gap:8px}
 .topbar-actions{gap:10px}
 .round-btn{width:36px;height:36px}
 .topbar-actions .btn{padding:6px 12px;font-size:.8rem;white-space:nowrap}
 .content-area{padding:16px 14px}
 .page-head{margin-bottom:16px;gap:10px}
 .page-head h1{font-size:1.25rem}
 .date-pill{padding:6px 12px;font-size:.8rem}
 .panel-card{padding:16px}
 .panel-heading{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
 .kpi-card{padding:16px}
 .kpi-value{font-size:1.35rem}
 .table-responsive{margin:0 -4px}
 .table thead th{white-space:nowrap}
 .table tbody td{padding:12px 10px}
 .quick-actions>a{margin:0 -8px;padding:10px 8px}
 #toast-stack{top:68px;right:12px;left:12px;width:auto}
}
@media(max-width:400px){.topbar-actions .round-btn:first-child{display:none}}


/* ===== Universal responsive pass ===== */
/* collapsed sidebar keeps the logo mark */
.sidebar-collapsed .brand{display:flex}
.sidebar-collapsed .brand-row{flex-direction:column;justify-content:center;gap:6px;height:80px}
.sidebar-collapsed .collapse-btn{padding:0;font-size:.75rem;line-height:1}

/* tablets: icon-only sidebar automatically */
@media(min-width:768px) and (max-width:1023.98px){
 .sidebar{width:80px;flex-basis:80px}
 .sidebar .logo-text,.sidebar .nav-link span,.sidebar .nav-caption,.sidebar .theme-row,.sidebar .user-meta{display:none}
 .sidebar .brand-row{padding:0;justify-content:center;height:80px}
 .sidebar .collapse-btn{display:none}
 .sidebar .nav-link{justify-content:center;padding:11px}
 .sidebar .nav-stack{padding:20px 12px}
 .sidebar .sidebar-user{justify-content:center}
 .topbar{padding:0 20px}
 .content-area{padding:24px 20px}
}

/* top bar never wraps or stacks */
.topbar{flex-wrap:nowrap}
.topbar-actions{flex-direction:row;flex-wrap:nowrap;flex:none}
.search-box{min-width:0}
.topbar-actions .btn{white-space:nowrap}

/* fluid content */
.content-inner,.row>*{min-width:0}
.table-responsive{-webkit-overflow-scrolling:touch}
.panel-heading{flex-wrap:wrap}
.filter-row{flex-wrap:wrap}
.filter-row>*{min-width:0}
img,svg,video{max-width:100%}
.form-panel{max-width:100%}

@media(max-width:991.98px){
 .page-head{align-items:flex-start}
}
@media(max-width:767.98px){
 .topbar-actions{gap:8px;margin-left:auto}
 .topbar-actions .round-btn{width:34px;height:34px}
 .topbar-actions .btn{padding:6px 12px;font-size:.78rem}
 .user-pill{display:none}
 .page-head{flex-direction:row;align-items:center}
 .form-actions{flex-wrap:wrap}
 .form-actions .btn{flex:1 1 auto}
 .filter-row>*{flex:1 1 100%}
 .filter-row .btn{width:100%}
}
@media(max-width:400px){
 .topbar-actions .round-btn:first-child{display:none}
 .mobile-header{padding:12px 14px}
 .date-pill span{font-size:.78rem}
 .toast-item{padding:12px}
}
@media(max-width:340px){
 .page-head{flex-direction:column;align-items:flex-start}
 .kpi-foot{font-size:.68rem;padding:2px 8px}
 .content-area{padding:12px 10px}
}
/* large screens */
@media(min-width:1600px){
 .content-inner{max-width:92rem}
}
/* short landscape phones */
@media(max-height:480px) and (max-width:900px){
 .sidebar{overflow-y:auto}
 .lg-body{height:auto;overflow:auto}
 .lg-card{height:auto;min-height:100vh}
}


/* phone drawer fixes */
@media(max-width:767.98px){
 .sidebar{z-index:70}
 #sidebar-overlay{z-index:60}
 .sidebar .theme-row{display:flex}
 .sidebar .brand-row{height:64px}
 .sidebar .collapse-btn{display:none}
}


/* ===== Fixed shell: only the content area and (if needed) the menu list scroll ===== */
html:has(body.app-body){height:100%;overflow:hidden}
body.app-body{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.app-shell{display:flex!important;flex:1 1 auto;min-height:0;height:auto!important;overflow:hidden}
.sidebar{height:auto;align-self:stretch;min-height:0;overflow:hidden}
.brand-row,.sidebar-foot{flex:none}
.nav-stack{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-ms-overflow-style:none;scrollbar-width:none}
.nav-stack::-webkit-scrollbar{display:none;width:0;height:0}
.main-area{flex:1 1 auto;min-width:0;min-height:0;height:auto!important;overflow:hidden}
.topbar{flex:none}
.content-area{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.mobile-header{flex:none}
@media(max-width:767.98px){
 .sidebar{position:fixed;top:0;bottom:0;height:100vh!important;height:100dvh!important}
 .main-area{width:100%}
}

/* Collapsed sidebar: icons only, no arrow, click anywhere on it to expand */
.sidebar-collapsed{cursor:pointer}
.sidebar-collapsed .collapse-btn{display:none!important}
.sidebar-collapsed .brand-row{flex-direction:row;gap:0;justify-content:center;padding:0;height:80px}
.sidebar-collapsed .brand{display:flex;justify-content:center}
.sidebar-collapsed .nav-link,.sidebar-collapsed .theme-switch{cursor:pointer}


/* ===== Dashboard widgets (KPI accent cards, trend, donut, attention) ===== */
@keyframes mkIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes drawLine{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes popDot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes donutIn{from{stroke-dasharray:0 251.2}}
.mk-card{--ac:#3b82f6;position:relative;display:flex;flex-direction:column;gap:2px;height:100%;padding:16px 18px 16px 22px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--soft);overflow:hidden;animation:mkIn .55s ease both;animation-delay:var(--d,0s);transition:transform .25s,box-shadow .25s}
.mk-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ac)}
.mk-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px -10px rgba(37,99,235,.25)}
.mk-blue{--ac:#3b82f6}.mk-teal{--ac:#14b8a6}.mk-orange{--ac:#f59e0b}.mk-purple{--ac:#8b5cf6}
.mk-label{font-size:.78rem;font-weight:600;color:var(--muted)}
.mk-value{font-size:1.65rem;font-weight:700;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.mk-foot{font-size:.72rem;color:var(--muted)}

.trend-wrap{width:100%}
.trend-svg{width:100%;height:auto;max-height:300px;display:block;overflow:visible}
.trend-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.trend-line{fill:none;stroke:#3b82f6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine 1.3s .3s ease-out forwards}
.trend-area{opacity:0;animation:mkIn .8s 1s ease forwards}
.trend-dot circle{fill:var(--card);stroke:#3b82f6;stroke-width:3;transform-box:fill-box;transform-origin:center;opacity:0;animation:popDot .35s ease forwards;animation-delay:calc(.5s + var(--i)*.15s);transition:r .2s}
.trend-dot circle:hover{r:8}
.trend-x{font-size:11px;fill:var(--muted);font-weight:500}

.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.donut{position:relative;width:min(190px,60%);aspect-ratio:1}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:12}
.donut-bg{stroke:var(--bg)}
.donut-seg{stroke-linecap:butt;animation:donutIn 1s ease-out both}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center strong{font-size:1.6rem;font-weight:700;color:var(--ink);line-height:1.1}
.donut-center span{font-size:.72rem;color:var(--muted);font-weight:500}
.donut-legend{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}
.donut-legend li{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--muted)}
.donut-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.donut-legend span{flex:1}
.donut-legend b{color:var(--ink);font-weight:700}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:200px;color:var(--muted);text-align:center}
.empty-state i{font-size:2rem;opacity:.5;margin-bottom:6px}
.empty-state p{margin:0;font-weight:600;color:var(--ink)}
.empty-state small{font-size:.8rem}

.att-table thead th{background:var(--accent-soft);color:var(--muted);font-size:.78rem;font-weight:700;padding:11px 14px;border-bottom:0}
.att-table thead th:first-child{border-radius:8px 0 0 8px}.att-table thead th:last-child{border-radius:0 8px 8px 0}
.prio{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.75rem;font-weight:600}
.prio-high{background:rgba(239,68,68,.12);color:#dc2626}
.prio-medium{background:rgba(245,158,11,.14);color:#d97706}
.prio-low{background:rgba(34,197,94,.12);color:#16a34a}
html.dark .prio-high{color:#f87171}html.dark .prio-medium{color:#fbbf24}html.dark .prio-low{color:#4ade80}
.panel-card.h-100{height:100%}
@media(max-width:575.98px){.mk-value{font-size:1.45rem}.donut{width:min(170px,70%)}}
@media(prefers-reduced-motion:reduce){.trend-line{stroke-dashoffset:0}.trend-dot circle,.trend-area{opacity:1}}

/* Dashboard date filter (inside the existing date pill) */
.date-filter{gap:6px;padding:4px 12px;margin:0}
.date-filter input[type=date]{border:0;background:transparent;color:var(--ink);font:inherit;font-size:.875rem;font-weight:500;padding:4px 2px;width:9.2rem;outline:0;cursor:pointer;color-scheme:light}
html.dark .date-filter input[type=date]{color-scheme:dark}
.date-filter input[type=date]:focus-visible{box-shadow:0 0 0 2px rgba(59,130,246,.5);border-radius:6px}
.date-filter .df-sep{color:var(--muted)}
.df-reset{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--muted);font-size:.75rem;transition:background-color .2s,color .2s}
.df-reset:hover{background:var(--hover);color:#ef4444}
@media(max-width:575.98px){.date-filter{flex-wrap:wrap;width:100%}.date-filter input[type=date]{width:auto;flex:1 1 7.5rem}}


/* ===== Custom calendar popup (replaces native date inputs) ===== */
@keyframes popDown{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.date-filter{position:relative;gap:6px;padding:0 6px 0 0;margin:0}
.df-btn{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);font:inherit;font-size:.875rem;font-weight:500;padding:8px 8px 8px 16px;cursor:pointer;border-radius:8px}
.df-btn .fa-calendar{color:var(--muted)}
.df-caret{font-size:.7rem;color:var(--muted);margin-left:2px;transition:transform .25s}
.df-btn[aria-expanded="true"] .df-caret{transform:rotate(180deg)}
.df-btn:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(59,130,246,.5)}
.df-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:50;width:304px;padding:16px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 40px -12px rgba(17,24,39,.3);animation:popDown .2s ease both}
.df-pop[hidden]{display:none}
.df-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.df-head strong{font-size:.95rem;font-weight:700}
.df-nav{width:32px;height:32px;border-radius:50%;border:0;background:var(--bg);color:var(--muted);font-size:.75rem;transition:background-color .2s,color .2s,transform .15s}
.df-nav:hover{background:var(--accent-soft);color:var(--accent-text)}
.df-nav:active{transform:scale(.92)}
.df-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.df-wd span{text-align:center;font-size:.72rem;font-weight:600;color:var(--muted);padding:4px 0 8px}
.df-day{position:relative;height:36px;border:0;background:none;color:var(--ink);font-size:.84rem;font-weight:500;border-radius:0;transition:background-color .15s,color .15s}
.df-day:hover:not(.sel):not(:disabled){background:var(--accent-soft);color:var(--accent-text);border-radius:10px}
.df-day.today:not(.sel){color:var(--accent-text);font-weight:700;box-shadow:inset 0 0 0 1.5px #3b82f6;border-radius:10px}
.df-day.inr{background:var(--accent-soft);color:var(--accent-text)}
.df-day.sel{background:#2563eb;color:#fff;font-weight:700;border-radius:10px;z-index:1}
.df-day.sel.hasr.st{border-top-right-radius:0;border-bottom-right-radius:0}
.df-day.sel.hasr.en{border-top-left-radius:0;border-bottom-left-radius:0}
.df-day:disabled{color:var(--muted);opacity:.4;cursor:not-allowed}
.df-day:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}
.df-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);text-align:center}
@media(max-width:575.98px){.date-filter{width:100%}.df-btn{flex:1}.df-pop{left:0;right:0;width:auto;max-width:340px}}
@media(prefers-reduced-motion:reduce){.df-pop{animation:none}}

/* keep the calendar popup above the cards */
.page-head{position:relative;z-index:30}

/* Administration in-page submenu */
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;animation:fadeUp .5s ease both}
.admin-tabs .btn{display:inline-flex;align-items:center;gap:8px}
@media(max-width:575.98px){.admin-tabs .btn{flex:1 1 calc(50% - 8px);justify-content:center;font-size:.8rem;padding:8px 10px}}

/* Minimal, light list pages (masters) */
.master-list .panel-card{padding:12px 16px;border-radius:10px;box-shadow:none}
.master-list .filter-row{margin:0;gap:10px;align-items:end}
.master-list .filter-row .form-label{font-size:.7rem;font-weight:500;color:var(--muted);margin:0 0 3px}
.master-list .filter-row .form-control,.master-list .filter-row .form-select{padding:.3rem .6rem;font-size:.8rem;border-radius:7px;height:32px;min-width:170px;font-weight:400}
.master-list .filter-row .form-select{min-width:110px}
.master-list .btn{font-weight:500;font-size:.78rem;border-radius:7px;padding:.3rem .7rem;line-height:1.4}
.master-list .btn-soft{background:#eef3fa;color:var(--blue);border:0}
.master-list .btn-soft-green{background:#e6f5ee;color:#18835b;border:0}
.master-list .panel-heading{margin-bottom:6px}
.master-list .list-caption{font-size:.72rem;color:var(--muted);font-weight:500}
.master-list .table{margin:0}
.master-list .table thead th{font-size:.66rem;font-weight:500;padding:7px 10px;letter-spacing:.03em}
.master-list .table tbody td{font-size:.78rem;font-weight:400;padding:7px 10px;color:#3d4d63}
.master-list .table tbody td:first-child{font-weight:500}
.master-list .status-badge{font-size:.66rem;font-weight:500;padding:2px 8px}
.master-list .row-edit{font-size:.74rem;color:var(--blue);padding:2px 6px;border-radius:5px}
.master-list .row-edit:hover{background:#eef3fa}
.master-list .small.text-muted{font-size:.68rem;margin:8px 0 0!important}

/* Lists: sorting, row actions, pager, status colours, chips (additions) */
.master-list .th-sort{color:inherit;text-decoration:none}.master-list .th-sort:hover{color:var(--blue)}
.master-list .row-actions{white-space:nowrap}.master-list .row-actions form{display:inline}
.master-list .linkbtn{background:none;border:0;cursor:pointer;font:inherit;font-size:.74rem}
.master-list .pager-row{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
.master-list .status-badge.st-inactive,.master-list .status-badge.st-locked,.master-list .status-badge.st-rejected,.master-list .status-badge.st-cancelled,.master-list .status-badge.st-closed{background:#fdecec;color:#c0392b}
.master-list .status-badge.st-pending,.master-list .status-badge.st-pending_approval,.master-list .status-badge.st-draft,.master-list .status-badge.st-in_progress,.master-list .status-badge.st-open,.master-list .status-badge.st-dispatched{background:#fff3e0;color:#b9770e}
.master-list .status-badge.st-approved,.master-list .status-badge.st-posted,.master-list .status-badge.st-received,.master-list .status-badge.st-resolved,.master-list .status-badge.st-released{background:#e7f7ef;color:#18835b}
.master-list .chip{display:inline-flex;align-items:center;gap:4px;background:#eef3fa;border-radius:12px;padding:2px 8px;font-size:.72rem}
.master-list .chip-x{background:none;border:0;color:#8a99ad;cursor:pointer;padding:0 2px}
.master-list .perm-chip{display:inline-block;margin:2px 10px 2px 0;font-size:.76rem;white-space:nowrap}
.master-list .perm-table td:first-child{width:240px;font-weight:500}
.master-list .audit-pre{max-width:520px;white-space:pre-wrap;word-break:break-word;font-size:.68rem;background:#f5f8fc;border-radius:6px;padding:6px;margin:4px 0 0}
.master-list .alert{border-radius:8px}
@media print{.sidebar,.topbar,.mobile-header,.no-print,.admin-tabs,.page-head .date-pill,#toast-stack{display:none!important}.main-area{margin:0}.content-area{padding:0}.master-list .panel-card{border:0}}

/* Dashboard filters sit beside the date range in the page header */
.head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.head-filters{display:flex;align-items:center;gap:8px}
.head-filters .form-select{height:36px;padding:.25rem 2rem .25rem .7rem;font-size:.8rem;border-radius:999px;background-color:var(--panel,#fff);min-width:120px;max-width:190px;font-weight:400}
.head-reset{color:var(--muted);font-size:.85rem;padding:0 4px}
@media(max-width:900px){.head-right{justify-content:flex-start;width:100%}.head-filters{flex-wrap:wrap}}

/* Page-header filters (all list pages) */
.head-filters .form-control{height:36px;padding:.25rem .8rem;font-size:.8rem;border-radius:999px;font-weight:400}
.head-filters .hf-date{width:142px;padding-right:.5rem}
.hf-search{position:relative;display:inline-flex;align-items:center;margin:0}
.hf-search i{position:absolute;left:12px;color:var(--muted);font-size:.75rem;pointer-events:none}
.hf-search input.form-control{padding-left:32px;width:170px}
.hf-go{height:36px;width:36px;border:0;border-radius:50%;background:var(--blue);color:#fff;font-size:.8rem}
.hf-run{height:36px;border-radius:999px;padding:0 18px}
.hf-more{position:relative}.hf-more summary{list-style:none;height:36px;display:flex;align-items:center;font-size:.8rem;border-radius:999px;cursor:pointer;min-width:150px}
.hf-more summary::-webkit-details-marker{display:none}
.hf-pop{position:absolute;right:0;top:42px;z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;width:260px;box-shadow:0 8px 24px #223e5e1f}
.head-right{flex-wrap:wrap}.head-filters{flex-wrap:wrap;justify-content:flex-end}
.actions-only{padding:8px 14px!important}
html.dark .hf-pop,html.dark .head-filters .form-select{background-color:#1b2433}

/* Header filters: compact, content-width pills on one row (fixes full-width selects wrapping) */
.page-head>div:first-child{flex:0 0 auto}
.head-right{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.head-filters{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.head-filters .form-select,.head-filters .form-control{width:auto!important;flex:0 0 auto;height:34px;font-size:.78rem;padding-top:.15rem;padding-bottom:.15rem;line-height:1.2}
.head-filters .form-select{max-width:150px;min-width:0;padding-left:.7rem;padding-right:1.9rem;background-position:right .6rem center;background-size:12px;text-overflow:ellipsis}
.head-filters .hf-date{width:128px!important}
.hf-search input.form-control{width:150px!important}
.head-right .date-pill{flex:0 0 auto}
.hf-more summary{height:34px;min-width:0;width:auto;font-size:.78rem}
@media(max-width:1100px){.head-right{flex-wrap:wrap;justify-content:flex-start;width:100%}}

/* Header filters: match the global search bar and the dashboard date pill */
.hf-search i{left:14px;color:var(--muted)}
.hf-search input.form-control{background:var(--bg,#f1f5f9);border:0;box-shadow:none;padding:0 14px 0 36px!important;height:34px;color:var(--ink);transition:box-shadow .2s}
.hf-search input.form-control::placeholder{color:var(--muted)}
.hf-search input.form-control:focus{box-shadow:0 0 0 2px #3b82f655;background:var(--bg,#f1f5f9)}
.head-filters .form-select,.head-filters .hf-date{background-color:var(--bg,#f1f5f9);border:0;box-shadow:none;color:var(--ink)}
.head-filters .form-select:focus,.head-filters .hf-date:focus{box-shadow:0 0 0 2px #3b82f655}
.head-reset{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg,#f1f5f9);color:var(--muted)}
.head-reset:hover{color:#ef4444}

/* Header filters = same look as the date pill (white card, thin border, 8px radius) */
.head-filters .form-select,.head-filters .form-control,.head-filters .hf-date,.hf-more summary{
 background-color:var(--card)!important;border:1px solid var(--line)!important;border-radius:8px!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
 color:var(--ink);height:42px!important;font-size:.875rem!important;font-weight:500!important;padding-top:0!important;padding-bottom:0!important}
.head-filters .form-select{padding-left:14px!important;padding-right:34px!important;background-position:right 12px center!important;max-width:170px}
.head-filters .hf-date{width:150px!important;padding-left:12px!important;padding-right:10px!important}
.hf-search input.form-control{padding-left:38px!important;width:200px!important;font-weight:400!important}
.hf-search input.form-control::placeholder{font-weight:400}
.hf-search i{left:14px;font-size:.8rem}
.head-filters .form-select:focus,.head-filters .form-control:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px #2563eb22!important;outline:0}
.head-reset{width:34px;height:34px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.hf-go{height:42px;width:42px;border-radius:8px}
.hf-run{height:42px;border-radius:8px}
.hf-more summary{display:flex;align-items:center;padding:0 14px!important;min-width:0}
.hf-pop{border-radius:10px;top:48px}
.head-right,.head-filters{gap:10px}

/* ===== Custom dropdown / date pickers (public/assets/js/ui-pickers.js) ===== */
.dd-wrap{position:relative;display:block}
.head-filters .dd-wrap{display:inline-block;flex:0 0 auto}
.dd-native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;opacity:0;pointer-events:none;padding:0!important;border:0!important}
.dd-btn{text-align:left;font-family:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-btn:disabled{opacity:.6;cursor:not-allowed}
.dd-btn.dd-date{display:flex;align-items:center;gap:8px;background-image:none!important}
.dd-btn.dd-date i{color:var(--muted);font-size:.85rem}
.dd-btn.dd-date.dd-empty span{color:var(--muted);font-weight:400}
.dd-btn[aria-expanded="true"]{border-color:var(--blue)!important;box-shadow:0 0 0 3px #2563eb22!important}
.dd-pop{position:fixed;z-index:2000;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 40px -12px rgba(17,24,39,.3);padding:6px;min-width:160px;max-width:min(360px,calc(100vw - 16px));max-height:320px;overflow:auto;animation:popDown .18s ease both;outline:0}
.dd-pop.dd-cal{width:304px;padding:16px;max-height:none;overflow:visible}
.dd-list{display:flex;flex-direction:column;gap:2px}
.dd-opt{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);padding:9px 12px;border-radius:10px;font-size:.875rem;font-weight:500;cursor:pointer;white-space:normal;word-break:break-word}
.dd-opt:hover,.dd-opt.act{background:var(--accent-soft);color:var(--accent-text)}
.dd-opt.sel{background:#2563eb;color:#fff;font-weight:600}
.dd-none{padding:10px 12px;color:var(--muted);font-size:.85rem}
.dd-search{padding:4px 4px 8px;position:sticky;top:0;background:var(--card)}
.dd-search input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:8px 12px;font-size:.85rem;outline:0}
.dd-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2563eb22}
.dd-foot{display:flex;justify-content:space-between}
.dd-link{background:none;border:0;color:var(--accent-text);font-size:.8rem;font-weight:600;cursor:pointer;padding:2px 4px}
.dd-link:disabled{opacity:.4;cursor:not-allowed}
.form-select.dd-btn,.form-control.dd-btn{display:block}
.form-control.dd-btn.dd-date{display:flex}
@media(prefers-reduced-motion:reduce){.dd-pop{animation:none}}

/* multi-select dropdown (checkbox list) */
.dd-btn.dd-multi.dd-has{border-color:var(--blue)!important;color:var(--accent-text)}
.dd-multipop{padding:6px 6px 0}
.dd-opt.dd-check{display:flex;align-items:center;gap:10px}
.dd-opt.dd-check:hover,.dd-opt.dd-check.on{background:var(--accent-soft);color:var(--accent-text)}
.dd-box{width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;display:inline-grid;place-items:center;flex:0 0 auto;font-size:.6rem;color:transparent;background:var(--card)}
.dd-check.on .dd-box{background:#2563eb;border-color:#2563eb;color:#fff}
.dd-mfoot{display:flex;justify-content:space-between;padding:8px;margin-top:4px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--card)}
.rep-empty{text-align:center;padding:48px 20px!important;color:var(--muted)}
.rep-empty i{font-size:2rem;color:#9db6e0}.rep-empty h3{font-size:1.05rem;color:var(--ink);margin:12px 0 6px}.rep-empty p{margin:0 auto;max-width:460px;font-size:.88rem}

/* Reports: schedule / save-filter tools row */
.rep-tools{display:flex;flex-wrap:wrap;gap:12px 28px;padding:10px 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.rep-tool{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rep-tool-label{font-size:.76rem;font-weight:600;color:var(--muted);white-space:nowrap}
.rep-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rep-form .form-select,.rep-form .form-control{height:36px;font-size:.82rem;border-radius:8px;width:auto!important;min-width:0;padding-top:0;padding-bottom:0}
.rep-form .form-select{max-width:170px;padding-left:12px}
.rep-form input.form-control{width:150px!important}
.rep-form .btn{height:36px}
.hf-up{height:42px;display:inline-flex;align-items:center;border-radius:8px}

/* Reports fixes: header Excel button + schedule/save row controls */
.btn-soft-green{background:#e6f5ee;color:#18835b;border:0;font-weight:500}
.btn-soft-green:hover{background:#d5eee2;color:#146b4b}
.btn-soft{background:#eef3fa;color:var(--blue);border:0;font-weight:500}
.head-filters .hf-up,.head-right .hf-up{height:42px;padding:0 16px;font-size:.85rem;border-radius:8px;display:inline-flex;align-items:center;gap:6px}
.rep-form .form-select{padding-right:34px!important;padding-left:12px!important;min-width:120px;background-position:right 11px center!important;text-overflow:clip}
.rep-form .dd-btn{display:block}
.rep-form .btn{padding:0 16px;font-size:.82rem}
.rep-tool{gap:12px}

/* Reports tools row: long labels get an ellipsis instead of running under the arrow */
.rep-form .dd-wrap{flex:0 0 auto}
.rep-form .dd-btn,.rep-form .form-select{box-sizing:border-box;padding-right:38px!important;text-overflow:ellipsis!important;white-space:nowrap;overflow:hidden;max-width:240px;width:auto!important;background-position:right 12px center!important}
.rep-form .dd-wrap:nth-of-type(3) .dd-btn,.rep-form select[name="recipient_user_id"]+*{min-width:210px}
.rep-form .dd-wrap:has(select[name="recipient_user_id"]) .dd-btn{width:220px!important}

/* create-on-the-fly dropdown entry + dialog */
.dd-add{display:flex;align-items:center;gap:8px;width:100%;border:0;border-top:1px solid var(--line);background:var(--card);color:var(--accent-text);font-weight:600;font-size:.85rem;padding:10px 12px;margin-top:4px;position:sticky;bottom:0;cursor:pointer;border-radius:0 0 10px 10px}
.dd-add:hover{background:var(--accent-soft)}
.dd-pop{z-index:4000}
.dd-modal{position:fixed;inset:0;z-index:3000;background:rgba(15,23,42,.45);display:grid;place-items:center;padding:16px}
.dd-dialog{background:var(--card);color:var(--ink);border-radius:14px;padding:20px 22px;width:min(420px,100%);box-shadow:0 24px 48px -12px rgba(17,24,39,.4);animation:popDown .18s ease both}
.dd-dtitle{font-weight:700;font-size:1.05rem;margin-bottom:14px}
.dd-dfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.dd-err:empty,.dd-gerr:empty{display:none}

/* Dropdown Values: list-type chips */
.list-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:.8rem;font-weight:500;text-decoration:none}
.lchip span{background:var(--bg);border-radius:999px;padding:0 7px;font-size:.7rem;color:var(--muted)}
.lchip:hover{border-color:var(--blue);color:var(--accent-text)}
.lchip.on{background:#2563eb;border-color:#2563eb;color:#fff}.lchip.on span{background:rgba(255,255,255,.22);color:#fff}
.lchip.add{border-style:dashed;color:var(--accent-text)}

/* Clickable rows */
tr[data-href],tr[data-details]{cursor:pointer}
tr[data-href]:hover>td,tr[data-details]:hover>td{background:var(--accent-soft)}
tr[data-href]:focus-visible,tr[data-details]:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}
tr[data-href] td,tr[data-details] td{transition:background-color .12s}

/* ⋮ row action menu */
td.row-actions,.master-list td.row-actions{width:56px;text-align:center;white-space:nowrap}
.ra-btn{border:0;background:none;width:34px;height:34px;border-radius:8px;color:var(--muted);cursor:pointer;display:inline-grid;place-items:center}
.ra-btn:hover,.ra-btn[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent-text)}
.ra-btn:focus-visible{outline:2px solid #3b82f6}
.dd-menu{min-width:176px;padding:6px;max-height:none;overflow:visible}
.dd-menu .dd-actform{margin:0;display:block}
.dd-opt.dd-act{display:flex;align-items:center;gap:10px;text-decoration:none;width:100%}
.dd-opt.dd-act i{width:16px;text-align:center;font-size:.8rem;color:var(--muted)}
.dd-opt.dd-act:hover i,.dd-opt.dd-act:focus i{color:inherit}
.dd-opt.dd-act.danger,.dd-opt.dd-act.danger i{color:#dc2626}
.dd-opt.dd-act.danger:hover{background:#fdecec}
.dd-opt.dd-act:focus-visible{outline:0;background:var(--accent-soft)}

/* Dashboard click-through */
a.kpi-card.kpi-link{color:inherit;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
a.kpi-card.kpi-link:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 8px 20px -8px rgba(37,99,235,.35)}
a.kpi-card.kpi-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.kpi-go{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--accent-text);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s;white-space:nowrap}
.kpi-link:hover .kpi-go,.kpi-link:focus-visible .kpi-go{opacity:1;transform:none}
.donut-legend li[data-href]{cursor:pointer;border-radius:8px}
.donut-legend li[data-href]:hover{background:var(--accent-soft)}

a.kpi-card.kpi-link::after{content:"\f061";color:var(--muted);transition:transform .15s,color .15s}
a.kpi-card.kpi-link:hover::after{color:var(--accent-text);transform:translateX(3px)}
.head-filters select[name="report"]+*,.head-filters .dd-wrap:has(select[name="report"]) .dd-btn{max-width:230px}

/* chart hover tooltip */
.chart-tip{position:fixed;z-index:3500;pointer-events:none;background:#111827;color:#fff;border-radius:10px;padding:8px 12px;box-shadow:0 12px 24px -8px rgba(17,24,39,.45);font-size:.8rem;line-height:1.35;max-width:240px}
html.dark .chart-tip{background:#e5e7eb;color:#111827}
.chart-tip strong{display:block;font-weight:600;opacity:.8;font-size:.72rem;letter-spacing:.02em}
.chart-tip span{display:block;font-weight:700;font-size:.95rem}
.chart-tip small{display:block;opacity:.7;margin-top:2px}
.chart-tip[hidden]{display:none}
.trend-dot{cursor:pointer}
.trend-dot:hover .trend-pt{r:7.5;fill:#2563eb;transition:r .15s}
.donut-seg{cursor:pointer;transition:stroke-width .15s}
.donut-seg:hover{stroke-width:14}
.donut-legend li[data-tip-title]{cursor:default}
.trend-dot .trend-hit{fill:transparent!important;stroke:none!important;opacity:1!important;animation:none!important}
.trend-dot .trend-pt:hover{r:7.5}
.donut-center{pointer-events:none}

/* Permission matrix: rows of a hidden sidebar menu are dimmed */
.perm-table tr.menu-off td:last-child .perm-chip{opacity:.4}
.perm-table tr.menu-off td:first-child{color:var(--muted)}
.perm-table tr[data-row="menu"] td{background:var(--accent-soft)}

.perm-note{background:var(--accent-soft);color:var(--accent-text);border-radius:8px;padding:8px 12px;margin:0 0 10px}

/* Internal mail */
.mail-btn{position:relative}.mail-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--card)}
.mail-folders .mf{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:500}
.mail-folders .mf i{width:18px;color:var(--muted)}.mail-folders .mf span{flex:1}
.mail-folders .mf b{background:#2563eb;color:#fff;border-radius:999px;font-size:.7rem;padding:1px 8px}
.mail-folders .mf:hover{background:var(--accent-soft)}.mail-folders .mf.on{background:var(--accent-soft);color:var(--accent-text);font-weight:600}.mail-folders .mf.on i{color:inherit}
.mail-list .mrow{display:grid;grid-template-columns:12px 190px minmax(0,1fr) auto 56px;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.86rem}
.mail-list .mrow:hover{background:var(--accent-soft)}
.mail-list .mrow .mdot{width:8px;height:8px;border-radius:50%;background:transparent}
.mail-list .mrow.unread .mdot{background:#2563eb}.mail-list .mrow.unread .mparty,.mail-list .mrow.unread .msubj strong{font-weight:700}
.mail-list .mparty,.mail-list .msubj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-list .msubj strong{font-weight:500}.mail-list .msnip{color:var(--muted)}
.mail-list .mmeta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.78rem;white-space:nowrap}
.mail-list .row-actions{text-align:center}
.mf-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}.mf-row>label{width:70px;padding-top:9px;font-size:.82rem;font-weight:600;color:var(--muted)}
.dropzone{border:1.5px dashed var(--line);border-radius:12px;padding:16px;text-align:center;color:var(--muted);transition:border-color .15s,background .15s}
.dropzone.over{border-color:#2563eb;background:var(--accent-soft)}.dropzone i{font-size:1.4rem;color:#9db6e0;display:block;margin-bottom:6px}
.dropzone small{display:block;margin-top:4px;font-size:.74rem}.dz-pick{background:none;border:0;color:var(--accent-text);font-weight:600;padding:0;cursor:pointer}
.dz-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.dz-list li{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:8px;padding:6px 10px;font-size:.82rem}.dz-list li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dz-list li small{color:var(--muted)}
.dz-list li button{border:0;background:none;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer}.dz-list li button:hover{color:#ef4444}
.matts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.matt{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:.82rem;color:var(--ink);text-decoration:none;background:var(--card);max-width:100%}
.matt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}.matt small{color:var(--muted)}.matt .dl{color:var(--accent-text)}.matt:hover{border-color:var(--blue)}.matt .rm{font-size:.74rem;color:#dc2626}
.msg summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;margin-bottom:10px}.msg summary::-webkit-details-marker{display:none}
.msg .who{flex:1;font-size:.9rem}.msg .when{color:var(--muted);font-size:.78rem}
.avatar-s{width:34px;height:34px;border-radius:50%;background:#2563eb;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.mbody{white-space:normal;line-height:1.55;font-size:.9rem;word-break:break-word}
@media(max-width:900px){.mail-list .mrow{grid-template-columns:12px minmax(0,1fr) auto 40px}.mail-list .mparty{display:none}.mf-row{flex-direction:column;gap:2px}.mf-row>label{width:auto;padding-top:0}}

/* ===== Full-screen mailbox ===== */
.content-area:has(.mailapp){padding:0;overflow:hidden}
.content-inner:has(.mailapp){max-width:none;margin:0;height:100%}
.content-inner:has(.mailapp) .page-head{display:none}
.mailapp{display:grid;grid-template-columns:240px minmax(300px,400px) minmax(0,1fr);height:100%;background:var(--card);border-top:1px solid var(--line)}
.mail-col{min-height:0;overflow:hidden;border-right:1px solid var(--line)}
.mail-nav{padding:16px 14px;display:flex;flex-direction:column;overflow:auto;background:var(--card)}
.mail-nav .mail-folders{display:flex;flex-direction:column;gap:2px}
.mail-me{margin-top:auto;display:flex;gap:10px;align-items:center;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem}
.mail-me small{display:block;color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.mail-list-col{display:flex;flex-direction:column}
.mail-search{padding:12px 14px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line)}
.mail-search .hf-search{flex:1}.mail-search .hf-search input.form-control{width:100%!important}
.mail-list-head{padding:10px 16px;display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--line)}
.mail-list-head strong{color:var(--ink);font-size:.95rem}
.mlist{flex:1;overflow:auto}
.mitem{display:block;padding:12px 16px;border-bottom:1px solid var(--line);border-left:3px solid transparent;color:var(--ink);text-decoration:none}
.mitem:hover{background:var(--accent-soft);color:var(--ink)}.mitem.sel{background:var(--accent-soft);border-left-color:#2563eb}
.mi-top{display:flex;justify-content:space-between;gap:8px;font-size:.86rem}.mi-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-date{color:var(--muted);font-size:.74rem;white-space:nowrap}
.mi-subj{display:block;font-size:.84rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.mi-snip{display:block;color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.mitem.unread{background:rgba(37,99,235,.05)}.mitem.unread .mi-from,.mitem.unread .mi-subj{font-weight:700}
.mitem.unread .mi-from::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2563eb;margin-right:7px}
.mail-pager{padding:10px;border-top:1px solid var(--line);margin:0}
.mail-pane{overflow:auto;padding:20px 26px;border-right:0}
.mail-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.mail-title{font-size:1.15rem;font-weight:700;margin:0;flex:1;min-width:140px;word-break:break-word}
.mail-back{display:none}
.mail-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);gap:6px;padding:20px}
.mail-empty>i{font-size:3.2rem;color:#9db6e0}.mail-empty h3{font-size:1.1rem;color:var(--ink);margin:10px 0 0}.mail-empty p{max-width:380px;font-size:.88rem;margin:0 0 10px}
.mail-pane .msg{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:var(--card)}
.mail-pane .msg.open{border-color:#bfd3fb}
.mail-pane .mf-row>label{width:72px}
@media(max-width:1200px){.mailapp{grid-template-columns:200px minmax(260px,340px) minmax(0,1fr)}}
@media(max-width:991px){
 .content-area:has(.mailapp){overflow:auto}
 .mailapp{display:block;height:auto}.mail-col{overflow:visible;border-right:0}
 .mail-nav{flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 14px}.mail-nav .mail-compose{width:auto!important;margin:0!important}
 .mail-nav .mail-folders{flex-direction:row;flex-wrap:wrap}.mail-me{display:none}
 .mailapp.has-pane .mail-list-col{display:none}.mail-back{display:inline-block}
 .mlist{max-height:none}
}

/* user form: default-permissions switch and editor */
.perm-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sw-row{display:flex;gap:14px;align-items:flex-start;cursor:pointer;margin:0}.sw-row.off{opacity:.7;cursor:default}
.sw-row strong{display:block;font-size:.92rem}.sw-row small{display:block;color:var(--muted);font-size:.78rem}
.sw{position:relative;width:44px;height:24px;flex:0 0 auto;margin-top:2px}
.sw input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:999px;background:#cbd5e1;transition:background .2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.sw input:checked+i{background:#2563eb}.sw input:checked+i::after{transform:translateX(20px)}
.sw input:focus-visible+i{outline:2px solid #3b82f6;outline-offset:2px}.sw input:disabled{cursor:default}
.perm-panel{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card)}
.perm-panel[hidden]{display:none}
.perm-scroll{max-height:420px;overflow:auto}
.perm-panel .perm-table td:first-child{width:220px;font-weight:500}
.perm-panel .perm-chip{display:inline-block;margin:2px 10px 2px 0;font-size:.76rem;white-space:nowrap}
.perm-panel tr.menu-off td:last-child .perm-chip{opacity:.4}

/* permission matrix grouped by sidebar option */
.perm-tree .perm-head td{background:var(--soft,#f1f5f9);font-weight:600;border-top:2px solid var(--line);padding-top:10px;padding-bottom:10px}
.perm-tree .perm-head td:first-child i{color:#2563eb;margin-right:6px;font-size:.8rem}
.perm-tree .perm-sub td:first-child{padding-left:30px;font-weight:400}
.perm-tree .sub-arrow{color:var(--muted);margin-right:4px}
.perm-tree tbody.menu-off .perm-sub{opacity:.5}
[data-theme="dark"] .perm-tree .perm-head td{background:rgba(255,255,255,.06)}

/* None / Show assigned / Show all control */
.seg-hidden{display:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card,#fff);vertical-align:middle}
.seg label{margin:0;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:block;padding:4px 14px;font-size:.78rem;font-weight:500;color:var(--muted);transition:background .15s,color .15s}
.seg label+label span{border-left:1px solid var(--line)}
.seg input:checked+span{background:#2563eb;color:#fff}
.seg input:focus-visible+span{outline:2px solid #3b82f6;outline-offset:-2px}
.seg label.dis{cursor:default;opacity:.55}.seg label.dis input{cursor:default}
.perm-tree tr.perm-sub.menu-off{display:none}