:root{--bg:#f5f7fb;--panel:#fff;--ink:#18212f;--muted:#718096;--line:#e7ebf2;--accent:#146c94;--accent2:#0d9488;--danger:#b42318;--shadow:0 8px 30px rgba(28,43,61,.06)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,Segoe UI,Arial,sans-serif}aside{position:fixed;left:0;top:0;bottom:0;width:245px;background:#fff;border-right:1px solid var(--line);padding:24px 15px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 10px 28px}.logo{width:38px;height:38px;border-radius:11px;background:#146c94;color:#fff;display:grid;place-items:center;font-weight:800}.brand small{display:block;color:#9aa5b1;font-size:9px;letter-spacing:2px;margin-top:2px}nav{display:grid;gap:4px}nav a{padding:11px 12px;border-radius:10px;color:#5d6877;text-decoration:none;display:flex;gap:12px;align-items:center}nav a span{width:18px;text-align:center}nav a:hover,nav a.active{background:#edf7fa;color:#126887;font-weight:600}.sidefoot{margin-top:auto;border-top:1px solid var(--line);padding:18px 10px;display:grid;gap:5px}.sidefoot small{color:#9aa5b1}.sidefoot a{color:#b42318;text-decoration:none;margin-top:8px}main{margin-left:245px;min-height:100vh}header{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;padding:0 34px}.userchip{display:flex;align-items:center;gap:9px}.userchip span{width:34px;height:34px;border-radius:50%;background:#d9eef4;color:#126887;display:grid;place-items:center;font-weight:700}.userchip em{font-size:11px;color:#8994a3;font-style:normal;margin-left:4px}.mobilebrand{display:none}.hero,.topbar{padding:32px 36px 22px;display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{font-size:11px;color:#0d9488;letter-spacing:1.7px;font-weight:800}.hero h1,.topbar h1{margin:6px 0 5px;font-size:28px}.hero p,.topbar p{margin:0}.datepill,.role{background:#eef5f8;color:#126887;border-radius:20px;padding:9px 14px;font-size:12px;font-weight:600}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 36px 24px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.card{padding:20px}.card span,.card small{display:block;color:var(--muted)}.card b{display:block;font-size:28px;margin:9px 0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 36px 36px}.panel{padding:22px;margin:0 36px 22px}.grid2 .panel{margin:0}.panel h2{font-size:16px;margin:0 0 10px}.muted{color:var(--muted)}.big{font-size:25px;font-weight:700;margin:15px 0}.progress{height:8px;background:#edf0f4;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;background:#159b8c}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions a,button{border:0;background:#146c94;color:white;padding:10px 13px;border-radius:9px;text-decoration:none;cursor:pointer;font-weight:600}.actions a:nth-child(n+3){background:#edf7fa;color:#126887}.topbar button{margin-top:4px}.hide{display:none}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.formgrid input,.formgrid select,.formgrid textarea,.filters input{border:1px solid #dce2e9;border-radius:8px;padding:11px;font:inherit;background:#fff}.formgrid textarea{min-height:80px;grid-column:1/-1}.formgrid button{grid-column:1/-1;width:max-content}.tablewrap{overflow:auto}.tablewrap h2{margin:20px 0 10px}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line)}th{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#8a94a2}td small{color:var(--muted)}.status{display:inline-block;padding:5px 9px;border-radius:14px;background:#f1f3f5;font-size:11px;font-weight:700}.status.present,.status.approved{background:#e7f7f1;color:#087443}.status.weekend{background:#dbeafe !important;color:#1d4ed8 !important;border:1px solid #93c5fd !important}.status.holiday{background:#f1e8ff;color:#6b3fa0}.status.late{background:#fff0df;color:#a34b00}.status.pending,.status.missing-punch{background:#fff4d6;color:#986500}.status.absent,.status.rejected{background:#fdecea;color:#b42318}.inline{display:flex;gap:5px}.inline button{font-size:11px;padding:7px 9px}.inline .danger{background:#b42318}.filters{display:flex;gap:10px}.settings{display:grid;grid-template-columns:1fr 1fr;padding:0}.settings div{padding:20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.settings span{color:var(--muted)}.flash{position:fixed;right:25px;top:85px;padding:13px 18px;border-radius:9px;background:#e7f7f1;color:#087443;box-shadow:var(--shadow);z-index:5}.flash.err{background:#fdecea;color:#b42318}@media(max-width:900px){aside{width:70px;padding:15px 8px}.brand div:not(.logo),nav a:not(.active){font-size:0}.brand{padding:0 7px 25px}.brand .logo{display:grid}.sidefoot{display:none}main{margin-left:70px}.cards{grid-template-columns:1fr 1fr;padding:0 18px 18px}.hero,.topbar{padding:24px 18px}.grid2{grid-template-columns:1fr;padding:0 18px}.panel{margin-left:18px;margin-right:18px}.formgrid{grid-template-columns:1fr}.settings{grid-template-columns:1fr}} 
.loginbody{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#edf7fa,#f7fafc)}.loginbox{width:min(420px,92vw);background:#fff;padding:38px;border-radius:18px;box-shadow:0 20px 60px rgba(28,43,61,.1);text-align:center}.loginbox .logo{margin:auto}.loginbox h1{font-size:24px;margin:14px 0 4px}.loginbox form{display:grid;gap:12px;margin-top:25px}.loginbox input{padding:13px;border:1px solid #dce2e9;border-radius:9px;font:inherit}.loginbox button{padding:13px}

.employee-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.employee-card{display:block;text-decoration:none;color:#0f172a;border:1px solid #e2e8f0;border-radius:12px;padding:14px;background:#fff;transition:.15s}.employee-card:hover,.employee-card.active{border-color:#0f766e;box-shadow:0 4px 14px rgba(15,118,110,.12);transform:translateY(-1px)}.employee-card strong,.employee-card span,.employee-card small{display:block}.employee-card span{margin-top:4px;color:#475569;font-size:12px}.employee-card small{margin-top:5px;color:#64748b;font-size:11px}.btn-sm{padding:6px 9px;font-size:12px}

.print-only{display:none}.pdf-btn{background:#7c3aed !important;color:#fff !important}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff !important;color:#111827 !important;font-size:10px}
  aside,header,.topbar:not(#attendance-details .topbar),.no-print,.flash{display:none !important}
  main{margin:0 !important;min-height:0 !important}
  .hero,.topbar{padding:8px 0 !important}
  .panel,.card{box-shadow:none !important;border:1px solid #d1d5db !important}
  .panel{margin:0 0 10px !important;padding:12px !important}
  .print-report{display:block !important}
  .print-only{display:block !important}
  .tablewrap{overflow:visible !important}
  table{min-width:0 !important;width:100% !important}
  th,td{padding:7px 6px !important}
  .status{border:1px solid #cbd5e1 !important}
  .status.present{background:#e7f7f1 !important;color:#087443 !important}
  .status.weekend{background:#dbeafe !important;color:#1d4ed8 !important}
  .status.holiday{background:#f1e8ff !important;color:#6b3fa0 !important}
  .status.late{background:#fff0df !important;color:#a34b00 !important}
  .status.pending,.status.missing-punch{background:#fff4d6 !important;color:#986500 !important}
  .status.absent,.status.rejected{background:#fdecea !important;color:#b42318 !important}
  .cards{padding:0 0 10px !important;grid-template-columns:repeat(4,1fr) !important}
  .grid2{padding:0 0 10px !important}
}

/* Employee/date-range PDF export with attendance graph */

.employee-print-details{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:#4b5563}
.employee-print-details span{white-space:nowrap}
.attendance-print-summary{margin:14px 0 18px;padding:14px;border:1px solid #d1d5db;border-radius:10px;background:#fff}
.summary-title{font-size:15px;font-weight:700;margin-bottom:10px}
.summary-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.summary-metrics>div{border:1px solid #e5e7eb;border-radius:8px;padding:8px;text-align:center}
.summary-metrics b{display:block;font-size:18px}
.summary-metrics span{display:block;font-size:11px;color:#6b7280;margin-top:2px}
.attendance-graph{display:flex;flex-direction:column;gap:7px}
.graph-row{display:grid;grid-template-columns:105px 1fr 35px;align-items:center;gap:8px;font-size:11px}
.graph-label{font-weight:600}
.graph-track{height:12px;background:#eef2f7;border-radius:999px;overflow:hidden}
.graph-bar{height:100%;border-radius:999px}
.status-present{background:#22c55e}
.status-late{background:#f59e0b}
.status-absent{background:#ef4444}
.status-missing-punch{background:#eab308}
.status-weekend{background:#3b82f6}
.status-holiday{background:#8b5cf6}
.status-half-day{background:#f97316}
.graph-value{text-align:right;font-weight:700}
@media print{
  .no-print{display:none !important}
  .employee-print-details{color:#374151}
  .attendance-print-summary{break-inside:avoid;page-break-inside:avoid}
  .graph-bar{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .status-present{background:#22c55e !important}
  .status-late{background:#f59e0b !important}
  .status-absent{background:#ef4444 !important}
  .status-missing-punch{background:#eab308 !important}
  .status-weekend{background:#3b82f6 !important}
  .status-holiday{background:#8b5cf6 !important}
  .status-half-day{background:#f97316 !important}
}

/* Header theme toggle + user profile */
.header-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{border:1px solid #d1d5db;background:#fff;color:#111827;border-radius:9px;padding:8px 12px;cursor:pointer;font-weight:600}
.theme-toggle:hover{filter:brightness(.97)}
.userchip-link{text-decoration:none;color:inherit;cursor:pointer}
.user-avatar{overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-panel{max-width:900px}
.profile-head{display:flex;align-items:center;gap:18px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.profile-photo-large,.profile-avatar-large{width:92px;height:92px;border-radius:50%;object-fit:cover}
.profile-avatar-large{background:#d9eef4;color:#126887;display:grid;place-items:center;font-size:34px;font-weight:800}
.profile-form label{display:flex;flex-direction:column;gap:7px;font-weight:600;color:var(--ink)}
.profile-form label input{margin:0}
.profile-form label small{font-weight:400;color:var(--muted)}
.profile-form button{width:max-content}
html.dark-mode,body.dark-mode{background:#111827;color:#e5e7eb}
html.dark-mode body{background:#111827;color:#e5e7eb}
html.dark-mode main{background:#111827}
html.dark-mode aside,html.dark-mode header{background:#172033 !important;color:#e5e7eb !important;border-color:#273449 !important}
html.dark-mode .panel,html.dark-mode .card,html.dark-mode .tablewrap,html.dark-mode .filters,html.dark-mode .attendance-print-summary{background:#182235 !important;color:#e5e7eb !important;border-color:#2f3d55 !important;box-shadow:none}
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4,html.dark-mode b,strong{color:#f3f4f6}
html.dark-mode .muted,html.dark-mode small,html.dark-mode .employee-print-details,html.dark-mode .summary-metrics span{color:#aab5c5 !important}
html.dark-mode input,html.dark-mode select,html.dark-mode textarea{background:#111827 !important;color:#e5e7eb !important;border-color:#3b4a63 !important}
html.dark-mode table{color:#e5e7eb}
html.dark-mode th{background:#1f2b40 !important;color:#cbd5e1 !important;border-color:#34435b !important}
html.dark-mode td{border-color:#2b3950 !important}
html.dark-mode tr:hover td{background:#1d293d !important}
html.dark-mode .theme-toggle{background:#26344a !important;color:#f8fafc !important;border-color:#46566f !important}
html.dark-mode nav a{color:#cbd5e1}
html.dark-mode nav a:hover,html.dark-mode nav a.active{background:#243b53 !important;color:#fff !important}
html.dark-mode .settings div{border-color:#2b3950}
@media print{
 .theme-toggle,.userchip-link,.no-print{display:none !important}
 html.dark-mode body,html.dark-mode main,html.dark-mode .panel,html.dark-mode .card,html.dark-mode .tablewrap,html.dark-mode .attendance-print-summary{background:#fff !important;color:#111827 !important}
}

/* ===== Final UI polish: Profile + Dark Mode ===== */
.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid #cbd5e1;background:#fff;color:#0f172a;border-radius:10px;padding:9px 13px;font-size:13px;line-height:1;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.theme-toggle:hover{transform:translateY(-1px)}
.userchip-link{display:flex;align-items:center;gap:9px;text-decoration:none;color:#172033!important}
.userchip-link em{color:#8994a3!important}
.user-avatar{width:36px!important;height:36px!important;border-radius:50%;display:grid!important;place-items:center;overflow:hidden;background:#d9eef4}
.user-avatar img{display:block;width:100%;height:100%;object-fit:cover}

.profile-panel{max-width:1100px!important;margin:0 36px 30px!important;padding:28px!important}
.profile-head{display:flex!important;align-items:center!important;gap:18px!important;padding:0 0 22px!important;margin:0 0 24px!important;border-bottom:1px solid var(--line)!important}
.profile-head h2{margin:0 0 4px!important;font-size:21px}
.profile-photo-large,.profile-avatar-large{width:96px!important;height:96px!important;flex:0 0 96px}
.profile-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 28px!important;align-items:start!important}
.profile-form label{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;width:100%!important;font-weight:600!important;color:var(--ink)!important}
.profile-form label input,
.profile-form label select{display:block!important;width:100%!important;min-width:0!important;height:44px!important;margin:0!important;padding:10px 12px!important;border:1px solid #dce2e9!important;border-radius:9px!important;background:#fff!important;color:#18212f!important;font:inherit!important}
.profile-form label small{font-weight:400!important;color:var(--muted)!important}
.profile-form button{grid-column:1/-1!important;width:max-content!important;margin-top:2px!important;padding:11px 18px!important}
.profile-form label:nth-of-type(4){grid-column:2}
.profile-form label:nth-of-type(3){grid-column:1}
@media(max-width:700px){
 .header-actions{gap:7px}
 .theme-toggle span{display:none}
 .profile-panel{margin:0 16px 20px!important}
 .profile-form{grid-template-columns:1fr!important}
 .profile-form label:nth-of-type(3),.profile-form label:nth-of-type(4){grid-column:auto}
}

/* Dark mode uses CSS variables as the primary mechanism. */
html[data-theme="dark"]{
 --bg:#0b1220;
 --panel:#111b2e;
 --ink:#e7edf7;
 --muted:#9aa9bd;
 --line:#26344a;
 --shadow:0 8px 30px rgba(0,0,0,.22);
 color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg)!important;color:var(--ink)!important}
html[data-theme="dark"] aside,
html[data-theme="dark"] header{background:#101a2c!important;border-color:#26344a!important}
html[data-theme="dark"] main{background:var(--bg)!important}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .tablewrap,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .attendance-print-summary{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important;box-shadow:none!important}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] b,
html[data-theme="dark"] strong{color:#f4f7fb!important}
html[data-theme="dark"] p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] small{color:var(--muted)!important}
html[data-theme="dark"] nav a{color:#b9c6d8!important}
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] nav a.active{background:#19364a!important;color:#7dd3fc!important}
html[data-theme="dark"] .sidefoot{border-color:var(--line)!important}
html[data-theme="dark"] .sidefoot b{color:#f4f7fb!important}
html[data-theme="dark"] .sidefoot a{color:#f87171!important}
html[data-theme="dark"] .userchip-link{color:#eef4fb!important}
html[data-theme="dark"] .userchip-link em{color:#9aa9bd!important}
html[data-theme="dark"] .theme-toggle{background:#1d2a40!important;color:#f4f7fb!important;border-color:#40516b!important;box-shadow:none!important}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .profile-form label input{background:#0b1220!important;color:#e7edf7!important;border-color:#34455f!important}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#72839a!important}
html[data-theme="dark"] th{background:#18253a!important;color:#b9c6d8!important;border-color:#2b3a52!important}
html[data-theme="dark"] td{color:#dce5f1!important;border-color:#26344a!important}
html[data-theme="dark"] tr:hover td{background:#172338!important}
html[data-theme="dark"] .employee-card{background:#111b2e!important;color:#e7edf7!important;border-color:#2b3a52!important}
html[data-theme="dark"] .employee-card span,
html[data-theme="dark"] .employee-card small{color:#9aa9bd!important}
html[data-theme="dark"] .role,
html[data-theme="dark"] .datepill{background:#1b3142!important;color:#7dd3fc!important}
html[data-theme="dark"] .profile-head{border-color:var(--line)!important}
html[data-theme="dark"] .profile-avatar-large{background:#1d4253!important;color:#7dd3fc!important}

/* Print must remain light. */
@media print{
 html[data-theme="dark"] body,
 html[data-theme="dark"] main,
 html[data-theme="dark"] .panel,
 html[data-theme="dark"] .card,
 html[data-theme="dark"] .tablewrap,
 html[data-theme="dark"] .attendance-print-summary{background:#fff!important;color:#111827!important}
 html[data-theme="dark"] th{background:#f3f4f6!important;color:#111827!important}
 html[data-theme="dark"] td{color:#111827!important;border-color:#d1d5db!important}
}


/* ===== FIX: Employee Cards - Light Theme ===== */
html:not([data-theme="dark"]) .employee-card {
    background: #ffffff !important;
    color: #0f172a !important;
}

html:not([data-theme="dark"]) .employee-card strong {
    color: #0f172a !important;
}

html:not([data-theme="dark"]) .employee-card span {
    color: #475569 !important;
}

html:not([data-theme="dark"]) .employee-card small {
    color: #64748b !important;
}


/* =========================================================
   HR ATTENDANCE - LIGHT MODE TEXT VISIBILITY FIX
   ========================================================= */

html:not([data-theme="dark"]) body {
    color: #172033 !important;
}

html:not([data-theme="dark"]) main,
html:not([data-theme="dark"]) main p,
html:not([data-theme="dark"]) main span,
html:not([data-theme="dark"]) main div,
html:not([data-theme="dark"]) main td,
html:not([data-theme="dark"]) main th,
html:not([data-theme="dark"]) main label,
html:not([data-theme="dark"]) main small {
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main h1,
html:not([data-theme="dark"]) main h2,
html:not([data-theme="dark"]) main h3,
html:not([data-theme="dark"]) main h4,
html:not([data-theme="dark"]) main h5,
html:not([data-theme="dark"]) main h6,
html:not([data-theme="dark"]) main td:nth-child(2) {
    color: #172033 !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main p,
html:not([data-theme="dark"]) main span {
    color: #52627a !important;
}

html:not([data-theme="dark"]) main strong,
html:not([data-theme="dark"]) main b {
    color: #172033 !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main h2 {
    color: #172033 !important;
}

html:not([data-theme="dark"]) main [class*="department"],
html:not([data-theme="dark"]) main [class*="designation"],
html:not([data-theme="dark"]) main [class*="shift"] {
    color: #52627a !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main label,
html:not([data-theme="dark"]) main .label,
html:not([data-theme="dark"]) main [class*="label"] {
    color: #52627a !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main table td,
html:not([data-theme="dark"]) main table th {
    color: #172033 !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main table th {
    color: #52627a !important;
}

html:not([data-theme="dark"]) main a {
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main input,
html:not([data-theme="dark"]) main select,
html:not([data-theme="dark"]) main textarea {
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main button {
    opacity: 1 !important;
}

html:not([data-theme="dark"]) main [style*="color"] {
    opacity: 1 !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] main * {
    opacity: 1;
}


/* ===== Users & Roles - Permissions UI ===== */
.panelhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.panelhead h2{margin:0 0 4px}
.panelhead a{color:#0f766e;text-decoration:none;font-weight:600}
.permissions-box{grid-column:1/-1;border:1px solid #dbe3ec;border-radius:12px;background:#f8fafc;padding:18px;margin-top:2px}
.permissions-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}
.permissions-head h3{margin:0 0 4px;font-size:16px}
.permission-actions{display:flex;gap:8px;flex-wrap:wrap}
.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.permission-item{display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important;padding:11px 12px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;font-weight:600!important;color:#253247!important;cursor:pointer}
.permission-item input{margin:0!important;width:17px!important;height:17px!important;accent-color:#0f766e}
.permission-item:has(input:checked){border-color:#79b7ad;background:#effaf7}
.permission-item:has(input:disabled){cursor:not-allowed;opacity:.7}
.permission-note{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#eef6ff;color:#315b86!important;font-size:13px}
.edit-link{color:#0f766e!important;text-decoration:none;font-weight:700}
@media(max-width:900px){.permission-grid{grid-template-columns:1fr 1fr}.permissions-head{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.permission-grid{grid-template-columns:1fr}.panelhead{align-items:flex-start;flex-direction:column}}
html[data-theme="dark"] .permissions-box{background:#111b2e!important;border-color:#2f3d55!important}
html[data-theme="dark"] .permission-item{background:#182235!important;border-color:#34435b!important;color:#e7edf7!important}
html[data-theme="dark"] .permission-item:has(input:checked){background:#173b39!important;border-color:#3d8178!important}
html[data-theme="dark"] .permissions-head h3{color:#f4f7fb!important}
html[data-theme="dark"] .permission-note{background:#172b42!important;color:#b9cce3!important}
html[data-theme="dark"] .panelhead a,.edit-link{color:#7dd3fc!important}


/* ===== Branding ===== */
.site-credit{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:28px 36px 24px;font-size:12px;color:#52627a;text-align:center}
.site-credit strong{color:#172033}
.loginbox .site-credit{margin:22px 0 0;font-size:11px}
@media print{
  .site-credit{display:flex!important;margin:12px 0 0!important;padding-top:8px;border-top:1px solid #d1d5db;font-size:9px;color:#374151!important}
  .site-credit strong{color:#374151!important}
}

/* Employee dashboard: today's sign-in status */
.today-signin-card{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;margin-bottom:18px;padding:18px 22px}
.today-signin-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaf5fb;color:#0f6f95;font-size:20px}
.today-signin-card strong{display:block;color:#17324d;font-size:15px}
.today-signin-time{font-size:20px;font-weight:800;color:#2674c8;margin:7px 0 2px}
.today-signin-card .muted{font-size:12px}
html.dark-mode .today-signin-card,html[data-theme="dark"] .today-signin-card{background:#182235!important;color:#e5e7eb!important;border-color:#2f3d55!important}
html.dark-mode .today-signin-card strong,html[data-theme="dark"] .today-signin-card strong{color:#e5e7eb!important}

/* Users & Roles: separate Super Admin sections */
.tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;padding:9px 14px;border:1px solid #d8e1ea;border-radius:9px;background:#fff;color:#52627a!important;text-decoration:none;font-weight:700;font-size:13px}
.tabs a.active{background:#0f6f95;color:#fff!important;border-color:#0f6f95}
html[data-theme="dark"] .tabs a{background:#182235;border-color:#34435b;color:#cbd5e1!important}
html[data-theme="dark"] .tabs a.active{background:#0f6f95;color:#fff!important;border-color:#0f6f95}


/* ===== 2026 UI: iOS glass active navigation + animated segmented tabs ===== */
nav a{position:relative;overflow:hidden;transition:transform .22s ease,background .28s ease,box-shadow .28s ease,color .22s ease;}
nav a::before{content:"";position:absolute;inset:2px;border-radius:11px;background:rgba(255,255,255,.28);opacity:0;transform:scale(.94);transition:opacity .28s ease,transform .28s ease;pointer-events:none;backdrop-filter:blur(8px);}
nav a.active{background:rgba(20,108,148,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 14px rgba(20,108,148,.10);}
nav a.active::before{opacity:1;transform:scale(1);}
nav a:active{transform:scale(.98);}
.users-role-tabs{position:relative;display:inline-flex!important;align-items:center!important;gap:4px!important;padding:4px!important;margin:0 36px 18px!important;border:1px solid #dce5ee!important;border-radius:14px!important;background:rgba(255,255,255,.72)!important;box-shadow:0 6px 20px rgba(15,23,42,.06);backdrop-filter:blur(12px);}
.users-role-tabs a{position:relative;z-index:2;border:0!important;background:transparent!important;border-radius:10px!important;padding:10px 18px!important;color:#52627a!important;transition:color .25s ease,transform .2s ease!important;}
.users-role-tabs a.active{color:#fff!important;}
.tabs-slider{position:absolute;z-index:1;left:4px;top:4px;height:calc(100% - 8px);border-radius:10px;background:linear-gradient(135deg,#146c94,#0d9488);box-shadow:0 5px 14px rgba(20,108,148,.22);transition:transform .35s cubic-bezier(.22,.9,.32,1),width .35s cubic-bezier(.22,.9,.32,1);}
.users-pane{overflow:hidden;max-height:3000px;opacity:1;transform:translateX(0);transition:max-height .45s ease,opacity .3s ease,transform .45s cubic-bezier(.22,.9,.32,1);}
.users-pane.is-hidden{max-height:0!important;opacity:0!important;transform:translateX(28px)!important;pointer-events:none;}
.users-pane.is-active{animation:usersSlideIn .42s cubic-bezier(.22,.9,.32,1);}
@keyframes usersSlideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
.users-topbar .topbar-add-user{margin-top:0;}
.users-topbar{align-items:center;}
.role{white-space:nowrap;}
@media(max-width:700px){.users-role-tabs{margin-left:16px!important;margin-right:16px!important}.users-role-tabs a{padding:9px 12px!important;font-size:12px!important}}
html[data-theme="dark"] .users-role-tabs{background:rgba(24,34,53,.78)!important;border-color:#34435b!important;box-shadow:none;}
html[data-theme="dark"] .users-role-tabs a{color:#cbd5e1!important;}
html[data-theme="dark"] nav a.active{background:rgba(36,59,83,.72)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 16px rgba(0,0,0,.18);}
html[data-theme="dark"] nav a::before{background:rgba(255,255,255,.04);}

/* Fix iOS glass active navigation text visibility */
nav a{isolation:isolate;}
nav a::before{z-index:0;}
nav a .nav-icon,
nav a .nav-label{position:relative;z-index:2;}
nav a .nav-label{white-space:nowrap;}
nav a.active .nav-icon,
nav a.active .nav-label{color:inherit!important;}


/* ===== iOS glass navigation - readable text in light mode ===== */
nav a{isolation:isolate;position:relative;overflow:hidden;color:#52627a!important;}
nav a::before{z-index:0!important;}
nav a .nav-icon,nav a .nav-label{position:relative!important;z-index:3!important;display:inline-block!important;opacity:1!important;visibility:visible!important;}
nav a.active{color:#126887!important;background:rgba(20,108,148,.10)!important;}
nav a.active .nav-icon,nav a.active .nav-label{color:#126887!important;text-shadow:0 0 0 transparent!important;}
html[data-theme="dark"] nav a.active .nav-icon,html[data-theme="dark"] nav a.active .nav-label{color:#7dd3fc!important;}

/* ===== Users & Roles segmented control - glass slider with readable active text ===== */
.users-role-tabs{position:relative!important;isolation:isolate;}
.users-role-tabs .tabs-slider{z-index:0!important;pointer-events:none!important;}
.users-role-tabs a{position:relative!important;z-index:3!important;color:#52627a!important;opacity:1!important;visibility:visible!important;}
.users-role-tabs a.active{color:#fff!important;opacity:1!important;visibility:visible!important;text-shadow:0 1px 1px rgba(0,0,0,.12);}
.users-role-tabs a:not(.active){background:transparent!important;}
html[data-theme="dark"] .users-role-tabs a{color:#cbd5e1!important;}
html[data-theme="dark"] .users-role-tabs a.active{color:#fff!important;}
.role{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;white-space:nowrap!important;color:#126887!important;background:#eef5f8!important;}
html[data-theme="dark"] .role{color:#bfe8f5!important;background:#243b53!important;}

/* Forgot password link */
.login-help{margin:12px 0 0;text-align:center;font-size:12px}
.login-help a{color:#146c94;text-decoration:none;font-weight:600}
.login-help a:hover{text-decoration:underline}

/* Login page — Corporate Software Services / Flowwkkr */
.loginbody{min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:#e9eef3 url('assets/login-bg.png') center center/cover no-repeat fixed;position:relative;overflow:auto}
.loginbody:before{content:"";position:fixed;inset:0;background:rgba(235,242,248,.34);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);pointer-events:none}
.loginbox{position:relative;z-index:1;width:min(330px,calc(100vw - 40px));box-sizing:border-box;padding:26px 25px 18px;border-radius:12px;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.82);box-shadow:0 18px 55px rgba(31,48,67,.20);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);text-align:center}
.loginbox .client-brand{margin:0 auto 3px;color:#0f69a6;font-size:27px;line-height:1.05;font-weight:800;letter-spacing:-.8px}
.loginbox .brand-rule{width:112px;height:2px;margin:0 auto 9px;background:#0f69a6;opacity:.75}
.loginbox .login-title{margin:0 0 19px;color:#6a7786;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.loginbox .login-form{display:block;margin:0;text-align:left}
.loginbox .login-form label:not(.remember-row){display:block;margin:0 0 6px 1px;color:#24659b;font-size:11px;font-weight:700}
.loginbox .login-form input[type=email],.loginbox .login-form input[type=password]{width:100%;height:43px;box-sizing:border-box;padding:0 12px;margin:0 0 13px;border:1px solid #d8dde3;border-radius:5px;background:rgba(255,255,255,.96);color:#34495e;font:inherit;font-size:13px;outline:none;box-shadow:0 1px 3px rgba(30,50,70,.07)}
.loginbox .login-form input[type=email]:focus,.loginbox .login-form input[type=password]:focus{border-color:#3479bf;box-shadow:0 0 0 2px rgba(52,121,191,.12)}
.loginbox .remember-row{display:flex!important;align-items:center;gap:7px;margin:0 0 16px!important;color:#78838e!important;font-size:10px!important;font-weight:400!important;cursor:pointer}
.loginbox .remember-row input{width:14px!important;height:14px!important;margin:0!important;accent-color:#3479bf}
.loginbox .login-form button{width:100%;height:40px;border:0;border-radius:3px;background:#3479c9;color:#fff;font-size:12px;font-weight:700;letter-spacing:.2px;cursor:pointer;box-shadow:0 3px 8px rgba(52,121,201,.22)}
.loginbox .login-form button:hover{background:#286bb7}
.loginbox .login-help{margin:14px 0 18px;font-size:10px}.loginbox .login-help a{color:#7790a4;text-decoration:none}.loginbox .login-help a:hover{text-decoration:underline}
.loginbox .provider-brand{margin:0;color:#263b4f;font-size:31px;line-height:1;font-weight:800;letter-spacing:-1.7px}.loginbox .provider-brand:before{content:"●";display:inline-block;margin-right:4px;color:#3479c9;font-size:16px;vertical-align:middle}
.loginbox .provider-sub{margin-top:5px;color:#82909e;font-size:7px;font-weight:800;letter-spacing:2.5px}.loginbox .login-footer{margin-top:17px;padding-top:9px;border-top:1px solid rgba(120,140,160,.22);color:#687785;font-size:8px}
@media(max-width:520px){.loginbody{padding:15px;background-position:center}.loginbox{width:min(330px,calc(100vw - 30px));padding:23px 20px 16px}.loginbox .client-brand{font-size:23px}}

/* ===== Mobile responsive layout ===== */
@media (max-width:700px){
 body{font-size:13px;padding-bottom:72px;overflow-x:hidden}
 aside{position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;height:64px;padding:0;background:rgba(255,255,255,.96)!important;border-right:0;border-top:1px solid var(--line);z-index:50;display:block;box-shadow:0 -6px 22px rgba(15,23,42,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .brand,.sidefoot{display:none!important}
 nav{height:64px;display:flex;align-items:stretch;gap:2px;overflow-x:auto;overflow-y:hidden;padding:5px 6px;scrollbar-width:none}
 nav::-webkit-scrollbar{display:none}
 nav a,nav a:not(.active){flex:0 0 78px!important;width:78px!important;min-width:78px;height:54px;padding:6px 4px!important;margin:0!important;border-radius:10px;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:10px!important;color:#52627a!important;white-space:nowrap}
 nav a .nav-icon,nav a .nav-label{font-size:inherit!important;width:auto!important;display:block!important}
 nav a .nav-icon{font-size:16px!important;line-height:18px}
 nav a .nav-label{line-height:13px;max-width:74px;overflow:hidden;text-overflow:ellipsis}
 nav a.active{color:#126887!important;background:rgba(20,108,148,.10)!important;box-shadow:none!important}
 main{margin-left:0!important;min-width:0;width:100%;padding-bottom:6px}
 header{height:60px;padding:0 12px;justify-content:space-between;position:sticky;top:0;z-index:20}
 .mobilebrand{display:block!important;font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap}
 .header-actions{gap:7px!important;min-width:0}
 .theme-toggle{padding:8px 9px!important;font-size:12px!important}
 .userchip-link{max-width:155px;overflow:hidden;white-space:nowrap;font-size:12px!important}
 .userchip-link>em{display:none}
 .user-avatar{width:32px!important;height:32px!important;flex:0 0 32px}
 .hero,.topbar{padding:20px 14px 16px!important;gap:12px;flex-direction:column}
 .hero h1,.topbar h1{font-size:23px!important;line-height:1.2}
 .hero p,.topbar p{font-size:12px;line-height:17px}
 .datepill{align-self:flex-start}
 .cards{grid-template-columns:1fr!important;gap:12px!important;padding:0 14px 16px!important}
 .card{padding:16px!important}.card b{font-size:25px!important}
 .grid2{grid-template-columns:1fr!important;gap:12px!important;padding:0 14px 18px!important}
 .panel{margin:0 14px 14px!important;padding:16px!important;border-radius:12px}
 .today-signin-card{margin:0 14px 14px!important;padding:15px 12px!important;gap:9px}
 .today-signin-card strong{font-size:13px!important}.today-signin-time{font-size:19px!important}
 .actions{grid-template-columns:1fr!important}
 .formgrid{grid-template-columns:1fr!important;gap:10px!important}.formgrid textarea,.formgrid button{grid-column:auto!important}
 .filters{flex-wrap:wrap!important;align-items:stretch}.filters input,.filters button{flex:1 1 130px;min-width:0}
 .tablewrap{margin-left:14px!important;margin-right:14px!important;padding:0!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}.tablewrap>table{min-width:680px}
 th,td{padding:10px 9px!important;font-size:11px}.inline{flex-wrap:wrap}
 .profile-panel{margin:0 14px 18px!important;padding:16px!important}.profile-head{align-items:flex-start!important;gap:13px!important}
 .profile-photo-large,.profile-avatar-large{width:76px!important;height:76px!important;flex:0 0 76px!important}.profile-head h2{font-size:18px!important}
 .profile-form{grid-template-columns:1fr!important}.profile-form label:nth-of-type(3),.profile-form label:nth-of-type(4){grid-column:auto!important}.profile-form button{width:100%!important}
 .settings{grid-template-columns:1fr!important}.settings div{padding:14px!important;gap:10px}.permission-grid{grid-template-columns:1fr!important}
 .users-role-tabs{margin:0 14px 14px!important;max-width:calc(100% - 28px);overflow-x:auto}.users-role-tabs a{padding:9px 12px!important;font-size:11px!important;white-space:nowrap}
 .loginbody{padding:12px!important;background-attachment:scroll!important}.loginbox{width:min(360px,calc(100vw - 24px))!important;padding:23px 18px 16px!important}.loginbox .client-brand{font-size:22px!important}.loginbox .provider-brand{font-size:27px!important}
}
@media (max-width:390px){.userchip-link{max-width:110px}.mobilebrand{font-size:13px}nav a,nav a:not(.active){flex-basis:72px!important;width:72px!important;min-width:72px!important}.hero h1,.topbar h1{font-size:21px!important}}

/* ===== Dashboard reference charts ===== */
.dashboard-chart-panel{margin-top:0!important;padding:12px 14px 10px!important;overflow:hidden}
.dash-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #e6ebf0;padding-bottom:8px;margin-bottom:4px}
.dash-chart-head h2{font-size:11px!important;color:#17649b!important;letter-spacing:.2px;margin:0 0 7px!important;font-weight:800}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 13px;align-items:center}
.chart-legend span,.chart-series-legend span{font-size:9px;color:#5f6f80;white-space:nowrap}
.chart-legend i{display:inline-block;width:13px;height:6px;margin-right:4px;vertical-align:middle;border-radius:1px}
.chart-controls{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chart-controls select{height:25px;border:1px solid #d7e0e8;background:#fff;border-radius:4px;color:#617184;font-size:9px;padding:0 6px;min-width:96px}
.chart-controls form{margin:0}
.flag-chart-scroll,.weekly-chart-scroll{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.flag-chart,.weekly-chart{display:block;width:100%;min-width:900px;height:auto}
.chart-grid line{stroke:#e3e8ed;stroke-width:1}
.chart-grid text{fill:#55a98c;font-size:8px;font-family:Arial,sans-serif}
.xlab{fill:#6e7a88;font-size:7px;font-family:Arial,sans-serif}
.week-label{fill:#159b8c;font-size:9px;font-family:Arial,sans-serif}
.weekly-chart .line-schedule{fill:none;stroke:#f21b1b;stroke-width:3}
.weekly-chart .line-work{fill:none;stroke:#2f78d8;stroke-width:3}
.weekly-chart .line-avg{fill:none;stroke:#f7931e;stroke-width:2}
.point-schedule{fill:#f21b1b}.point-work{fill:#2f78d8}.point-avg{fill:#f7931e}
.chart-series-legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:5px 0 8px}
.chart-series-legend i{display:inline-block;width:27px;height:6px;margin-right:5px;vertical-align:middle;border-radius:0}
.chart-series-legend .schedule{background:#f21b1b}.chart-series-legend .work{background:#2f78d8}.chart-series-legend .avg{background:#f7931e}
.weekly-table-wrap{overflow-x:auto}.weekly-table{min-width:650px!important;font-size:9px!important}.weekly-table th,.weekly-table td{padding:6px 7px!important}.weekly-table th{font-size:9px!important;color:#2f5d86!important;text-transform:none!important;letter-spacing:0!important}
@media(max-width:900px){.dashboard-chart-panel{margin-left:18px!important;margin-right:18px!important}.dash-chart-head{flex-direction:column}.chart-controls{justify-content:flex-start}.flag-chart,.weekly-chart{min-width:860px}}
@media(max-width:700px){.dashboard-chart-panel{margin-left:14px!important;margin-right:14px!important;padding:10px!important}.dash-chart-head h2{font-size:10px!important}.chart-legend{gap:6px 9px}.chart-legend span{font-size:8px}.chart-controls select{min-width:90px}.flag-chart,.weekly-chart{min-width:780px}.weekly-table{min-width:620px!important}}

/* ===== FLOWWKRR REFERENCE DASHBOARD V4 ===== */
:root{--dash-bg:#eaf3f2;--dash-card:#f5fbfa;--dash-ink:#10202a;--dash-muted:#5b6f78;--dash-line:#c9dfdc;--dash-teal:#16c7a3;--dash-deep:#062d2b}
html[data-theme="dark"]{--dash-bg:#031c1d;--dash-card:#062d2b;--dash-ink:#f3fffd;--dash-muted:#91b5b0;--dash-line:#145b55}
body{background:var(--dash-bg)!important;color:var(--dash-ink)}
main{margin-left:210px!important;padding:0!important;min-height:100vh;background:var(--dash-bg)!important}
aside{width:210px!important;background:var(--dash-card)!important;border-right:1px solid var(--dash-line)!important}
.flow-brand{height:74px!important;padding:12px 18px!important;display:flex!important;align-items:center;gap:9px}.flow-brand b{font-size:25px!important;letter-spacing:-1.5px;color:var(--dash-ink)!important}.flow-brand small{display:block!important;color:#16c7a3!important;font-weight:800!important;font-size:8px!important;letter-spacing:2px!important;text-align:right}.flow-logo-mark{font-size:30px;color:#16c7a3}
header{height:58px!important;background:var(--dash-card)!important;border-bottom:1px solid var(--dash-line)!important;padding:0 22px!important}.header-search{display:flex;align-items:center;gap:10px;width:355px;height:34px;border:1px solid var(--dash-line);border-radius:9px;padding:0 12px;color:var(--dash-muted);font-size:12px}.header-search kbd{margin-left:auto;font-size:10px;color:var(--dash-muted)}.header-actions{margin-left:auto}.theme-toggle{border:1px solid var(--dash-line)!important;background:var(--dash-card)!important;color:var(--dash-ink)!important;border-radius:18px!important;padding:8px 13px!important}.userchip-link{color:var(--dash-ink)!important}
nav{padding:12px 9px!important}nav a{color:var(--dash-muted)!important;border-radius:11px!important;margin:3px 0!important;padding:11px 13px!important}nav a.active{background:#b8f5e8!important;color:#063d38!important;box-shadow:0 5px 18px rgba(22,199,163,.16)!important}nav a:hover{background:rgba(22,199,163,.1)!important;color:var(--dash-ink)!important}.sidefoot{border-top:1px solid var(--dash-line)!important}.sidefoot b{color:var(--dash-ink)!important}.sidefoot a{color:#e74b5b!important}
.dash-shell{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;max-width:1380px;margin:0 auto;padding:20px 18px 18px}.dash-main{min-width:0}.dash-hero{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 15px;position:relative}.dash-hero:before{content:"";position:absolute;right:3%;top:-8px;width:55%;height:100px;background:radial-gradient(ellipse at center,rgba(18,197,158,.28),transparent 65%);pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2px;color:#19d2ae;font-weight:900}.dash-hero h1{margin:3px 0 2px;font-size:27px;line-height:1.15;color:var(--dash-ink)!important}.dash-hero p{margin:0;color:var(--dash-muted);font-size:11px}.dash-hero-right{display:flex;align-items:center;gap:18px;z-index:1}.productive{border-left:2px solid #1bd5ae;padding-left:12px;font-size:10px}.productive span,.productive b{display:block}.productive span{color:var(--dash-muted)}.productive b{color:var(--dash-ink)}.datepill{background:transparent!important;border:1px solid #198c7d!important;color:var(--dash-ink)!important;border-radius:9px!important;padding:10px 14px!important}
.dash-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}.dash-kpi{min-height:72px;border:1px solid var(--dash-line);border-radius:12px;padding:12px 13px;display:flex;align-items:center;gap:10px;background:var(--dash-card);box-sizing:border-box}.dash-kpi b{display:block;font-size:23px;line-height:1}.dash-kpi span{display:block;font-size:10px;color:var(--dash-muted);margin-top:3px}.dash-kpi small{font-size:8px;color:var(--dash-muted)}.kpi-icon{width:39px;height:39px;border-radius:10px;display:grid;place-items:center;font-size:20px}.kpi-green{border-color:#128b76}.kpi-green .kpi-icon{background:#0f6e5f;color:#60efcf}.kpi-blue{border-color:#126c99}.kpi-blue .kpi-icon{background:#0c5077;color:#69c9ff}.kpi-yellow{border-color:#8b7a1a}.kpi-yellow .kpi-icon{background:#655b19;color:#ffe84f}.kpi-red{border-color:#933b49}.kpi-red .kpi-icon{background:#66313b;color:#ff8795}.kpi-rate{border-color:#128b76}.rate-ring{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#19d8a9 var(--rate,0%),rgba(100,150,145,.18) 0);position:relative}.rate-ring:after{content:"";position:absolute;inset:6px;background:var(--dash-card);border-radius:50%}.rate-ring span{position:relative;z-index:1;font-size:10px;font-weight:800}
.dash-panel{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:12px;box-sizing:border-box}.flag-panel{padding:13px 14px 8px;margin-bottom:12px}.dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--dash-line);padding-bottom:10px}.dash-panel h2{font-size:13px;margin:0;color:var(--dash-ink)!important}.flag-controls{display:flex;gap:7px}.flag-controls form{margin:0}.flag-controls select{height:29px;padding:0 9px;background:transparent;border:1px solid #17665f;border-radius:7px;color:var(--dash-ink);font-size:10px}.chart-legend{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 5px;justify-content:center}.chart-legend span{font-size:8px;color:var(--dash-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}.chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}.flag-chart-scroll,.weekly-chart-scroll{overflow-x:auto}.flag-chart,.weekly-chart{width:100%;min-width:760px;display:block}.chart-grid line{stroke:rgba(80,150,142,.22);stroke-width:1}.chart-grid text{fill:#6ea39d;font-size:9px}.xlab,.week-label{fill:#7ca8a4;font-size:7px}.dash-lower-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(160px,.65fr) minmax(160px,.65fr);gap:10px;align-items:start}.viz-panel{padding:13px}.viz-legend{margin-top:5px}.viz-legend i{width:10px;height:10px}.legend-schedule{background:#ff3947}.legend-work{background:#328cff}.legend-avg{background:#ff9f1c}.line-schedule{fill:none;stroke:#ff3947;stroke-width:2.2}.line-work{fill:none;stroke:#328cff;stroke-width:2.2}.line-avg{fill:none;stroke:#ff9f1c;stroke-width:2.2}.point-work{fill:#328cff}.week-table-wrap{overflow:auto;margin-top:5px}.week-table{width:100%;border-collapse:collapse;min-width:540px}.week-table th,.week-table td{padding:6px 7px;font-size:8px;border-bottom:1px solid var(--dash-line);text-align:left;color:var(--dash-ink)}.week-table th{background:rgba(20,100,90,.18);color:var(--dash-muted)}.dash-side-stack{display:grid;gap:10px}.mini-panel{padding:13px}.mini-row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--dash-line);font-size:9px}.mini-row:last-child{border-bottom:0}.mini-row span{color:var(--dash-muted)}.mini-row b{color:var(--dash-ink)}
.dash-right-rail{position:static!important;width:auto!important;background:transparent!important;border:0!important;display:flex!important;flex-direction:column;gap:10px;padding:0!important}.dash-profile-card{margin:0!important;padding:12px!important;text-align:center;background:var(--dash-card)!important;border:1px solid var(--dash-line)!important;border-radius:12px!important;box-sizing:border-box}.dash-profile-card>img,.dash-profile-card>.employee-avatar{width:66px;height:66px;border-radius:12px;object-fit:cover;margin:0 auto 7px;display:block}.employee-avatar{background:#126c61;color:#8ef7dc;display:grid!important;place-items:center;font-size:28px}.dash-profile-card strong{display:block;font-size:11px;color:var(--dash-ink)}.dash-profile-card>span{display:block;font-size:9px;color:var(--dash-muted);margin:3px 0 7px}.mini-btn{display:inline-block;border:1px solid #188d7e;border-radius:7px;padding:5px 14px;color:#16d5ae;font-size:9px;text-decoration:none}.profile-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px}.profile-mini-grid>div{border:1px solid var(--dash-line);border-radius:8px;padding:7px 2px;color:#17d2ac;font-size:12px}.profile-mini-grid small{display:block;color:var(--dash-muted);font-size:7px;line-height:1.3}.working-time-card{margin-top:7px;border:1px solid #198d7e;border-radius:8px;padding:7px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px;color:#17d2ac;font-size:8px;text-align:left}.working-time-card b{font-size:10px;color:var(--dash-ink)}.rail-panel{padding:12px!important}.workforce-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid var(--dash-line);font-size:9px}.workforce-row:last-child{border-bottom:0}.workforce-row span{color:var(--dash-muted)}.workforce-row b{color:var(--dash-ink)}.dot{width:9px;height:9px;border-radius:50%;display:block}.dot.present{background:#20d48e}.dot.late{background:#ffd83d}.dot.absent{background:#ff4658}.dot.leave{background:#32b7ed}.quick-panel a{display:block;text-decoration:none;color:var(--dash-ink);font-size:9px;border:1px solid #19776e;border-radius:7px;padding:8px 9px;margin-top:6px;background:rgba(20,120,108,.08)}.quick-panel a:hover{background:rgba(20,199,163,.18)}.site-credit{margin:10px 0 0!important;font-size:9px!important;color:var(--dash-muted)!important}.site-credit strong{color:var(--dash-muted)!important}
html[data-theme="light"] .dash-hero h1,html[data-theme="light"] .dash-panel h2,html[data-theme="light"] .dash-kpi b,html[data-theme="light"] .dash-profile-card strong,html[data-theme="light"] .working-time-card b,html[data-theme="light"] .mini-row b,html[data-theme="light"] .week-table td{color:#10202a!important}
@media(max-width:1050px){.dash-shell{grid-template-columns:minmax(0,1fr) 195px}.dash-kpis{grid-template-columns:repeat(3,1fr)}.dash-lower-grid{grid-template-columns:minmax(0,1fr) minmax(170px,.55fr) minmax(170px,.55fr)}}
@media(max-width:800px){main{margin-left:0!important}.dash-shell{display:block;padding:12px}.dash-right-rail{margin-top:12px}.dash-kpis{grid-template-columns:repeat(2,1fr)}.dash-lower-grid{grid-template-columns:1fr}.header-search{display:none}.dash-hero{align-items:flex-start;flex-direction:column}.dash-hero-right{width:100%;justify-content:space-between}.flag-controls{flex-wrap:wrap}.flag-controls select{max-width:170px}}
@media(max-width:700px){.dash-kpis{grid-template-columns:1fr}.dash-hero h1{font-size:23px}.dash-shell{padding-bottom:78px}.dash-right-rail{display:grid!important;grid-template-columns:1fr 1fr}.dash-profile-card{grid-column:1/-1}.rail-panel{min-width:0}aside{height:64px!important;width:100%!important}.flow-brand,.sidefoot{display:none!important}}

/* ===== Reference background + exact dashboard proportions ===== */
.dash-shell{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,rgba(3,30,31,.98),rgba(4,48,46,.96));border-radius:0;min-height:calc(100vh - 58px)}
.dash-shell:before{content:"";position:absolute;inset:0;background:url('assets/dashboard-bg.svg') center/cover no-repeat;opacity:.62;z-index:-2;pointer-events:none}.dash-shell:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,27,29,.82),rgba(2,36,35,.48) 55%,rgba(2,24,27,.35));z-index:-1;pointer-events:none}
html[data-theme="light"] .dash-shell{background:#eef7f5}html[data-theme="light"] .dash-shell:after{background:linear-gradient(90deg,rgba(240,250,248,.94),rgba(235,247,244,.82),rgba(239,249,247,.72))}html[data-theme="light"] .dash-shell:before{opacity:.28}
html[data-theme="light"] .dash-kpi,html[data-theme="light"] .dash-panel,html[data-theme="light"] .dash-profile-card{box-shadow:0 8px 22px rgba(12,75,68,.06)}
html[data-theme="dark"] .dash-kpi,html[data-theme="dark"] .dash-panel,html[data-theme="dark"] .dash-profile-card{box-shadow:0 10px 30px rgba(0,0,0,.18)}
@media(min-width:1200px){.dash-shell{grid-template-columns:minmax(0,1fr) 220px;max-width:none;padding:20px 20px 18px}.dash-main{min-width:0}.flag-panel{min-height:270px}.flag-chart{min-width:900px}.viz-panel{min-height:340px}}

/* ===== GLOBAL FLOWWKRR THEME V5: shared background + polished sidebar ===== */
html,body{min-height:100%;}
body{position:relative;background:var(--dash-bg)!important;}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:var(--dash-bg) url('assets/dashboard-bg.svg') center/cover no-repeat;pointer-events:none;}
body:after{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(135deg,rgba(239,249,247,.94),rgba(235,247,244,.82) 48%,rgba(228,243,240,.78));pointer-events:none;}
html[data-theme="dark"] body:after{background:linear-gradient(135deg,rgba(2,22,28,.95),rgba(3,35,34,.88) 48%,rgba(2,25,29,.82));}
main{background:transparent!important;}

/* Sidebar: wider, cleaner, and consistent on every page */
aside{width:220px!important;background:rgba(245,251,250,.88)!important;border-right:1px solid var(--dash-line)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
main{margin-left:220px!important;}
nav a{padding:11px 12px!important;min-height:40px!important;white-space:nowrap!important;}
nav a .nav-label{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;font-size:12px!important;}
.flow-brand{padding-left:18px!important;padding-right:14px!important;}
.sidefoot{padding-left:10px!important;padding-right:10px!important;}
html[data-theme="dark"] aside{background:rgba(4,40,39,.82)!important;}
html[data-theme="dark"] body:before{filter:saturate(1.08) brightness(.86);}

/* Non-dashboard pages get the same visual environment without changing their cards */
main>.topbar,main>.panel,main>.card,main>.grid2{position:relative;z-index:0;}
main>.topbar{background:transparent!important;}

/* Leave Management must never clip its navigation label */
nav a[href*="page=leaves"] .nav-label{min-width:max-content!important;}

@media(max-width:900px){
  aside{width:70px!important;}
  main{margin-left:70px!important;}
}
@media(max-width:700px){
  aside{width:100%!important;}
  main{margin-left:0!important;}
}

/* ===== FINAL GLOBAL PORTAL BACKGROUND / SIDEBAR / LOGIN FIX ===== */
html,body{min-height:100%}
body:not(.loginbody){
  background-color:var(--dash-bg)!important;
  background-image:url('assets/dashboard-bg.svg')!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
html[data-theme="light"] body:not(.loginbody){
  background-image:
    linear-gradient(rgba(239,248,246,.78),rgba(239,248,246,.78)),
    url('assets/dashboard-bg.svg')!important;
}
html[data-theme="dark"] body:not(.loginbody){
  background-image:
    linear-gradient(rgba(2,25,28,.48),rgba(2,25,28,.48)),
    url('assets/dashboard-bg.svg')!important;
}
body:not(.loginbody) > aside{
  width:220px!important;
  min-width:220px!important;
  background:rgba(4,34,37,.90)!important;
  border-right:1px solid rgba(48,135,125,.34)!important;
}
html[data-theme="light"] body:not(.loginbody) > aside{
  background:rgba(245,251,250,.94)!important;
  border-right:1px solid #c9dfdc!important;
}
body:not(.loginbody) > main{margin-left:220px!important;background:transparent!important}
body:not(.loginbody) > main > header{
  background:rgba(3,29,33,.72)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html[data-theme="light"] body:not(.loginbody) > main > header{
  background:rgba(255,255,255,.88)!important;
}
body:not(.loginbody) nav a .nav-label{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
body:not(.loginbody) nav a[href*="page=leaves"] .nav-label{
  min-width:115px!important;
  width:115px!important;
}
body:not(.loginbody) nav a[href*="page=leaves"]{
  overflow:visible!important;
}
body:not(.loginbody) .sidefoot{position:relative;z-index:2}
.site-credit{position:relative;z-index:2}

/* Login must retain the original photographic background */
body.loginbody{
  background:#e9eef3 url('assets/login-bg.png') center center/cover no-repeat fixed!important;
  min-height:100vh!important;
}
body.loginbody:before{
  background:rgba(235,242,248,.26)!important;
}
.loginbox .login-powered{
  margin:8px 0 0;
  color:#1f607f;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15px;
}
.loginbox .login-footer{margin-top:10px!important}
@media(max-width:900px){
  body:not(.loginbody) > aside{width:70px!important;min-width:70px!important}
  body:not(.loginbody) > main{margin-left:70px!important}
}
@media(max-width:700px){
  body:not(.loginbody) > aside{width:100%!important;min-width:0!important}
  body:not(.loginbody) > main{margin-left:0!important}
  body.loginbody{background-attachment:scroll!important}
}

/* FINAL LOGIN BACKGROUND FIX */
body.loginbody{
    background:#e9eef3 url('assets/login-bg.png') center center/cover no-repeat fixed !important;
}

body.loginbody:before{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

body.loginbody .loginbox{
    background:rgba(255,255,255,.88) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* ===== Profile page: modern employee-portal layout + larger readable typography ===== */
.profile-page{padding-bottom:28px}
.profile-topbar{padding:28px 36px 18px!important}
.profile-topbar h1{font-size:30px!important;font-weight:800!important}
.profile-topbar p{font-size:15px!important}
.profile-hero-card{margin:0 36px 14px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.profile-identity{display:flex;align-items:center;gap:20px;min-width:0}
.profile-photo-hero{width:104px!important;height:104px!important;flex:0 0 104px!important}
.profile-identity-text{min-width:0}
.profile-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.profile-name-row h2{margin:0;font-size:25px!important;line-height:1.2}
.profile-role-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 12px;background:#e6f7f3;color:#0f8b7c;font-size:12px;font-weight:800}
.profile-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;color:#65758a;font-size:14px}
.profile-photo-actions{display:grid;gap:8px;min-width:200px}
.profile-photo-actions button{font-size:13px;padding:11px 16px}
.profile-action-primary{background:#169a8d!important}
.profile-action-secondary{background:#fff!important;color:#168a81!important;border:1px solid #92cfc8!important}
.profile-columns{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;margin:0 36px 14px}
.profile-info-card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:17px 20px}
.profile-card-title{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.profile-card-title>span{font-size:21px;color:#129a8d;font-weight:800}
.profile-card-title h3{margin:0;font-size:16px!important;font-weight:800!important}
.profile-view-link{margin-left:auto;color:#6a7a8d;text-decoration:none;font-size:12px;font-weight:600}
.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}
.profile-fields label{display:flex;flex-direction:column;gap:6px;color:#607187;font-size:12px;font-weight:700}
.profile-fields input{height:40px;border:1px solid #dfe6ed;border-radius:8px;padding:9px 12px;background:#f7f9fb;color:#26364a;font:inherit;font-size:13px}
.profile-fields input:disabled{opacity:1;color:#52647a}
.profile-bottom-grid{display:grid;grid-template-columns:1.35fr 1fr 1.08fr;gap:14px;margin:0 36px 14px}
.profile-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.profile-stat-grid .stat{border-radius:8px;padding:10px 7px;text-align:center;display:grid;gap:3px}
.profile-stat-grid .stat b{font-size:15px}.profile-stat-grid .stat span{font-size:11px;font-weight:700}.profile-stat-grid .stat strong{font-size:20px}.stat.present{background:#eafaf5;color:#15906f}.stat.absent{background:#fff0f1;color:#e24d58}.stat.late{background:#fff8e8;color:#d49722}.stat.leave{background:#edf6fc;color:#3d80ae}
.profile-progress-label{display:flex;justify-content:space-between;margin-top:14px;font-size:12px;font-weight:700;color:#33465b}.profile-progress-label b{font-size:15px}.profile-progress{height:7px;background:#e6edf1;border-radius:99px;overflow:hidden;margin-top:6px}.profile-progress i{display:block;height:100%;background:#18a38e;border-radius:99px}
.leave-balance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.leave-stat{padding:13px 9px;text-align:center;border-radius:9px;background:#eefaf7}.leave-stat:nth-child(2){background:#eef7fd}.leave-stat:nth-child(3){background:#f5effc}.leave-stat span{display:block;font-size:11px;color:#65758a;font-weight:700}.leave-stat strong{display:block;margin-top:7px;font-size:20px;color:#198d7f}.leave-stat small{font-size:11px;font-weight:700}
.security-row{display:grid;grid-template-columns:1.05fr 1.2fr auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.security-row:last-child{border-bottom:0}.security-row>span{color:#607187}.security-row>b{font-size:12px;color:#617187;overflow:hidden;text-overflow:ellipsis}.security-row em{font-style:normal;font-size:10px;color:#36a779;background:#e8f8f1;padding:4px 7px;border-radius:999px;white-space:nowrap}.security-row button{font-size:11px;padding:7px 9px;background:#fff!important;color:#168a81!important;border:1px solid #92cfc8!important;white-space:nowrap}
.profile-save-row{margin:0 36px}.profile-save-row button{font-size:14px;padding:11px 20px}
html[data-theme="dark"] .profile-hero-card,html[data-theme="dark"] .profile-info-card{background:rgba(15,27,43,.94)!important;border-color:#2d4057!important}.profile-role-badge{background:#153d3a}.profile-meta{color:#aab8c9}.profile-fields label{color:#aab8c9}.profile-fields input{background:#111d2e;color:#e7edf7;border-color:#34455d}.profile-card-title{border-color:#2d4057}.profile-view-link{color:#aab8c9}.profile-progress-label{color:#c6d1df}.profile-progress{background:#23334a}.security-row{border-color:#2d4057}.security-row>span,.security-row>b{color:#aab8c9}.security-row em{background:#153d32;color:#73d7af}.security-row button{background:#142235!important;color:#7dd3c5!important;border-color:#3b7f77!important}
@media(max-width:1050px){.profile-bottom-grid{grid-template-columns:1fr 1fr}.security-card{grid-column:1/-1}}
@media(max-width:900px){.profile-topbar{padding:24px 18px 16px!important}.profile-hero-card,.profile-columns,.profile-bottom-grid,.profile-save-row{margin-left:18px;margin-right:18px}.profile-hero-card{align-items:flex-start;flex-direction:column}.profile-photo-actions{width:100%;grid-template-columns:1fr 1fr}.profile-columns{grid-template-columns:1fr}.profile-bottom-grid{grid-template-columns:1fr}.security-card{grid-column:auto}}
@media(max-width:600px){.profile-name-row h2{font-size:21px!important}.profile-meta{font-size:12px;gap:9px}.profile-fields{grid-template-columns:1fr}.profile-stat-grid{grid-template-columns:repeat(2,1fr)}.leave-balance-grid{grid-template-columns:1fr}.profile-photo-actions{grid-template-columns:1fr}.profile-hero-card{padding:16px}.profile-info-card{padding:15px}.security-row{grid-template-columns:1fr 1fr}.security-row em,.security-row button{grid-column:2}.profile-topbar h1{font-size:26px!important}}


/* ===== Final fixes: dark profile stats, leave assignment, PDF layout/branding ===== */
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat span,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat strong,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat b{color:#f4f7fb!important;opacity:1!important;text-shadow:none!important}
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.present span,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.present strong{color:#b7f7e3!important}
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.absent span,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.absent strong{color:#ff8b95!important}
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.late span,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.late strong{color:#ffd77a!important}
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.leave span,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat.leave strong{color:#8fc9f0!important}
.leave-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.assign-leave-btn{background:#7c3aed!important;color:#fff!important}.leave-topbar .leave-actions button{margin-top:4px}.assign-leave-panel{border-color:#8b5cf6!important}
.print-report .actions{display:flex!important;grid-template-columns:none!important;gap:10px;align-items:center;flex-wrap:nowrap}.print-report .actions a,.print-report .actions button{white-space:nowrap}
.pdf-branding{display:none}
@media print{.pdf-branding{display:flex!important;align-items:flex-end;justify-content:space-between;gap:15px;margin:0 0 10px;padding:0 0 8px;border-bottom:2px solid #0f766e;color:#17324d}.pdf-branding strong{font-size:20px!important;color:#0f766e!important}.pdf-branding span{font-size:10px!important;color:#64748b!important}}

/* V8 final fixes */
.header-search{display:flex!important;align-items:center;gap:8px;background:var(--panel,#fff);border:1px solid var(--line,#e7ebf2);border-radius:10px;padding:6px 10px;margin-right:18px;min-width:300px}
.header-search input{border:0!important;outline:0!important;background:transparent!important;padding:4px 5px!important;min-width:210px;color:inherit!important}
.header-search .search-icon{font-size:18px;line-height:1}
.header-search kbd{font-size:10px;opacity:.65;white-space:nowrap}
html[data-theme="dark"] .header-search{background:#111b2e!important;border-color:#34455f!important;color:#e7edf7}
html[data-theme="dark"] .header-search input{color:#e7edf7!important}
.profile-edit-note{margin-left:auto;color:#4caea0;font-size:11px;font-weight:600}
.profile-info-card .profile-fields label{font-size:13px}
.profile-info-card .profile-fields input,.profile-info-card .profile-fields select{font-size:14px;min-height:40px}
html[data-theme="dark"] .profile-card-title h3{color:#f4f7fb!important}
html[data-theme="dark"] .attendance-overview-card .profile-card-title>span{color:#42d7c4!important;font-size:18px!important}
html[data-theme="dark"] .attendance-overview-card .profile-card-title h3{color:#f7fbff!important}
html[data-theme="dark"] .attendance-overview-card .profile-view-link{color:#b9c6d8!important}
html[data-theme="dark"] .attendance-overview-card .profile-progress-label span{color:#d4deea!important}
html[data-theme="dark"] .attendance-overview-card .profile-progress-label b{color:#ffffff!important}
html[data-theme="dark"] .attendance-overview-card .profile-progress{background:#25364e!important}
.verify-email-btn{padding:7px 10px!important;font-size:11px!important;background:#0d9488!important;color:#fff!important}
.allocation-panel{border:1px solid #2d6f69!important}
.allocation-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.allocation-tabs .alloc-tab{background:#183044;color:#dbeafe;border:1px solid #35506a}
.allocation-tabs .alloc-tab.active{background:#0f7f76;color:#fff;border-color:#31b8a9}
.alloc-pane{padding:4px 0}
.alloc-pane h3{margin:0 0 6px}
.allocation-type-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:15px}
.allocation-type-list>div{padding:10px;border:1px solid var(--line);border-radius:9px;display:flex;justify-content:space-between;gap:10px}
.allocation-type-list span{color:var(--muted);font-size:12px}
@media(max-width:900px){.header-search{min-width:0;flex:1;margin-right:8px}.header-search input{min-width:0;width:100%}.allocation-type-list{grid-template-columns:1fr}}
/* Login background: keep the source image clear, with no washout overlay/blur */
body.loginbody:before{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.loginbody{background:#e9eef3 url('assets/login-bg.png') center center/cover no-repeat fixed!important}
body.loginbody .loginbox{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.90)!important}

/* ===== Dashboard readability & calculation display fixes ===== */
.dash-shell{font-size:13px}
.dash-hero h1{font-size:30px!important}
.dash-hero p{font-size:12px!important}
.dash-panel h2{font-size:15px!important}
.dash-kpi{min-height:82px!important;padding:14px 15px!important}
.dash-kpi b{font-size:25px!important}
.dash-kpi span{font-size:11px!important}
.dash-kpi small{font-size:9px!important}
.kpi-icon{width:42px!important;height:42px!important;font-size:21px!important}
.chart-legend span{font-size:9px!important}
.chart-legend i{width:10px!important;height:10px!important}
.mini-row{font-size:10px!important;padding:9px 0!important}
.mini-row b{font-size:12px!important}
.workforce-row{font-size:10px!important;padding:9px 0!important}
.workforce-row b{font-size:12px!important}
.working-time-card{font-size:10px!important;padding:9px 10px!important}
.working-time-card b{font-size:12px!important}
.quick-panel a{font-size:10px!important;padding:9px 10px!important}
.week-table th,.week-table td{font-size:9px!important}
html[data-theme="dark"] .dash-kpi b,
html[data-theme="dark"] .dash-panel h2,
html[data-theme="dark"] .dash-profile-card strong,
html[data-theme="dark"] .working-time-card b,
html[data-theme="dark"] .mini-row b,
html[data-theme="dark"] .workforce-row b,
html[data-theme="dark"] .week-table td{color:#f4f8ff!important;opacity:1!important}
html[data-theme="dark"] .dash-kpi span,
html[data-theme="dark"] .dash-kpi small,
html[data-theme="dark"] .mini-row span,
html[data-theme="dark"] .workforce-row span,
html[data-theme="dark"] .working-time-card span{color:#c4d0df!important;opacity:1!important}
@media(max-width:700px){.dash-hero h1{font-size:25px!important}.dash-kpi b{font-size:23px!important}}

/* ===== V9 PROFILE TEXT + ADAPTIVE PORTAL THEME ===== */
/* Profile cards: keep the small statistic tiles readable in dark mode. */
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat span,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat strong,
html[data-theme="dark"] .attendance-overview-card .profile-stat-grid .stat b,
html[data-theme="dark"] .leave-balance-card .leave-stat,
html[data-theme="dark"] .leave-balance-card .leave-stat span,
html[data-theme="dark"] .leave-balance-card .leave-stat strong,
html[data-theme="dark"] .leave-balance-card .leave-stat small{
  color:#000000!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* The background image controls the portal's accent/contrast variables. */
body:not(.loginbody){
  --auto-ink:#10202a;
  --auto-muted:#5b6f78;
  --auto-line:rgba(16,32,42,.16);
  --auto-accent:#16a085;
  --auto-card:rgba(255,255,255,.86);
  --auto-card-strong:rgba(255,255,255,.94);
  --auto-overlay:rgba(255,255,255,.10);
}
body:not(.loginbody) .dash-kpi,
body:not(.loginbody) .dash-panel,
body:not(.loginbody) .dash-profile-card,
body:not(.loginbody) .profile-info-card,
body:not(.loginbody) .profile-hero-card{
  border-color:var(--auto-line)!important;
}
body:not(.loginbody) .dash-kpi,
body:not(.loginbody) .dash-panel,
body:not(.loginbody) .dash-profile-card{
  background:var(--auto-card)!important;
}
body:not(.loginbody) .dash-hero h1,
body:not(.loginbody) .dash-panel h2,
body:not(.loginbody) .dash-profile-card strong{
  color:var(--auto-ink)!important;
}
body:not(.loginbody) .dash-hero p,
body:not(.loginbody) .dash-kpi span,
body:not(.loginbody) .dash-kpi small,
body:not(.loginbody) .mini-row span,
body:not(.loginbody) .workforce-row span,
body:not(.loginbody) .working-time-card span{
  color:var(--auto-muted)!important;
}
body:not(.loginbody) .datepill{
  border-color:var(--auto-accent)!important;
}
body:not(.loginbody) .dash-shell:after{
  background:linear-gradient(135deg,var(--auto-overlay),rgba(255,255,255,0))!important;
}

/* Adaptive tone: automatically switch portal chrome/text when a new background is uploaded. */
html[data-bg-tone="light"] body:not(.loginbody){color:var(--auto-ink)!important;}
html[data-bg-tone="light"] body:not(.loginbody) aside,
html[data-bg-tone="light"] body:not(.loginbody) header{
  background:rgba(255,255,255,.84)!important;
  color:var(--auto-ink)!important;
  border-color:var(--auto-line)!important;
}
html[data-bg-tone="light"] body:not(.loginbody) nav a{color:var(--auto-muted)!important;}
html[data-bg-tone="light"] body:not(.loginbody) nav a.active{background:rgba(255,255,255,.72)!important;color:var(--auto-accent)!important;}

html[data-bg-tone="dark"] body:not(.loginbody){color:#f7fbff!important;}
html[data-bg-tone="dark"] body:not(.loginbody) aside,
html[data-bg-tone="dark"] body:not(.loginbody) header{
  background:rgba(4,24,30,.82)!important;
  color:#f7fbff!important;
  border-color:rgba(255,255,255,.16)!important;
}
html[data-bg-tone="dark"] body:not(.loginbody) .dash-kpi,
html[data-bg-tone="dark"] body:not(.loginbody) .dash-panel,
html[data-bg-tone="dark"] body:not(.loginbody) .dash-profile-card{
  background:rgba(4,35,36,.80)!important;
  border-color:rgba(255,255,255,.16)!important;
}
html[data-bg-tone="dark"] body:not(.loginbody) .dash-hero h1,
html[data-bg-tone="dark"] body:not(.loginbody) .dash-panel h2,
html[data-bg-tone="dark"] body:not(.loginbody) .dash-profile-card strong{color:#f7fbff!important;}
html[data-bg-tone="dark"] body:not(.loginbody) .dash-hero p,
html[data-bg-tone="dark"] body:not(.loginbody) .dash-kpi span,
html[data-bg-tone="dark"] body:not(.loginbody) .dash-kpi small,
html[data-bg-tone="dark"] body:not(.loginbody) .mini-row span,
html[data-bg-tone="dark"] body:not(.loginbody) .workforce-row span,
html[data-bg-tone="dark"] body:not(.loginbody) .working-time-card span{color:#c7d8df!important;}
html[data-bg-tone="dark"] body:not(.loginbody) nav a{color:#c7d8df!important;}
html[data-bg-tone="dark"] body:not(.loginbody) nav a.active{background:rgba(22,199,163,.20)!important;color:#9ff7e2!important;}


/* Let the actual uploaded portal background drive the final visual tone. */
body:not(.loginbody):before{background:none!important;filter:none!important;}
body:not(.loginbody):after{background:transparent!important;}
html[data-bg-tone="light"] body:not(.loginbody){
  background-image:url('assets/dashboard-bg.svg')!important;
}
html[data-bg-tone="dark"] body:not(.loginbody){
  background-image:url('assets/dashboard-bg.svg')!important;
}


/* ===== Final theme precedence fix =====
   Light/Dark mode must control text contrast; background sampling only supplies
   accent/visual tuning. This prevents a light portal from inheriting white text
   just because the uploaded background image is dark. */
html[data-theme="light"] body:not(.loginbody){
  color:#10202a!important;
  --dash-ink:#10202a!important;
  --dash-muted:#526873!important;
  --dash-line:rgba(16,32,42,.16)!important;
  --auto-ink:#10202a!important;
  --auto-muted:#526873!important;
  --auto-line:rgba(16,32,42,.16)!important;
}
html[data-theme="light"] body:not(.loginbody) aside,
html[data-theme="light"] body:not(.loginbody) header{
  color:#10202a!important;
}
html[data-theme="light"] body:not(.loginbody) .flow-brand b,
html[data-theme="light"] body:not(.loginbody) .userchip-link,
html[data-theme="light"] body:not(.loginbody) .dash-hero h1,
html[data-theme="light"] body:not(.loginbody) .dash-panel h2,
html[data-theme="light"] body:not(.loginbody) .dash-profile-card strong,
html[data-theme="light"] body:not(.loginbody) .dash-kpi b,
html[data-theme="light"] body:not(.loginbody) .working-time-card b,
html[data-theme="light"] body:not(.loginbody) .mini-row b,
html[data-theme="light"] body:not(.loginbody) .workforce-row b,
html[data-theme="light"] body:not(.loginbody) .week-table td,
html[data-theme="light"] body:not(.loginbody) .profile-card-title h3,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat,
html[data-theme="light"] body:not(.loginbody) .leave-stat strong{
  color:#10202a!important;
  opacity:1!important;
}
html[data-theme="light"] body:not(.loginbody) .dash-hero p,
html[data-theme="light"] body:not(.loginbody) .dash-kpi span,
html[data-theme="light"] body:not(.loginbody) .dash-kpi small,
html[data-theme="light"] body:not(.loginbody) .mini-row span,
html[data-theme="light"] body:not(.loginbody) .workforce-row span,
html[data-theme="light"] body:not(.loginbody) .working-time-card span,
html[data-theme="light"] body:not(.loginbody) .profile-meta,
html[data-theme="light"] body:not(.loginbody) .profile-fields label,
html[data-theme="light"] body:not(.loginbody) .profile-view-link,
html[data-theme="light"] body:not(.loginbody) .profile-progress-label,
html[data-theme="light"] body:not(.loginbody) .leave-stat span{
  color:#526873!important;
  opacity:1!important;
}
html[data-theme="light"] body:not(.loginbody) .chart-legend span,
html[data-theme="light"] body:not(.loginbody) .chart-grid text,
html[data-theme="light"] body:not(.loginbody) .xlab,
html[data-theme="light"] body:not(.loginbody) .week-label,
html[data-theme="light"] body:not(.loginbody) .week-table th{
  color:#526873!important;
  fill:#526873!important;
}
html[data-theme="light"] body:not(.loginbody) nav a{color:#526873!important;}
html[data-theme="light"] body:not(.loginbody) nav a.active{color:#0d6659!important;}
html[data-theme="light"] body:not(.loginbody) .site-credit{color:#526873!important;}
html[data-theme="light"] body:not(.loginbody) .attendance-overview-card .profile-stat-grid .stat span,
html[data-theme="light"] body:not(.loginbody) .attendance-overview-card .profile-stat-grid .stat strong,
html[data-theme="light"] body:not(.loginbody) .attendance-overview-card .profile-stat-grid .stat b,
html[data-theme="light"] body:not(.loginbody) .leave-balance-card .leave-stat span,
html[data-theme="light"] body:not(.loginbody) .leave-balance-card .leave-stat strong,
html[data-theme="light"] body:not(.loginbody) .leave-balance-card .leave-stat small{
  color:#10202a!important;
  opacity:1!important;
}
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.present span,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.present strong{color:#116d57!important;}
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.absent span,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.absent strong{color:#b83340!important;}
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.late span,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.late strong{color:#9a6800!important;}
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.leave span,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat.leave strong{color:#28698e!important;}

/* ===== FINAL LIGHT MODE READABILITY FIX ===== */
html[data-theme="light"] body:not(.loginbody),
html[data-theme="light"] body:not(.loginbody) main{
  color:#10202a!important;
  background-color:#eaf5f3!important;
}

/* Light Mode must use light surfaces even when the selected background image is dark. */
html[data-theme="light"] body:not(.loginbody) .dash-shell{
  background:rgba(239,248,246,.94)!important;
}
html[data-theme="light"] body:not(.loginbody) .dash-shell:before{
  opacity:.18!important;
}
html[data-theme="light"] body:not(.loginbody) .dash-shell:after{
  background:rgba(255,255,255,.18)!important;
}

html[data-theme="light"] body:not(.loginbody) .dash-kpi,
html[data-theme="light"] body:not(.loginbody) .dash-panel,
html[data-theme="light"] body:not(.loginbody) .dash-profile-card,
html[data-theme="light"] body:not(.loginbody) .rail-panel,
html[data-theme="light"] body:not(.loginbody) .profile-info-card,
html[data-theme="light"] body:not(.loginbody) .profile-hero-card,
html[data-theme="light"] body:not(.loginbody) .attendance-overview-card,
html[data-theme="light"] body:not(.loginbody) .leave-balance-card{
  background:rgba(255,255,255,.94)!important;
  color:#10202a!important;
  border-color:rgba(16,32,42,.16)!important;
  box-shadow:0 8px 24px rgba(16,32,42,.08)!important;
}

/* Primary and secondary dashboard text. */
html[data-theme="light"] body:not(.loginbody) .dash-kpi b,
html[data-theme="light"] body:not(.loginbody) .dash-kpi span,
html[data-theme="light"] body:not(.loginbody) .dash-kpi small,
html[data-theme="light"] body:not(.loginbody) .dash-panel h2,
html[data-theme="light"] body:not(.loginbody) .dash-profile-card strong,
html[data-theme="light"] body:not(.loginbody) .working-time-card b,
html[data-theme="light"] body:not(.loginbody) .mini-row b,
html[data-theme="light"] body:not(.loginbody) .workforce-row b,
html[data-theme="light"] body:not(.loginbody) .week-table td,
html[data-theme="light"] body:not(.loginbody) .week-table th,
html[data-theme="light"] body:not(.loginbody) .profile-card-title h3,
html[data-theme="light"] body:not(.loginbody) .leave-stat strong,
html[data-theme="light"] body:not(.loginbody) .leave-stat span,
html[data-theme="light"] body:not(.loginbody) .leave-stat small{
  color:#10202a!important;
  opacity:1!important;
  text-shadow:none!important;
}

html[data-theme="light"] body:not(.loginbody) .dash-kpi span,
html[data-theme="light"] body:not(.loginbody) .dash-kpi small,
html[data-theme="light"] body:not(.loginbody) .dash-hero p,
html[data-theme="light"] body:not(.loginbody) .mini-row span,
html[data-theme="light"] body:not(.loginbody) .workforce-row span,
html[data-theme="light"] body:not(.loginbody) .working-time-card span,
html[data-theme="light"] body:not(.loginbody) .profile-meta,
html[data-theme="light"] body:not(.loginbody) .profile-view-link{
  color:#405763!important;
  opacity:1!important;
}

html[data-theme="light"] body:not(.loginbody) .dash-hero h1,
html[data-theme="light"] body:not(.loginbody) .dash-panel h2,
html[data-theme="light"] body:not(.loginbody) .dash-profile-card strong,
html[data-theme="light"] body:not(.loginbody) .flow-brand b,
html[data-theme="light"] body:not(.loginbody) .userchip-link,
html[data-theme="light"] body:not(.loginbody) .sidefoot b{
  color:#10202a!important;
}

/* Sidebar/header in Light Mode. */
html[data-theme="light"] body:not(.loginbody) aside,
html[data-theme="light"] body:not(.loginbody) header{
  background:rgba(255,255,255,.94)!important;
  color:#10202a!important;
  border-color:rgba(16,32,42,.14)!important;
}
html[data-theme="light"] body:not(.loginbody) nav a{
  color:#405763!important;
}
html[data-theme="light"] body:not(.loginbody) nav a.active{
  background:rgba(22,160,133,.14)!important;
  color:#075e55!important;
}
html[data-theme="light"] body:not(.loginbody) .sidefoot small{
  color:#526873!important;
}

/* Workforce / quick-action text. */
html[data-theme="light"] body:not(.loginbody) .workforce-row,
html[data-theme="light"] body:not(.loginbody) .quick-action,
html[data-theme="light"] body:not(.loginbody) .rail-panel *{
  text-shadow:none!important;
}
html[data-theme="light"] body:not(.loginbody) .workforce-row b,
html[data-theme="light"] body:not(.loginbody) .workforce-row span,
html[data-theme="light"] body:not(.loginbody) .quick-action,
html[data-theme="light"] body:not(.loginbody) .quick-action *{
  color:#10202a!important;
}

/* Chart labels/grid. */
html[data-theme="light"] body:not(.loginbody) .chart-legend span,
html[data-theme="light"] body:not(.loginbody) .chart-grid text,
html[data-theme="light"] body:not(.loginbody) .xlab,
html[data-theme="light"] body:not(.loginbody) .week-label{
  color:#405763!important;
  fill:#405763!important;
}

/* Profile statistic tiles remain dark-text on their light tiles. */
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat span,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat strong,
html[data-theme="light"] body:not(.loginbody) .profile-stat-grid .stat b,
html[data-theme="light"] body:not(.loginbody) .leave-stat,
html[data-theme="light"] body:not(.loginbody) .leave-stat span,
html[data-theme="light"] body:not(.loginbody) .leave-stat strong,
html[data-theme="light"] body:not(.loginbody) .leave-stat small{
  color:#10202a!important;
  opacity:1!important;
}


/* ===== FLOWWKRR FINAL MOBILE NAVIGATION / RESPONSIVE OVERRIDE ===== */
@media (max-width:700px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body:not(.loginbody){padding-bottom:74px!important}

  body:not(.loginbody)>aside{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:70px!important;
    min-height:70px!important;
    padding:5px 7px!important;
    margin:0!important;
    display:block!important;
    z-index:9999!important;
    border-right:0!important;
    border-top:1px solid var(--dash-line,#1d6f68)!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.14)!important;
    overflow:hidden!important;
  }
  body:not(.loginbody)>aside .brand,
  body:not(.loginbody)>aside .sidefoot{display:none!important}
  body:not(.loginbody)>aside nav{
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  body:not(.loginbody)>aside nav::-webkit-scrollbar{display:none!important}
  body:not(.loginbody)>aside nav a,
  body:not(.loginbody)>aside nav a:not(.active){
    flex:0 0 76px!important;
    width:76px!important;
    min-width:76px!important;
    height:59px!important;
    min-height:59px!important;
    padding:6px 3px!important;
    margin:0!important;
    border-radius:10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    font-size:10px!important;
    line-height:12px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  body:not(.loginbody)>aside nav a .nav-icon{
    width:auto!important;
    height:18px!important;
    font-size:16px!important;
    line-height:18px!important;
  }
  body:not(.loginbody)>aside nav a .nav-label{
    width:100%!important;
    max-width:74px!important;
    font-size:10px!important;
    line-height:12px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
  }

  main{margin-left:0!important;width:100%!important;min-width:0!important;padding-bottom:0!important}
  header{
    height:58px!important;
    min-height:58px!important;
    padding:0 12px!important;
    justify-content:flex-start!important;
    gap:8px!important;
    position:relative!important;
    z-index:20!important;
  }
  .mobilebrand{
    display:block!important;
    margin-right:auto!important;
    font-size:20px!important;
    font-weight:800!important;
    color:var(--dash-ink,var(--ink,#18212f))!important;
    letter-spacing:-.4px!important;
  }
  .header-search{display:none!important}
  .header-actions{margin-left:auto!important;gap:6px!important;min-width:0!important}
  .theme-toggle{padding:7px 10px!important;font-size:12px!important;white-space:nowrap!important}
  .theme-toggle span{display:none!important}
  .userchip-link{
    max-width:40px!important;
    width:40px!important;
    min-width:40px!important;
    overflow:hidden!important;
    font-size:0!important;
    padding:0!important;
    gap:0!important;
  }
  .userchip-link .user-avatar,.userchip-link>span{
    width:36px!important;height:36px!important;min-width:36px!important;
    font-size:14px!important;
  }
  .userchip-link em{display:none!important}

  .dash-shell{padding:12px 10px 10px!important;width:100%!important;max-width:none!important}
  .dash-hero{padding:12px 2px 14px!important}
  .dash-hero h1{font-size:24px!important;line-height:1.18!important}
  .dash-hero p{font-size:11px!important}
  .dash-hero-right{gap:8px!important;flex-wrap:wrap!important}
  .datepill{font-size:11px!important;padding:9px 11px!important}
  .dash-kpis{grid-template-columns:1fr!important;gap:10px!important}
  .dash-kpi{min-height:92px!important;padding:15px!important}
  .dash-kpi b{font-size:27px!important}
  .dash-kpi span{font-size:13px!important}
  .dash-kpi small{font-size:10px!important}
  .kpi-icon{width:48px!important;height:48px!important;font-size:22px!important}
  .flag-panel,.dashboard-chart-panel{margin-left:0!important;margin-right:0!important;padding:12px!important}
  .dash-panel h2{font-size:15px!important}
  .chart-legend{justify-content:flex-start!important;gap:7px 10px!important}
  .chart-legend span{font-size:9px!important}
  .flag-chart-scroll,.weekly-chart-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .flag-chart{min-width:760px!important}
  .weekly-chart{min-width:760px!important}
  .dash-lower-grid{grid-template-columns:1fr!important;gap:10px!important}
  .dash-right-rail{grid-template-columns:1fr!important;gap:10px!important}
  .dash-profile-card{grid-column:auto!important}
  .week-table-wrap,.tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  table{min-width:680px!important}
  .panel{margin-left:10px!important;margin-right:10px!important}
  .hero,.topbar{padding:18px 12px!important;gap:12px!important}
  .formgrid{grid-template-columns:1fr!important}
  .filters{flex-wrap:wrap!important}
  .filters>*{min-width:0!important;max-width:100%!important}
  .users-role-tabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;white-space:nowrap!important}
}

@media (max-width:390px){
  header{padding:0 9px!important}
  .mobilebrand{font-size:18px!important}
  .theme-toggle{padding:6px 8px!important}
  .userchip-link,.userchip-link .user-avatar,.userchip-link>span{width:34px!important;min-width:34px!important;height:34px!important}
  .dash-shell{padding-left:8px!important;padding-right:8px!important}
  .dash-hero h1{font-size:21px!important}
  .dash-kpi{min-height:86px!important}
  body:not(.loginbody)>aside nav a,
  body:not(.loginbody)>aside nav a:not(.active){flex-basis:72px!important;width:72px!important;min-width:72px!important}
}

@media (max-width:340px){
  .dash-hero h1{font-size:19px!important}
  .dash-kpi b{font-size:24px!important}
  .dash-kpi span{font-size:12px!important}
  .dash-kpi small{font-size:9px!important}
  body:not(.loginbody)>aside nav a,
  body:not(.loginbody)>aside nav a:not(.active){flex-basis:68px!important;width:68px!important;min-width:68px!important}
}