:root{
  --bg:#0b0e14;
  --surface:#111827;
  --surface2:#0f172a;
  --border:rgba(255,255,255,.10);
  --grid:rgba(0,0,0,.55);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#60a5fa;
  --accentText:#071018;
  --danger:#fb7185;
  --ok:#34d399;
  --warn:#fbbf24;
}


html[data-mode="light"]{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface2:#ffffff;
  --border:rgba(15,23,42,.12);
  --grid:#000000;
  --text:#0f172a;
  --muted:#475569;
}
html[data-mode="light"] .topbar{background:rgba(255,255,255,.9)}
html[data-mode="light"] .card{background:rgba(255,255,255,.92)}
html[data-mode="light"] .sidebar{background:rgba(255,255,255,.98)}
html[data-mode="light"] .menu{background:rgba(255,255,255,.98)}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
a{color:inherit; text-decoration:none}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.muted{color:var(--muted)}
.shell{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:8px 12px;
  background:rgba(15,23,42,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--grid);
}
.icon-btn{
  height:40px; width:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.icon-btn:active{transform:scale(.98)}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-mark{
  width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(96,165,250,.15);
  border:1px solid rgba(96,165,250,.35);
  color:var(--accent);
  flex:0 0 auto;
  font-weight:700;
}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-title{font-weight:700; line-height:1.1}
.brand-sub{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.top-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.select{display:flex; align-items:center; gap:8px}
.select .label{color:var(--muted); font-size:12px}
select{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
}
.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:10px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:600;
}
.btn-ghost{background:transparent}
.btn-primary{
  background:rgba(96,165,250,.9);
  border:1px solid rgba(96,165,250,.9);
  color:#0b1020;
}
.btn-full{width:100%}
.content{
  flex:1 1 auto;
  padding:14px;
}
.footer{
  padding:8px 14px;
  border-top:1px solid var(--border);
  background:rgba(15,23,42,.65);
}
.page{max-width:1200px; margin:0 auto}
.page-title{font-size:18px; font-weight:800; margin:6px 0 12px}
.page-sub{color:var(--muted); font-size:13px; margin-top:2px}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.card{
  background:rgba(17,24,39,.85);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.card + .card{margin-top:12px}
.card-title{font-weight:800; margin-bottom:6px}
.card-sub{color:var(--muted); font-size:13px; margin-bottom:10px}
.hero{padding:18px}
.alert{
  background: rgba(251,113,133,.12);
  border: 1px solid rgba(251,113,133,.35);
  color: #fecdd3;
  padding:8px 12px;
  border-radius:12px;
  margin:10px 0;
}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.field label{color:var(--muted); font-size:12px}
.field input{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:8px;
}

.kpi-row{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; margin-bottom:12px}
.kpi-k{color:var(--muted); font-size:12px}
.kpi-v{font-size:18px; font-weight:900; margin-top:4px}
.kpi-sub{color:var(--muted); font-size:12px; margin-top:2px}

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px}


.page-dashboard .grid-2{padding-top:14px; align-items:stretch;}
.page-dashboard .grid-2 .card{height:100%; display:flex; flex-direction:column;}
.page-dashboard .grid-2 .table-wrap{flex:1; overflow:auto;}

.table-wrap{overflow:auto; border-radius:12px}


.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th,.tbl td{
  padding:8px 10px;
  border:1px solid var(--grid);
  vertical-align:middle;
}

html[data-mode="light"] .tbl th, html[data-mode="light"] .tbl td{background:var(--surface)}
.tbl thead th{position:sticky; top:0; z-index:30; background:var(--surface)}
html[data-mode="light"] .tbl thead th{background:var(--surface)}
.tbl thead th{border-top:1px solid var(--grid);}


.table-wrap.kind-attendance .tbl thead tr:nth-child(1) th{top:0;}
.table-wrap.kind-attendance .tbl thead tr:nth-child(2) th{top:34px;}
.tbl th:first-child,.tbl td:first-child{border-left:1px solid var(--grid)}
.tbl .sticky-first{position:sticky; left:0; z-index:20; background:var(--surface)}
html[data-mode="light"] .tbl .sticky-col{background:var(--surface)}
.tbl thead .sticky-col{z-index:50}


html[data-mode="dark"] .table-wrap.kind-attendance .tbl td.sticky-col,
html[data-mode="dark"] .table-wrap.kind-attendance .tbl th.sticky-col{
  background: var(--surface) !important;
}
html[data-mode="dark"] .table-wrap.kind-attendance .tbl td.sticky-col{
  box-shadow: 8px 0 0 rgba(0,0,0,0.25);
}


.col-userid{display:none}
body.show-userid .col-userid{display:table-cell}


.tbl td.dur-ok, .tbl td.dur-good{background:#cfead6 !important; color:#000 !important}
.tbl td.dur-low, .tbl td.dur-bad1{background:#ffd6d6 !important; color:#000 !important}
.tbl td.dur-bad2{background:#ffbcbc !important; color:#000 !important; font-weight:600}
.tbl td.dur-bad3{background:#ff9e9e !important; color:#000 !important; font-weight:700}
.tbl td.dist-mid{background:#ffe3c0 !important; color:#000 !important}
.tbl td.dist-mid2{background:#ffd6a8 !important; color:#000 !important}
.tbl td.dist-high{background:#ffcab0 !important; color:#000 !important; font-weight:600}
.tbl td.dist-veryhigh{background:#ffbfa8 !important; color:#000 !important; font-weight:700}

.tbl td.status-present{background:#cfead6 !important; color:#000 !important}
.tbl td.status-absent{background:#f7c3cc !important; color:#000 !important}
.tbl td.status-weeklyoff{background:#f6e6b0 !important; color:#000 !important}
.tbl td.status-leave{background:#d8d0f6 !important; color:#000 !important}
.tbl td.status-spa{background:#ffd6a8 !important; color:#000 !important}
.tbl td.status-nci{background:#fff3a6 !important; color:#000 !important}
.tbl td.status-presentwo{background:#ffd1a3 !important; color:#000 !important}
.tbl td.status-na{background:transparent !important; color:var(--text) !important}
.tbl td.status-mixed{background:#cfead6 !important; color:#000 !important}


.tbl thead th{color:var(--text)}
html[data-mode="light"] .tbl thead th{color:#0f172a}
.rpt-table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; table-layout:auto}
.rpt-table th,.rpt-table td{border:1px solid var(--grid); padding:8px 10px}

.rpt-table thead th{position:sticky; top:0; z-index:30; background:var(--surface)}
.rpt-table th:first-child,.rpt-table td:first-child{border-left:1px solid var(--grid)}
.rpt-table tr:last-child td{border-bottom:1px solid var(--border)}
.rpt-table.compact th,.rpt-table.compact td{padding:7px 9px}

.sticky-left{position:sticky; left:0; z-index:20; background:var(--surface) !important}
thead .sticky-left{z-index:40}

.st-present{background:rgba(52,211,153,.18) !important}
.st-absent{background:rgba(251,113,133,.18) !important}
.st-weekly{background:rgba(251,191,36,.14) !important}
.st-spa{background:rgba(251,113,133,.12) !important}
.st-nci{background:rgba(147,197,253,.12) !important}
.st-leave{background:rgba(167,139,250,.12) !important}


.dropdown{position:relative}
.menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:260px;
  background:rgba(17,24,39,.98);
  border:1px solid var(--border);
  border-radius:14px;
  padding:8px;
  z-index:60;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.menu-wide{width:320px}
.menu-item{display:flex; gap:10px; align-items:center; padding:8px; border-radius:10px; cursor:pointer}
.menu-item:hover{background:rgba(255,255,255,.06)}
.menu-scroll{max-height:240px; overflow:auto; padding-right:6px}
.menu-sep{height:1px; background:var(--border); margin:8px 0}


.sidebar{
  position:fixed;
  top:0; left:0;
  height:100%;
  width:320px;
  max-width:84vw;
  background:rgba(10,12,18,.98);
  border-right:1px solid var(--grid);
  transform: translateX(-102%);
  transition: transform .18s ease;
  z-index:80;
  display:flex; flex-direction:column;
}
.sidebar.open{transform: translateX(0)}
.sidebar-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index:79;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.sidebar-overlay.open{opacity:1; pointer-events:auto}
.sb-head{display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border)}
.sb-title{font-weight:900}
.sb-nav{padding:8px; display:flex; flex-direction:column; gap:6px}
.sb-item{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--text);
}
.sb-item:hover{background:rgba(255,255,255,.06)}
.sb-item.active{
  border-color: rgba(96,165,250,.45);
  background: rgba(96,165,250,.12);
}
.sb-foot{margin-top:auto; padding:12px; border-top:1px solid var(--border)}
.chip{padding:8px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--muted); font-size:12px}


@media (max-width: 980px){
  .kpi-row{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid-2{grid-template-columns: 1fr}
  .content{padding:12px}
  .brand-sub{display:none}
}



.grid-23{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:stretch;}
@media (max-width: 900px){.grid-23{grid-template-columns:1fr;}}


.grid-23 .card{height:380px;}



.grid-23 .card, .grid-2 .card{display:flex;flex-direction:column;}
.grid-23 .chart-box, .grid-2 .chart-box{flex:1;}


.kpi-row .card + .card,
.grid-23 .card + .card,
.grid-2 .card + .card{margin-top:0;}


.chart-box{height:260px;position:relative;}
.grid-23 .chart-box{height:320px;}
.chart-box canvas{display:block; width:100%;}

.table-wrap{overflow:auto;max-width:100%;border-radius:14px;background:rgba(255,255,255,0.03);}
.table-wrap .tbl{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%;}
.table-wrap .tbl th,.table-wrap .tbl td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.06);white-space:nowrap;color:var(--text);}
.table-wrap .tbl th{background:rgba(255,255,255,0.92);color:#000;font-weight:700;}
.table-wrap .tbl thead th{position:sticky;top:0;z-index:4;}
.table-wrap.sticky-first .tbl .sticky-col{position:sticky;left:0;z-index:5;background:var(--surface);color:var(--text);}
.table-wrap.sticky-first .tbl thead .sticky-col{z-index:6;}

.col-userid{display:none;}
body.show-userid .col-userid{display:table-cell;}

:root{
  --status-present:#cfead6;
  --status-absent:#f6c1c8;
  --status-weeklyoff:#f4e3a8;
  --status-leave:#d8d1f0;
  --status-spa:#f8d6a8;
  --status-nci:#f6f2a2;
  --status-na:#e5e7eb;
}
.tbl td.status-present{background:var(--status-present);color:#000}
.tbl td.status-absent{background:var(--status-absent);color:#000}
.tbl td.status-weeklyoff{background:var(--status-weeklyoff);color:#000}
.tbl td.status-leave{background:var(--status-leave);color:#000}
.tbl td.status-spa{background:var(--status-spa);color:#000}
.tbl td.status-nci{background:var(--status-nci);color:#000}
.tbl td.status-na{background:var(--status-na);color:#000}

.chk-inline{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;user-select:none}
.chk-inline input{accent-color:var(--accent)}

html[data-mode="dark"] .rpt-table thead th{background:rgba(15,23,42,.95) !important; color:#e5e7eb}


.badge-muted{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(0,0,0,.25);color:rgba(0,0,0,.7);background:rgba(0,0,0,.04)}
[data-mode="dark"] .badge-muted{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75);background:rgba(255,255,255,.06)}


.tbl th, .tbl td, .rpt-table th, .rpt-table td{border-color: rgba(0,0,0,.35) !important;}
[data-mode="dark"] .tbl th, [data-mode="dark"] .tbl td, [data-mode="dark"] .rpt-table th, [data-mode="dark"] .rpt-table td{border-color: rgba(255,255,255,.18) !important;}


.page .kpi-row{margin-bottom:14px;}
.page > .grid-23, .page > .grid-2{margin-top:14px;}
html[data-mode="dark"] .table-wrap.kind-attendance{
  background: var(--surface2) !important;  
}

html[data-mode="dark"] .table-wrap.kind-attendance .tbl{
  border-collapse: collapse !important;     
}

html[data-mode="dark"] .table-wrap.kind-attendance .tbl th.sticky-col,
html[data-mode="dark"] .table-wrap.kind-attendance .tbl td.sticky-col{
  background: var(--surface) !important;    
  border-right: 1px solid rgba(255,255,255,0.10) !important; 
}