/* Rekonstruksi aturan yang hilang dari file sumber (CSS tidak terpakai saat snapshot). Warna & gaya asli tidak diubah. */
.sidebar{transition:transform .2s ease}
@media (max-width:980px){
  .sidebar.open{transform:translateX(0)!important;z-index:200}
  .bottom-nav.sf-hidden{display:flex!important}
  .topbar-brand.sf-hidden{display:flex!important}
  .bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--text-dim);text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit}
  .bottom-nav a.active{color:var(--primary)}
  .bottom-nav svg{width:21px;height:21px}
}
.user-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13.5px}
.user-menu a:hover{background:var(--hover-overlay)}
.user-menu a.um-danger{color:var(--danger)}
.topbar-brand .tb-name{font-weight:800;color:var(--brand);letter-spacing:.04em;font-size:15px}
.topbar-brand .tb-sub{font-size:11px;color:var(--text-dim)}
.topbar-user{cursor:pointer;position:relative}
.sidebar-overlay{display:none}.sidebar-overlay.show{display:block}
.bulk-bar.show{display:flex!important}
/* Tema terang (rekonstruksi; sumber hanya menyimpan tema gelap) */
html[data-theme=light]{--bg:#f3f6fc;--bg-soft:#eaf0fa;--surface:#ffffff;--surface-2:#f1f5fc;--border:rgba(30,50,100,.16);--border-soft:rgba(30,50,100,.10);--text:#0f1a33;--text-dim:#52607e;--text-faint:#8592ad;--primary-soft:rgba(47,107,255,.10);--shadow:0 20px 50px rgba(20,40,90,.15);--card-shadow:0 8px 24px rgba(20,40,90,.08);--hover-overlay:rgba(0,0,0,.035);--topbar-bg:rgba(243,246,252,.85);--sidebar-bg:#ffffff;--scrollbar-thumb:#c3cde2}
html[data-theme=light] .theme-toggle .knob{transform:translateX(24px)}
.flash-ok,.flash-err{padding:12px 16px;margin-bottom:14px}

.kd-trend.up{color:#22d39a}.kd-trend.down{color:#ef4444}

.att-hadir{background:rgba(34,197,94,.35);color:#16a34a;font-weight:700;text-align:center}.att-telat{background:rgba(245,158,11,.35);color:#b45309;font-weight:700;text-align:center}

.cst-d-up{color:#16a34a}.cst-d-down{color:#dc2626}


/* FULL FIX v1.2.0 — responsive layout, navigation and accessible themes */
.side-group-toggle{min-height:42px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto}
.side-group-toggle:focus-visible,.side-link:focus-visible,.topbar-user:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.side-group.open>.side-subnav{max-height:1800px;overflow:visible;visibility:visible}
.side-subnav{transition:max-height .22s ease;will-change:max-height}
.sidebar{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.user-menu{display:block;min-width:210px;max-width:min(280px,calc(100vw - 24px));z-index:1500}
.user-menu.sf-hidden{display:none!important}
.main,.main-inner,.card,.page-head,.form-group{min-width:0;max-width:100%}
.page-title,.page-subtitle,.card-title,.side-link,.side-group-toggle,label,small,.badge{overflow-wrap:anywhere;word-break:normal}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
img,canvas,svg{max-width:100%}
textarea,select,input{max-width:100%;min-width:0}
button,a,.side-group-toggle{-webkit-tap-highlight-color:transparent}
@media(max-width:980px){
 .sidebar{z-index:1400}.sidebar-overlay{z-index:1390}
 .main{padding-left:12px!important;padding-right:12px!important}
 .topbar{gap:7px}.topbar-brand{max-width:calc(100vw - 150px)}
 .topbar-brand .tb-name{font-size:clamp(11px,3vw,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .topbar-brand .tb-sub{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .topbar-user{padding:2px}.topbar-user .avatar{width:34px;height:34px}
 .page-head{align-items:flex-start;flex-wrap:wrap}.page-title{white-space:normal;font-size:clamp(17px,4.5vw,21px);line-height:1.3}
 .card{padding:14px!important}.card-title{align-items:flex-start;line-height:1.35}
 .form-group{width:100%;margin-bottom:12px}.form-group label{display:block;line-height:1.45}
 .btn{white-space:normal;max-width:100%;line-height:1.35}
 .bottom-nav{z-index:1300}
}
@media(max-width:560px){
 body{font-size:13px}.main{padding-left:10px!important;padding-right:10px!important}
 .dash-color-grid,.stats-grid,.grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .card-title .flex,.card-title .flex.gap-8{display:flex!important;flex-wrap:wrap;width:100%}
 .card-title .btn{flex:1 1 auto}
 .table-wrap table{min-width:620px}
 .csa-btn{right:12px!important}
}
@media(max-width:360px){.topbar-brand .tb-sub{display:none}.dash-color-grid,.stats-grid{grid-template-columns:1fr!important}.bottom-nav a,.bottom-nav button{font-size:9px}}
/* Light theme: blue navigation rail, soft blue work surface and readable contrast */
html[data-theme=light]{--bg:#eef3fb;--bg-soft:#e7eef9;--surface:#fff;--surface-2:#f3f7ff;--text:#14213d;--text-dim:#465875;--text-faint:#657895;--primary:#245bd8;--primary-dark:#1949b5;--primary-soft:rgba(36,91,216,.12);--sidebar-bg:#e7effb;--topbar-bg:rgba(238,243,251,.94);--border:rgba(39,75,130,.20);--border-soft:rgba(39,75,130,.13);--hover-overlay:rgba(36,91,216,.07);--scrollbar-thumb:#b8c8e2}
html[data-theme=light] .side-link{color:#405473}
html[data-theme=light] .side-link.active{color:#fff;background:linear-gradient(100deg,#245bd8,#3978e8);box-shadow:0 5px 14px rgba(36,91,216,.2)}
html[data-theme=light] .side-group-toggle{color:#344967}
html[data-theme=light] .side-group.has-active>.side-group-toggle{color:#173f91}
html[data-theme=light] .side-subnav .side-link.active{color:#1748a6;background:rgba(36,91,216,.13);box-shadow:none}
html[data-theme=light] .topbar{border-bottom-color:rgba(39,75,130,.16)}
html[data-theme=light] .btn-outline{color:#233957}
html[data-theme=dark] input,html[data-theme=dark] textarea,html[data-theme=dark] select{color:var(--text)}
html[data-theme=dark] .side-subnav .side-link.active{color:#dbeafe;background:rgba(59,130,246,.22)}