:root{--primary:#4f46e5;--primary-dark:#3730a3;--bg:#f5f7fb;--text:#182033;--muted:#718096;--border:#e8ebf2;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.app-shell{display:flex;min-height:100vh}.sidebar{width:255px;background:#101426;color:#fff;padding:24px 16px;position:fixed;inset:0 auto 0 0;z-index:1040;overflow:auto}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px}.brand-mark,.brand-login>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#4f46e5);font-weight:800}.brand strong,.brand small{display:block}.brand small{color:#9ca3af}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;color:#c8cedd;text-decoration:none;border-radius:12px;margin:3px 0}.sidebar nav a:hover{background:#20263c;color:#fff}.sidebar svg{width:18px}.nav-label{font-size:11px;letter-spacing:.12em;color:#6f7890;margin:24px 14px 8px}.main{margin-left:255px;width:calc(100% - 255px)}.topbar{height:84px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:1020}.page-title h1{font-size:22px;margin:0}.page-title p{margin:3px 0 0;color:var(--muted);font-size:13px}.user-menu{border:0;background:transparent;display:flex;align-items:center;gap:10px}.user-menu>span{width:40px;height:40px;border-radius:12px;background:#ecebff;color:var(--primary);display:grid;place-items:center;font-weight:800}.user-menu div{text-align:left}.user-menu strong,.user-menu small{display:block}.user-menu small{color:var(--muted)}.content{padding:28px}.panel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 10px 30px rgba(31,41,55,.04)}.panel-card.narrow{max-width:900px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.panel-head h3{margin:0;font-size:18px}.panel-head p{margin:5px 0 0;color:var(--muted)}.btn-primary{background:var(--primary);border-color:var(--primary);border-radius:11px}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.form-control,.form-select{border-radius:11px;border-color:#dfe3eb;min-height:44px}.form-control:focus,.form-select:focus{border-color:#a5b4fc;box-shadow:0 0 0 .25rem rgba(79,70,229,.12)}label{font-size:13px;font-weight:600;margin-bottom:7px}.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#778096;border-bottom-color:var(--border)}.table td{border-bottom-color:#eef0f4}.empty-state{text-align:center;padding:40px!important;color:var(--muted)}.hero-dashboard{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:white;border-radius:24px;padding:30px;display:flex;justify-content:space-between;align-items:center}.hero-dashboard h2{font-size:34px;margin:7px 0}.hero-dashboard p{margin:0;color:#ddd6fe}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700}.hero-date{width:110px;height:110px;border-radius:24px;background:rgba(255,255,255,.14);display:grid;place-items:center;align-content:center}.hero-date strong{font-size:40px;line-height:1}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;display:flex;align-items:center;gap:15px}.stat-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5}.stat-icon.success{background:#ecfdf5;color:#059669}.stat-icon.warning{background:#fffbeb;color:#d97706}.stat-icon.danger{background:#fef2f2;color:#dc2626}.stat-icon.info{background:#eff6ff;color:#2563eb}.stat-card small,.stat-card strong{display:block}.stat-card small{color:var(--muted)}.stat-card strong{font-size:26px;margin-top:3px}.chart-wrap{height:310px}.badge-soft{background:#eef2ff;color:#4f46e5;border-radius:999px;padding:7px 12px;font-size:12px}.quick-card>a{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}.quick-card>a>svg:first-child{padding:9px;width:38px;height:38px;border-radius:11px;background:#f1f5f9}.quick-card>a>span{flex:1}.quick-card small,.quick-card strong{display:block}.quick-card small{color:var(--muted)}.filter-row{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.filter-row>div{min-width:190px;flex:1}.attendance-toolbar,.member-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.attendance-list{display:grid;gap:10px}.attendance-card{display:grid;grid-template-columns:42px minmax(180px,1fr) 170px 140px minmax(180px,1fr);gap:12px;align-items:center;border:1px solid var(--border);border-radius:15px;padding:12px}.student-no{width:34px;height:34px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;font-weight:700}.student-info strong,.student-info small{display:block}.student-info small{color:var(--muted)}.sticky-save{position:sticky;bottom:15px;display:flex;justify-content:flex-end;margin-top:18px}.member-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.member-item{display:flex;align-items:center;gap:12px;border:1px solid var(--border);padding:13px;border-radius:14px;cursor:pointer}.member-item input{display:none}.member-item>i{margin-left:auto;opacity:0}.member-item:has(input:checked){border-color:#a5b4fc;background:#f5f3ff}.member-item:has(input:checked)>i{opacity:1;color:var(--primary)}.avatar-mini{width:38px;height:38px;border-radius:11px;background:#eef2ff;color:var(--primary);display:grid;place-items:center;font-weight:700}.member-item strong,.member-item small{display:block}.member-item small{color:var(--muted)}.login-page{background:#eef1f8}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}.login-visual{position:relative;padding:70px;color:white;background:radial-gradient(circle at 20% 20%,#8b5cf6 0,#4f46e5 40%,#24216b 100%);display:flex;justify-content:center;flex-direction:column;overflow:hidden}.login-visual:after{content:'';position:absolute;width:440px;height:440px;border:1px solid rgba(255,255,255,.15);border-radius:50%;right:-120px;bottom:-130px}.login-visual h1{font-size:54px;line-height:1.08;margin:20px 0}.login-visual h1 span{color:#c4b5fd}.login-visual>p{max-width:580px;color:#ddd6fe;font-size:17px}.visual-badge{font-size:12px;letter-spacing:.16em}.visual-points{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px}.visual-points span{display:flex;align-items:center;gap:8px}.floating-card{position:absolute;background:rgba(255,255,255,.95);color:#1f2937;padding:14px 16px;border-radius:16px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.2)}.floating-card strong,.floating-card small{display:block}.floating-card small{color:var(--muted)}.fc-one{right:45px;top:100px}.fc-two{right:80px;bottom:100px}.login-form-area{display:grid;place-items:center;padding:40px}.login-card-modern{width:min(430px,100%);background:#fff;border-radius:26px;padding:36px;box-shadow:0 25px 60px rgba(31,41,55,.12)}.brand-login{display:flex;gap:12px;align-items:center}.brand-login strong,.brand-login small{display:block}.brand-login small{color:var(--muted)}.login-copy{margin:35px 0 24px}.login-copy h2{font-size:28px}.login-copy p{color:var(--muted)}.password-wrap{position:relative}.password-wrap button{position:absolute;right:12px;top:17px;border:0;background:transparent;z-index:5}.btn-login{width:100%;border:0;border-radius:13px;background:var(--primary);color:#fff;padding:14px 18px;display:flex;justify-content:center;gap:10px;align-items:center;font-weight:700}.login-demo{margin-top:22px;padding:13px;border-radius:13px;background:#f8fafc;display:grid;gap:4px}.login-demo small{color:var(--muted)}.login-foot{text-align:center;color:var(--muted);font-size:12px;margin:26px 0 0}.btn-icon{border:0;background:#f1f5f9;border-radius:10px;width:42px;height:42px}.modal-content{border:0;border-radius:20px}.modal-header,.modal-footer{border-color:var(--border)}@media(max-width:991px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.show{transform:none}.main{margin-left:0;width:100%}.stats-grid{grid-template-columns:repeat(2,1fr)}.login-shell{grid-template-columns:1fr}.login-visual{display:none}.attendance-card{grid-template-columns:42px 1fr}.attendance-card .form-select,.attendance-card .form-control{grid-column:2}.member-grid{grid-template-columns:1fr}}@media(max-width:600px){.content{padding:16px}.topbar{padding:0 16px}.user-menu div{display:none}.stats-grid{grid-template-columns:1fr}.hero-dashboard{padding:22px}.hero-date{display:none}.panel-card{padding:16px}}

button svg,a svg,.modal-title svg,.modal-header h5 svg{width:18px;height:18px;vertical-align:-3px;margin-right:6px}.brand-mark svg{margin:0;width:24px;height:24px}.dropdown-item svg{width:16px;height:16px}.is-invalid~.invalid-feedback{display:block}
.attendance-summary{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:10px}.summary-chip{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}.summary-chip strong,.summary-chip span{display:block}.summary-chip strong{font-size:22px}.summary-chip span{font-size:12px;color:var(--muted)}.attendance-card-v2{border:1px solid var(--border);border-radius:18px;padding:16px;display:grid;grid-template-columns:42px minmax(170px,1fr) 2fr;gap:14px;align-items:start;background:#fff}.student-index{width:34px;height:34px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;font-weight:700}.student-main strong,.student-main small{display:block}.student-main small{color:var(--muted)}.status-pills{display:flex;gap:7px;flex-wrap:wrap}.status-pill{border:1px solid #dfe3eb;background:#fff;border-radius:999px;padding:7px 11px;font-size:12px}.status-pill.active{color:#fff;border-color:transparent}.status-hadir.active{background:#16a34a}.status-terlambat.active{background:#d97706}.status-sakit.active{background:#2563eb}.status-izin.active{background:#7c3aed}.status-alpa.active{background:#dc2626}.status-dispensasi.active{background:#0891b2}.status-pulang_awal.active{background:#475569}.attendance-fields{grid-column:2/4;display:grid;grid-template-columns:140px 140px 1fr;gap:10px;align-items:end}.attendance-notes{grid-column:2/4}.attendance-fields label{font-size:11px}.late-info{align-self:center;color:#d97706;font-size:12px}.history-item{border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px}.history-item strong,.history-item small{display:block}.history-item small{color:var(--muted)}.history-item p{margin:8px 0 0}.statusKunci svg{width:14px}@media(max-width:1100px){.attendance-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.attendance-card-v2{grid-template-columns:36px 1fr}.status-pills,.attendance-fields,.attendance-notes{grid-column:1/3}.attendance-fields{grid-template-columns:1fr 1fr}.attendance-summary{grid-template-columns:repeat(2,1fr)}}

/* Modal anggota rombel interaktif */
.member-modal-toolbar{display:flex;gap:14px;justify-content:space-between;align-items:center;margin-bottom:16px}.member-modal-toolbar .input-group{max-width:520px}.member-mode-actions{display:flex;gap:8px}.member-transfer-grid{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:12px;align-items:stretch}.member-column{border:1px solid var(--border);border-radius:18px;background:#f8fafc;overflow:hidden;min-height:460px}.member-column-selected{background:#f7f7ff;border-color:#d9d7ff}.member-column-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border);background:#fff}.member-column-head strong,.member-column-head small{display:block}.member-column-head small{color:var(--muted);font-size:12px;margin-top:2px}.member-dropzone{height:390px;overflow:auto;padding:12px;transition:.18s}.member-dropzone.drag-over{background:#e9e8ff;box-shadow:inset 0 0 0 2px var(--primary)}.member-transfer-hint{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#94a3b8;gap:4px}.member-transfer-hint svg{width:22px}.member-transfer-hint small{font-size:10px;text-align:center}.student-transfer-card{display:flex;align-items:center;gap:10px;padding:11px;background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:9px;cursor:grab;transition:.16s;box-shadow:0 2px 8px rgba(31,41,55,.03)}.student-transfer-card:hover{transform:translateY(-1px);border-color:#c7d2fe;box-shadow:0 8px 20px rgba(31,41,55,.07)}.student-transfer-card.dragging{opacity:.45}.drag-handle{color:#a0aec0;display:grid;place-items:center}.drag-handle svg{width:16px}.student-transfer-info{min-width:0;flex:1}.student-transfer-info strong,.student-transfer-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-transfer-info strong{font-size:13px}.student-transfer-info small{font-size:11px;color:var(--muted)}.btn-transfer{width:32px;height:32px;border:0;border-radius:9px;background:#eef2ff;color:var(--primary);display:grid;place-items:center;flex:0 0 auto}.btn-transfer:hover{background:var(--primary);color:#fff}.btn-transfer svg{width:15px;margin:0}.transfer-empty,.transfer-loading{height:100%;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#94a3b8;gap:8px;text-align:center}.transfer-empty svg{width:30px;height:30px}.member-empty-note{display:flex;align-items:center;gap:8px;margin-top:13px;color:var(--muted);font-size:12px}.member-empty-note svg{width:15px}.badge-soft svg{width:14px;margin-right:4px}@media(max-width:900px){.member-modal-toolbar{align-items:stretch;flex-direction:column}.member-modal-toolbar .input-group{max-width:none}.member-transfer-grid{grid-template-columns:1fr}.member-transfer-hint{display:none}.member-column{min-height:330px}.member-dropzone{height:280px}}@media(max-width:600px){.member-mode-actions{display:grid;grid-template-columns:1fr 1fr}.student-transfer-card{padding:10px}.member-column-head{padding:13px}}

/* Card list horizontal + pagination */
.list-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0 18px;border-top:1px solid var(--border)}
.list-search{position:relative;flex:1;max-width:520px}.list-search>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;color:#94a3b8;z-index:2}.list-search .form-control{padding-left:44px;background:#f8fafc}
.list-limit{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;white-space:nowrap}.list-limit label{margin:0;font-weight:500}.list-limit .form-select{width:82px;min-height:40px;padding-top:7px;padding-bottom:7px}
.modern-list{display:grid;gap:11px;min-height:90px}.horizontal-card{display:grid;grid-template-columns:46px minmax(190px,1.45fr) minmax(125px,.8fr) minmax(145px,1fr) auto;gap:16px;align-items:center;border:1px solid var(--border);border-radius:17px;padding:14px 15px;background:#fff;transition:.18s;box-shadow:0 2px 8px rgba(31,41,55,.025)}.horizontal-card:hover{border-color:#c7d2fe;box-shadow:0 10px 26px rgba(31,41,55,.07);transform:translateY(-1px)}
.card-avatar{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#eef2ff,#ede9fe);color:var(--primary);font-weight:800}.card-avatar.icon-avatar svg{margin:0;width:20px;height:20px}.card-main{min-width:0}.card-main strong,.card-main span{display:block}.card-main strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-main span{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{min-width:0}.card-meta .meta-label{display:block;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:700;margin-bottom:4px}.card-meta>span:last-child{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta-wide{min-width:180px}
.list-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.list-actions .list-actions{display:contents}.list-actions .btn{display:inline-flex;align-items:center;gap:5px;border-radius:10px}.list-actions .btn svg{width:14px;height:14px;margin:0}
.status-dot{display:inline-flex!important;align-items:center;gap:7px!important}.status-dot:before{content:'';width:8px;height:8px;border-radius:50%;background:#94a3b8}.status-dot.success:before{background:#22c55e;box-shadow:0 0 0 4px #dcfce7}.status-dot.muted:before{background:#94a3b8;box-shadow:0 0 0 4px #f1f5f9}
.list-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding-top:17px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}.pagination-modern{display:flex;gap:6px;align-items:center}.page-btn{border:1px solid var(--border);background:#fff;min-width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#64748b;font-size:12px}.page-btn:hover:not(:disabled){border-color:#a5b4fc;color:var(--primary);background:#f5f3ff}.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.page-btn:disabled{opacity:.45;cursor:not-allowed}.page-btn svg{width:15px;height:15px;margin:0}
.list-empty{min-height:190px;border:1px dashed #dbe1eb;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#94a3b8;gap:7px;background:#fafbfc}.list-empty svg{width:34px;height:34px}.list-empty strong{color:#64748b}.list-empty span{font-size:12px}
.report-card{grid-template-columns:46px minmax(160px,1fr) 3fr 120px}.report-metrics{display:grid;grid-template-columns:repeat(7,minmax(46px,1fr));gap:7px}.report-metrics span{background:#f8fafc;border:1px solid #eef1f5;border-radius:11px;padding:7px;text-align:center}.report-metrics b,.report-metrics small{display:block}.report-metrics b{font-size:14px}.report-metrics small{font-size:9px;color:var(--muted);white-space:nowrap}.attendance-percent{text-align:right}.attendance-percent strong,.attendance-percent span,.attendance-percent small{display:block}.attendance-percent strong{font-size:21px;color:var(--primary)}.attendance-percent span{font-size:11px;font-weight:700}.attendance-percent small{font-size:9px;color:var(--muted);margin-top:2px}
@media(max-width:1050px){.horizontal-card{grid-template-columns:46px minmax(170px,1.5fr) 1fr auto}.horizontal-card .card-meta:nth-of-type(2){display:none}.report-card{grid-template-columns:46px 1fr 2.5fr 100px}.report-metrics{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.list-toolbar{align-items:stretch;flex-direction:column}.list-search{max-width:none}.list-limit{justify-content:space-between}.horizontal-card{grid-template-columns:42px 1fr auto;gap:10px;padding:13px}.horizontal-card .card-meta{grid-column:2/4;display:block!important;border-top:1px solid #f0f2f6;padding-top:9px}.horizontal-card .list-actions{grid-column:1/4;justify-content:stretch}.horizontal-card .list-actions>.btn,.horizontal-card>.list-actions>.list-actions>.btn{flex:1;justify-content:center}.list-footer{align-items:flex-start;flex-direction:column}.pagination-modern{width:100%;justify-content:flex-end;overflow:auto}.report-card{grid-template-columns:42px 1fr}.report-card .report-metrics{grid-column:1/3;grid-template-columns:repeat(4,1fr)}.report-card .attendance-percent{grid-column:1/3;text-align:left;display:flex;align-items:center;gap:8px}.report-card .list-actions{grid-column:1/3}}
@media(max-width:480px){.panel-head{align-items:flex-start;flex-direction:column}.panel-head>.d-flex{width:100%}.panel-head>.d-flex .btn{flex:1}.list-actions .btn span{display:inline}.report-metrics{grid-template-columns:repeat(3,1fr)!important}}


/* Penyempurnaan khusus daftar rombel */
.rombel-card{
    grid-template-columns:48px minmax(240px,1.55fr) minmax(135px,.72fr) minmax(210px,1fr) minmax(105px,.55fr) auto;
    min-height:86px;
    padding:16px 18px;
    gap:18px;
}
.rombel-card .card-main strong{font-size:15px;color:#172033}
.rombel-card .card-main span{max-width:420px;line-height:1.45}
.rombel-card .card-meta{padding-left:2px}
.rombel-card .badge-soft{display:inline-flex!important;align-items:center;gap:5px;width:max-content;padding:7px 10px;border-radius:999px;background:#eef2ff;color:var(--primary);font-weight:600;overflow:visible!important}
.rombel-card .list-actions{flex-wrap:nowrap;justify-self:end}
.rombel-card .list-actions>.btn{white-space:nowrap;min-height:36px;padding:7px 10px}
.rombel-card .btn-anggota{background:linear-gradient(135deg,var(--primary),#6658e8);border-color:transparent;box-shadow:0 6px 14px rgba(79,70,229,.18)}
.rombel-card .btn-anggota:hover{transform:translateY(-1px);box-shadow:0 9px 18px rgba(79,70,229,.25)}
.rombel-card .card-avatar{width:44px;height:44px}

@media(max-width:1250px){
    .rombel-card{grid-template-columns:46px minmax(210px,1.45fr) minmax(125px,.7fr) minmax(185px,1fr) auto}
    .rombel-card .card-meta:nth-of-type(3){display:none}
}
@media(max-width:980px){
    .rombel-card{grid-template-columns:44px minmax(190px,1fr) minmax(180px,1fr) auto}
    .rombel-card .card-meta:nth-of-type(1){display:none}
    .rombel-card .card-meta:nth-of-type(2){display:block}
}
@media(max-width:760px){
    .rombel-card{grid-template-columns:42px 1fr;gap:10px;padding:14px}
    .rombel-card .card-main{padding-right:4px}
    .rombel-card .card-meta{grid-column:1/3!important;display:grid!important;grid-template-columns:120px 1fr;align-items:center;border-top:1px solid #f0f2f6;padding:9px 0 0}
    .rombel-card .card-meta .meta-label{margin:0}
    .rombel-card .card-meta>span:last-child{white-space:normal;text-align:right}
    .rombel-card .list-actions{grid-column:1/3;display:grid;grid-template-columns:1.25fr 1fr 1fr;width:100%;gap:8px;margin-top:2px}
    .rombel-card .list-actions>.btn,.rombel-card .list-actions .list-actions>.btn{width:100%;justify-content:center;margin:0}
}
@media(max-width:480px){
    .rombel-card .card-meta{grid-template-columns:1fr;gap:4px}
    .rombel-card .card-meta>span:last-child{text-align:left}
    .rombel-card .list-actions{grid-template-columns:1fr 1fr}
    .rombel-card .btn-anggota{grid-column:1/3}
}

/* Absensi harian compact */
.attendance-list{display:grid;gap:9px}
.attendance-card-compact{display:grid;grid-template-columns:38px minmax(170px,1fr) minmax(470px,2.8fr) minmax(275px,1.15fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:15px;background:#fff;transition:.16s}
.attendance-card-compact:hover{border-color:#cbd5e1;box-shadow:0 6px 18px rgba(31,41,55,.045)}
.attendance-card-compact .student-index{width:34px;height:34px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;font-size:12px;font-weight:800;color:#334155}
.attendance-card-compact .student-main{min-width:0}.attendance-card-compact .student-main strong,.attendance-card-compact .student-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attendance-card-compact .student-main strong{font-size:13px}.attendance-card-compact .student-main small{font-size:11px;color:var(--muted);margin-top:2px}
.status-pills.compact{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow-x:auto;padding:2px 0;scrollbar-width:none}.status-pills.compact::-webkit-scrollbar{display:none}.status-pills.compact .status-pill{flex:0 0 auto;padding:6px 9px;border-radius:999px;font-size:10px;line-height:1.1;min-height:29px}
.attendance-time-compact{display:grid;grid-template-columns:94px 94px auto;align-items:end;gap:7px}.attendance-time-compact label{margin:0}.attendance-time-compact label>span{display:block;font-size:9px;color:#64748b;margin:0 0 3px 2px}.attendance-time-compact .form-control{min-height:34px;height:34px;padding:5px 8px;font-size:12px;border-radius:9px}.late-badge{align-self:center;margin-top:14px;padding:5px 7px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:9px;font-weight:700;white-space:nowrap}.late-badge.is-late{background:#fff7ed;color:#ea580c}
.btn-detail-absensi{display:inline-flex;align-items:center;gap:4px;border-radius:9px;white-space:nowrap;padding:6px 8px}.btn-detail-absensi svg{width:14px;height:14px;margin:0}.btn-detail-absensi.has-detail{color:var(--primary);background:#eef2ff}
.attendance-detail-panel{display:none;grid-column:2/-1;padding:9px 0 1px;border-top:1px dashed #e2e8f0}.attendance-card-compact.detail-open .attendance-detail-panel{display:block}.detail-fields{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:8px;align-items:center}.detail-fields .form-control{min-height:36px;height:36px;font-size:12px}.detail-fields .btn-riwayat{white-space:nowrap;text-decoration:none}
.attendance-toolbar{margin-bottom:10px}.sticky-save{padding-top:12px}.attendance-summary{gap:8px}.summary-chip{padding:10px 12px!important;min-height:68px!important}.summary-chip strong{font-size:19px!important}
@media(max-width:1280px){.attendance-card-compact{grid-template-columns:38px minmax(150px,.9fr) minmax(390px,2.4fr) minmax(250px,1.1fr) auto}.status-pills.compact .status-pill{padding:6px 8px}}
@media(max-width:1050px){.attendance-card-compact{grid-template-columns:38px minmax(150px,1fr) auto}.attendance-card-compact .status-pills{grid-column:2/4}.attendance-time-compact{grid-column:2/3}.btn-detail-absensi{grid-column:3/4;grid-row:3}.attendance-detail-panel{grid-column:2/4}}
@media(max-width:700px){.attendance-card-compact{grid-template-columns:34px 1fr auto;padding:10px;gap:8px}.attendance-card-compact .student-index{width:32px;height:32px}.attendance-card-compact .status-pills{grid-column:1/4}.attendance-time-compact{grid-column:1/4;grid-template-columns:1fr 1fr auto}.btn-detail-absensi{grid-column:1/4;grid-row:auto;justify-content:center}.attendance-detail-panel{grid-column:1/4}.detail-fields{grid-template-columns:1fr}.attendance-toolbar{align-items:stretch;flex-direction:column}.attendance-toolbar>div:last-child{width:100%}.attendance-toolbar .btn{flex:1;justify-content:center}.summary-chip{min-width:105px}}

/* ===== Kiosk absensi QR siswa ===== */
.kiosk-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);gap:18px;align-items:start}.kiosk-main-card,.kiosk-log-card{min-height:0}.kiosk-head{align-items:flex-start}.kiosk-mode{display:flex;gap:8px;flex-wrap:wrap}.kiosk-mode .btn{display:inline-flex;align-items:center;gap:7px}.qr-reader{max-width:520px;margin:4px auto 18px;border:1px solid var(--border,#e4e8f1);border-radius:20px;overflow:hidden;background:#f8f9fd;min-height:280px}.qr-reader video{border-radius:18px}.kiosk-manual-form{max-width:620px;margin:0 auto}.kiosk-manual-form .input-group{border-radius:14px;overflow:hidden}.scan-result{max-width:620px;margin:18px auto 0;padding:16px 18px;border:1px solid #bde7c8;background:#effbf3;border-radius:16px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center}.scan-result.scan-error{border-color:#ffd1d1;background:#fff3f3}.scan-result-icon{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;color:#18a44a}.scan-error .scan-result-icon{color:#e5484d}.scan-result h3{font-size:18px;margin:2px 0}.scan-result p{margin:0;color:#68738d}.scan-result>strong{font-size:24px}.scan-result small{font-weight:700;letter-spacing:.08em;color:#78839b}.scan-late{display:inline-block;margin-top:5px;color:#d76b00;font-size:12px;font-weight:700}.recent-scan-list{display:flex;flex-direction:column;gap:9px}.recent-scan-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--border,#e6e9f0);border-radius:13px}.recent-avatar{width:38px;height:38px;border-radius:11px;background:#eeecff;color:#5747e8;display:grid;place-items:center;font-weight:800}.recent-scan-item div{min-width:0}.recent-scan-item strong,.recent-scan-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-scan-item small{color:#7a849b;margin-top:2px}.status-mini{font-size:10px;text-transform:capitalize;padding:5px 7px;border-radius:999px;background:#f1f3f8}.status-hadir{color:#16863d;background:#eaf8ef}.status-terlambat{color:#b45b00;background:#fff3df}.camera-fallback{min-height:280px;display:grid;place-items:center;align-content:center;color:#79839a;text-align:center}.camera-fallback svg{width:42px;height:42px;margin-bottom:8px}.compact-empty{padding:30px 10px}.student-card-page{display:grid;place-items:center;gap:18px}.student-qr-card{width:min(100%,390px);padding:28px;border:1px solid #e3e7f0;border-radius:24px;background:#fff;text-align:center;box-shadow:0 18px 50px rgba(34,44,74,.08)}.student-qr-brand{display:flex;justify-content:center;align-items:center;gap:8px;font-weight:800;color:#5847eb;margin-bottom:18px}.student-qrcode{display:grid;place-items:center;margin-bottom:18px}.student-qrcode img{padding:10px;background:#fff;border:1px solid #edf0f5;border-radius:16px}.student-qr-card h2{font-size:22px;margin:0 0 5px}.student-qr-card p{color:#707b92;margin:0 0 15px}.student-code{font-family:monospace;font-weight:800;letter-spacing:.08em;padding:9px 12px;border-radius:10px;background:#f5f6fb;margin-bottom:12px}.student-qr-card small{color:#7c879d}.student-card-actions{display:flex;gap:10px}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
@media(max-width:991.98px){.kiosk-grid{grid-template-columns:1fr}.kiosk-log-card{order:2}}@media(max-width:575.98px){.kiosk-mode{width:100%}.kiosk-mode .btn{flex:1;justify-content:center}.scan-result{grid-template-columns:40px minmax(0,1fr)}.scan-result>strong{grid-column:2;font-size:20px}.student-card-actions{width:100%;flex-direction:column}.student-card-actions .btn{width:100%}}
@media print{body *{visibility:hidden}.student-qr-card,.student-qr-card *{visibility:visible}.student-qr-card{position:absolute;left:0;top:0;width:86mm;box-shadow:none;border:1px solid #ddd}.sidebar,.topbar,.student-card-actions{display:none!important}}
/* v3.4 Terminal QR + RFID */
.terminal-attendance{display:grid;gap:16px}.terminal-hero{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:18px 20px}.terminal-brand{display:flex;align-items:center;gap:13px}.terminal-brand-icon{width:46px;height:46px;border-radius:15px;background:#eeecff;color:#5145e5;display:grid;place-items:center}.terminal-brand h3{margin:0 0 3px}.terminal-brand p{margin:0;color:#71809d}.terminal-clock{text-align:right;min-width:210px}.terminal-clock strong{display:block;font-size:29px;line-height:1;font-variant-numeric:tabular-nums}.terminal-clock span{display:block;color:#71809d;font-size:12px;margin-top:7px}.terminal-actions{display:flex;gap:8px}.kiosk-grid-modern{align-items:start}.kiosk-controlbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.camera-tools{display:flex;gap:7px;align-items:center}.camera-tools .form-select{min-width:190px;max-width:260px}.scanner-stage{position:relative;border-radius:18px;overflow:hidden;background:#0d1324;min-height:330px}.scanner-stage .qr-reader{min-height:330px}.scanner-badge,.rfid-badge{position:absolute;top:12px;display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(14,20,38,.78);color:#fff;font-size:11px;z-index:4;backdrop-filter:blur(8px)}.scanner-badge{left:12px}.rfid-badge{right:12px}.terminal-hint{display:block;color:#71809d;margin-top:7px}.attendance-kiosk-mode .sidebar,.attendance-kiosk-mode .topbar{display:none!important}.attendance-kiosk-mode .main{margin-left:0!important;width:100%!important}.attendance-kiosk-mode .content{padding:16px;max-width:1800px;margin:auto}.attendance-kiosk-mode .terminal-hero{position:sticky;top:0;z-index:20}.attendance-kiosk-mode .kiosk-main-card{min-height:calc(100vh - 145px)}
@media(max-width:900px){.terminal-hero{grid-template-columns:1fr auto}.terminal-actions{grid-column:1/-1;justify-content:flex-end}.terminal-clock{min-width:auto}.kiosk-controlbar{align-items:stretch;flex-direction:column}.camera-tools .form-select{max-width:none;flex:1}.scanner-stage,.scanner-stage .qr-reader{min-height:280px}}
@media(max-width:576px){.terminal-hero{grid-template-columns:1fr}.terminal-clock{text-align:left}.terminal-actions{justify-content:flex-start;flex-wrap:wrap}.kiosk-mode{display:grid;grid-template-columns:repeat(3,1fr)}.kiosk-mode .btn{padding-inline:7px}.scanner-stage,.scanner-stage .qr-reader{min-height:245px}}

/* v3.5 Pengaturan hari kerja dan shift */
.settings-grid-modern{max-width:1180px;margin:0 auto}.settings-section .panel-head h3{display:flex;align-items:center;gap:9px}.settings-section .panel-head h3 svg{width:19px;height:19px;color:var(--primary)}.workday-options,.shift-mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.workday-card{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 22px;align-items:center;gap:12px;padding:15px;border:1px solid #e1e6ef;border-radius:16px;background:#fff;cursor:pointer;transition:.18s}.workday-card:hover{border-color:#bfc8da;transform:translateY(-1px)}.workday-card input{position:absolute;opacity:0}.workday-card:has(input:checked){border-color:#6957ef;background:#f7f5ff;box-shadow:0 0 0 3px rgba(105,87,239,.08)}.workday-icon{width:46px;height:46px;border-radius:14px;background:#f1f3f8;display:grid;place-items:center;color:#59647c}.workday-card:has(input:checked) .workday-icon{background:#e9e5ff;color:#5847e8}.workday-card strong,.workday-card small{display:block}.workday-card small{color:#78839a;margin-top:3px}.selected-check{opacity:0;color:#5847e8}.workday-card:has(input:checked) .selected-check{opacity:1}.settings-note{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:13px;background:#f7f8fc;color:#66738d}.settings-note svg{width:17px;height:17px;margin-top:2px}.settings-savebar{position:sticky;bottom:12px;display:flex;justify-content:flex-end;padding:14px 0;z-index:4}.shift-card{grid-template-columns:52px minmax(190px,1.3fr) repeat(3,minmax(120px,.7fr)) auto}.badge-muted{background:#f1f3f6!important;color:#7c879a!important}
@media(max-width:850px){.workday-options,.shift-mode-options{grid-template-columns:1fr}.shift-card{grid-template-columns:46px 1fr auto}.shift-card .card-meta{grid-column:2/3}.shift-card .list-actions{grid-column:3;grid-row:1/-1}}
.scan-shift-info{display:flex;align-items:center;gap:5px!important;margin-top:4px!important;font-size:11px!important}.scan-shift-info svg{width:13px;height:13px}


/* v3.6 Penyempurnaan card rombel: struktur stabil dan aksi tidak keluar */
.rombel-card-modern{
    grid-template-columns:48px minmax(0,1fr) auto!important;
    gap:16px!important;
    align-items:center;
    min-height:0;
    padding:15px 16px!important;
    overflow:hidden;
}
.rombel-card-modern .rombel-content{min-width:0;display:grid;gap:10px}
.rombel-card-modern .rombel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:0}
.rombel-card-modern .card-main{min-width:0}
.rombel-card-modern .card-main strong{display:block;font-size:15px;line-height:1.3;color:#172033}
.rombel-card-modern .card-main span{display:block;margin-top:3px;color:#68748d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rombel-card-modern .rombel-member-badge{flex:0 0 auto}
.rombel-card-modern .rombel-info-grid{display:grid;grid-template-columns:minmax(120px,.65fr) minmax(70px,.35fr) minmax(190px,1.25fr) minmax(145px,.8fr);gap:10px 18px;min-width:0}
.rombel-card-modern .rombel-info-item{min-width:0;display:grid;gap:3px}
.rombel-card-modern .rombel-info-item .meta-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#98a2b8;font-weight:700}
.rombel-card-modern .rombel-info-item strong{font-size:12px;font-weight:600;color:#263149;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rombel-card-modern .rombel-actions{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-end;justify-self:end;gap:7px;min-width:max-content}
.rombel-card-modern .rombel-actions>.list-actions{display:contents}
.rombel-card-modern .rombel-actions .btn{margin:0!important;white-space:nowrap;min-height:36px;padding:7px 10px;border-radius:10px}
.rombel-card-modern .rombel-actions .btn span{display:inline}

@media(max-width:1180px){
    .rombel-card-modern .rombel-info-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}
    .rombel-card-modern .rombel-info-wide{grid-column:auto}
}
@media(max-width:900px){
    .rombel-card-modern{grid-template-columns:44px minmax(0,1fr)!important;align-items:start}
    .rombel-card-modern .rombel-actions{grid-column:1/3;justify-self:stretch;display:grid!important;grid-template-columns:1.2fr 1fr 1fr;min-width:0;width:100%}
    .rombel-card-modern .rombel-actions .btn{width:100%;justify-content:center}
}
@media(max-width:620px){
    .rombel-card-modern{grid-template-columns:40px minmax(0,1fr)!important;padding:12px!important;gap:10px!important}
    .rombel-card-modern .rombel-heading{display:grid;gap:8px}
    .rombel-card-modern .rombel-member-badge{width:max-content}
    .rombel-card-modern .rombel-info-grid{grid-template-columns:1fr 1fr;gap:9px 12px}
    .rombel-card-modern .rombel-info-item strong{white-space:normal}
    .rombel-card-modern .rombel-actions{grid-template-columns:1fr 1fr}
    .rombel-card-modern .btn-anggota{grid-column:1/3}
}
@media(max-width:420px){
    .rombel-card-modern .rombel-info-grid{grid-template-columns:1fr}
}


/* v3.7 - tombol aksi ikon + tooltip */
.btn-action-icon{
    width:36px;
    height:36px;
    min-width:36px;
    padding:0!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    line-height:1;
}
.btn-action-icon svg{width:16px;height:16px;pointer-events:none}
.list-actions,.card-actions,.rombel-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:nowrap}
.list-actions .list-actions,.card-actions .list-actions{display:contents}
.tooltip{--bs-tooltip-bg:#111827;--bs-tooltip-opacity:.96;--bs-tooltip-padding-x:.65rem;--bs-tooltip-padding-y:.4rem;--bs-tooltip-font-size:.75rem}
@media(max-width:767.98px){
  .btn-action-icon{width:38px;height:38px;min-width:38px}
  .list-actions,.card-actions,.rombel-actions{justify-content:flex-start}
}
/* v3.8 piket, dispensasi, pulang awal */
.permission-card .card-meta{min-width:150px}.duty-day{font-weight:700;color:#4f46e5}.badge-status-menunggu{background:#fff7ed;color:#c2410c}.badge-status-ditolak{background:#fef2f2;color:#dc2626}.badge-status-disetujui{background:#ecfdf5;color:#059669}
@media(max-width:900px){.permission-card,.duty-card{grid-template-columns:48px minmax(0,1fr) auto}.permission-card .card-meta,.duty-card .card-meta{grid-column:2/-1;min-width:0}}

/* v3.9 rapikan tampilan dispensasi, pulang awal, dan jadwal piket */
.permission-card-modern,
.duty-card-modern{
    grid-template-columns:52px minmax(0,1fr) auto!important;
    gap:16px!important;
    align-items:center;
    padding:15px 16px!important;
    overflow:hidden;
}
.permission-avatar,.duty-avatar{background:#f2f0ff;color:#5b49ea}
.permission-content,.duty-content{min-width:0;display:grid;gap:10px}
.permission-heading,.duty-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:0}
.permission-heading .card-main,.duty-heading .card-main{min-width:0}
.permission-heading .card-main strong,.duty-heading .card-main strong{display:block;font-size:15px;line-height:1.3;color:#172033}
.permission-heading .card-main span,.duty-heading .card-main span{display:block;margin-top:3px;color:#68748d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.permission-info-grid,.duty-info-grid{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:10px 16px;min-width:0}
.permission-info-item,.duty-info-item{display:grid;gap:3px;min-width:0}
.permission-info-item .meta-label,.duty-info-item .meta-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#98a2b8;font-weight:700}
.permission-info-item strong,.duty-info-item strong{font-size:12px;font-weight:600;color:#263149;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.permission-info-wide,.duty-info-wide{grid-column:span 2}
.permission-actions,.duty-actions{display:flex;align-items:center;justify-content:flex-end;justify-self:end;min-width:max-content}
.permission-actions>.list-actions,.duty-actions>.list-actions{display:flex;gap:7px;flex-wrap:nowrap}
.permission-card-modern .badge-soft,.duty-card-modern .badge-soft{text-transform:capitalize}

@media(max-width:1200px){
    .permission-info-grid,.duty-info-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}
    .permission-info-wide,.duty-info-wide{grid-column:span 2}
}
@media(max-width:900px){
    .permission-card-modern,.duty-card-modern{grid-template-columns:46px minmax(0,1fr)!important;align-items:start}
    .permission-actions,.duty-actions{grid-column:1/3;justify-self:stretch}
    .permission-actions>.list-actions,.duty-actions>.list-actions{justify-content:flex-end;width:100%}
}
@media(max-width:620px){
    .permission-card-modern,.duty-card-modern{grid-template-columns:40px minmax(0,1fr)!important;padding:12px!important;gap:10px!important}
    .permission-heading,.duty-heading{display:grid;gap:8px}
    .permission-info-grid,.duty-info-grid{grid-template-columns:1fr 1fr;gap:9px 12px}
    .permission-info-item strong,.duty-info-item strong{white-space:normal}
    .permission-info-wide,.duty-info-wide{grid-column:1/-1}
    .permission-actions>.list-actions,.duty-actions>.list-actions{justify-content:flex-start}
}
@media(max-width:420px){
    .permission-info-grid,.duty-info-grid{grid-template-columns:1fr}
}


/* v4.0 compact card perizinan */
.permission-card-compact{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:14px!important;
    padding:14px 16px!important;
    align-items:start;
}
.permission-avatar.compact{width:44px;height:44px;border-radius:14px}
.permission-compact-body{min-width:0;display:grid;gap:10px}
.permission-compact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.permission-compact-head .card-main{min-width:0}
.permission-compact-head .card-main strong{display:block;font-size:15px;line-height:1.3;color:#172033}
.permission-compact-head .card-main span{display:block;margin-top:2px;color:#68748d;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.permission-head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.permission-actions-inline>.list-actions{display:flex;gap:6px;flex-wrap:nowrap}
.permission-actions-inline .btn-action-icon{width:34px;height:34px;min-width:34px}
.permission-compact-meta{display:flex;flex-wrap:wrap;gap:8px 10px;min-width:0}
.permission-compact-meta .mini-meta{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 10px;border:1px solid #eceff5;border-radius:999px;background:#fbfcfe;color:#536079;font-size:12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.permission-compact-meta .mini-meta b{color:#8c96ab;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.permission-compact-meta .mini-meta.wide{max-width:min(100%,520px)}
.permission-card-compact .badge-soft{padding:7px 12px;font-size:12px}
@media(max-width:900px){
    .permission-compact-head{align-items:flex-start}
    .permission-head-right{gap:6px}
}
@media(max-width:620px){
    .permission-card-compact{grid-template-columns:40px minmax(0,1fr)!important;padding:12px!important;gap:10px!important}
    .permission-avatar.compact{width:40px;height:40px;border-radius:12px}
    .permission-compact-head{display:grid;gap:8px}
    .permission-head-right{justify-content:space-between;flex-wrap:wrap}
    .permission-actions-inline>.list-actions{justify-content:flex-start}
    .permission-compact-meta .mini-meta{max-width:100%;white-space:normal;border-radius:12px}
    .permission-compact-meta .mini-meta.wide{max-width:100%}
}


/* v4.1 compact card rombel + jadwal piket */
.rombel-card-compact,
.duty-card-compact{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:14px!important;
    padding:14px 16px!important;
    align-items:start;
}
.rombel-avatar.compact,.duty-avatar.compact{width:44px;height:44px;border-radius:14px;background:#f2f0ff;color:#5b49ea}
.rombel-compact-body,.duty-compact-body{min-width:0;display:grid;gap:10px}
.rombel-compact-head,.duty-compact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.rombel-compact-head .card-main,.duty-compact-head .card-main{min-width:0}
.rombel-compact-head .card-main strong,.duty-compact-head .card-main strong{display:block;font-size:15px;line-height:1.3;color:#172033}
.rombel-compact-head .card-main span,.duty-compact-head .card-main span{display:block;margin-top:2px;color:#68748d;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rombel-head-right,.duty-head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.rombel-actions-inline,.duty-actions-inline{display:flex;align-items:center;gap:6px}
.rombel-actions-inline>.list-actions,.duty-actions-inline>.list-actions{display:flex;gap:6px;flex-wrap:nowrap}
.rombel-actions-inline .btn-action-icon,.duty-actions-inline .btn-action-icon{width:34px;height:34px;min-width:34px}
.rombel-compact-meta,.duty-compact-meta{display:flex;flex-wrap:wrap;gap:8px 10px;min-width:0}
.rombel-compact-meta .mini-meta,.duty-compact-meta .mini-meta{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 10px;border:1px solid #eceff5;border-radius:999px;background:#fbfcfe;color:#536079;font-size:12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rombel-compact-meta .mini-meta b,.duty-compact-meta .mini-meta b{color:#8c96ab;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.rombel-compact-meta .mini-meta.wide,.duty-compact-meta .mini-meta.wide{max-width:min(100%,520px)}
.rombel-card-compact .badge-soft,.duty-card-compact .badge-soft{padding:7px 12px;font-size:12px}
@media(max-width:620px){
    .rombel-card-compact,.duty-card-compact{grid-template-columns:40px minmax(0,1fr)!important;padding:12px!important;gap:10px!important}
    .rombel-avatar.compact,.duty-avatar.compact{width:40px;height:40px;border-radius:12px}
    .rombel-compact-head,.duty-compact-head{display:grid;gap:8px}
    .rombel-head-right,.duty-head-right{justify-content:space-between;flex-wrap:wrap}
    .rombel-actions-inline>.list-actions,.duty-actions-inline>.list-actions{justify-content:flex-start}
    .rombel-compact-meta .mini-meta,.duty-compact-meta .mini-meta{max-width:100%;white-space:normal;border-radius:12px}
    .rombel-compact-meta .mini-meta.wide,.duty-compact-meta .mini-meta.wide{max-width:100%}
}

/* v4.2 multi-role pengguna */
.role-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.role-choice{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e4e8f0;border-radius:14px;background:#fff;cursor:pointer;transition:.18s ease}
.role-choice:hover{border-color:#c8c2ff;background:#faf9ff}
.role-choice input{position:absolute;opacity:0;pointer-events:none}
.role-choice-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#f1f3f8;color:#667085;flex:0 0 auto}
.role-choice>span:nth-of-type(2){min-width:0;display:grid}
.role-choice strong{font-size:13px;color:#172033}
.role-choice small{font-size:11px;color:#7b879d;margin-top:2px}
.role-choice .role-check{margin-left:auto;color:#5b49ea;opacity:0}
.role-choice:has(input:checked){border-color:#8d7ff3;background:#f7f5ff;box-shadow:0 0 0 3px rgba(91,73,234,.08)}
.role-choice:has(input:checked) .role-choice-icon{background:#eae6ff;color:#5b49ea}
.role-choice:has(input:checked) .role-check{opacity:1}
.user-card-compact{grid-template-columns:48px minmax(180px,1fr) minmax(220px,1.3fr) minmax(100px,.5fr) auto!important;align-items:center;padding:14px 16px!important}
.user-role-badges{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.role-badge{padding:6px 10px;font-size:11px}
.user-role-menu{display:flex;gap:6px;flex-wrap:wrap;max-width:260px}
@media(max-width:900px){.user-card-compact{grid-template-columns:44px minmax(0,1fr) auto!important}.user-role-badges{grid-column:2/4}.user-card-compact .card-meta{grid-column:2/3}.user-card-compact>.list-actions{grid-column:3;grid-row:1/4}}
@media(max-width:620px){.role-choice-grid{grid-template-columns:1fr}.user-card-compact{grid-template-columns:40px minmax(0,1fr)!important}.user-card-compact>.list-actions{grid-column:1/3;grid-row:auto;justify-content:flex-start}.user-role-badges,.user-card-compact .card-meta{grid-column:2/3}}


/* v4.3 filter role akun pengguna */
.user-filter-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 210px auto;gap:12px;align-items:center}
.role-filter-wrap{position:relative;display:flex;align-items:center}
.role-filter-wrap>svg{position:absolute;left:13px;width:17px;height:17px;color:#8a95aa;z-index:2;pointer-events:none}
.role-filter-wrap .form-select{padding-left:40px;min-width:210px}
@media(max-width:900px){.user-filter-toolbar{grid-template-columns:1fr 210px}.user-filter-toolbar .list-limit{grid-column:1/-1;justify-self:end}}
@media(max-width:620px){.user-filter-toolbar{grid-template-columns:1fr}.role-filter-wrap .form-select{width:100%;min-width:0}.user-filter-toolbar .list-limit{grid-column:auto;justify-self:stretch;justify-content:flex-end}}

/* v4.4 generate akun guru dan siswa */
.account-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.account-head-actions .dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px}
.account-head-actions .dropdown-item svg{width:17px;height:17px;color:#5b49ea}
.account-head-actions .dropdown-item span{display:grid;gap:1px}
.account-head-actions .dropdown-item strong{font-size:13px;font-weight:700}
.account-head-actions .dropdown-item small{font-size:11px;color:#7b8599}
.generate-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;text-align:center}
.generate-summary span{padding:10px;border-radius:12px;background:#f7f8fc;color:#6c768b;font-size:12px}
.generate-summary b{display:block;color:#172033;font-size:20px}
.generate-account-table{max-height:380px;overflow:auto;border:1px solid #e8ebf2;border-radius:12px;text-align:left}
.generate-account-table table{width:100%;border-collapse:collapse;font-size:12px}
.generate-account-table th{position:sticky;top:0;background:#f7f8fc;color:#778096;text-transform:uppercase;font-size:10px;letter-spacing:.05em;padding:9px 10px}
.generate-account-table td{padding:8px 10px;border-top:1px solid #eef0f4;vertical-align:top}
.generate-account-table code{white-space:nowrap;color:#4938d4}
@media(max-width:620px){.account-head-actions{width:100%;justify-content:stretch}.account-head-actions>.btn,.account-head-actions>.dropdown{flex:1}.account-head-actions .dropdown>.btn{width:100%}.generate-summary{grid-template-columns:1fr}.generate-account-table{max-height:300px}}

/* v4.6 dashboard siswa + bottom navigation mobile */
.student-dashboard{display:grid;gap:18px;max-width:980px;margin:0 auto}
.student-hero-card{border-radius:24px;padding:24px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;box-shadow:0 18px 45px rgba(79,70,229,.2)}
.student-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.student-greeting{font-size:13px;color:#ddd6fe}.student-hero-card h2{font-size:28px;margin:7px 0 4px}.student-hero-card p{margin:0;color:#e9e5ff}
.student-avatar-lg{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:25px;font-weight:800;border:1px solid rgba(255,255,255,.2)}
.student-today-status{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:space-between}.student-today-status small,.student-today-status strong{display:block}.student-today-status small{color:#ddd6fe}.student-today-status strong{font-size:18px;margin-top:2px}.student-time-pill{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:700}.student-time-pill svg{width:16px;height:16px}
.student-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.student-quick-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:17px;text-decoration:none;color:var(--text);display:grid;gap:7px;box-shadow:0 8px 24px rgba(31,41,55,.04)}.student-quick-card>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5}.student-quick-card strong,.student-quick-card small{display:block}.student-quick-card small{color:var(--muted)}
.student-section-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 8px 24px rgba(31,41,55,.04)}.student-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.student-section-head h3{margin:0;font-size:17px}.student-section-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.student-section-head a{font-size:12px;text-decoration:none}.student-percentage{font-size:22px;font-weight:800;color:#4f46e5}
.student-stat-scroll{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.student-stat-mini{border:1px solid #edf0f5;border-radius:15px;padding:13px;text-align:center}.student-stat-mini span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin:0 auto 7px;background:#f4f6fb}.student-stat-mini strong,.student-stat-mini small{display:block}.student-stat-mini strong{font-size:20px}.student-stat-mini small{color:var(--muted);font-size:11px}.student-stat-mini svg{width:16px;height:16px}.status-hadir{color:#059669}.status-terlambat{color:#d97706}.status-sakit{color:#2563eb}.status-izin{color:#7c3aed}.status-alpa{color:#dc2626}.status-dispensasi{color:#0891b2}.status-pulang_awal{color:#db2777}
.student-progress-wrap{height:8px;border-radius:999px;background:#eef0f5;overflow:hidden;margin-top:16px}.student-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#4f46e5,#7c3aed)}.student-summary-note{display:flex;align-items:center;gap:7px;margin-top:12px;color:var(--muted);font-size:12px}.student-summary-note svg{width:15px}
.student-history-list{display:grid;gap:8px}.student-history-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #eff1f5}.student-history-item:last-child{border-bottom:0}.student-history-icon{width:38px;height:38px;border-radius:12px;background:#f5f7fb;display:grid;place-items:center}.student-history-icon svg{width:17px}.student-history-item strong,.student-history-item small{display:block}.student-history-item small{color:var(--muted);font-size:11px;margin-top:2px}.student-late-badge{font-size:10px;border-radius:999px;background:#fff7ed;color:#c2410c;padding:5px 8px}.student-empty{display:grid;place-items:center;gap:7px;padding:30px;color:var(--muted)}
.student-class-card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px 20px}.student-class-card>div{display:flex;align-items:center;gap:12px}.student-class-card small,.student-class-card strong,.student-class-card span{display:block}.student-class-card small,.student-class-card span{color:var(--muted);font-size:11px}.student-class-icon{width:42px;height:42px;border-radius:13px;background:#eef2ff;color:#4f46e5;display:grid;place-items:center}
.student-bottom-nav{display:none}
@media(max-width:767.98px){
 body.student-mobile-app{background:#f6f7fb;padding-bottom:84px}
 body.student-mobile-app .sidebar{display:none!important}
 body.student-mobile-app .main{margin-left:0;width:100%}
 body.student-mobile-app .topbar{height:66px;padding:0 16px;border-bottom:0;background:#f6f7fb;position:sticky}
 body.student-mobile-app #sidebarToggle{display:none!important}
 body.student-mobile-app .page-title h1{font-size:18px}
 body.student-mobile-app .page-title p{font-size:11px}
 body.student-mobile-app .user-menu div,body.student-mobile-app .user-menu:after{display:none}
 body.student-mobile-app .content{padding:12px 14px 20px}
 .student-dashboard{gap:14px}
 .student-hero-card{border-radius:22px;padding:20px}.student-hero-card h2{font-size:22px}.student-avatar-lg{width:50px;height:50px;border-radius:16px}
 .student-quick-grid{grid-template-columns:repeat(3,1fr);gap:9px}.student-quick-card{padding:12px 8px;text-align:center;place-items:center}.student-quick-card>span{width:38px;height:38px}.student-quick-card strong{font-size:12px}.student-quick-card small{display:none}
 .student-section-card{padding:16px;border-radius:18px}
 .student-stat-scroll{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}.student-stat-scroll::-webkit-scrollbar{display:none}.student-stat-mini{min-width:82px;padding:10px}
 .student-class-card{display:grid;padding:16px}.student-class-card>div:last-child{padding-left:54px}
 .student-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:1080;left:10px;right:10px;bottom:10px;height:66px;border-radius:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(31,41,55,.18);border:1px solid rgba(226,229,238,.9);padding:7px 8px env(safe-area-inset-bottom)}
 .student-bottom-nav a,.student-bottom-nav button{border:0;background:transparent;text-decoration:none;color:#8a93a7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;padding:0}.student-bottom-nav form{display:contents}.student-bottom-nav svg{width:19px;height:19px}.student-bottom-nav a.active{color:#4f46e5}.student-bottom-nav .student-nav-main{position:relative}.student-bottom-nav .student-nav-main>span{width:44px;height:44px;border-radius:15px;background:#4f46e5;color:#fff;display:grid;place-items:center;margin-top:-24px;box-shadow:0 10px 20px rgba(79,70,229,.3)}.student-bottom-nav .student-nav-main small{font-size:9px;margin-top:-1px}
}

/* v4.7 kalender mini kehadiran siswa */
.student-calendar-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:16px;box-shadow:0 8px 24px rgba(31,41,55,.04)}
.student-today-banner{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;padding:12px 14px;border-radius:16px;background:#f7f8fc;margin-bottom:16px}
.today-status-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#fff;color:#64748b;box-shadow:0 4px 12px rgba(31,41,55,.06)}
.today-status-icon svg{width:18px;height:18px}.student-today-banner small,.student-today-banner strong,.student-today-banner span{display:block}.student-today-banner>div small{color:#8a94a8;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.student-today-banner>div strong{font-size:16px;margin:2px 0}.student-today-banner>div span{font-size:11px;color:#6f7a91}
.today-date-badge{min-width:46px;text-align:center;font-size:20px;font-weight:800;color:#4f46e5}.today-date-badge small{font-size:9px;text-transform:uppercase;color:#8b95aa;font-weight:700}
.student-today-banner.status-hadir{background:#ecfdf5}.student-today-banner.status-terlambat{background:#fff7ed}.student-today-banner.status-sakit{background:#eff6ff}.student-today-banner.status-izin{background:#f5f3ff}.student-today-banner.status-alpa{background:#fef2f2}.student-today-banner.status-dispensasi{background:#ecfeff}.student-today-banner.status-pulang_awal{background:#fdf2f8}
.student-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.student-calendar-head h3{margin:0;font-size:16px}.student-calendar-head p{margin:2px 0 0;color:var(--muted);font-size:11px}
.mini-calendar-weekdays,.mini-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.mini-calendar-weekdays{margin-bottom:5px}.mini-calendar-weekdays span{text-align:center;color:#98a2b6;font-size:9px;font-weight:700;text-transform:uppercase}
.calendar-day{aspect-ratio:1/1;min-height:36px;border:1px solid transparent;background:#f8f9fc;border-radius:10px;position:relative;display:grid;place-items:center;color:#526079;font-size:11px;font-weight:700;padding:0;transition:.18s ease}.calendar-day:hover{border-color:#cfd5e5;background:#fff}.calendar-day.empty{background:transparent}.calendar-day.today{box-shadow:inset 0 0 0 2px #4f46e5;color:#4f46e5}.calendar-day.selected{transform:translateY(-1px);box-shadow:0 5px 12px rgba(31,41,55,.12)}.calendar-day.has-status{background:#fff}.calendar-day>i{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:currentColor}.calendar-day.status-hadir{color:#059669}.calendar-day.status-terlambat{color:#d97706}.calendar-day.status-sakit{color:#2563eb}.calendar-day.status-izin{color:#7c3aed}.calendar-day.status-alpa{color:#dc2626}.calendar-day.status-dispensasi{color:#0891b2}.calendar-day.status-pulang_awal{color:#db2777}
.calendar-detail-box{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:14px;background:#f8f9fc}.calendar-detail-icon{width:36px;height:36px;border-radius:11px;background:#fff;color:#64748b;display:grid;place-items:center}.calendar-detail-icon svg{width:16px}.calendar-detail-box strong,.calendar-detail-box small{display:block}.calendar-detail-box strong{font-size:12px}.calendar-detail-box small{font-size:10px;color:#7a8599;margin-top:2px;line-height:1.45}
.calendar-legend{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:11px}.calendar-legend span{display:flex;align-items:center;gap:5px;color:#758096;font-size:9px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.status-hadir{background:#059669}.legend-dot.status-terlambat{background:#d97706}.legend-dot.status-sakit{background:#2563eb}.legend-dot.status-izin{background:#7c3aed}.legend-dot.status-alpa{background:#dc2626}
@media(min-width:768px){.student-calendar-card{max-width:620px}.calendar-day{min-height:42px}}
@media(max-width:767.98px){.student-calendar-card{padding:14px;border-radius:18px}.student-today-banner{grid-template-columns:38px 1fr auto;padding:11px 12px;margin-bottom:14px}.today-status-icon{width:38px;height:38px}.mini-calendar-grid,.mini-calendar-weekdays{gap:4px}.calendar-day{min-height:34px;border-radius:9px}.student-calendar-head{margin-bottom:10px}}

/* v4.8 halaman kehadiran siswa seperti aplikasi mobile */
.student-attendance-app{display:grid;gap:16px;max-width:760px;margin:0 auto}
.student-attendance-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-radius:24px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;box-shadow:0 18px 40px rgba(79,70,229,.18)}
.student-page-eyebrow{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#ddd6fe;margin-bottom:6px}
.student-attendance-header h2{margin:0;font-size:24px}.student-attendance-header p{margin:5px 0 0;color:#e9e7ff;font-size:13px}
.student-attendance-avatar{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:20px;font-weight:800}
.attendance-today-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 16px;border:1px solid var(--border);border-radius:20px;background:#fff}
.attendance-today-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#f1f3f8;color:#667085}.attendance-today-icon svg{width:21px;height:21px}
.attendance-today-card small,.attendance-today-card strong,.attendance-today-card span{display:block}.attendance-today-card small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#98a2b8;font-weight:700}.attendance-today-card strong{font-size:18px;margin-top:2px}.attendance-today-card div>span{font-size:12px;color:#667085;margin-top:3px}
.attendance-today-date{min-width:54px;text-align:center;padding:8px 10px;border-radius:15px;background:#f7f8fc;font-size:21px;font-weight:800;color:#344054}.attendance-today-date small{margin-top:2px;color:#7c879a}
.attendance-today-card.status-hadir .attendance-today-icon{background:#ecfdf5;color:#059669}.attendance-today-card.status-terlambat .attendance-today-icon{background:#fff7ed;color:#ea580c}.attendance-today-card.status-sakit .attendance-today-icon{background:#eff6ff;color:#2563eb}.attendance-today-card.status-izin .attendance-today-icon{background:#f5f3ff;color:#7c3aed}.attendance-today-card.status-alpa .attendance-today-icon{background:#fef2f2;color:#dc2626}.attendance-today-card.status-dispensasi .attendance-today-icon{background:#ecfeff;color:#0891b2}.attendance-today-card.status-pulang_awal .attendance-today-icon{background:#fff1f2;color:#e11d48}
.attendance-calendar-page{background:#fff;border:1px solid var(--border);border-radius:24px;padding:18px;box-shadow:0 10px 30px rgba(31,41,55,.04)}
.attendance-month-toolbar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:12px;margin-bottom:14px}.attendance-month-toolbar>div{text-align:center}.attendance-month-toolbar strong,.attendance-month-toolbar span{display:block}.attendance-month-toolbar strong{font-size:18px}.attendance-month-toolbar span{font-size:11px;color:#98a2b8;margin-top:2px}.month-nav-btn{width:40px;height:40px;border:1px solid #e7eaf0;border-radius:13px;background:#fff;color:#475467;display:grid;place-items:center}.month-nav-btn:disabled{opacity:.35}.month-nav-btn svg{width:18px;height:18px}
.attendance-summary-scroll{display:flex;gap:9px;overflow:auto;padding:2px 1px 12px;scrollbar-width:none}.attendance-summary-scroll::-webkit-scrollbar{display:none}.attendance-summary-scroll article{min-width:82px;padding:10px 12px;border:1px solid #eceff5;border-radius:16px;background:#fbfcfe;display:grid;gap:2px;justify-items:start}.attendance-summary-scroll article svg{width:16px;height:16px;color:#667085}.attendance-summary-scroll article strong{font-size:18px}.attendance-summary-scroll article span{font-size:10px;color:#7c879a}.attendance-summary-scroll .attendance-summary-primary{background:#4f46e5;border-color:#4f46e5;color:#fff}.attendance-summary-scroll .attendance-summary-primary strong{font-size:21px}.attendance-summary-scroll .attendance-summary-primary span{color:#e5e7ff}
.attendance-calendar-shell{border:1px solid #edf0f5;border-radius:20px;padding:12px;background:#fcfcfe}.attendance-weekdays,.attendance-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.attendance-weekdays{margin-bottom:7px}.attendance-weekdays span{text-align:center;font-size:10px;color:#98a2b8;font-weight:700}.attendance-day{aspect-ratio:1;border:0;border-radius:12px;background:transparent;position:relative;display:grid;place-items:center;color:#344054;font-size:12px}.attendance-day.empty{pointer-events:none}.attendance-day:hover{background:#f5f6fa}.attendance-day.today{box-shadow:inset 0 0 0 2px #4f46e5;font-weight:800}.attendance-day.selected{background:#eef2ff;color:#4338ca}.attendance-day i{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:#94a3b8}.attendance-day.status-hadir i{background:#10b981}.attendance-day.status-terlambat i{background:#f97316}.attendance-day.status-sakit i{background:#3b82f6}.attendance-day.status-izin i{background:#8b5cf6}.attendance-day.status-alpa i{background:#ef4444}.attendance-day.status-dispensasi i{background:#06b6d4}.attendance-day.status-pulang_awal i{background:#ec4899}.attendance-calendar-loading{grid-column:1/-1;padding:35px;text-align:center;color:#667085;font-size:13px}
.attendance-selected-detail{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;margin-top:12px;padding:12px 13px;border-radius:17px;background:#f7f8fc}.attendance-detail-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#fff;color:#667085}.attendance-selected-detail strong,.attendance-selected-detail span{display:block}.attendance-selected-detail strong{font-size:13px}.attendance-selected-detail div>span{font-size:11px;color:#667085;margin-top:3px;line-height:1.5}.attendance-detail-icon.status-hadir{color:#059669}.attendance-detail-icon.status-terlambat{color:#ea580c}.attendance-detail-icon.status-sakit{color:#2563eb}.attendance-detail-icon.status-izin{color:#7c3aed}.attendance-detail-icon.status-alpa{color:#dc2626}.attendance-detail-icon.status-dispensasi{color:#0891b2}.attendance-detail-icon.status-pulang_awal{color:#e11d48}
.attendance-calendar-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:12px}.attendance-calendar-legend span{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#667085}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.status-hadir{background:#10b981}.legend-dot.status-terlambat{background:#f97316}.legend-dot.status-sakit{background:#3b82f6}.legend-dot.status-izin{background:#8b5cf6}.legend-dot.status-alpa{background:#ef4444}.legend-dot.status-dispensasi{background:#06b6d4}.legend-dot.status-pulang_awal{background:#ec4899}
@media(max-width:767.98px){.student-attendance-app{max-width:none}.student-attendance-header{margin:-12px -12px 0;border-radius:0 0 24px 24px;padding:18px 16px}.student-attendance-header h2{font-size:21px}.attendance-calendar-page{border-radius:22px;padding:14px}.attendance-today-card{padding:13px 14px}.attendance-day{border-radius:10px}.attendance-calendar-legend{padding-bottom:4px}}

/* v4.9 - kalender kehadiran siswa lebih compact dan responsif */
@media(max-width:767.98px){
    .student-attendance-app{gap:10px}
    .attendance-calendar-page{padding:10px;border-radius:18px}
    .attendance-month-toolbar{grid-template-columns:34px 1fr 34px;gap:8px;margin-bottom:9px}
    .attendance-month-toolbar strong{font-size:16px;line-height:1.2}
    .attendance-month-toolbar span{font-size:9px;margin-top:1px}
    .month-nav-btn{width:34px;height:34px;border-radius:11px}
    .month-nav-btn svg{width:16px;height:16px}

    .attendance-summary-scroll{gap:6px;padding:0 0 8px;margin:0 -1px}
    .attendance-summary-scroll article{min-width:64px;padding:7px 8px;border-radius:13px;gap:1px}
    .attendance-summary-scroll article svg{width:13px;height:13px}
    .attendance-summary-scroll article strong{font-size:15px;line-height:1.15}
    .attendance-summary-scroll article span{font-size:8px;line-height:1.2}
    .attendance-summary-scroll .attendance-summary-primary{min-width:70px}
    .attendance-summary-scroll .attendance-summary-primary strong{font-size:17px}

    .attendance-calendar-shell{padding:8px;border-radius:15px}
    .attendance-weekdays,.attendance-calendar-grid{gap:2px}
    .attendance-weekdays{margin-bottom:4px}
    .attendance-weekdays span{font-size:8px}
    .attendance-day{font-size:10px;border-radius:8px;min-width:0}
    .attendance-day i{bottom:3px;width:4px;height:4px}

    .attendance-selected-detail{grid-template-columns:34px minmax(0,1fr);gap:9px;margin-top:8px;padding:9px 10px;border-radius:13px}
    .attendance-detail-icon{width:34px;height:34px;border-radius:10px}
    .attendance-detail-icon svg{width:16px;height:16px}
    .attendance-selected-detail strong{font-size:12px}
    .attendance-selected-detail div>span{font-size:10px;line-height:1.35;margin-top:2px}

    .attendance-calendar-legend{gap:5px 8px;margin-top:8px}
    .attendance-calendar-legend span{font-size:8px;gap:4px}
    .legend-dot{width:6px;height:6px}
}

@media(max-width:390px){
    .attendance-calendar-page{padding:8px}
    .attendance-month-toolbar{grid-template-columns:32px 1fr 32px}
    .month-nav-btn{width:32px;height:32px}
    .attendance-summary-scroll article{min-width:58px;padding:6px 7px}
    .attendance-summary-scroll .attendance-summary-primary{min-width:64px}
    .attendance-calendar-shell{padding:6px}
    .attendance-day{font-size:9px;border-radius:7px}
}

/* v5.0 metode absensi + QR dinamis sekolah */
.attendance-method-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.attendance-method-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;align-items:center;gap:14px;padding:16px;border:1px solid #e3e7ef;border-radius:16px;background:#fff;cursor:pointer;transition:.2s ease}
.attendance-method-card input{position:absolute;opacity:0;pointer-events:none}
.attendance-method-card:hover{border-color:#c8c2ff;background:#fcfbff}
.attendance-method-card:has(input:checked){border-color:#6957ef;background:#f7f5ff;box-shadow:0 0 0 3px rgba(105,87,239,.08)}
.attendance-method-icon{width:48px;height:48px;border-radius:14px;background:#f1f3f8;display:grid;place-items:center;color:#59647c}
.attendance-method-card:has(input:checked) .attendance-method-icon{background:#e9e5ff;color:#5847e8}
.attendance-method-card strong,.attendance-method-card small{display:block}.attendance-method-card small{margin-top:4px;color:#78839a;line-height:1.45}

.dynamic-qr-stage{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:28px;padding:26px;border:1px solid #e7e9f2;border-radius:20px;background:linear-gradient(135deg,#fbfbff,#f4f2ff)}
.dynamic-qr-copy h3{margin:6px 0 8px;font-size:25px}.dynamic-qr-copy p{color:#68748d;max-width:520px}.dynamic-qr-copy small{display:block;margin-top:10px;color:#8a94a8}
.qr-expiry{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid #e7e9f2;color:#59647c}.qr-expiry svg{width:16px}.qr-expiry strong{font-size:18px;color:#4f46e5}
.dynamic-qr-box{position:relative;width:264px;height:264px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 15px 35px rgba(64,53,170,.12);display:grid;place-items:center}
.dynamic-qr-box canvas,.dynamic-qr-box img{max-width:240px!important;max-height:240px!important}.qr-loading{position:absolute;inset:12px;border-radius:14px;background:#fff;display:grid;place-items:center;align-content:center;gap:10px;color:#758099;text-align:center}.qr-loading.d-none{display:none!important}
.rfid-only-stage{min-height:310px;border:1px dashed #cfd5e2;border-radius:20px;background:#fafbfe;display:flex;align-items:center;justify-content:center;gap:22px;text-align:left;padding:30px}.rfid-big-icon{width:88px;height:88px;border-radius:24px;background:#ece9ff;color:#5547e8;display:grid;place-items:center}.rfid-big-icon svg{width:42px;height:42px}.rfid-only-stage h3{margin:5px 0}.rfid-only-stage p{margin:0;color:#758099}

.student-scan-page{display:grid;gap:14px;max-width:620px;margin:0 auto}.student-scan-hero{display:flex;align-items:center;gap:14px;padding:18px;border-radius:20px;background:linear-gradient(135deg,#5848e8,#7c5cf1);color:#fff}.student-scan-hero h2{font-size:21px;margin:3px 0}.student-scan-hero p{margin:0;color:#e9e6ff;font-size:13px}.student-scan-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.15)}.student-scan-icon svg{width:25px;height:25px}
.student-scan-card{background:#fff;border:1px solid #e8ebf2;border-radius:22px;padding:14px;box-shadow:0 12px 30px rgba(31,41,55,.05)}.student-camera-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;margin-bottom:10px}.student-qr-reader{overflow:hidden;border-radius:18px;background:#111827;min-height:330px}.student-qr-reader video{border-radius:18px}.scan-guide{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:11px 12px;border-radius:13px;background:#f6f7fb;color:#68748d;font-size:12px}.scan-guide svg{width:17px;flex:0 0 auto;margin-top:1px}
.student-scan-result{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px;border-radius:16px;background:#ecfdf5;border:1px solid #a7f3d0}.student-scan-result>span{width:42px;height:42px;border-radius:13px;background:#d1fae5;color:#059669;display:grid;place-items:center}.student-scan-result small,.student-scan-result h3,.student-scan-result p{display:block;margin:0}.student-scan-result h3{font-size:15px;margin:2px 0}.student-scan-result p{font-size:12px;color:#64748b}.student-scan-result.error{background:#fef2f2;border-color:#fecaca}.student-scan-result.error>span{background:#fee2e2;color:#dc2626}
.student-scan-disabled{padding:35px 24px;text-align:center;background:#fff;border:1px solid #e8ebf2;border-radius:22px}.student-scan-disabled>svg{width:44px;height:44px;color:#5848e8}.student-scan-disabled h3{margin:12px 0 6px}.student-scan-disabled p{color:#718096;margin:0}

@media(max-width:850px){.attendance-method-options{grid-template-columns:1fr}.dynamic-qr-stage{grid-template-columns:1fr;text-align:center}.dynamic-qr-copy p{margin-inline:auto}.dynamic-qr-box{margin:auto}}
@media(max-width:620px){.dynamic-qr-stage{padding:16px;gap:16px}.dynamic-qr-copy h3{font-size:20px}.dynamic-qr-box{width:230px;height:230px}.dynamic-qr-box canvas,.dynamic-qr-box img{max-width:206px!important;max-height:206px!important}.student-scan-page{margin:-4px}.student-scan-card{padding:10px}.student-qr-reader{min-height:300px}.student-scan-hero{padding:15px}.student-scan-hero h2{font-size:18px}.student-scan-icon{width:46px;height:46px}}

/* v5.1 metode absensi lengkap */
.attendance-method-checks{grid-template-columns:repeat(3,minmax(0,1fr))}
.attendance-method-card input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.attendance-method-card:has(input:checked){border-color:#7c6cf3;background:#faf9ff;box-shadow:0 0 0 3px rgba(105,87,239,.08)}
.attendance-method-card:has(input:checked) .selected-check{opacity:1}
.kiosk-method-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0}
.kiosk-method-grid.two-methods{grid-template-columns:repeat(2,minmax(0,1fr))}
.kiosk-method-card{border:1px solid #e7eaf2;border-radius:18px;padding:16px;background:#fbfcff;min-width:0}
.method-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.method-card-head h3{font-size:17px;margin:3px 0 0}
.compact-scanner{min-height:265px;border-radius:16px;overflow:hidden}
.dynamic-qr-box.compact{min-height:250px;padding:12px}
.dynamic-qr-box.compact canvas,.dynamic-qr-box.compact img{max-width:210px!important;height:auto!important}
.qr-expiry.compact{padding:6px 9px;gap:5px}.qr-expiry.compact strong{font-size:17px}
.rfid-inline-info{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e7eaf2;border-radius:14px;background:#f8fafc;margin:14px 0}
.rfid-inline-info>svg{color:#5b49ea}.rfid-inline-info strong,.rfid-inline-info span{display:block}.rfid-inline-info span{font-size:12px;color:#768199;margin-top:2px}
@media(max-width:1000px){.kiosk-method-grid.two-methods{grid-template-columns:1fr}.attendance-method-checks{grid-template-columns:1fr}}

/* v5.2 absensi GPS siswa */
.attendance-method-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
.gps-settings-panel{padding:16px;border:1px solid #e5e8f1;border-radius:17px;background:#fafbff}
.gps-settings-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:4px}
.gps-settings-head>div{display:grid;gap:3px}.gps-settings-head strong{display:flex;align-items:center;gap:8px}.gps-settings-head strong svg{width:17px;color:#5b49ea}.gps-settings-head small{color:#78839a}
.student-attendance-hub{max-width:640px}
.attendance-method-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:5px;border:1px solid #e7eaf2;border-radius:16px;background:#fff}
.attendance-method-tabs button{border:0;border-radius:12px;background:transparent;color:#6f7990;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600}
.attendance-method-tabs button svg{width:17px;height:17px}.attendance-method-tabs button.active{background:#5b49ea;color:#fff;box-shadow:0 6px 16px rgba(91,73,234,.2)}
.gps-attendance-card{display:grid;justify-items:center;text-align:center;gap:12px;padding:12px 5px 2px}
.gps-orbit{position:relative;width:116px;height:116px;display:grid;place-items:center;margin:4px 0}
.gps-orbit>span{position:relative;z-index:3;width:66px;height:66px;border-radius:23px;background:linear-gradient(135deg,#5b49ea,#8067f5);color:#fff;display:grid;place-items:center;box-shadow:0 15px 30px rgba(91,73,234,.25)}
.gps-orbit>span svg{width:29px;height:29px}.gps-orbit>i{position:absolute;border:1px solid #d9d4ff;border-radius:50%;animation:gpsPulse 2.4s infinite}.gps-orbit>i:nth-child(2){width:88px;height:88px}.gps-orbit>i:nth-child(3){width:116px;height:116px;animation-delay:.6s}
@keyframes gpsPulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
.gps-copy h3{font-size:20px;margin:4px 0}.gps-copy p{margin:0;color:#748096;font-size:13px}
.gps-rule-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px}
.gps-rule-row span{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;background:#f5f6fb;color:#647089;font-size:11px}.gps-rule-row svg{width:14px;height:14px}
.gps-attendance-button{width:100%;min-height:48px;font-weight:700}.gps-progress{width:100%;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;background:#f6f5ff;color:#5b49ea;text-align:left}.gps-progress div{display:grid}.gps-progress small{color:#7d86a0;font-size:11px;margin-top:2px}
@media(max-width:850px){.attendance-method-checks{grid-template-columns:1fr}}
@media(max-width:620px){.gps-settings-head{align-items:flex-start;display:grid}.gps-settings-head .btn{width:100%}.student-attendance-hub{margin:-4px}.attendance-method-tabs{position:sticky;top:72px;z-index:4}.gps-orbit{width:96px;height:96px}.gps-orbit>span{width:58px;height:58px;border-radius:20px}.gps-orbit>i:nth-child(2){width:76px;height:76px}.gps-orbit>i:nth-child(3){width:96px;height:96px}}

/* v5.3 selfie attendance */
.selfie-settings-panel{padding:18px;border:1px solid #e9ebf3;border-radius:16px;background:#fafbfe}
.selfie-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.selfie-attendance-card{margin:14px 0;background:#fff;border:1px solid #e7eaf2;border-radius:20px;padding:16px;box-shadow:0 8px 24px rgba(31,41,55,.04)}
.selfie-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.selfie-card-head h3{font-size:17px;margin:3px 0}.selfie-card-head p{margin:0;color:#748097;font-size:12px}
.selfie-card-head h3 .badge-soft{font-size:9px;padding:4px 8px;vertical-align:middle}
.selfie-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 10px;border-radius:999px;background:#fff7ed;color:#c2410c;font-size:11px;font-weight:700}
.selfie-status.ready{background:#ecfdf5;color:#047857}.selfie-status svg{width:14px;height:14px}
.selfie-capture-layout{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center}
.selfie-stage{width:132px;aspect-ratio:4/5;border-radius:17px;overflow:hidden;background:#eef1f7;position:relative;border:1px solid #e1e5ee}
.selfie-stage video,.selfie-stage img{width:100%;height:100%;object-fit:cover}.selfie-stage video{transform:scaleX(-1)}
.selfie-placeholder{height:100%;display:grid;place-items:center;align-content:center;gap:8px;color:#8b95aa;text-align:center;font-size:11px;padding:10px}.selfie-placeholder svg{width:34px;height:34px}
.selfie-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.selfie-controls small{display:block;width:100%;color:#7a859a;font-size:11px}
.attendance-selfie-evidence{margin-top:10px;padding-top:10px;border-top:1px dashed #e0e4ed}.evidence-label{display:flex;align-items:center;gap:6px;color:#77839a;font-size:11px;margin-bottom:8px}.evidence-label svg{width:14px;height:14px}
.attendance-selfie-evidence>div{display:flex;gap:8px}.attendance-selfie-evidence a{position:relative;width:58px;height:72px;border-radius:11px;overflow:hidden;border:1px solid #dfe4ed;background:#f3f5f9}.attendance-selfie-evidence img{width:100%;height:100%;object-fit:cover}.attendance-selfie-evidence small{position:absolute;inset:auto 3px 3px;background:rgba(17,24,39,.72);color:#fff;border-radius:5px;text-align:center;font-size:9px;padding:2px}
@media(max-width:620px){.selfie-options{grid-template-columns:1fr}.selfie-attendance-card{padding:13px;border-radius:17px}.selfie-card-head{display:grid;gap:8px}.selfie-status{width:max-content}.selfie-capture-layout{grid-template-columns:105px minmax(0,1fr);gap:11px}.selfie-stage{width:105px;border-radius:14px}.selfie-controls .btn{padding:8px 10px;font-size:12px}}

/* v5.4 alur absensi tunggal: selfie lalu QR/GPS */
.attendance-flow-page{display:grid;gap:16px;max-width:620px;margin:0 auto}
.attendance-flow-hero{display:flex;align-items:center;gap:14px;padding:4px 2px 0}
.attendance-flow-hero-icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#5b4cf0,#7467ff);display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px rgba(79,70,229,.22)}
.attendance-flow-hero-icon svg{width:22px;height:22px}.attendance-flow-hero h2{font-size:22px;margin:2px 0}.attendance-flow-hero p{margin:0;color:#77829a;font-size:13px}
.attendance-method-picker{background:#fff;border:1px solid #e7eaf2;border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(31,41,55,.05)}
.attendance-method-picker-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}.attendance-method-picker-head strong,.attendance-method-picker-head span{display:block}.attendance-method-picker-head>div>span{color:#7a8499;font-size:12px;margin-top:3px}.selfie-required-badge{display:inline-flex!important;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#fff7ed;color:#c2410c;font-size:11px}.selfie-required-badge svg{width:13px;height:13px}
.attendance-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.attendance-method-option{border:1px solid #e7eaf2;background:#fbfcff;border-radius:16px;padding:13px;display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;text-align:left;color:#263149}.attendance-method-option.active{border-color:#6858ef;background:#f4f2ff;box-shadow:0 0 0 3px rgba(91,73,234,.08)}.method-option-icon{width:38px;height:38px;border-radius:12px;background:#eef0ff;color:#5b49ea;display:grid;place-items:center}.method-option-icon svg{width:18px;height:18px}.attendance-method-option strong,.attendance-method-option small{display:block}.attendance-method-option strong{font-size:13px}.attendance-method-option small{font-size:10px;color:#7d879c;margin-top:2px;line-height:1.35}.method-option-check{width:16px;height:16px;color:#5b49ea;opacity:0}.attendance-method-option.active .method-option-check{opacity:1}
.attendance-selected-summary{display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px;border-radius:15px;background:#f7f8fc}.selected-summary-icon{width:38px;height:38px;border-radius:12px;background:#fff;color:#5b49ea;display:grid;place-items:center}.selected-summary-icon svg{width:17px;height:17px}.attendance-selected-summary small,.attendance-selected-summary strong,.attendance-selected-summary p{display:block;margin:0}.attendance-selected-summary small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#98a2b8}.attendance-selected-summary strong{font-size:13px;margin-top:1px}.attendance-selected-summary p{font-size:11px;color:#77829a;margin-top:2px}
.attendance-start-button{width:100%;min-height:50px;margin-top:14px;border-radius:14px;font-weight:700}.attendance-privacy-note{display:flex;align-items:center;justify-content:center;gap:6px;color:#8b94a8;font-size:10px;margin:10px 0 0}.attendance-privacy-note svg{width:13px;height:13px}
.attendance-flow-modal .modal-content{border:0;border-radius:22px;overflow:hidden}.attendance-flow-modal-head{padding:16px 18px 12px;border:0}.flow-step-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#8c96aa}.attendance-flow-modal-head h5{font-size:17px;margin-top:2px}.attendance-progress{height:3px;background:#eef0f5}.attendance-progress span{display:block;height:100%;width:50%;background:linear-gradient(90deg,#5b4cf0,#7c6cff);transition:width .25s ease}.attendance-flow-modal-body{padding:16px 18px 20px}.attendance-flow-step{display:grid;gap:14px}.flow-instruction{display:flex;align-items:center;gap:11px}.flow-instruction>span{width:40px;height:40px;border-radius:13px;background:#f0efff;color:#5b49ea;display:grid;place-items:center}.flow-instruction>span svg{width:18px}.flow-instruction strong,.flow-instruction p{display:block;margin:0}.flow-instruction strong{font-size:13px}.flow-instruction p{font-size:11px;color:#7d879c;margin-top:2px}
.single-camera-stage{position:relative;width:100%;min-height:310px;border-radius:18px;background:#111827;overflow:hidden}.selfie-camera-stage video,.selfie-camera-stage img{width:100%;height:360px;object-fit:cover;display:block}.selfie-camera-stage video{transform:scaleX(-1)}.camera-face-guide{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.camera-face-guide span{width:55%;height:68%;border:2px dashed rgba(255,255,255,.72);border-radius:46% 46% 44% 44%}.flow-actions{display:flex;align-items:center;justify-content:center;gap:9px}.flow-main-button{min-height:44px;padding-inline:22px;border-radius:13px;font-weight:700}.flow-camera-toolbar{display:flex;gap:8px}.flow-camera-toolbar .form-select{min-height:40px}.student-qr-reader.single-camera-stage{min-height:330px}.student-qr-reader.single-camera-stage video{border-radius:18px!important}
.gps-flow-visual{width:120px;height:120px;margin:16px auto 0;position:relative;display:grid;place-items:center}.gps-flow-visual>span{width:66px;height:66px;border-radius:50%;background:#edeaff;color:#5b49ea;display:grid;place-items:center;z-index:2}.gps-flow-visual>span svg{width:28px;height:28px}.gps-flow-visual>i{position:absolute;inset:14px;border:1px solid rgba(91,73,234,.25);border-radius:50%;animation:gpsPulse 1.8s infinite}.gps-flow-visual>i:last-child{inset:0;animation-delay:.6s}.gps-flow-copy{text-align:center}.gps-flow-copy strong{font-size:17px}.gps-flow-copy p{font-size:12px;color:#788399;margin:4px 0 0}.gps-rule-row.compact{justify-content:center;gap:8px}.gps-rule-row.compact span{font-size:10px;padding:6px 9px}.gps-progress{margin-top:4px}
#stepResult{text-align:center;justify-items:center;padding:28px 0 12px}.attendance-result-visual{width:78px;height:78px;border-radius:24px;background:#ecfdf5;color:#059669;display:grid;place-items:center}.attendance-result-visual.error{background:#fef2f2;color:#dc2626}.attendance-result-visual svg{width:34px;height:34px}#stepResult h3{font-size:20px;margin:0}#stepResult p{font-size:12px;color:#77829a;max-width:340px;margin:0}
@keyframes gpsPulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.25);opacity:0}}
@media(max-width:575.98px){.attendance-flow-page{margin:-4px -4px 0}.attendance-flow-hero{padding:0 4px}.attendance-flow-hero-icon{width:42px;height:42px;border-radius:14px}.attendance-flow-hero h2{font-size:19px}.attendance-method-picker{padding:14px;border-radius:18px}.attendance-method-grid{grid-template-columns:1fr}.attendance-method-option{padding:11px}.attendance-flow-modal .modal-content{border-radius:0}.attendance-flow-modal-body{padding:14px}.single-camera-stage{min-height:280px}.selfie-camera-stage video,.selfie-camera-stage img{height:min(58vh,430px)}.student-qr-reader.single-camera-stage{min-height:300px}.attendance-method-picker-head{align-items:center}.selfie-required-badge{white-space:nowrap}}

/* v5.5 pembatasan waktu absen + kegiatan khusus */
.activity-card{grid-template-columns:48px minmax(0,1fr) auto!important;gap:14px!important;padding:14px 16px!important;align-items:center}
.activity-card-body{min-width:0;display:grid;gap:9px}.activity-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.activity-card-head .card-main{min-width:0}.activity-meta{display:flex;flex-wrap:wrap;gap:7px 9px}.activity-meta span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #eceff5;border-radius:999px;background:#fbfcfe;font-size:12px;color:#536079;white-space:nowrap}.activity-meta b{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#929cb0}.activity-participant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.activity-participant{display:grid;grid-template-columns:auto 38px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:10px 12px;border:1px solid #e6eaf2;border-radius:13px;cursor:pointer;background:#fff}.activity-participant input{display:none}.activity-participant span strong,.activity-participant span small{display:block}.activity-participant span small{color:#77839b}.activity-participant>i{opacity:0;color:#4f46e5}.activity-participant.selected{border-color:#7768f2;background:#f7f5ff}.activity-participant.selected>i{opacity:1}.activity-attendance-list{display:grid;gap:8px}.activity-attendance-item{display:grid;grid-template-columns:38px minmax(160px,1fr) auto 50px;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e8ebf2;border-radius:13px}.activity-attendance-item>div:nth-child(2) strong,.activity-attendance-item>div:nth-child(2) small{display:block}.activity-attendance-item small{color:#768198}.activity-status-buttons{display:flex;gap:5px;flex-wrap:wrap}.activity-status-buttons .btn{text-transform:capitalize;border-radius:999px}.activity-time{text-align:right;font-weight:700;color:#59647d}.activity-scan-box{padding:13px;border:1px solid #e7eaf2;border-radius:14px;background:#fafbfe}.activity-scan-box small{display:block;margin-top:6px;color:#7b859a}
@media(max-width:850px){.activity-card{grid-template-columns:42px minmax(0,1fr)!important;align-items:start}.activity-card>.list-actions{grid-column:1/3;justify-content:flex-end}.activity-participant-grid{grid-template-columns:1fr}.activity-attendance-item{grid-template-columns:36px minmax(0,1fr) auto}.activity-status-buttons{grid-column:2/4}.activity-time{grid-column:3;grid-row:1}.activity-meta{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}}
@media(max-width:520px){.activity-card{padding:12px!important}.activity-card-head{display:grid;gap:6px}.activity-card-head .badge-soft{width:max-content}.activity-attendance-item{grid-template-columns:34px minmax(0,1fr)}.activity-time{grid-column:2;grid-row:2;text-align:left}.activity-status-buttons{grid-column:1/3}.activity-status-buttons .btn{flex:1}.activity-participant{grid-template-columns:auto 34px minmax(0,1fr) 16px}}


/* v5.6 peserta kegiatan interaktif + card kegiatan compact */
.activity-card-compact{grid-template-columns:46px minmax(0,1fr) auto!important;gap:14px!important;padding:14px 16px!important;align-items:center}
.activity-card-compact .activity-avatar{width:46px;height:46px;border-radius:14px}
.activity-card-compact .activity-card-body{min-width:0;display:grid;gap:9px}
.activity-card-compact .activity-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.activity-card-compact .card-main{min-width:0}
.activity-card-compact .card-main strong{display:block;font-size:15px}
.activity-card-compact .card-main span{display:block;margin-top:2px;font-size:12px;color:#6e7890;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-meta-compact{display:flex;gap:7px 9px;flex-wrap:wrap}
.activity-meta-compact span{display:inline-flex!important;align-items:center;gap:6px!important;padding:5px 9px!important;border:1px solid #edf0f5!important;border-radius:999px!important;background:#fbfcfe!important;font-size:11px!important;color:#536079!important}
.activity-meta-compact span b{font-size:9px!important;color:#929bb0!important;margin:0!important}
.activity-card-compact .activity-actions{display:flex;align-items:center;gap:6px;min-width:max-content}
.activity-card-compact .activity-actions>.list-actions{display:contents}

.activity-member-toolbar{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1.2fr) auto;gap:10px;align-items:center;margin-bottom:14px}
.activity-member-search{position:relative}.activity-member-search>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;color:#8b95aa;z-index:2}.activity-member-search input{padding-left:40px}
.activity-member-actions{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
.activity-member-transfer{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:12px;align-items:stretch}
.activity-member-column{border:1px solid #e5e9f1;border-radius:16px;background:#fbfcfe;overflow:hidden;min-height:440px;display:flex;flex-direction:column}
.activity-member-selected{background:#faf9ff;border-color:#ded9ff}
.activity-member-column-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid #e8ebf2;background:#fff}
.activity-member-column-head strong,.activity-member-column-head small{display:block}.activity-member-column-head small{color:#7c879d;font-size:11px;margin-top:2px}
.activity-member-dropzone{padding:10px;display:grid;align-content:start;gap:7px;min-height:360px;max-height:56vh;overflow:auto;transition:.2s}
.activity-member-dropzone.drag-over{background:#eeeaff;box-shadow:inset 0 0 0 2px #6554e8}
.activity-member-hint{display:grid;place-content:center;text-align:center;color:#8b94aa;gap:5px}.activity-member-hint svg{margin:auto;width:20px}.activity-member-hint small{font-size:10px}
.activity-transfer-card{display:grid;grid-template-columns:18px 34px minmax(0,1fr) 30px;gap:8px;align-items:center;padding:9px 10px;border:1px solid #e7eaf1;border-radius:12px;background:#fff;cursor:grab;transition:.18s}
.activity-transfer-card:hover{border-color:#cfc8ff;box-shadow:0 5px 14px rgba(79,70,229,.07);transform:translateY(-1px)}
.activity-transfer-card.dragging{opacity:.45}.activity-drag-handle{color:#a1a9ba}.activity-drag-handle svg{width:15px}
.activity-transfer-info{min-width:0}.activity-transfer-info strong,.activity-transfer-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-transfer-info strong{font-size:12px;color:#202a3e}.activity-transfer-info small{font-size:10px;color:#7c879d;margin-top:2px}
.activity-transfer-btn{width:29px;height:29px;border:0;border-radius:9px;background:#f1efff;color:#5a49e5;display:grid;place-items:center}.activity-transfer-btn:hover{background:#5a49e5;color:#fff}.activity-transfer-btn svg{width:14px}
.activity-member-note{margin-top:12px;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:#f7f8fc;color:#6f7a91;font-size:11px}.activity-member-note svg{width:15px;flex:0 0 auto;margin-top:1px}

@media(max-width:980px){.activity-member-toolbar{grid-template-columns:1fr 1fr}.activity-member-actions{grid-column:1/-1;justify-content:flex-start}.activity-member-transfer{grid-template-columns:1fr}.activity-member-hint{display:none}.activity-member-column{min-height:300px}.activity-member-dropzone{max-height:38vh}.activity-card-compact{grid-template-columns:42px minmax(0,1fr)!important}.activity-card-compact .activity-actions{grid-column:1/3;justify-content:flex-end}}
@media(max-width:620px){.activity-member-toolbar{grid-template-columns:1fr}.activity-member-actions{display:grid;grid-template-columns:1fr 1fr}.activity-member-actions .btn{width:100%}.activity-member-column{min-height:260px}.activity-member-dropzone{max-height:32vh}.activity-card-compact{padding:12px!important;gap:10px!important}.activity-card-compact .activity-card-head{display:grid;gap:6px}.activity-card-compact .activity-card-head .badge-soft{width:max-content}.activity-meta-compact{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.activity-meta-compact span{flex:0 0 auto}.activity-transfer-card{grid-template-columns:16px 32px minmax(0,1fr) 30px}}

/* v5.7 dashboard live kehadiran publik */
.live-attendance-body{margin:0;background:#0b1020;color:#f8fafc;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.live-screen{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 15% 10%,rgba(79,70,229,.18),transparent 28%),radial-gradient(circle at 85% 20%,rgba(14,165,233,.12),transparent 28%),#0b1020}.live-header{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,13,27,.75);backdrop-filter:blur(18px)}.live-brand{display:flex;align-items:center;gap:14px}.live-brand-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#6d5dfc,#3b82f6);box-shadow:0 12px 30px rgba(79,70,229,.3)}.live-brand-icon svg{width:25px;height:25px}.live-brand small{display:block;color:#97a3bd;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.live-brand h1{margin:2px 0 0;font-size:25px}.live-header-right{display:flex;align-items:center;gap:18px}.live-sync{display:flex;align-items:center;gap:8px;color:#aab4ca;font-size:12px}.live-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.12);animation:livePulse 1.8s infinite}.live-clock{text-align:right}.live-clock strong,.live-clock span{display:block}.live-clock strong{font-size:27px;letter-spacing:.04em}.live-clock span{color:#96a2ba;font-size:11px}.live-icon-button{width:42px;height:42px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center}.live-main{padding:18px 24px;min-height:0;display:grid;gap:16px}.live-stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.live-stat{min-width:0;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(255,255,255,.055);display:flex;align-items:center;gap:11px}.live-stat>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#aeb8ff}.live-stat small,.live-stat strong{display:block}.live-stat small{font-size:10px;color:#98a4bc;text-transform:uppercase;letter-spacing:.05em}.live-stat strong{font-size:25px;line-height:1.1;margin-top:2px}.live-stat-hadir>span{color:#34d399}.live-stat-terlambat>span{color:#fbbf24}.live-stat-sakit>span{color:#60a5fa}.live-stat-izin>span{color:#a78bfa}.live-stat-alpa>span{color:#fb7185}.live-stat-belum_tercatat>span{color:#94a3b8}.live-grid{display:grid;grid-template-columns:1.5fr 1fr .82fr;gap:14px;min-height:0}.live-panel{min-height:0;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.05);padding:17px;display:flex;flex-direction:column;overflow:hidden}.live-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.live-panel-head small{display:block;color:#7f8ca7;font-size:9px;letter-spacing:.12em}.live-panel-head h2{font-size:17px;margin:2px 0 0}.live-panel-head>svg{color:#7f8cff}.live-chip{padding:6px 10px;border-radius:999px;background:rgba(99,102,241,.15);color:#b8b9ff;font-size:11px}.live-class-list,.live-recent-list,.live-late-list{overflow:auto;min-height:0;display:grid;align-content:start;gap:8px;padding-right:4px}.live-class-row{padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.055)}.live-class-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.live-class-top strong,.live-class-top span{display:block}.live-class-top strong{font-size:13px}.live-class-top span{font-size:10px;color:#8793aa;margin-top:2px}.live-class-top b{font-size:13px;color:#c4c9ff}.live-progress{height:6px;border-radius:999px;background:rgba(255,255,255,.07);margin:8px 0 5px;overflow:hidden}.live-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6d5dfc,#22c55e)}.live-class-row>small{font-size:9px;color:#7d89a1}.live-recent-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05)}.live-recent-row.is-new{border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.08)}.live-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#302d73;color:#d9d7ff;font-weight:800}.live-recent-row strong,.live-recent-row small{display:block}.live-recent-row strong{font-size:12px}.live-recent-row small{font-size:9px;color:#8591a8;margin-top:2px}.live-action{font-size:9px;padding:5px 8px;border-radius:999px}.live-action b{font-size:11px;margin-left:3px}.live-action.is-in{background:rgba(34,197,94,.12);color:#5ee59a}.live-action.is-out{background:rgba(59,130,246,.12);color:#86b7ff}.live-late-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border-radius:13px;background:rgba(255,255,255,.045)}.live-late-row>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(251,191,36,.13);color:#fbbf24;font-size:11px;font-weight:800}.live-late-row strong,.live-late-row small{display:block}.live-late-row strong{font-size:11px}.live-late-row small{font-size:9px;color:#8692aa}.live-late-row>b{color:#fbbf24;font-size:11px}.live-empty{min-height:110px;display:grid;place-items:center;text-align:center;color:#738098;font-size:12px}.live-empty.success{color:#5fd79a;gap:6px}.live-footer{display:flex;justify-content:space-between;gap:16px;padding:10px 26px;border-top:1px solid rgba(255,255,255,.07);color:#6f7b92;font-size:10px}.live-class-list::-webkit-scrollbar,.live-recent-list::-webkit-scrollbar,.live-late-list::-webkit-scrollbar{width:5px}.live-class-list::-webkit-scrollbar-thumb,.live-recent-list::-webkit-scrollbar-thumb,.live-late-list::-webkit-scrollbar-thumb{background:#343c52;border-radius:999px}@keyframes livePulse{50%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
@media(max-width:1100px){.live-stats{grid-template-columns:repeat(4,1fr)}.live-grid{grid-template-columns:1.3fr 1fr}.live-panel-late{grid-column:1/-1;max-height:190px}.live-late-list{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.live-attendance-body{overflow:auto}.live-screen{min-height:100vh}.live-header{padding:14px;align-items:flex-start}.live-brand h1{font-size:18px}.live-sync,.live-clock span{display:none}.live-clock strong{font-size:18px}.live-header-right{gap:8px}.live-main{padding:12px}.live-stats{grid-template-columns:repeat(2,1fr)}.live-grid{grid-template-columns:1fr}.live-panel-late{grid-column:auto;max-height:none}.live-late-list{grid-template-columns:1fr}.live-footer{padding:10px 14px}.live-footer span:first-child{display:none}}


/* v5.8 sidebar sederhana + collapse icon-only */
:root{--sidebar-width:255px;--sidebar-collapsed-width:78px}
.sidebar{width:var(--sidebar-width);padding:18px 14px;display:flex;flex-direction:column;transition:width .24s ease,padding .24s ease;overflow-x:hidden}
.main{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));transition:margin-left .24s ease,width .24s ease}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.sidebar .brand{padding:0 6px;margin:0;min-width:0;text-decoration:none;color:#fff;flex:1}
.sidebar .brand-copy{min-width:0;white-space:nowrap;transition:opacity .16s ease,width .2s ease}
.sidebar-collapse-btn{width:34px;height:34px;border:0;border-radius:10px;background:#20263c;color:#b9c1d3;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.2s}
.sidebar-collapse-btn:hover{background:#2b334d;color:#fff}
.sidebar-collapse-btn svg{width:16px;height:16px}
.sidebar-nav{display:grid;gap:5px;flex:1;align-content:start}
.sidebar-nav .nav-item,.nav-group-toggle{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#c8cedd;text-decoration:none;text-align:left;transition:.18s;position:relative}
.sidebar-nav .nav-item:hover,.nav-group-toggle:hover,.sidebar-nav .nav-item.active,.nav-group.open>.nav-group-toggle{background:#20263c;color:#fff}
.sidebar-nav .nav-item.active:before,.nav-group.open>.nav-group-toggle:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 4px 4px 0;background:#8b7cff}
.nav-icon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}
.nav-icon svg,.nav-submenu svg{width:18px;height:18px}
.nav-text{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden}
.nav-chevron{width:16px!important;height:16px!important;margin-left:auto;transition:transform .2s;flex:0 0 auto}
.nav-group.open>.nav-group-toggle .nav-chevron{transform:rotate(180deg)}
.nav-submenu{display:grid;gap:3px;max-height:0;overflow:hidden;opacity:0;padding:0 0 0 18px;transition:max-height .25s ease,opacity .2s ease,padding .2s ease}
.nav-group.open>.nav-submenu{max-height:520px;opacity:1;padding-top:5px;padding-bottom:5px}
.nav-submenu a{display:flex;align-items:center;gap:10px;padding:9px 12px;color:#9ca6ba;text-decoration:none;border-radius:10px;font-size:13px;white-space:nowrap;transition:.18s}
.nav-submenu a:hover,.nav-submenu a.active{background:#1b2033;color:#fff}
.nav-submenu a.active{color:#c8c1ff}
.sidebar-footer{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-profile{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;text-decoration:none;color:#fff;min-width:0}
.sidebar-profile:hover{background:#20263c;color:#fff}
.sidebar-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:#ecebff;color:#4f46e5;font-weight:800}
.sidebar-profile-copy{min-width:0;white-space:nowrap;overflow:hidden}.sidebar-profile-copy strong,.sidebar-profile-copy small{display:block;overflow:hidden;text-overflow:ellipsis}.sidebar-profile-copy strong{font-size:12px}.sidebar-profile-copy small{font-size:10px;color:#8f99ae;margin-top:2px}
.sidebar-backdrop{display:none}

body.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width);padding-left:12px;padding-right:12px}
body.sidebar-collapsed .main{margin-left:var(--sidebar-collapsed-width);width:calc(100% - var(--sidebar-collapsed-width))}
body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .nav-text,body.sidebar-collapsed .nav-chevron,body.sidebar-collapsed .sidebar-profile-copy{opacity:0;width:0;pointer-events:none}
body.sidebar-collapsed .sidebar-head{justify-content:center;display:grid;gap:10px}
body.sidebar-collapsed .sidebar .brand{padding:0;justify-content:center;flex:0 0 auto}
body.sidebar-collapsed .brand-mark{width:42px;height:42px;flex:0 0 42px}
body.sidebar-collapsed .sidebar-collapse-btn{margin:0 auto}
body.sidebar-collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}
body.sidebar-collapsed .sidebar-nav .nav-item,body.sidebar-collapsed .nav-group-toggle{justify-content:center;padding:11px 8px;gap:0}
body.sidebar-collapsed .nav-group{position:relative}
body.sidebar-collapsed .nav-submenu{display:none!important}
body.sidebar-collapsed .sidebar-profile{justify-content:center;padding:7px}
body.sidebar-collapsed .sidebar-nav .nav-item.active:before,body.sidebar-collapsed .nav-group.open>.nav-group-toggle:before{left:-12px}
body.sidebar-collapsed .tooltip{display:block}

@media(min-width:992px){
  body:not(.sidebar-collapsed) .sidebar [data-bs-toggle="tooltip"]+.tooltip{display:none!important}
}
@media(max-width:991.98px){
  .sidebar{width:270px!important;transform:translateX(-105%);box-shadow:20px 0 50px rgba(15,23,42,.22);transition:transform .24s ease}
  .sidebar.show{transform:translateX(0)}
  .main,body.sidebar-collapsed .main{margin-left:0!important;width:100%!important}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);z-index:1035}
  body.sidebar-mobile-open .sidebar-backdrop{display:block}
  .sidebar .brand-copy,.sidebar .nav-text,.sidebar .nav-chevron,.sidebar .sidebar-profile-copy{opacity:1!important;width:auto!important;pointer-events:auto!important}
  .sidebar-head{display:flex!important;justify-content:space-between!important}
  .sidebar-nav .nav-item,.nav-group-toggle{justify-content:flex-start!important;padding:11px 12px!important;gap:12px!important}
  .nav-submenu{display:grid!important}
}

/* v5.9 matriks jadwal piket interaktif */
.duty-matrix-head{align-items:flex-end}.duty-year-filter{min-width:230px}.duty-year-filter label{display:block;margin-bottom:6px}.duty-matrix-info{display:flex;flex-wrap:wrap;gap:10px 18px;margin:-4px 0 18px;color:#68748d;font-size:12px}.duty-matrix-info span{display:inline-flex;align-items:center;gap:6px}.duty-matrix-info svg{width:15px;height:15px;color:#5b49ea}.matrix-loading{display:flex;align-items:center;justify-content:center;gap:9px;min-height:210px;color:#7b8499}.duty-matrix-wrap{overflow-x:auto;padding-bottom:7px}.duty-matrix{min-width:1050px;border:1px solid #e8ebf2;border-radius:16px;overflow:hidden;background:#fff}.duty-matrix-row{display:grid;border-bottom:1px solid #edf0f5}.duty-matrix-row:last-child{border-bottom:0}.duty-matrix-row>*{border-right:1px solid #edf0f5}.duty-matrix-row>*:last-child{border-right:0}.duty-matrix-header{background:#f8f9fd;position:sticky;top:0;z-index:2}.duty-matrix-corner,.duty-day-header,.duty-shift-label{min-height:64px;padding:12px 14px}.duty-matrix-corner{display:flex;align-items:center;gap:8px;color:#657089;font-size:12px;font-weight:700}.duty-matrix-corner svg{width:17px}.duty-day-header{display:grid;place-content:center;text-align:center}.duty-day-header strong{font-size:13px}.duty-day-header small{color:#939cb0;font-size:10px;margin-top:2px}.duty-shift-label{display:flex;align-items:center;gap:10px;background:#fbfcfe}.duty-shift-label .shift-dot{width:9px;height:9px;border-radius:50%;background:#5b49ea;box-shadow:0 0 0 5px #efedff}.duty-shift-label strong,.duty-shift-label small{display:block}.duty-shift-label strong{font-size:13px}.duty-shift-label small{color:#7d879b;font-size:11px;margin-top:2px}.duty-cell{border:0;background:#fff;min-height:112px;padding:10px;text-align:left;transition:.18s ease;display:flex;flex-direction:column;justify-content:space-between;color:#263149}.duty-cell:hover{background:#f8f7ff;box-shadow:inset 0 0 0 2px rgba(91,73,234,.12)}.duty-cell.has-duty{background:#fcfcff}.duty-cell-empty{height:100%;display:grid;place-content:center;justify-items:center;gap:7px;color:#a1a9b9}.duty-cell-empty svg{width:22px;height:22px;padding:4px;border-radius:8px;background:#f0eeff;color:#5b49ea}.duty-cell-empty span{font-size:11px}.duty-cell-people{display:grid;gap:5px}.duty-person-chip{display:flex;align-items:center;gap:6px;min-width:0}.duty-person-chip b{width:25px;height:25px;border-radius:8px;background:#eceaff;color:#5b49ea;display:grid;place-items:center;font-size:9px;flex:0 0 auto}.duty-person-chip span{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.duty-more{font-size:10px;color:#5b49ea;margin-left:31px}.duty-cell-foot{display:flex;align-items:center;gap:7px;color:#8993a8;font-size:10px;border-top:1px dashed #e7eaf1;padding-top:7px;margin-top:7px}.duty-cell-foot small{color:#dc7b2a}.duty-cell-foot svg{margin-left:auto;width:13px;height:13px}.duty-cell-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.duty-cell-summary>div{border:1px solid #e8ebf2;background:#fafbfe;border-radius:13px;padding:10px 12px}.duty-cell-summary span,.duty-cell-summary strong{display:block}.duty-cell-summary span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#929cb0;font-weight:700}.duty-cell-summary strong{font-size:13px;margin-top:3px}.duty-teacher-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}.duty-teacher-search{flex:1}.duty-select-actions{display:flex;gap:7px}.duty-selected-info{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:10px}.duty-teacher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:330px;overflow:auto;padding:2px}.duty-teacher-card{border:1px solid #e7eaf1;background:#fff;border-radius:13px;padding:10px;display:flex;align-items:center;gap:10px;text-align:left;transition:.16s ease;min-width:0}.duty-teacher-card:hover{border-color:#c9c3ff;background:#faf9ff}.duty-teacher-card.selected{border-color:#6655ed;background:#f4f2ff;box-shadow:0 0 0 2px rgba(91,73,234,.08)}.teacher-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f0efff;color:#5b49ea;font-size:11px;font-weight:800;flex:0 0 auto}.teacher-info{min-width:0;flex:1}.teacher-info strong,.teacher-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teacher-info strong{font-size:13px}.teacher-info small{font-size:10px;color:#8a94a9;margin-top:2px}.teacher-check{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#f1f3f7;color:#b1b8c6;flex:0 0 auto}.teacher-check svg{width:14px;height:14px}.duty-teacher-card.selected .teacher-check{background:#5b49ea;color:#fff}.duty-advanced-toggle{width:100%;border:0;background:#f7f8fc;border-radius:12px;padding:11px 13px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;color:#59657e}.duty-advanced-toggle span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.duty-advanced-toggle svg{width:15px}.duty-advanced-toggle .toggle-chevron{transition:.2s}.duty-advanced-toggle.open .toggle-chevron{transform:rotate(180deg)}.duty-advanced{padding-top:13px}.duty-modal-footer{align-items:center}.list-empty.compact{min-height:130px;grid-column:1/-1}
@media(max-width:767px){.duty-matrix-head{align-items:stretch}.duty-year-filter{min-width:0;width:100%}.duty-matrix-info{display:grid;gap:7px}.duty-cell-summary{grid-template-columns:repeat(3,1fr)}.duty-cell-summary>div{padding:8px}.duty-teacher-toolbar{display:grid}.duty-select-actions{display:grid;grid-template-columns:1fr 1fr}.duty-teacher-grid{grid-template-columns:1fr;max-height:310px}.duty-selected-info{display:grid;gap:3px}.duty-modal-footer{display:grid;grid-template-columns:1fr 1fr}.duty-modal-footer .me-auto{grid-column:1/-1;margin:0!important}.duty-modal-footer .btn{width:100%}}

/* v5.11 - siswa belum hadir & rekap bulanan matriks */
.attendance-mini-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.attendance-mini-summary article{background:#fff;border:1px solid var(--border,#e8edf3);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column}.attendance-mini-summary strong{font-size:1.65rem;line-height:1}.attendance-mini-summary span{font-size:.82rem;color:#748094;margin-top:6px}.attendance-mini-summary .success{background:#f0fdf4;border-color:#bbf7d0}.attendance-mini-summary .success strong{color:#15803d}.attendance-mini-summary .danger{background:#fff7ed;border-color:#fed7aa}.attendance-mini-summary .danger strong{color:#c2410c}
.missing-attendance-list{display:grid;gap:9px}.missing-student{display:grid;grid-template-columns:minmax(260px,1.4fr) 150px minmax(180px,1fr) minmax(150px,.8fr);align-items:center;gap:12px;border:1px solid #e8edf3;border-radius:15px;padding:10px 12px;background:#fff;transition:.18s}.missing-student:hover{border-color:#bfd3ff;box-shadow:0 8px 24px rgba(34,72,135,.07)}.missing-check{display:flex;align-items:center;gap:11px;min-width:0}.missing-check .form-check-input{flex:0 0 auto}.missing-main{min-width:0}.missing-main strong,.missing-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.missing-main span,.missing-parent{font-size:.78rem;color:#758195}.missing-parent{display:flex;align-items:center;gap:5px}.missing-parent svg{width:14px;height:14px}.missing-student .card-avatar{width:38px;height:38px;font-size:.86rem}
.matrix-legend{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:.72rem;color:#68758a;max-width:640px}.matrix-legend span{width:23px;height:23px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;margin-left:4px}.matrix-card{padding:0;overflow:hidden}.matrix-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid #e9edf3}.matrix-toolbar>div:first-child{display:flex;flex-direction:column}.matrix-toolbar span{font-size:.78rem;color:#788498}.matrix-toolbar .list-search{width:min(320px,100%)}.attendance-matrix-wrap{overflow:auto;max-height:calc(100vh - 285px);min-height:260px}.attendance-matrix{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:.76rem}.attendance-matrix th,.attendance-matrix td{height:43px;min-width:43px;padding:5px;text-align:center;border-right:1px solid #edf0f4;border-bottom:1px solid #edf0f4;background:#fff}.attendance-matrix thead th{position:sticky;top:0;z-index:5;background:#f8fafc;font-weight:700}.attendance-matrix thead th span,.attendance-matrix thead th small{display:block}.attendance-matrix thead th small{font-size:.61rem;color:#8a95a7}.attendance-matrix th.holiday{background:#f3f4f6;color:#9ca3af}.attendance-matrix .sticky-no{position:sticky;left:0;z-index:4;min-width:48px;width:48px;background:#fff}.attendance-matrix .sticky-name{position:sticky;left:48px;z-index:4;min-width:220px;width:220px;text-align:left;padding:7px 12px;background:#fff;box-shadow:5px 0 8px rgba(28,42,66,.04)}.attendance-matrix thead .sticky-no,.attendance-matrix thead .sticky-name{z-index:8;background:#f8fafc}.attendance-matrix .sticky-name strong,.attendance-matrix .sticky-name small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attendance-matrix .sticky-name small{color:#8490a1;font-size:.68rem}.matrix-status{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:800}.st-hadir{background:#dcfce7;color:#15803d}.st-terlambat{background:#fef3c7;color:#b45309}.st-sakit{background:#dbeafe;color:#1d4ed8}.st-izin{background:#ede9fe;color:#6d28d9}.st-alpa{background:#fee2e2;color:#b91c1c}.st-dispensasi{background:#cffafe;color:#0e7490}.st-pulang_awal{background:#ffedd5;color:#c2410c}.st-belum{background:#f1f5f9;color:#64748b}.st-libur{background:#f3f4f6;color:#c0c5ce}.attendance-matrix .summary-col,.attendance-matrix .summary-cell{min-width:39px;background:#fafbfc;font-weight:800}.attendance-matrix tbody tr:hover td{background:#fbfdff}.attendance-matrix tbody tr:hover .sticky-no,.attendance-matrix tbody tr:hover .sticky-name{background:#fbfdff}
@media(max-width:900px){.missing-student{grid-template-columns:1fr 130px}.missing-parent{display:none}.missing-student .keterangan-siswa{grid-column:1/-1}.attendance-mini-summary{grid-template-columns:repeat(3,1fr)}.matrix-toolbar{align-items:stretch;flex-direction:column}.matrix-toolbar .list-search{width:100%}.attendance-matrix-wrap{max-height:calc(100vh - 350px)}}
@media(max-width:575px){.attendance-mini-summary article{padding:12px}.attendance-mini-summary strong{font-size:1.3rem}.missing-student{grid-template-columns:1fr}.missing-student .status-siswa,.missing-student .keterangan-siswa{grid-column:auto}.attendance-matrix .sticky-name{min-width:165px;width:165px}.matrix-legend{display:none}}
/* v5.13 Dashboard Wali Kelas & Analisis Risiko */
.wc-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 28px;border-radius:24px;background:linear-gradient(135deg,#111827,#1e3a8a);color:#fff;box-shadow:0 18px 45px rgba(15,23,42,.16)}.wc-hero h2{margin:4px 0 5px;font-size:30px}.wc-hero p{margin:0;color:rgba(255,255,255,.72)}.wc-class-switch{min-width:230px}.wc-class-switch label{display:block;font-size:12px;margin-bottom:6px;color:rgba(255,255,255,.7)}.wc-class-switch .form-select{border:0;background-color:rgba(255,255,255,.96)}
.wc-stats,.risk-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:18px}.wc-stat,.risk-summary-card{display:flex;align-items:center;gap:13px;padding:17px;background:#fff;border:1px solid #e8edf5;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.wc-stat small,.risk-summary-card small{display:block;color:#718096;font-size:12px}.wc-stat strong,.risk-summary-card strong{display:block;font-size:25px;line-height:1.1;color:#172033}.stat-icon.purple{background:#f3e8ff;color:#7e22ce}
.wc-student-list>div{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #edf1f6}.wc-student-list>div:last-child{border-bottom:0}.wc-student-list>div>span:nth-child(2){min-width:0;flex:1}.wc-student-list strong,.wc-student-list small{display:block}.wc-student-list small{font-size:12px;color:#8490a3}.avatar-mini{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eef4ff;color:#2563eb;font-weight:800}.badge-soft.danger{background:#fee2e2;color:#b91c1c}.mini-empty{display:flex;min-height:170px;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#8190a5}.mini-empty svg{width:36px;height:36px;margin-bottom:10px;color:#22c55e}.mini-empty strong,.mini-empty span{display:block}.mini-empty span{font-size:13px;margin-top:3px}
.risk-mini-list a{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #edf1f6;color:inherit;text-decoration:none}.risk-mini-list a:last-child{border-bottom:0}.risk-mini-list a>span:nth-child(2){min-width:0;flex:1}.risk-mini-list strong,.risk-mini-list small{display:block}.risk-mini-list small{font-size:11px;color:#7b8799;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.risk-mini-list b{font-size:13px}.risk-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}.risk-dot.aman{background:#22c55e}.risk-dot.perhatian{background:#f59e0b}.risk-dot.pembinaan{background:#f97316}.risk-dot.kritis{background:#ef4444}
.risk-toolbar{display:flex;justify-content:space-between;align-items:end;gap:20px}.risk-toolbar h2{margin:0 0 5px}.risk-toolbar p{margin:0;color:#7b8799}.risk-toolbar .toolbar-actions{display:flex;gap:10px;align-items:center}.risk-toolbar .form-select{min-width:220px}.risk-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.risk-summary-card>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}.risk-summary-card.aman>span{background:#dcfce7;color:#15803d}.risk-summary-card.perhatian>span{background:#fef3c7;color:#b45309}.risk-summary-card.pembinaan>span{background:#ffedd5;color:#c2410c}.risk-summary-card.kritis>span{background:#fee2e2;color:#b91c1c}.risk-legend{display:flex;gap:13px;flex-wrap:wrap;font-size:12px;color:#667085}.risk-legend span{display:flex;align-items:center;gap:5px}.risk-info{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;border-radius:14px;background:#f8fafc;color:#64748b;font-size:13px}.risk-info svg{width:17px;flex:none}.risk-table-wrap{max-height:66vh}.risk-table thead th{position:sticky;top:0;background:#f8fafc;z-index:2;white-space:nowrap}.risk-student{display:flex;align-items:center;gap:10px;min-width:190px}.risk-student>span{width:36px;height:36px;border-radius:12px;background:#eef4ff;color:#2563eb;display:grid;place-items:center;font-weight:800}.risk-student strong,.risk-student small{display:block}.risk-student small{font-size:12px;color:#8490a3}.risk-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;font-size:12px;white-space:nowrap}.risk-badge.aman{background:#dcfce7;color:#166534}.risk-badge.perhatian{background:#fef3c7;color:#92400e}.risk-badge.pembinaan{background:#ffedd5;color:#9a3412}.risk-badge.kritis{background:#fee2e2;color:#991b1b}.risk-badge b{margin-left:2px}.risk-progress{display:flex;align-items:center;gap:8px;min-width:120px}.risk-progress>div{height:7px;min-width:70px;flex:1;background:#e9eef5;border-radius:99px;overflow:hidden}.risk-progress>div span{display:block;height:100%;background:#3b82f6;border-radius:99px}.risk-progress b{font-size:12px}.risk-reason{font-size:12px;color:#5f6c7e;display:block;min-width:180px}.attendance-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#eef2f7}.attendance-pill.hadir{background:#dcfce7;color:#166534}.attendance-pill.terlambat{background:#fef3c7;color:#92400e}.attendance-pill.sakit{background:#dbeafe;color:#1d4ed8}.attendance-pill.izin{background:#ede9fe;color:#6d28d9}.attendance-pill.alpa{background:#fee2e2;color:#991b1b}
@media(max-width:1200px){.wc-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.wc-hero,.risk-toolbar{align-items:stretch;flex-direction:column}.wc-class-switch{width:100%}.wc-stats,.risk-summary-grid{grid-template-columns:repeat(2,1fr)}.risk-toolbar .toolbar-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.risk-toolbar .toolbar-actions .btn{grid-column:1/-1}.risk-toolbar .form-select{min-width:0}.risk-legend{display:none}}@media(max-width:480px){.wc-stats{grid-template-columns:1fr 1fr}.wc-stat{padding:13px}.wc-stat strong{font-size:21px}}

/* v5.14 — konteks tahun pelajaran global */
.academic-year-context{display:flex;align-items:center;gap:.55rem;min-width:220px;margin-left:auto;margin-right:.65rem;padding:.38rem .55rem;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:#fff}
.academic-year-context svg{width:16px;height:16px;color:var(--primary,#2563eb);flex:0 0 auto}
.academic-year-context .form-select{border:0;box-shadow:none;padding-top:.2rem;padding-bottom:.2rem;font-weight:600;background-color:transparent}
@media(max-width:991.98px){.academic-year-context{min-width:0;max-width:180px;margin-left:auto}.academic-year-context .form-select{font-size:.78rem}}
@media(max-width:575.98px){.academic-year-context{max-width:135px}.academic-year-context svg{display:none}.academic-year-context .form-select{white-space:nowrap;text-overflow:ellipsis}}

/* v5.15 - Kenaikan kelas interaktif */
.promotion-year-strip{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 18px;margin-bottom:16px;border:1px solid var(--border-color,#e9edf3);border-radius:16px;background:linear-gradient(135deg,#f8fbff,#f7f9fc)}
.promotion-year-strip>div{display:flex;flex-direction:column;text-align:center;min-width:150px}.promotion-year-strip small{color:#7c8798;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}.promotion-year-strip strong{font-size:1.05rem;color:#1d2a3a}.promotion-year-strip svg{width:20px;color:var(--bs-primary)}
.promotion-info,.promotion-conflict{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:13px;margin-bottom:14px}.promotion-info{background:#edf6ff;color:#245b91}.promotion-info div,.promotion-conflict{display:flex;flex-direction:column}.promotion-info span,.promotion-conflict span{font-size:.82rem}.promotion-conflict{background:#fff7e8;color:#815b18}.promotion-conflict svg,.promotion-info svg{width:17px;height:17px;flex:none;margin-top:2px}.promotion-transfer-grid{margin-top:12px}
@media(max-width:767.98px){.promotion-year-strip{gap:10px}.promotion-year-strip>div{min-width:0;flex:1}.promotion-transfer-grid{grid-template-columns:1fr}.promotion-transfer-grid .member-transfer-hint{transform:rotate(90deg);min-height:34px}}

/* v5.16 — Persiapan tahun ajaran */
.year-rollover-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:4px}.year-rollover-summary>div{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--border-color,#e8edf3);border-radius:16px;background:#fff}.year-rollover-summary strong{font-size:1.35rem;line-height:1}.year-rollover-summary span{font-size:.78rem;color:var(--muted,#6b7280)}.rollover-panel{border:1px solid var(--border-color,#e8edf3);border-radius:18px;background:#fff;padding:16px}.rollover-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.rollover-panel-head>div:first-child{display:flex;flex-direction:column}.rollover-panel-head small{color:var(--muted,#6b7280)}.rollover-room-list{display:grid;gap:9px;max-height:430px;overflow:auto;padding-right:4px}.rollover-room{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid #e9edf2;border-radius:14px;cursor:pointer;transition:.18s ease;background:#fff}.rollover-room:hover{border-color:#bfd3ff;background:#f8fbff}.rollover-room.is-existing{opacity:.68;cursor:not-allowed;background:#f8f9fb}.rollover-room-main{display:flex;flex-direction:column;min-width:0;flex:1}.rollover-room-main strong,.rollover-room-main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rollover-room-main small{color:#6b7280}.rollover-room-meta{display:flex;flex-direction:column;align-items:center;min-width:48px}.rollover-room-meta b{font-size:1rem}.rollover-room-meta small{font-size:.68rem;color:#6b7280}.rollover-option{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid #e9edf2;border-radius:14px;margin-bottom:10px;cursor:pointer}.rollover-option span{display:flex;flex-direction:column}.rollover-option small{color:#6b7280}.rollover-note{display:flex;gap:9px;padding:12px;border-radius:13px;background:#f5f8ff;color:#52627a;font-size:.82rem;margin-top:14px}.rollover-note svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px}@media(max-width:991.98px){.year-rollover-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575.98px){.year-rollover-summary{grid-template-columns:1fr 1fr}.rollover-panel-head{align-items:flex-start;flex-direction:column}.rollover-panel-head .d-flex{width:100%}.rollover-panel-head .btn{flex:1}.rollover-room{align-items:flex-start}.rollover-room-meta{display:none}}

/* v5.17 Wizard tahun ajaran */
.wizard-head{align-items:flex-start}.wizard-stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.wizard-step{border:1px solid var(--border,#e6eaf0);background:#fff;border-radius:16px;padding:14px;text-align:left;display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center;color:#7b8494}.wizard-step>span{grid-row:1/3;width:38px;height:38px;border-radius:12px;background:#f2f4f7;display:grid;place-items:center;font-weight:800}.wizard-step b{font-size:14px;color:#263142}.wizard-step small{font-size:12px}.wizard-step.active{border-color:#6f6af8;box-shadow:0 8px 24px rgba(92,86,230,.12)}.wizard-step.active>span,.wizard-step.done>span{background:#6f6af8;color:#fff}.wizard-step.done{border-color:#d9d7ff}.wizard-card{padding:24px;border-radius:20px}.wizard-pane{display:none}.wizard-pane.active{display:block}.wizard-pane-head{display:flex;gap:14px;align-items:center;margin-bottom:24px}.wizard-pane-head h3{margin:0 0 3px}.wizard-pane-head p{margin:0;color:#7b8494}.wizard-icon{width:48px;height:48px;border-radius:15px;background:#eeedff;color:#5d57e7;display:grid;place-items:center;flex:0 0 auto}.wizard-overview{display:grid;grid-template-columns:1fr auto 1fr repeat(2,minmax(110px,.45fr));gap:12px;align-items:center;padding:16px;border-radius:16px;background:#f8f9fc}.wizard-overview>div{display:flex;flex-direction:column}.wizard-overview small,.wizard-stat small{color:#7b8494}.wizard-stat{padding-left:14px;border-left:1px solid #dde2ea}.wizard-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:390px;overflow:auto}.wizard-room{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:13px;border:1px solid #e5e9f0;border-radius:14px;cursor:pointer;background:#fff}.wizard-room input{position:absolute;opacity:0}.wizard-room-check{width:24px;height:24px;border:2px solid #d8dde6;border-radius:8px;display:grid;place-items:center;color:transparent}.wizard-room:has(input:checked){border-color:#716bf6;background:#f6f5ff}.wizard-room:has(input:checked) .wizard-room-check{background:#716bf6;border-color:#716bf6;color:#fff}.wizard-room b,.wizard-room small{display:block}.wizard-room small{color:#7b8494}.wizard-room em{font-style:normal;font-size:11px;padding:5px 8px;border-radius:999px;background:#effaf4;color:#2f8c5c}.wizard-room.exists{opacity:.58;cursor:not-allowed}.wizard-room.exists em{background:#f2f4f7;color:#7b8494}.wizard-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.wizard-options label,.wizard-activate{display:flex;gap:12px;padding:14px;border:1px solid #e5e9f0;border-radius:14px}.wizard-options small,.wizard-activate small{display:block;color:#7b8494}.wizard-actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid #edf0f4}.wizard-map-table td{vertical-align:middle}.wizard-map-table td small{display:block;color:#7b8494}.wizard-finish{text-align:center;padding:10px 0}.wizard-finish-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:24px;background:#e8f8ef;color:#2e9b62;display:grid;place-items:center}.wizard-finish-icon svg{width:36px;height:36px}.wizard-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.wizard-summary>div{padding:16px;border-radius:14px;background:#f8f9fc;display:flex;flex-direction:column}.wizard-summary b{font-size:24px}.wizard-summary small{color:#7b8494}.wizard-activate{max-width:560px;margin:auto;text-align:left;align-items:flex-start}.is-loading{opacity:.7;pointer-events:none}
@media(max-width:900px){.wizard-stepper{grid-template-columns:repeat(2,1fr)}.wizard-overview{grid-template-columns:1fr auto 1fr}.wizard-stat{display:none!important}.wizard-room-grid,.wizard-options{grid-template-columns:1fr}.wizard-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.wizard-stepper{display:flex;overflow:auto}.wizard-step{min-width:170px}.wizard-card{padding:16px}.wizard-room-grid{max-height:420px}.wizard-actions{position:sticky;bottom:0;background:#fff;padding-bottom:4px}.wizard-map-table{min-width:690px}}

/* v5.18 - dashboard tugas tambahan guru */
.task-menu-count{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(37,99,235,.12);color:#2563eb;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}.nav-group.open .task-menu-count{background:#2563eb;color:#fff}.task-date-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--border-color,#e5e7eb);border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.task-date-card svg{width:20px;color:#2563eb}.task-date-card small,.task-date-card strong{display:block}.task-date-card small{font-size:.72rem;color:#64748b}.task-date-card strong{font-size:.9rem}.task-panel{background:#fff;border:1px solid #e8edf5;border-radius:22px;padding:22px;box-shadow:0 12px 34px rgba(15,23,42,.05)}.task-panel-head{display:flex;align-items:center;gap:14px}.task-panel-icon{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center}.task-panel-icon svg{width:21px}.assignment-card{height:100%;display:flex;gap:14px;align-items:center;padding:16px;border:1px solid #e8edf5;border-radius:17px;background:linear-gradient(145deg,#fff,#f8fafc)}.assignment-avatar{width:44px;height:44px;border-radius:14px;background:#eef4ff;color:#2563eb;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.assignment-card h3{font-size:.96rem;margin:0 0 3px}.assignment-card p{font-size:.8rem;color:#64748b;margin:0 0 5px}.assignment-card span{display:flex;align-items:center;gap:5px;font-size:.74rem;color:#64748b}.assignment-card span svg{width:13px}.quick-action-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.quick-action-grid a{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid #e8edf5;border-radius:14px;color:#334155;text-decoration:none;font-size:.82rem;font-weight:700;background:#fff;transition:.2s}.quick-action-grid a:hover{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8;transform:translateY(-1px)}.quick-action-grid svg{width:17px}.duty-schedule-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px}.duty-day{min-width:128px;padding:12px 14px;border:1px solid #e8edf5;border-radius:15px;background:#f8fafc}.duty-day small,.duty-day strong,.duty-day span{display:block}.duty-day small{color:#64748b;font-size:.72rem}.duty-day strong{font-size:.86rem;margin:3px 0}.duty-day span{font-size:.72rem;color:#64748b}.duty-day.today{border-color:#86efac;background:#f0fdf4;box-shadow:inset 0 0 0 1px #bbf7d0}.attendance-live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.attendance-live-grid>div{padding:15px;border-radius:16px;background:#f8fafc;border:1px solid #e8edf5}.attendance-live-grid small,.attendance-live-grid strong{display:block}.attendance-live-grid small{color:#64748b;font-size:.73rem}.attendance-live-grid strong{font-size:1.5rem;margin-top:4px}.attendance-live-grid .danger{background:#fff7f7;border-color:#fecaca}.attendance-live-grid .warning{background:#fffbeb;border-color:#fde68a}.empty-state-card{text-align:center;padding:48px 24px;background:#fff;border:1px dashed #cbd5e1;border-radius:22px}.empty-icon{width:58px;height:58px;border-radius:18px;background:#f1f5f9;display:inline-flex;align-items:center;justify-content:center;color:#64748b;margin-bottom:14px}@media(max-width:991.98px){.quick-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.attendance-live-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:575.98px){.task-panel{padding:16px;border-radius:18px}.task-panel-head{align-items:flex-start;flex-wrap:wrap}.task-panel-head .btn{width:100%}.quick-action-grid{grid-template-columns:1fr}.task-date-card{width:100%}}


/* v5.19 Kalender Akademik */
.calendar-agenda-list{display:grid;gap:.75rem}.calendar-agenda-item{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--bs-border-color);border-radius:16px;background:#fff}.calendar-dot{width:12px;height:48px;border-radius:999px;flex:0 0 auto}.calendar-agenda-item .btn svg{width:16px;height:16px}@media(max-width:575.98px){.calendar-agenda-item{align-items:flex-start;padding:.85rem}.calendar-dot{height:58px}.calendar-agenda-item .badge{font-size:.68rem}}

/* v5.20 Kalender Akademik: bulanan + matriks tahun pelajaran */
.academic-calendar-switcher{display:inline-flex;gap:6px;padding:5px;border:1px solid #e6eaf0;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(15,23,42,.04)}
.academic-calendar-view-btn{border:0;background:transparent;color:#64748b;border-radius:10px;padding:9px 14px;display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700}.academic-calendar-view-btn svg{width:16px}.academic-calendar-view-btn.active{background:#eef2ff;color:#4f46e5}.academic-calendar-view{display:none}.academic-calendar-view.active{display:block}
.academic-month-card,.academic-agenda-panel{border-radius:20px}.academic-month-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}.academic-month-title{text-align:center;min-width:190px}.academic-month-title small{display:block;color:#94a3b8;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.academic-month-title h2{font-size:1.15rem;margin:2px 0 0}.btn-icon{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:12px}.btn-icon svg{width:17px}
.academic-month-weekdays,.academic-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.academic-month-weekdays{border:1px solid #e8edf5;border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;background:#f8fafc}.academic-month-weekdays span{text-align:center;padding:9px 4px;color:#64748b;font-size:.72rem;font-weight:800}.academic-month-grid{border-left:1px solid #e8edf5;border-top:1px solid #e8edf5}
.academic-month-day{position:relative;min-height:112px;padding:9px;border:0;border-right:1px solid #e8edf5;border-bottom:1px solid #e8edf5;background:#fff;text-align:left;color:#334155;overflow:hidden}.academic-month-day:hover{background:#f8faff;z-index:1;box-shadow:inset 0 0 0 1px #c7d2fe}.academic-month-day:nth-child(7n){border-right:1px solid #e8edf5}.academic-month-day:nth-last-child(-n+7):first-child,.academic-month-day:nth-last-child(-n+7):first-child~.academic-month-day{ }.academic-month-day.is-muted{background:#fbfcfe;color:#a3adbd}.academic-month-day.is-outside-year{opacity:.42;cursor:not-allowed}.academic-month-day.is-today{box-shadow:inset 0 0 0 2px #4f46e5}.academic-month-day.is-holiday{background:#fff8f8}.month-day-number{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;font-size:.78rem;font-weight:800}.academic-month-day.is-today .month-day-number{background:#4f46e5;color:#fff}.month-event-stack{display:grid;gap:4px;margin-top:6px}.month-event-pill{display:block;padding:3px 6px;border-radius:6px;border-left:3px solid var(--event-color);background:color-mix(in srgb,var(--event-color) 10%,white);color:#334155;font-size:.64rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.month-event-pill.holiday{color:#991b1b}.month-event-stack small{font-size:.62rem;color:#64748b;padding-left:4px}
.academic-agenda-panel .calendar-agenda-list{max-height:640px;overflow:auto;padding-right:3px}.calendar-agenda-item{padding:.82rem}.calendar-agenda-item strong{font-size:.83rem}.calendar-agenda-item .small{font-size:.7rem}.calendar-dot{height:42px;width:8px}
.academic-matrix-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.72rem;color:#64748b}.academic-matrix-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:10px;height:10px;border-radius:3px;background:#e2e8f0}.legend-dot.is-holiday{background:#fecaca}.legend-dot.is-agenda{background:#c7d2fe}.legend-dot.is-today{background:#4f46e5}.legend-dot.is-outside{background:#f1f5f9;border:1px dashed #cbd5e1}
.academic-matrix-wrap{overflow:auto;border:1px solid #e5eaf1;border-radius:16px;max-height:68vh}.academic-year-matrix{border-collapse:separate;border-spacing:0;min-width:1420px;width:100%;font-size:.72rem}.academic-year-matrix th,.academic-year-matrix td{padding:0;border-right:1px solid #edf0f4;border-bottom:1px solid #edf0f4;text-align:center;background:#fff}.academic-year-matrix thead th{position:sticky;top:0;z-index:3;background:#f8fafc;height:38px;color:#64748b;font-weight:800}.academic-year-matrix .matrix-month-sticky{position:sticky;left:0;z-index:4;min-width:130px;text-align:left;padding:0 14px;background:#fff}.academic-year-matrix thead .matrix-month-sticky{z-index:5;background:#f8fafc}.matrix-month-sticky strong,.matrix-month-sticky small{display:block}.matrix-month-sticky strong{font-size:.78rem;color:#334155}.matrix-month-sticky small{font-size:.64rem;color:#94a3b8}.matrix-day{position:relative;width:100%;height:48px;border:0;background:#fff;color:#475569;font-weight:700}.matrix-day:hover{background:#eef2ff;box-shadow:inset 0 0 0 1px #818cf8}.matrix-day.is-holiday{background:#fff1f2;color:#be123c}.matrix-day.is-agenda{background:color-mix(in srgb,var(--matrix-color,#4f46e5) 12%,white);color:#4338ca}.matrix-day.is-today{box-shadow:inset 0 0 0 2px #4f46e5}.matrix-day.is-outside{background:#f8fafc;color:#cbd5e1;cursor:not-allowed}.matrix-day b{position:absolute;right:3px;top:3px;min-width:14px;height:14px;border-radius:999px;background:#4f46e5;color:#fff;font-size:.55rem;display:grid;place-items:center}.matrix-empty{background:#f8fafc!important;background-image:repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(148,163,184,.08) 5px,rgba(148,163,184,.08) 7px)!important}
@media(max-width:767.98px){.academic-calendar-switcher{display:flex;width:100%}.academic-calendar-view-btn{flex:1;justify-content:center}.academic-month-title{min-width:0;flex:1}.academic-month-toolbar #todayBtn{display:none}.academic-month-weekdays span{font-size:.62rem}.academic-month-day{min-height:78px;padding:5px}.month-day-number{width:23px;height:23px;font-size:.68rem}.month-event-pill{font-size:0;width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--event-color)}.month-event-stack{display:flex;flex-wrap:wrap;gap:3px}.month-event-stack small{display:none}.academic-agenda-panel .calendar-agenda-list{max-height:420px}.academic-matrix-wrap{max-height:62vh}}

/* v5.20.1 - warna hari non-kerja mengikuti pengaturan sekolah */
.academic-month-day.is-nonworkday{background:#fff7ed;color:#9a3412}.academic-month-day.is-nonworkday .month-day-number{background:#ffedd5;color:#9a3412}.academic-month-day.is-effective-day{background:#f0fdf4;color:#166534}.academic-month-day.is-effective-day .month-day-number{background:#dcfce7;color:#166534}
.matrix-day.is-nonworkday{background:#fff7ed;color:#c2410c}.matrix-day.is-effective-day{background:#f0fdf4;color:#15803d}.legend-dot.is-nonwork{background:#fb923c}
/* PKL v5.21 */
.pkl-picker-list{min-height:280px;max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:.55rem}.pkl-picker-item{width:100%;border:1px solid var(--bs-border-color);background:#fff;border-radius:14px;padding:.75rem;display:flex;align-items:center;justify-content:space-between;text-align:left}.pkl-picker-item:hover{border-color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.04)}.pkl-picker-item span{display:flex;flex-direction:column}.pkl-picker-item small{color:var(--bs-secondary-color)}.pkl-picker-item.selected{background:rgba(var(--bs-primary-rgb),.06)}.pkl-student-shell{max-width:680px;margin:auto}.pkl-camera-box{position:relative;border-radius:24px;overflow:hidden;background:#111;aspect-ratio:4/3;margin-bottom:1rem}.pkl-camera-box video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.pkl-face-guide{position:absolute;inset:12% 25%;border:3px solid rgba(255,255,255,.85);border-radius:48%;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.matrix-status.st-pkl,.matrix-legend .st-pkl{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}

/* PKL v5.22 - periode individual */
.pkl-bulk-date{display:grid;grid-template-columns:minmax(180px,1fr) 170px auto 170px auto;gap:.75rem;align-items:center;padding:1rem;border:1px dashed var(--bs-primary);border-radius:1rem;background:rgba(var(--bs-primary-rgb),.035)}
.pkl-selected-dates{display:flex;flex-direction:column;gap:.65rem;max-height:430px;overflow:auto;padding-right:.25rem}
.pkl-date-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(270px,1.35fr) auto;gap:.75rem;align-items:center;padding:.75rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:#fff}
.pkl-date-person,.pkl-edit-student{display:flex;align-items:center;gap:.75rem}.pkl-date-person small{display:block;color:var(--bs-secondary-color)}
.pkl-avatar{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(var(--bs-primary-rgb),.1);color:var(--bs-primary);font-weight:800;flex:0 0 auto}
.pkl-date-fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.pkl-date-fields label{font-size:.72rem;color:var(--bs-secondary-color)}
.pkl-date-fields input{margin-top:.2rem}.pkl-edit-student{padding:1rem;border-radius:1rem;background:rgba(var(--bs-primary-rgb),.05)}
@media(max-width:991.98px){.pkl-bulk-date{grid-template-columns:1fr 1fr}.pkl-bulk-date>div{grid-column:1/-1}.pkl-date-row{grid-template-columns:1fr auto}.pkl-date-fields{grid-column:1/-1;grid-row:2}}
@media(max-width:575.98px){.pkl-bulk-date{grid-template-columns:1fr}.pkl-bulk-date>span{display:none}.pkl-date-fields{grid-template-columns:1fr}.pkl-date-row{grid-template-columns:1fr auto}}

/* Interactive Leaflet location picker */
.location-picker-wrap{border:1px solid var(--bs-border-color,#dee2e6);border-radius:18px;overflow:hidden;background:#fff}.location-picker-map{height:340px;min-height:260px;width:100%;background:#eef2f6}.location-picker-help{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;font-size:.84rem;color:#64748b;background:#f8fafc;border-top:1px solid #e8edf3}.location-picker-help svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px}.leaflet-container{font-family:inherit;z-index:1}.leaflet-control-attribution{font-size:10px}.location-picker-badge{position:absolute;z-index:500;top:12px;left:52px;background:rgba(255,255,255,.95);padding:7px 10px;border-radius:10px;box-shadow:0 4px 18px rgba(15,23,42,.12);font-size:.75rem;font-weight:600;color:#334155;pointer-events:none}.location-picker-stage{position:relative}.modal .location-picker-map{height:300px}@media(max-width:767.98px){.location-picker-map,.modal .location-picker-map{height:280px}.location-picker-badge{left:48px;right:10px;width:max-content;max-width:calc(100% - 58px)}}

/* v5.23.1 - location picker clean, fast and searchable */
.location-picker-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.location-current-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;position:relative;z-index:3}.location-current-btn svg{width:16px;height:16px}.location-search-box{position:relative;margin-bottom:10px;z-index:520}.location-search-box .input-group{box-shadow:0 6px 18px rgba(15,23,42,.06);border-radius:12px}.location-search-box .input-group-text,.location-search-box .form-control,.location-search-box .btn{min-height:42px}.location-search-box .input-group-text{background:#fff;border-right:0}.location-search-box .form-control{border-left:0}.location-search-box .form-control:focus{box-shadow:none;border-color:var(--bs-border-color)}.location-search-results{position:absolute;z-index:1100;top:calc(100% + 6px);left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.18);padding:6px}.location-search-item{width:100%;display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:flex-start;border:0;background:#fff;border-radius:10px;padding:10px;text-align:left;color:#334155}.location-search-item:hover{background:#f1f5f9}.location-search-item strong{display:block;font-size:.79rem;line-height:1.35;font-weight:700}.location-search-item small{display:block;margin-top:3px;color:#94a3b8;font-size:.67rem;text-transform:capitalize}.location-search-pin{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-weight:800}.location-search-empty{padding:14px;color:#64748b;font-size:.78rem;text-align:center}.location-picker-wrap{border-radius:16px;box-shadow:none}.location-picker-map{height:260px;min-height:240px}.modal .location-picker-map{height:250px}.location-picker-help{padding:9px 12px;font-size:.75rem}.leaflet-container{background:#e9eef5}.leaflet-tile{will-change:auto}.leaflet-control-zoom a{width:30px!important;height:30px!important;line-height:30px!important}.leaflet-control-attribution{max-width:70%;white-space:normal;line-height:1.1}.modal-body .location-picker-stage{isolation:isolate}
@media(max-width:767.98px){.location-picker-toolbar{align-items:flex-start}.location-current-btn span{display:none}.location-current-btn{width:40px;height:40px;justify-content:center;padding:0}.location-picker-map,.modal .location-picker-map{height:230px;min-height:220px}.location-search-box .input-group-text{display:none}.location-search-box .form-control{border-left:1px solid var(--bs-border-color);border-radius:10px 0 0 10px}.location-picker-badge{top:9px;left:42px;font-size:.68rem;padding:6px 8px}}

/* v5.23.4 - validasi form langsung pada field */
.needs-validation .form-control:invalid:focus,
.needs-validation .form-select:invalid:focus,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.10);
}
.was-validated .input-group:has(.form-control:invalid) + .invalid-feedback,
.was-validated .input-group:has(.form-select:invalid) + .invalid-feedback {
    display: block;
}

/* v5.24.1 - Compact PKL list cards */
.pkl-card-compact{
  grid-template-columns:40px minmax(180px,1.35fr) repeat(4,minmax(115px,.72fr)) auto!important;
  gap:12px!important;
  min-height:72px;
  padding:10px 12px!important;
  border-radius:14px!important;
  align-items:center;
}
.pkl-card-compact .card-avatar{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:12px;
}
.pkl-card-compact .card-main{min-width:0}
.pkl-card-compact .card-main strong{
  font-size:13px;
  line-height:1.25;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pkl-card-compact .card-main span{
  margin-top:2px;
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pkl-card-compact .card-meta,
.pkl-card-compact .card-meta-wide{
  min-width:0!important;
}
.pkl-card-compact .card-meta .meta-label{
  margin-bottom:2px;
  font-size:9px;
  letter-spacing:.055em;
}
.pkl-card-compact .card-meta>span:last-child,
.pkl-card-compact .card-meta>strong:last-child{
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pkl-card-compact .badge{
  max-width:100%;
  padding:4px 8px;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pkl-card-compact>.list-actions{
  grid-column:auto!important;
  grid-row:1!important;
  justify-self:end;
  justify-content:flex-end!important;
  align-self:center;
  flex-wrap:nowrap!important;
  width:auto!important;
  margin:0!important;
}
.pkl-card-compact>.list-actions .btn{
  width:34px!important;
  min-width:34px;
  height:34px;
  padding:0!important;
  display:inline-flex;
  justify-content:center!important;
  align-items:center;
  flex:none!important;
}
.pkl-card-compact>.list-actions .btn span{display:none!important}

@media(max-width:1250px){
  .pkl-card-compact{grid-template-columns:40px minmax(175px,1.3fr) repeat(3,minmax(110px,.75fr)) auto!important}
  .pkl-card-compact .card-meta:nth-last-of-type(1){display:none}
}
@media(max-width:980px){
  .pkl-card-compact{grid-template-columns:40px minmax(0,1fr) minmax(120px,.7fr) auto!important}
  .pkl-card-compact .card-meta{display:none!important}
  .pkl-card-compact .card-meta:first-of-type{display:block!important}
  .pkl-card-compact>.list-actions{grid-column:4!important;grid-row:1!important}
}
@media(max-width:620px){
  .pkl-card-compact{grid-template-columns:38px minmax(0,1fr) auto!important;gap:9px!important;padding:10px!important}
  .pkl-card-compact .card-avatar{width:38px;height:38px;min-width:38px}
  .pkl-card-compact .card-meta{grid-column:2/3!important;display:block!important;border-top:0!important;padding-top:0!important}
  .pkl-card-compact .card-meta:not(:first-of-type){display:none!important}
  .pkl-card-compact>.list-actions{grid-column:3!important;grid-row:1/3!important;align-self:center}
}

/* v5.24.2 - pastikan aksi card PKL selalu di kolom paling kanan */
.pkl-card-compact > .list-actions{
  grid-column:-2 / -1!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  order:99!important;
  margin-left:auto!important;
}
@media(max-width:980px){
  .pkl-card-compact > .list-actions{
    grid-column:-2 / -1!important;
    grid-row:1!important;
  }
}
@media(max-width:620px){
  .pkl-card-compact > .list-actions{
    grid-column:3 / 4!important;
    grid-row:1 / 3!important;
  }
}

/* v5.25 - Dashboard PKL rapi dan interaktif */
.pkl-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.pkl-dashboard-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(var(--bs-primary-rgb),.1);color:var(--bs-primary)}.pkl-dashboard-icon svg{width:22px;height:22px}.pkl-dashboard-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.pkl-dashboard-actions .btn{display:inline-flex;align-items:center;gap:7px}.pkl-dashboard-actions .btn svg{width:16px;height:16px}.pkl-dashboard-actions .btn-icon{width:38px;height:38px;padding:0;justify-content:center}.pkl-date-control{display:flex;align-items:center;gap:6px}.pkl-date-control .form-control{width:150px;height:38px}.pkl-date-banner{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--bs-border-color);border-radius:14px;background:linear-gradient(90deg,rgba(var(--bs-primary-rgb),.045),rgba(var(--bs-primary-rgb),.01))}.pkl-date-banner>div{display:flex;align-items:center;gap:9px}.pkl-date-banner strong{font-size:.9rem}.pkl-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.pkl-summary-card{position:relative;display:flex;align-items:center;gap:13px;min-height:104px;padding:16px;border:1px solid var(--bs-border-color);border-radius:17px;background:#fff;overflow:hidden}.pkl-summary-card:after{content:"";position:absolute;right:-28px;bottom:-35px;width:95px;height:95px;border-radius:50%;background:currentColor;opacity:.035}.pkl-summary-card-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}.pkl-summary-card-icon svg{width:19px;height:19px}.pkl-summary-card-body{display:flex;flex-direction:column;min-width:0}.pkl-summary-card-body>span{font-size:.72rem;color:var(--bs-secondary-color);font-weight:700}.pkl-summary-card-body strong{font-size:1.65rem;line-height:1.05;margin:3px 0}.pkl-summary-card-body small{font-size:.63rem;color:#94a3b8;line-height:1.25}.pkl-summary-card.tone-primary{color:#4f46e5}.pkl-summary-card.tone-primary .pkl-summary-card-icon{background:#eef2ff}.pkl-summary-card.tone-success{color:#16a34a}.pkl-summary-card.tone-success .pkl-summary-card-icon{background:#ecfdf3}.pkl-summary-card.tone-warning{color:#d97706}.pkl-summary-card.tone-warning .pkl-summary-card-icon{background:#fff7ed}.pkl-summary-card.tone-danger{color:#dc2626}.pkl-summary-card.tone-danger .pkl-summary-card-icon{background:#fef2f2}.pkl-summary-card.tone-info{color:#0284c7}.pkl-summary-card.tone-info .pkl-summary-card-icon{background:#f0f9ff}.pkl-panel-card{border-radius:18px!important}.pkl-panel-card>.card-body{padding:18px}.pkl-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.pkl-chart-legend{display:flex;gap:12px;font-size:.68rem;color:var(--bs-secondary-color)}.pkl-chart-legend span{display:flex;align-items:center;gap:5px}.pkl-chart-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block}.pkl-chart-legend .dot.hadir{background:#22c55e}.pkl-chart-legend .dot.terlambat{background:#f59e0b}.pkl-trend-chart{height:220px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;padding:14px 4px 0}.pkl-trend-item{height:100%;display:grid;grid-template-rows:22px 1fr 20px 18px;align-items:end;border:0;background:transparent;padding:0 4px;color:inherit;border-radius:12px}.pkl-trend-item:hover,.pkl-trend-item.active{background:rgba(var(--bs-primary-rgb),.045)}.pkl-trend-value{text-align:center;font-size:.69rem;font-weight:800;color:#475569}.pkl-trend-track{position:relative;height:100%;display:flex;justify-content:center;align-items:flex-end}.pkl-trend-track:before{content:"";position:absolute;inset:0 auto 0 50%;border-left:1px dashed #e2e8f0}.pkl-trend-bar{position:relative;z-index:1;width:min(30px,62%);min-height:4px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#4ade80,#16a34a);overflow:hidden;box-shadow:0 7px 18px rgba(34,197,94,.16)}.pkl-trend-late{position:absolute;left:0;right:0;bottom:0;background:#f59e0b}.pkl-trend-day{text-align:center;font-size:.68rem;font-weight:800;color:#64748b}.pkl-trend-item small{text-align:center;font-size:.6rem;color:#94a3b8}.pkl-rate-wrap{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px;min-height:210px}.pkl-rate-ring{--rate:0;width:145px;height:145px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#22c55e calc(var(--rate)*1%),#edf2f7 0);position:relative}.pkl-rate-ring:before{content:"";position:absolute;inset:15px;border-radius:50%;background:#fff}.pkl-rate-ring>div{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column}.pkl-rate-ring strong{font-size:1.65rem;line-height:1}.pkl-rate-ring span{font-size:.69rem;color:#94a3b8;margin-top:5px}.pkl-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pkl-mini-stats>div{padding:10px;border-radius:12px;background:#f8fafc;display:flex;flex-direction:column}.pkl-mini-stats span{font-size:.65rem}.pkl-mini-stats strong{font-size:1rem;margin-top:2px}.pkl-activity-list{display:flex;flex-direction:column}.pkl-activity-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto 90px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eef2f6}.pkl-activity-item:last-child{border-bottom:0}.pkl-activity-main{display:flex;flex-direction:column;min-width:0}.pkl-activity-main strong{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkl-activity-main span{font-size:.65rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkl-activity-time{text-align:right;display:flex;flex-direction:column}.pkl-activity-time strong{font-size:.76rem}.pkl-activity-time span{font-size:.61rem;color:#94a3b8}.pkl-attention-list{display:flex;flex-direction:column}.pkl-attention-item{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:10px 6px;border-radius:12px;color:inherit;text-decoration:none}.pkl-attention-item:hover{background:#fff7f7;color:inherit}.pkl-attention-item>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.pkl-attention-item strong{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkl-attention-item small{font-size:.63rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkl-attention-item>svg{width:15px;height:15px;color:#cbd5e1}.pkl-avatar.danger{background:#fef2f2;color:#dc2626}.pkl-empty-state{min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;color:#94a3b8}.pkl-empty-state.compact{min-height:120px}.pkl-empty-state svg{width:28px;height:28px;margin-bottom:4px}.pkl-empty-state strong{font-size:.8rem;color:#64748b}.pkl-empty-state span{font-size:.68rem}.pkl-place-search{position:relative;width:230px}.pkl-place-search svg{position:absolute;left:10px;top:50%;width:14px;height:14px;transform:translateY(-50%);color:#94a3b8}.pkl-place-search input{padding-left:32px}.pkl-place-dashboard-list{display:flex;flex-direction:column;gap:8px}.pkl-place-dashboard-item{display:grid;grid-template-columns:42px minmax(180px,1.35fr) minmax(220px,.9fr) minmax(150px,.65fr) 18px;align-items:center;gap:14px;padding:11px 12px;border:1px solid #edf1f5;border-radius:14px;color:inherit;text-decoration:none;transition:.16s ease}.pkl-place-dashboard-item:hover{border-color:rgba(var(--bs-primary-rgb),.25);background:rgba(var(--bs-primary-rgb),.025);transform:translateY(-1px);color:inherit}.pkl-place-dashboard-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5}.pkl-place-dashboard-icon svg{width:17px;height:17px}.pkl-place-dashboard-main{display:flex;flex-direction:column;min-width:0}.pkl-place-dashboard-main strong{font-size:.77rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkl-place-dashboard-main small{font-size:.62rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkl-place-dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.pkl-place-dashboard-stats>span{display:flex;flex-direction:column;padding:6px 8px;border-radius:10px;background:#f8fafc}.pkl-place-dashboard-stats strong{font-size:.75rem}.pkl-place-dashboard-stats small{font-size:.58rem;color:#94a3b8}.pkl-place-progress{display:grid;grid-template-columns:1fr 40px;align-items:center;gap:8px}.pkl-place-progress>span{height:7px;border-radius:999px;background:#edf2f7;overflow:hidden}.pkl-place-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4ade80,#16a34a)}.pkl-place-progress strong{font-size:.66rem;text-align:right}.pkl-place-chevron{width:15px;height:15px;color:#cbd5e1}.btn.is-loading svg{animation:pkl-spin .7s linear infinite}@keyframes pkl-spin{to{transform:rotate(360deg)}}
@media(max-width:1199.98px){.pkl-summary-grid{grid-template-columns:repeat(3,1fr)}.pkl-place-dashboard-item{grid-template-columns:42px minmax(160px,1.2fr) minmax(210px,.9fr) minmax(130px,.65fr) 18px}}@media(max-width:991.98px){.pkl-dashboard-head{align-items:flex-start}.pkl-dashboard-actions{max-width:520px}.pkl-summary-grid{grid-template-columns:repeat(2,1fr)}.pkl-place-dashboard-item{grid-template-columns:42px minmax(0,1fr) minmax(190px,.9fr) 18px}.pkl-place-progress{display:none}.pkl-rate-wrap{grid-template-columns:140px 1fr}.pkl-place-search{width:200px}}@media(max-width:767.98px){.pkl-dashboard-head{flex-direction:column}.pkl-dashboard-actions{width:100%;justify-content:flex-start}.pkl-date-control{width:100%}.pkl-date-control .form-control{flex:1;width:auto}.pkl-dashboard-actions>.btn span{display:none}.pkl-summary-grid{grid-template-columns:1fr 1fr}.pkl-summary-card{min-height:92px;padding:13px}.pkl-summary-card-body small{display:none}.pkl-trend-chart{height:190px;gap:4px}.pkl-rate-wrap{grid-template-columns:1fr}.pkl-rate-ring{margin:auto}.pkl-mini-stats{width:100%}.pkl-activity-item{grid-template-columns:36px minmax(0,1fr) auto}.pkl-activity-time{display:none}.pkl-panel-head{align-items:center}.pkl-place-search{width:100%;max-width:210px}.pkl-place-dashboard-item{grid-template-columns:38px minmax(0,1fr) 18px}.pkl-place-dashboard-stats{grid-column:2/3;width:100%}.pkl-place-dashboard-icon{width:38px;height:38px}.pkl-place-chevron{grid-column:3;grid-row:1/3}}@media(max-width:480px){.pkl-summary-grid{grid-template-columns:1fr}.pkl-summary-card{min-height:78px}.pkl-summary-card-body small{display:block}.pkl-date-banner>div{align-items:flex-start;flex-direction:column;gap:1px}.pkl-panel-card>.card-body{padding:14px}.pkl-chart-legend{display:none}.pkl-place-search{max-width:160px}.pkl-place-dashboard-stats{gap:4px}.pkl-place-dashboard-stats>span{padding:5px 6px}}

/* v5.26 dashboard absensi per peran */
.attendance-dashboard-head,.teacher-dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;border:1px solid var(--bs-border-color,#e5e7eb);border-radius:22px;background:linear-gradient(135deg,#fff,#f7f9ff);margin-bottom:20px}.attendance-dashboard-head h1,.teacher-dashboard-hero h1{font-size:1.65rem;margin:.15rem 0}.attendance-dashboard-head p,.teacher-dashboard-hero p{margin:0;color:#6b7280}.dashboard-date-nav{display:flex;align-items:center;gap:8px}.dashboard-date-nav input{height:40px;border:1px solid #dbe1ec;border-radius:12px;padding:0 12px;background:#fff}.attendance-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.attendance-kpi{min-width:0;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #e5eaf2;border-radius:17px;background:#fff;text-decoration:none;color:inherit;box-shadow:0 5px 18px rgba(15,23,42,.035);transition:.2s}.attendance-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(15,23,42,.08)}.attendance-kpi>span{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;flex:none}.attendance-kpi>span svg{width:18px}.attendance-kpi small{display:block;color:#7b8497;font-size:.72rem}.attendance-kpi strong{display:block;font-size:1.35rem;line-height:1.1}.attendance-kpi>svg{width:15px;margin-left:auto;color:#a3aabd}.attendance-kpi.success>span{background:#e8f8ef;color:#18864b}.attendance-kpi.warning>span{background:#fff5dd;color:#c97b00}.attendance-kpi.danger>span{background:#fff0f1;color:#db3c4b}.attendance-kpi.info>span{background:#eaf7ff;color:#1683bd}.attendance-kpi.purple>span{background:#f4edff;color:#7c3aed}.attendance-trend{height:210px;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;padding:16px 8px 0}.trend-day{height:100%;flex:1;max-width:74px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-decoration:none;color:#667085;gap:5px;border-radius:14px;padding:8px;transition:.2s}.trend-day:hover,.trend-day.active{background:#f4f6ff;color:#4f46e5}.trend-bar{height:135px;width:26px;border-radius:12px;background:#eef1f6;display:flex;align-items:flex-end;overflow:hidden}.trend-bar span{width:100%;background:linear-gradient(180deg,#766df4,#4f46e5);border-radius:12px}.trend-day strong{font-size:.82rem}.trend-day small{font-size:.7rem}.status-progress-row{margin-bottom:15px}.status-progress-row>div:first-child{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:6px}.status-progress-row .progress{height:8px;background:#eef1f5}.status-progress-row .progress-bar{border-radius:10px;background:#4f46e5}.status-progress-row .progress-bar.success{background:#22a06b}.status-progress-row .progress-bar.warning{background:#e59d19}.status-progress-row .progress-bar.info{background:#2796cb}.status-progress-row .progress-bar.purple{background:#8b5cf6}.status-progress-row .progress-bar.danger{background:#e34d59}.dashboard-rombel-list{display:flex;flex-direction:column;gap:8px}.dashboard-rombel-list>a{display:grid;grid-template-columns:minmax(145px,1fr) minmax(90px,180px) auto 18px;align-items:center;gap:12px;padding:10px 12px;border:1px solid #edf0f5;border-radius:13px;color:inherit;text-decoration:none}.dashboard-rombel-list>a:hover{background:#fafbff;border-color:#dfe4f0}.dashboard-rombel-list strong,.dashboard-rombel-list small{display:block}.dashboard-rombel-list small{font-size:.7rem;color:#8a93a5}.rombel-mini-progress{height:7px;border-radius:8px;background:#edf0f5;overflow:hidden}.rombel-mini-progress span{display:block;height:100%;background:#5d57e9;border-radius:8px}.compact-person-list,.compact-activity-list{display:flex;flex-direction:column}.compact-person-list>div,.compact-activity-list>div{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid #edf0f5}.compact-person-list>div:last-child,.compact-activity-list>div:last-child{border-bottom:0}.compact-person-list>div>span:nth-child(2),.compact-activity-list>div>span:nth-child(2){min-width:0;flex:1}.compact-person-list strong,.compact-person-list small,.compact-activity-list strong,.compact-activity-list small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-person-list small,.compact-activity-list small{font-size:.7rem;color:#8b93a4}.duty-active-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #cfead9;background:#f0fbf5;border-radius:16px;margin-bottom:16px}.duty-active-banner.muted{border-color:#e5e7eb;background:#f8fafc}.duty-active-banner>span:first-child{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#18864b}.duty-active-banner>div{flex:1}.duty-active-banner small,.duty-active-banner strong{display:block}.quick-action-grid.operational-actions{grid-template-columns:repeat(5,minmax(0,1fr))}.teacher-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.teacher-quick-grid>a{display:flex;align-items:center;gap:12px;padding:17px;border:1px solid #e5eaf2;border-radius:18px;background:#fff;text-decoration:none;color:inherit;transition:.2s}.teacher-quick-grid>a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.07)}.teacher-quick-grid>a>span{width:42px;height:42px;border-radius:13px;background:#eef2ff;color:#4f46e5;display:grid;place-items:center}.teacher-quick-grid>a>div{min-width:0;flex:1}.teacher-quick-grid strong,.teacher-quick-grid small{display:block}.teacher-quick-grid small{font-size:.72rem;color:#818a9d}.teacher-quick-grid>a>svg{width:16px;color:#a4aabd}.teacher-assignment-list{display:flex;flex-direction:column;gap:8px}.teacher-assignment-list>a{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid #edf0f5;border-radius:14px;text-decoration:none;color:inherit}.teacher-assignment-list>a>span:nth-child(2){flex:1}.teacher-assignment-list strong,.teacher-assignment-list small{display:block}.teacher-assignment-list small{color:#8992a4;font-size:.72rem}.duty-schedule-strip.vertical{display:flex;flex-direction:column;gap:8px}.duty-schedule-strip.vertical .duty-day{display:grid;grid-template-columns:70px 1fr auto;align-items:center;width:100%}
@media(max-width:1200px){.attendance-kpi-grid{grid-template-columns:repeat(3,1fr)}.teacher-quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.attendance-dashboard-head,.teacher-dashboard-hero{align-items:flex-start;flex-direction:column;padding:18px}.dashboard-date-nav{width:100%}.dashboard-date-nav input{flex:1}.attendance-kpi-grid{grid-template-columns:repeat(2,1fr)}.quick-action-grid.operational-actions{grid-template-columns:repeat(2,1fr)}.teacher-quick-grid{grid-template-columns:1fr}.dashboard-rombel-list>a{grid-template-columns:1fr auto 16px}.dashboard-rombel-list .rombel-mini-progress{display:none}.compact-activity-list>div b{display:none}}
@media(max-width:480px){.attendance-kpi-grid{grid-template-columns:1fr 1fr}.attendance-kpi{padding:12px}.attendance-kpi>span{width:34px;height:34px}.attendance-kpi strong{font-size:1.15rem}.attendance-trend{gap:3px}.trend-day{padding:5px}.trend-bar{width:19px}}

/* Candy Absensi v5.27 - Kiosk interaktif */
.kiosk-v527{--kiosk-primary:#5b4cf2;--kiosk-dark:#172033;--kiosk-soft:#f5f7fc;display:grid;gap:16px}.kiosk-hero-panel{position:relative;overflow:hidden;border:1px solid #e8ebf4;background:linear-gradient(135deg,#fff 0%,#f7f7ff 62%,#eef8ff 100%);box-shadow:0 14px 34px rgba(35,45,80,.06)}.kiosk-hero-panel:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-120px;top:-145px;background:radial-gradient(circle,rgba(91,76,242,.16),transparent 70%);pointer-events:none}.kiosk-brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}.kiosk-brand-mark{position:relative;width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#6758f5,#4939d9);color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px rgba(91,76,242,.28)}.kiosk-brand-mark span{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:#29b66f;border:3px solid #fff;animation:kiosk-status-pulse 1.8s infinite}.kiosk-brand-wrap h2{margin:2px 0 5px;font-size:22px}.kiosk-system-state{display:flex;align-items:center;gap:7px;color:#6e7990;font-size:12px;flex-wrap:wrap}.online-dot{width:8px;height:8px;border-radius:50%;background:#27b66d;box-shadow:0 0 0 4px rgba(39,182,109,.12)}.online-dot.offline{background:#df4d56;box-shadow:0 0 0 4px rgba(223,77,86,.12)}.state-divider{color:#c2c7d2}.kiosk-clock-card{position:relative;padding:10px 15px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(225,228,239,.92);backdrop-filter:blur(10px)}.kiosk-mode-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px;border:1px solid #e7eaf2;border-radius:18px;background:#fff}.kiosk-v527 .kiosk-mode{display:flex;gap:8px}.kiosk-v527 .kiosk-mode .btn{min-width:145px;justify-content:flex-start;display:grid;grid-template-columns:20px 1fr;grid-template-rows:auto auto;text-align:left;padding:10px 13px;border-radius:13px}.kiosk-v527 .kiosk-mode .btn svg{grid-row:1/3}.kiosk-v527 .kiosk-mode .btn span{font-weight:750;line-height:1.05}.kiosk-v527 .kiosk-mode .btn small{font-size:9px;opacity:.72;line-height:1.2}.kiosk-live-chip{display:flex;align-items:center;gap:10px;padding:8px 13px;border-radius:14px;background:#f7f8fc;min-width:270px}.kiosk-live-chip div{display:flex;flex-direction:column}.kiosk-live-chip strong{font-size:12px}.kiosk-live-chip small{color:#788298;font-size:10px}.live-pulse{width:9px;height:9px;border-radius:50%;background:#28b76c;box-shadow:0 0 0 0 rgba(40,183,108,.5);animation:kiosk-live 1.8s infinite}.kiosk-layout-v527{grid-template-columns:minmax(0,1.7fr) minmax(300px,.62fr);gap:16px}.kiosk-scan-panel{position:relative;overflow:hidden;padding:18px}.kiosk-scan-panel.is-processing:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.5);backdrop-filter:blur(1px);z-index:18;pointer-events:none}.kiosk-scan-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}.kiosk-scan-intro h3{margin:2px 0 0;font-size:18px}.kiosk-mini-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.kiosk-mini-stats span{display:flex;align-items:baseline;gap:4px;padding:7px 10px;border-radius:10px;background:#f6f7fb;color:#7c8598;font-size:10px}.kiosk-mini-stats b{color:#252d3e;font-size:12px}.kiosk-method-card-v527{padding:14px;border-radius:18px;background:linear-gradient(180deg,#fbfcff,#f6f8fd);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.kiosk-method-card-v527:hover{transform:translateY(-2px);border-color:#dcd9ff;box-shadow:0 13px 28px rgba(57,66,95,.07)}.method-title{display:flex;align-items:center;gap:10px}.method-icon{width:38px;height:38px;border-radius:12px;background:#eceaff;color:#5949e7;display:grid;place-items:center}.method-title h3{font-size:15px;margin:1px 0}.scanner-stage-v527{min-height:300px;border:1px solid #283249;background:radial-gradient(circle at center,#1b2740,#0e1628);box-shadow:inset 0 0 40px rgba(0,0,0,.25)}.scanner-stage-v527 .qr-reader{min-height:300px;margin:0;border:0;border-radius:0;background:transparent}.scanner-stage-v527 .qr-reader video{min-height:300px;object-fit:cover}.scan-frame-corners{position:absolute;inset:50% auto auto 50%;width:225px;height:225px;transform:translate(-50%,-50%);z-index:4;pointer-events:none}.scan-frame-corners i{position:absolute;width:34px;height:34px;border-color:#fff;border-style:solid;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}.scan-frame-corners i:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-radius:10px 0 0 0}.scan-frame-corners i:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-radius:0 10px 0 0}.scan-frame-corners i:nth-child(3){left:0;bottom:0;border-width:0 0 3px 3px;border-radius:0 0 0 10px}.scan-frame-corners i:nth-child(4){right:0;bottom:0;border-width:0 3px 3px 0;border-radius:0 0 10px 0}.scan-laser{position:absolute;left:50%;top:calc(50% - 108px);width:205px;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#65e6b1,#fff,#65e6b1,transparent);box-shadow:0 0 12px #65e6b1;z-index:5;animation:kiosk-laser 2.1s ease-in-out infinite}.scanner-instruction{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(8,14,28,.74);color:#fff;font-size:10px;backdrop-filter:blur(8px);white-space:nowrap}.dynamic-qr-v527{position:relative;min-height:300px;border-radius:16px;background:linear-gradient(145deg,#171e31,#222c47);display:grid;place-items:center;overflow:hidden}.dynamic-qr-v527:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(91,76,242,.3);filter:blur(55px);animation:kiosk-orbit 5s ease-in-out infinite}.dynamic-qr-v527 #dynamicQr{position:relative;z-index:3;padding:12px;border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.25)}.dynamic-qr-v527 #dynamicQr img,.dynamic-qr-v527 #dynamicQr canvas{display:block}.qr-countdown-ring{--qr-progress:360deg;position:relative;width:62px;height:62px;display:grid;place-items:center;align-content:center;border-radius:50%;background:conic-gradient(#5b4cf2 var(--qr-progress),#e7e8f0 0);transition:background .25s}.qr-countdown-ring:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}.qr-countdown-ring strong,.qr-countdown-ring span{position:relative;z-index:2;line-height:1}.qr-countdown-ring strong{font-size:17px}.qr-countdown-ring span{font-size:8px;color:#7f889a}.qr-countdown-ring.is-ending{animation:kiosk-warning .7s infinite}.dynamic-qr-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;color:#758098;font-size:10px}.dynamic-qr-footer span{display:flex;align-items:center;gap:5px}.kiosk-bottom-methods{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr);gap:12px;margin-top:14px}.rfid-ready-card{margin:0;position:relative;border:1px solid #dceee5;background:#f3fbf6;border-radius:15px;min-height:74px}.rfid-ready-card em{margin-left:auto;font-style:normal;font-size:9px;font-weight:800;color:#168b4d;background:#dcf5e6;padding:5px 7px;border-radius:999px}.rfid-wave{position:relative;width:42px;height:42px;border-radius:13px;background:#fff;color:#1ca25d;display:grid;place-items:center;flex:none}.rfid-wave b{position:absolute;inset:-4px;border:1px solid rgba(35,177,101,.22);border-radius:16px;animation:kiosk-rfid 2s infinite}.rfid-wave b:nth-child(3){animation-delay:.7s}.rfid-ready-card.reading{animation:kiosk-card-flash .5s}.kiosk-manual-form{max-width:none;margin:0;padding:11px 12px;border:1px solid #e7eaf2;border-radius:15px;background:#fafbfe}.kiosk-manual-form label{display:block;font-size:10px;font-weight:750;color:#536078;margin-bottom:5px}.kiosk-manual-form .input-group{border-radius:12px}.kiosk-manual-form .form-control,.kiosk-manual-form .input-group-text,.kiosk-manual-form .btn{min-height:43px}.scan-result-v527{max-width:none;margin-top:14px;animation:kiosk-result-in .32s ease}.scan-result-v527 .scan-late{display:inline-flex;align-items:center;gap:5px}.kiosk-log-v527{padding:16px;position:sticky;top:16px}.kiosk-log-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.kiosk-log-summary>div{position:relative;padding:10px 8px 8px;border:1px solid #e8eaf1;border-radius:12px;background:#fafbfe;text-align:center}.kiosk-log-summary strong,.kiosk-log-summary small{display:block}.kiosk-log-summary strong{font-size:17px}.kiosk-log-summary small{font-size:9px;color:#80899c}.summary-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%}.summary-dot.success{background:#27b66d}.summary-dot.warning{background:#eea22b}.summary-dot.info{background:#4c8cf5}.recent-scan-v527{opacity:0;transform:translateY(7px);animation:kiosk-item-in .3s ease forwards;animation-delay:var(--delay)}.recent-scan-v527 em{display:inline-block;margin-top:3px;font-size:8px;font-style:normal;font-weight:800;color:#6253e9;background:#eeecff;padding:3px 5px;border-radius:6px}.kiosk-empty h4{font-size:14px;margin:7px 0 2px}.kiosk-empty p{font-size:10px;color:#7b8599}.btn.is-loading svg{animation:kiosk-spin .8s linear infinite}.kiosk-feedback{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(16,23,39,.48);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.22s}.kiosk-feedback.show{opacity:1;visibility:visible}.kiosk-feedback-card{position:relative;width:min(92vw,430px);padding:31px 28px 22px;border-radius:26px;background:#fff;text-align:center;box-shadow:0 30px 90px rgba(15,23,42,.28);transform:scale(.88) translateY(14px);transition:.28s cubic-bezier(.2,.8,.2,1);overflow:hidden}.kiosk-feedback.show .kiosk-feedback-card{transform:scale(1) translateY(0)}.feedback-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#2bc278,#169552);box-shadow:0 13px 28px rgba(32,180,104,.28)}.feedback-icon svg{width:35px;height:35px;stroke-width:3}.kiosk-feedback-card small{font-weight:850;letter-spacing:.12em;color:#1d9e5c}.kiosk-feedback-card h2{font-size:28px;margin:5px 0 5px}.kiosk-feedback-card p{color:#778197;margin:0}.kiosk-feedback-card>strong{display:block;font-size:30px;margin-top:14px}.feedback-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:#e8f4ed}.feedback-progress span{display:block;height:100%;width:100%;background:#21ad67;transform-origin:left;animation:kiosk-feedback-progress 2.3s linear forwards}.kiosk-feedback.is-error .feedback-icon{background:linear-gradient(145deg,#f06267,#d93c45);box-shadow:0 13px 28px rgba(217,60,69,.25)}.kiosk-feedback.is-error .kiosk-feedback-card small{color:#d9434b}.kiosk-feedback.is-error .feedback-progress span{background:#df4650;animation-duration:2.6s}.attendance-kiosk-mode .kiosk-v527{min-height:calc(100vh - 32px)}.attendance-kiosk-mode .kiosk-log-v527{top:0}.attendance-kiosk-mode .kiosk-hero-panel{top:0}
@keyframes kiosk-status-pulse{0%,100%{box-shadow:0 0 0 0 rgba(41,182,111,.5)}50%{box-shadow:0 0 0 7px rgba(41,182,111,0)}}@keyframes kiosk-live{0%{box-shadow:0 0 0 0 rgba(40,183,108,.45)}70%{box-shadow:0 0 0 8px rgba(40,183,108,0)}100%{box-shadow:0 0 0 0 rgba(40,183,108,0)}}@keyframes kiosk-laser{0%,100%{transform:translate(-50%,0);opacity:.45}50%{transform:translate(-50%,214px);opacity:1}}@keyframes kiosk-orbit{0%,100%{transform:translate(-20px,-15px)}50%{transform:translate(35px,24px)}}@keyframes kiosk-warning{50%{box-shadow:0 0 0 6px rgba(229,73,79,.12)}}@keyframes kiosk-rfid{0%{transform:scale(.86);opacity:.8}100%{transform:scale(1.35);opacity:0}}@keyframes kiosk-card-flash{50%{background:#dff8e9;transform:scale(1.01)}}@keyframes kiosk-result-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes kiosk-item-in{to{opacity:1;transform:none}}@keyframes kiosk-spin{to{transform:rotate(360deg)}}@keyframes kiosk-feedback-progress{to{transform:scaleX(0)}}
@media(max-width:1150px){.kiosk-layout-v527{grid-template-columns:1fr}.kiosk-log-v527{position:relative;top:auto}.kiosk-bottom-methods{grid-template-columns:1fr}.kiosk-log-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.kiosk-mode-banner{align-items:stretch;flex-direction:column}.kiosk-v527 .kiosk-mode{display:grid;grid-template-columns:repeat(3,1fr)}.kiosk-v527 .kiosk-mode .btn{min-width:0}.kiosk-live-chip{min-width:0}.kiosk-scan-intro{align-items:flex-start;flex-direction:column}.kiosk-mini-stats{justify-content:flex-start}.kiosk-method-grid.two-methods{grid-template-columns:1fr}.terminal-header.kiosk-hero-panel{grid-template-columns:1fr auto}.terminal-header.kiosk-hero-panel .terminal-actions{grid-column:1/-1}}
@media(max-width:576px){.kiosk-v527{gap:10px}.kiosk-scan-panel,.kiosk-log-v527{padding:12px}.kiosk-brand-mark{width:43px;height:43px}.kiosk-brand-wrap h2{font-size:18px}.kiosk-clock-card{padding:8px 10px}.kiosk-clock-card strong{font-size:23px}.kiosk-v527 .kiosk-mode{grid-template-columns:1fr}.kiosk-v527 .kiosk-mode .btn{grid-template-columns:20px 1fr auto;grid-template-rows:1fr;align-items:center}.kiosk-v527 .kiosk-mode .btn svg{grid-row:auto}.kiosk-v527 .kiosk-mode .btn small{text-align:right}.camera-tools{width:100%;margin-top:8px}.method-card-head{align-items:flex-start;flex-direction:column}.camera-tools .form-select{min-width:0}.scanner-stage-v527,.scanner-stage-v527 .qr-reader,.scanner-stage-v527 .qr-reader video,.dynamic-qr-v527{min-height:260px}.scan-frame-corners{width:190px;height:190px}.scan-laser{width:175px;top:calc(50% - 92px);animation-name:kiosk-laser-mobile}.kiosk-mini-stats{display:grid;grid-template-columns:1fr 1fr;width:100%}.kiosk-bottom-methods{grid-template-columns:1fr}.rfid-ready-card{align-items:flex-start}.rfid-ready-card em{display:none}.scan-result-v527{grid-template-columns:40px minmax(0,1fr)}.scan-result-v527>strong{grid-column:2}.kiosk-feedback-card h2{font-size:23px}.terminal-actions .btn span{display:none}}@keyframes kiosk-laser-mobile{0%,100%{transform:translate(-50%,0);opacity:.45}50%{transform:translate(-50%,180px);opacity:1}}
@media(prefers-reduced-motion:reduce){.kiosk-v527 *,.kiosk-v527 *:before,.kiosk-v527 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Candy Absensi v5.27.1 - kiosk layout refinement */
.kiosk-v5271{gap:12px;max-width:1680px;margin:0 auto}
.kiosk-v5271 .kiosk-hero-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:14px 16px;border-radius:20px;min-height:88px}
.kiosk-v5271 .kiosk-header-right{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.kiosk-v5271 .kiosk-clock-card{min-width:190px;text-align:right;padding:8px 12px;background:transparent;border:0;box-shadow:none}
.kiosk-v5271 .kiosk-clock-card strong{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.kiosk-v5271 .kiosk-clock-card span{display:block;margin-top:6px;color:#71809a;font-size:11px}
.kiosk-v5271 .kiosk-header-actions{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.kiosk-v5271 .kiosk-header-actions .btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;border-radius:11px;white-space:nowrap}
.kiosk-v5271 .kiosk-mode-banner{padding:8px 10px;border-radius:16px;box-shadow:0 7px 20px rgba(34,44,74,.04)}
.kiosk-v5271 .kiosk-mode .btn{min-width:130px;padding:8px 11px}
.kiosk-v5271 .kiosk-layout-v527{grid-template-columns:minmax(0,1fr) 330px;gap:12px}
.kiosk-v5271 .kiosk-scan-panel{padding:15px;border-radius:20px}
.kiosk-v5271 .kiosk-log-v527{padding:14px;border-radius:20px}
.kiosk-v5271 .kiosk-method-grid{gap:12px;align-items:stretch}
.kiosk-v5271 .kiosk-method-card-v527{padding:12px;border:1px solid #e7eaf2;border-radius:17px;background:#fff;box-shadow:none;min-width:0}
.kiosk-v5271 .kiosk-method-card-v527:hover{transform:none;box-shadow:0 10px 26px rgba(35,45,80,.06)}
.kiosk-v5271 .method-card-head{min-height:42px;margin-bottom:9px}
.kiosk-v5271 .camera-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kiosk-v5271 .camera-ready-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:#eefaf3;color:#187a48;font-size:10px;font-weight:750;white-space:nowrap}
.kiosk-v5271 .camera-ready-pill .live-pulse{width:7px;height:7px}
.kiosk-v5271 .camera-toolbar-clean{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:9px}
.kiosk-v5271 .camera-select-wrap{position:relative;min-width:0}
.kiosk-v5271 .camera-select-wrap>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);z-index:2;width:15px;height:15px;color:#6d7890;pointer-events:none}
.kiosk-v5271 .camera-select-wrap .form-select{width:100%;min-width:0;max-width:none;padding-left:34px;min-height:38px;border-radius:11px}
.kiosk-v5271 .camera-toolbar-clean .btn{display:inline-flex;align-items:center;gap:6px;border-radius:11px;min-height:38px}
.kiosk-v5271 .scanner-stage-clean{aspect-ratio:16/9;min-height:0!important;max-height:430px;border-radius:15px;border:0;background:#0b1220;isolation:isolate}
.kiosk-v5271 .scanner-stage-clean .qr-reader{position:absolute;inset:0;width:100%;height:100%;min-height:0!important;max-width:none;margin:0!important;border:0!important;border-radius:0!important;background:#0b1220;overflow:hidden}
.kiosk-v5271 .scanner-stage-clean .qr-reader>div:first-child{display:none!important}
.kiosk-v5271 .scanner-stage-clean .qr-reader video{position:absolute!important;inset:0;width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;border-radius:0!important;transform:none!important}
.kiosk-v5271 .scanner-stage-clean .qr-reader img{max-width:100%}
.kiosk-v5271 .scanner-stage-clean .scanner-badge{top:10px;left:10px}
.kiosk-v5271 .scanner-stage-clean .scan-frame-corners{width:min(42%,220px);height:min(72%,220px)}
.kiosk-v5271 .scanner-stage-clean .scan-laser{top:24%;width:min(38%,205px);animation:kiosk-laser-clean 2.1s ease-in-out infinite}
.kiosk-v5271 .scanner-stage-clean .scanner-instruction{bottom:10px;font-size:10px}
.kiosk-v5271 .dynamic-qr-v527{aspect-ratio:16/9;min-height:0;max-height:430px}
.kiosk-v5271 .dynamic-qr-v527 #dynamicQr canvas,.kiosk-v5271 .dynamic-qr-v527 #dynamicQr img{width:min(18vw,220px)!important;height:auto!important;max-width:220px!important}
.kiosk-v5271 .kiosk-log-v527{position:static;top:auto;min-height:100%}
.kiosk-v5271 .recent-scan-list{max-height:520px;overflow:auto;padding-right:2px}
.kiosk-v5271 .kiosk-bottom-methods{grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:10px;margin-top:10px}
.kiosk-v5271 .rfid-ready-card,.kiosk-v5271 .kiosk-manual-form{min-height:70px}
@keyframes kiosk-laser-clean{0%,100%{transform:translate(-50%,0);opacity:.35}50%{transform:translate(-50%,145px);opacity:1}}
@media(max-width:1200px){.kiosk-v5271 .kiosk-layout-v527{grid-template-columns:1fr}.kiosk-v5271 .kiosk-log-v527{min-height:auto}.kiosk-v5271 .recent-scan-list{max-height:360px}}
@media(max-width:900px){.kiosk-v5271 .kiosk-hero-panel{grid-template-columns:1fr}.kiosk-v5271 .kiosk-header-right{justify-content:space-between}.kiosk-v5271 .kiosk-clock-card{text-align:left;padding-left:0}.kiosk-v5271 .kiosk-method-grid.two-methods{grid-template-columns:1fr}.kiosk-v5271 .dynamic-qr-v527 #dynamicQr canvas,.kiosk-v5271 .dynamic-qr-v527 #dynamicQr img{width:min(38vw,220px)!important}}
@media(max-width:650px){.kiosk-v5271 .kiosk-header-right{align-items:stretch;flex-direction:column}.kiosk-v5271 .kiosk-header-actions{display:grid;grid-template-columns:repeat(3,1fr)}.kiosk-v5271 .kiosk-header-actions .btn{justify-content:center}.kiosk-v5271 .kiosk-bottom-methods{grid-template-columns:1fr}.kiosk-v5271 .camera-card-head{align-items:flex-start;flex-direction:column}.kiosk-v5271 .camera-ready-pill{align-self:flex-start}.kiosk-v5271 .scanner-stage-clean{aspect-ratio:4/3}.kiosk-v5271 .dynamic-qr-v527{aspect-ratio:4/3}}

/* Candy Absensi v5.28 - overview awal absensi harian */
.daily-filter-row{align-items:end}.daily-overview{display:flex;flex-direction:column;gap:14px}.daily-overview-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.daily-overview-head h4{margin:0;font-size:1rem}.daily-overview-head p{margin:4px 0 0;color:#8a94a7;font-size:.72rem}.daily-overview-tools{display:flex;align-items:center;gap:8px}.daily-search{position:relative;width:240px}.daily-search>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#94a3b8;z-index:2}.daily-search .form-control{padding-left:34px;height:38px;border-radius:11px}.daily-overview-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.daily-mini-stat{display:flex;align-items:center;gap:11px;min-height:84px;padding:13px 14px;border:1px solid #e8edf4;border-radius:15px;background:#fff}.daily-mini-stat>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}.daily-mini-stat>span svg{width:18px;height:18px}.daily-mini-stat>div{display:flex;flex-direction:column;min-width:0}.daily-mini-stat small{font-size:.63rem;color:#7d879a;font-weight:750}.daily-mini-stat strong{font-size:1.35rem;line-height:1.05;margin:2px 0}.daily-mini-stat em{font-size:.58rem;color:#a0a8b6;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.daily-mini-stat.tone-0>span{background:#eef2ff;color:#4f46e5}.daily-mini-stat.tone-1>span{background:#ecfdf3;color:#16a34a}.daily-mini-stat.tone-2>span{background:#eff6ff;color:#2563eb}.daily-mini-stat.tone-3>span{background:#f5f3ff;color:#7c3aed}.daily-mini-stat.tone-4>span{background:#fff1f2;color:#e11d48}.daily-rombel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.daily-rombel-card{display:grid;grid-template-columns:42px minmax(130px,1.1fr) minmax(120px,.85fr) minmax(190px,1.2fr) auto 18px;align-items:center;gap:12px;width:100%;padding:13px 14px;border:1px solid #e7ecf3;border-radius:16px;background:#fff;color:#1f2937;text-align:left;transition:.16s ease;box-shadow:0 5px 18px rgba(31,41,55,.025)}.daily-rombel-card:hover{transform:translateY(-1px);border-color:rgba(var(--bs-primary-rgb),.28);box-shadow:0 10px 25px rgba(31,41,55,.06)}.daily-rombel-card.is-complete{background:linear-gradient(90deg,#fff,#fbfffd)}.daily-rombel-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-weight:850}.daily-rombel-main{display:flex;flex-direction:column;min-width:0}.daily-rombel-main strong{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.daily-rombel-main small{margin-top:3px;font-size:.61rem;color:#98a2b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.daily-rombel-progress{display:flex;flex-direction:column;gap:6px;min-width:0}.daily-rombel-progress>span{display:flex;align-items:baseline;justify-content:space-between;gap:6px}.daily-rombel-progress b{font-size:.72rem}.daily-rombel-progress small{font-size:.57rem;color:#98a2b3}.daily-rombel-progress>i{height:6px;border-radius:999px;background:#edf1f6;overflow:hidden}.daily-rombel-progress>i>em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6366f1,#22c55e)}.daily-rombel-metrics{display:flex;align-items:center;gap:7px;min-width:0}.daily-rombel-metrics>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:42px;padding:6px 7px;border-radius:10px;background:#f8fafc}.daily-rombel-metrics b{font-size:.72rem;line-height:1}.daily-rombel-metrics small{margin-top:3px;font-size:.52rem;color:#8b95a7}.daily-rombel-metrics .success b{color:#16a34a}.daily-rombel-metrics .warning b{color:#d97706}.daily-rombel-metrics .danger b{color:#dc2626}.daily-rombel-metrics .info b{color:#0284c7}.daily-rombel-state{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;font-size:.57rem;font-weight:800;white-space:nowrap}.daily-rombel-state svg{width:12px;height:12px}.daily-rombel-state.done{background:#ecfdf3;color:#15803d}.daily-rombel-state.pending{background:#fff7ed;color:#c2410c}.daily-rombel-arrow{width:16px;height:16px;color:#c2cad5}.daily-overview-loading{grid-column:1/-1;min-height:150px;display:flex;align-items:center;justify-content:center;gap:8px;color:#8d97a8;font-size:.74rem}.daily-overview-empty{grid-column:1/-1;min-height:170px}.daily-detail-head{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #e8edf4;border-radius:14px;background:#f8fafc}.daily-detail-head>div{display:flex;flex-direction:column}.daily-detail-head strong{font-size:.82rem}.daily-detail-head small{font-size:.62rem;color:#8d97a8;margin-top:2px}
@media(max-width:1300px){.daily-rombel-grid{grid-template-columns:1fr}.daily-overview-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.daily-overview-head{align-items:stretch;flex-direction:column}.daily-overview-tools{width:100%}.daily-search{width:100%}.daily-overview-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.daily-rombel-card{grid-template-columns:42px minmax(0,1fr) auto}.daily-rombel-progress,.daily-rombel-metrics{grid-column:2/4}.daily-rombel-state{grid-column:2}.daily-rombel-arrow{grid-column:3;grid-row:1}.daily-filter-row{grid-template-columns:1fr!important}}
@media(max-width:520px){.daily-overview-summary{grid-template-columns:1fr 1fr}.daily-mini-stat{min-height:72px;padding:10px}.daily-rombel-card{padding:11px}.daily-rombel-metrics{overflow:auto;justify-content:flex-start}.daily-rombel-state{justify-self:start}.daily-detail-head{align-items:flex-start;flex-direction:column}}
/* v5.29 Rekap bulanan overview */
.monthly-page{overflow:hidden}.monthly-head{align-items:flex-start}.matrix-legend.compact{display:flex;flex-wrap:wrap;gap:6px 9px;max-width:620px;justify-content:flex-end;font-size:.58rem;color:#738096}.matrix-legend.compact>span{width:21px;height:21px;border-radius:7px;display:inline-grid;place-items:center;font-size:.58rem;font-weight:850}.monthly-filter-row{grid-template-columns:minmax(180px,.7fr) minmax(260px,1.2fr) auto;align-items:end}.monthly-overview{display:flex;flex-direction:column;gap:14px}.monthly-overview-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.monthly-overview-head h4{margin:0;font-size:1rem}.monthly-overview-head p{margin:4px 0 0;color:#8a94a7;font-size:.72rem}.monthly-overview-tools{display:flex;align-items:center;gap:8px}.monthly-rombel-grid{display:grid;grid-template-columns:1fr;gap:9px}.monthly-rombel-card{display:grid;grid-template-columns:42px minmax(150px,1.15fr) minmax(92px,.55fr) minmax(145px,.8fr) minmax(210px,1.15fr) auto 18px;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid #e7ecf3;border-radius:16px;background:#fff;color:#1f2937;text-align:left;transition:.16s ease;box-shadow:0 5px 18px rgba(31,41,55,.025)}.monthly-rombel-card:hover{transform:translateY(-1px);border-color:rgba(var(--bs-primary-rgb),.28);box-shadow:0 10px 25px rgba(31,41,55,.06)}.monthly-rombel-card.is-complete{background:linear-gradient(90deg,#fff,#fbfffd)}.monthly-target{display:flex;flex-direction:column;min-width:0}.monthly-target b{font-size:.82rem;line-height:1}.monthly-target small{font-size:.55rem;color:#7f8a9d;margin-top:3px}.monthly-target em{font-size:.52rem;color:#a0a8b6;font-style:normal;margin-top:2px;white-space:nowrap}.monthly-detail-head{min-height:58px}.monthly-detail-actions{display:flex;align-items:center;gap:8px}.monthly-detail-actions .daily-search{width:220px}.monthly-page .matrix-card{padding:0;overflow:hidden}.monthly-page .attendance-matrix-wrap{border:0;border-radius:0;max-height:68vh}
@media(max-width:1200px){.monthly-rombel-card{grid-template-columns:42px minmax(150px,1fr) minmax(90px,.5fr) minmax(150px,.8fr) auto 18px}.monthly-rombel-card .daily-rombel-metrics{grid-column:2/5}.monthly-rombel-card .daily-rombel-state{grid-column:5;grid-row:1}.monthly-rombel-card .daily-rombel-arrow{grid-column:6;grid-row:1}}
@media(max-width:820px){.monthly-head{align-items:stretch;flex-direction:column}.matrix-legend.compact{justify-content:flex-start}.monthly-filter-row{grid-template-columns:1fr}.monthly-overview-head{align-items:stretch;flex-direction:column}.monthly-overview-tools{width:100%}.monthly-overview-tools .daily-search{width:100%}.monthly-rombel-card{grid-template-columns:42px minmax(0,1fr) auto}.monthly-target{grid-column:2}.monthly-rombel-card .daily-rombel-progress,.monthly-rombel-card .daily-rombel-metrics{grid-column:2/4}.monthly-rombel-card .daily-rombel-state{grid-column:2;grid-row:auto;justify-self:start}.monthly-rombel-card .daily-rombel-arrow{grid-column:3;grid-row:1}.monthly-detail-head{align-items:stretch;flex-direction:column}.monthly-detail-actions{margin-left:0!important;width:100%;flex-wrap:wrap}.monthly-detail-actions .daily-search{width:100%;flex:1 1 220px}}
@media(max-width:520px){.monthly-rombel-card{padding:11px}.monthly-rombel-card .daily-rombel-metrics{overflow:auto;justify-content:flex-start}.monthly-detail-actions .btn{width:100%}}

/* v5.30 - Pengajuan izin & aplikasi orang tua */
.mobile-role-shell .sidebar{display:none!important}.mobile-role-shell .main-area{margin-left:0!important;width:100%!important}.mobile-role-shell .topbar{display:none!important}.mobile-role-shell .content{padding:18px 16px 105px;max-width:760px;margin:auto;width:100%}
.parent-mobile-dashboard,.mobile-permission-page{display:grid;gap:16px}.parent-app-header,.mobile-app-hero{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-radius:26px;padding:24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 20px 45px rgba(79,70,229,.24)}.parent-app-header h2,.mobile-app-hero h2{margin:3px 0 5px;font-size:1.55rem}.parent-app-header p,.mobile-app-hero p{margin:0;opacity:.82}.parent-avatar,.mobile-app-hero>span{width:58px;height:58px;border-radius:20px;background:rgba(255,255,255,.18);display:grid;place-items:center}.parent-avatar svg,.mobile-app-hero>span svg{width:28px;height:28px}
.parent-child-switcher{display:flex;gap:10px;overflow:auto;padding:2px}.parent-child-switcher a{min-width:84px;border:1px solid #e7eaf3;background:#fff;border-radius:18px;padding:10px;text-align:center;color:#60677a;text-decoration:none}.parent-child-switcher a span{width:36px;height:36px;border-radius:12px;background:#eef0ff;color:#5b55e8;display:grid;place-items:center;margin:0 auto 5px;font-weight:800}.parent-child-switcher a strong{font-size:.76rem;display:block}.parent-child-switcher a.active{border-color:#655cf0;box-shadow:0 8px 22px rgba(79,70,229,.14)}
.parent-child-hero,.parent-summary-card,.parent-feed-card,.parent-pkl-banner{background:#fff;border:1px solid #e8ebf3;border-radius:22px;padding:18px}.parent-child-hero{display:flex;align-items:center;justify-content:space-between}.parent-child-hero h3{margin:3px 0;font-size:1.25rem}.parent-child-hero p{margin:0;color:#7a8294}.parent-status-badge{padding:8px 11px;border-radius:999px;font-size:.72rem;font-weight:800;background:#f1f3f8}.parent-status-badge.is-present{background:#dcfce7;color:#15803d}
.parent-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.parent-quick-actions a{background:#fff;border:1px solid #e8ebf3;border-radius:18px;padding:14px 10px;text-decoration:none;color:#1f2937;text-align:center}.parent-quick-actions a span{width:38px;height:38px;border-radius:13px;background:#eef0ff;color:#5b55e8;display:grid;place-items:center;margin:0 auto 8px}.parent-quick-actions strong,.parent-quick-actions small{display:block}.parent-quick-actions strong{font-size:.8rem}.parent-quick-actions small{font-size:.65rem;color:#8b93a5}
.parent-summary-head,.parent-section-head{display:flex;justify-content:space-between;align-items:center}.parent-summary-head h3,.parent-section-head h3{font-size:1rem;margin:0}.parent-summary-head p,.parent-section-head p{font-size:.72rem;color:#8a91a2;margin:3px 0 0}.parent-ring{width:64px;height:64px;border:7px solid #e9e8ff;border-top-color:#5b55e8;border-radius:50%;display:grid;place-items:center;line-height:1;text-align:center}.parent-ring strong{font-size:.84rem}.parent-ring small{font-size:.55rem;color:#8b93a5}.parent-stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:16px}.parent-stat-grid div{background:#f8f9fc;border-radius:14px;padding:10px 4px;text-align:center}.parent-stat-grid b,.parent-stat-grid span{display:block}.parent-stat-grid b{font-size:1.05rem}.parent-stat-grid span{font-size:.62rem;color:#7d8495}
.parent-pkl-banner{display:flex;gap:13px;align-items:center;background:linear-gradient(135deg,#ecfeff,#eff6ff)}.parent-pkl-banner>span{width:44px;height:44px;border-radius:15px;background:#fff;color:#0284c7;display:grid;place-items:center}.parent-pkl-banner small,.parent-pkl-banner strong,.parent-pkl-banner p{display:block;margin:0}.parent-timeline,.parent-request-list{display:grid;gap:10px;margin-top:14px}.parent-timeline-item,.parent-request-list>div{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #f0f1f5}.parent-timeline-item>span{width:34px;height:34px;border-radius:12px;background:#eef8f1;color:#15803d;display:grid;place-items:center}.parent-timeline-item div,.parent-request-list>div>div{flex:1}.parent-timeline-item strong,.parent-timeline-item small,.parent-request-list strong,.parent-request-list small{display:block}.parent-timeline-item small,.parent-request-list small{font-size:.68rem;color:#8b93a5}
.permission-main-btn{border-radius:16px;padding:13px}.permission-filter-row{display:grid;grid-template-columns:1fr 150px;gap:10px}.permission-mobile-list{display:grid;gap:10px}.permission-mobile-card{background:#fff;border:1px solid #e7eaf2;border-radius:19px;padding:14px;display:flex;gap:12px;align-items:flex-start}.permission-card-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:#eef0ff;color:#5d55e8;display:grid;place-items:center}.permission-card-main{min-width:0;flex:1}.permission-card-top{display:flex;justify-content:space-between;gap:8px}.permission-card-main h4{font-size:.86rem;margin:5px 0 2px}.permission-card-main p{font-size:.74rem;color:#626b7c;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.permission-card-main small{font-size:.66rem;color:#8a92a3;display:flex;gap:5px;align-items:center}.permission-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.62rem;font-weight:800;text-transform:capitalize;background:#f1f3f7;color:#667085}.permission-status.menunggu{background:#fff7d6;color:#a16207}.permission-status.disetujui{background:#dcfce7;color:#15803d}.permission-status.ditolak{background:#fee2e2;color:#b91c1c}.permission-status.dibatalkan{background:#f1f3f6;color:#667085}.permission-note{margin-top:8px;padding:8px 10px;border-radius:10px;background:#f8f9fc;font-size:.68rem}.permission-verify-card{grid-template-columns:auto minmax(180px,1.1fr) minmax(220px,1.5fr) auto auto}.permission-reason{min-width:0}.permission-reason strong,.permission-reason small{display:block}.permission-reason strong{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.permission-reason small{font-size:.65rem;color:#8a91a2}.btn-icon.success{color:#15803d;background:#dcfce7}
@media(max-width:768px){.permission-filter-row{grid-template-columns:1fr}.parent-stat-grid{grid-template-columns:repeat(5,minmax(54px,1fr));overflow:auto}.permission-verify-card{display:flex;flex-wrap:wrap}.permission-verify-card .card-main,.permission-reason{flex:1 1 220px}.parent-app-header,.mobile-app-hero{padding:20px}.mobile-role-shell .content{padding-left:12px;padding-right:12px}}

/* v5.31 - Pemilih anak interaktif & generate akun orang tua */
.parent-child-picker{border:1px solid #e4e8f1;border-radius:18px;background:#fbfcff;overflow:hidden}.parent-child-picker-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid #e8ebf2;background:#fff}.parent-child-search{position:relative;flex:1;min-width:0}.parent-child-search>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;color:#8b94a7;pointer-events:none}.parent-child-search .form-control{padding-left:38px;border-radius:12px}.parent-child-picker-actions{display:flex;gap:7px;flex:none}.parent-child-selected{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:50px;padding:10px 12px;border-bottom:1px solid #eaedf3;background:#f7f8fc}.parent-child-selected-count{font-size:.7rem;font-weight:800;color:#5b55e8;background:#eeedff;border-radius:999px;padding:6px 9px}.parent-child-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #dde1ec;background:#fff;color:#344054;border-radius:999px;padding:5px 8px 5px 10px;font-size:.7rem;line-height:1}.parent-child-chip:hover{border-color:#c8c3ff;color:#5148dc}.parent-child-chip svg{width:13px;height:13px}.parent-child-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;max-height:310px;overflow:auto}.parent-child-option{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 28px;align-items:center;gap:10px;margin:0;padding:10px;border:1px solid #e5e9f1;border-radius:14px;background:#fff;cursor:pointer;transition:.16s ease}.parent-child-option:hover{border-color:#cfcafc;box-shadow:0 6px 18px rgba(40,46,75,.055)}.parent-child-option.is-selected{border-color:#756cf1;background:#f6f5ff;box-shadow:0 0 0 2px rgba(91,76,242,.08)}.parent-child-option>input{position:absolute;opacity:0;pointer-events:none}.parent-child-avatar{width:38px;height:38px;border-radius:12px;background:#eef0ff;color:#5951db;display:grid;place-items:center;font-weight:850}.parent-child-copy{min-width:0}.parent-child-copy strong,.parent-child-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.parent-child-copy strong{font-size:.78rem;color:#273047}.parent-child-copy small{font-size:.63rem;color:#8992a4;margin-top:3px}.parent-child-check{width:25px;height:25px;border-radius:9px;border:1px solid #dfe3eb;color:transparent;display:grid;place-items:center}.parent-child-check svg{width:14px}.parent-child-option.is-selected .parent-child-check{background:#5b55e8;border-color:#5b55e8;color:#fff}.generate-account-table td:last-child{max-width:260px;white-space:normal}
@media(max-width:768px){.parent-child-picker-toolbar{align-items:stretch;flex-direction:column}.parent-child-picker-actions{width:100%}.parent-child-picker-actions .btn{flex:1}.parent-child-options{grid-template-columns:1fr;max-height:360px}}


/* v5.32 - Rekap kehadiran orang tua */
.attendance-child-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding:14px 16px;border:1px solid var(--bs-border-color);border-radius:18px;background:var(--bs-body-bg);box-shadow:0 8px 24px rgba(15,23,42,.05)}
.attendance-child-switch>div{display:flex;flex-direction:column;min-width:0}.attendance-child-switch strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attendance-child-switch .form-select{width:min(320px,48%);border-radius:12px}
@media(max-width:576px){.attendance-child-switch{align-items:stretch;flex-direction:column}.attendance-child-switch .form-select{width:100%}}

/* v5.33 - keamanan, audit, fitur PKL, database */
.feature-toggle-card{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:14px;padding:16px;border:1px solid #e4e8f0;border-radius:17px;cursor:pointer;background:#fff}.feature-toggle-card input{position:absolute;opacity:0}.feature-toggle-icon{width:48px;height:48px;border-radius:14px;background:#f0f2f7;display:grid;place-items:center;color:#65718a}.feature-toggle-card:has(input:checked){border-color:#8b7cf6;background:#faf9ff}.feature-toggle-card:has(input:checked) .feature-toggle-icon{background:#ece9ff;color:#5d4de8}.feature-toggle-card strong,.feature-toggle-card small{display:block}.feature-toggle-card small{color:#7a8599;margin-top:3px}.form-switch{width:48px;height:27px;border-radius:20px;background:#d8dde7;padding:3px;transition:.2s}.switch-dot{display:block;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0002;transition:.2s}.feature-toggle-card:has(input:checked) .form-switch{background:#6957ef}.feature-toggle-card:has(input:checked) .switch-dot{transform:translateX(21px)}
.audit-toolbar{grid-template-columns:minmax(280px,1fr) 160px 150px 150px 90px}.audit-card{grid-template-columns:46px minmax(220px,1fr) 150px 190px auto}.audit-detail-grid{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px 16px;margin:0}.audit-detail-grid dt{color:#778197}.audit-detail-grid dd{margin:0;min-width:0}.audit-detail-grid pre{white-space:pre-wrap;max-height:260px;overflow:auto;background:#f7f8fb;padding:12px;border-radius:12px;font-size:12px}.database-grid{display:grid;gap:16px;max-width:1120px;margin:0 auto}.database-hero{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f8f7ff,#fff)}.database-hero>div{display:grid;grid-template-columns:56px 1fr;column-gap:14px}.database-hero h3,.database-hero p{grid-column:2;margin:0}.db-icon{grid-row:1/3;width:56px;height:56px;border-radius:17px;background:#6957ef;color:#fff;display:grid;place-items:center}.database-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.database-action{border:1px solid #e5e9f1;background:#fff;border-radius:16px;padding:15px;display:flex;gap:12px;text-align:left;align-items:flex-start}.database-action:hover{border-color:#b9c1d3;background:#fafbfe}.database-action svg{color:#6957ef}.database-action strong,.database-action small{display:block}.database-action small{color:#7a8599;margin-top:3px}.database-action.danger svg{color:#dc3545}.db-table-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.db-table-list>div{display:flex;justify-content:space-between;padding:10px 12px;background:#f8f9fc;border-radius:10px}.account-actions{margin-left:auto;display:flex;gap:6px}.account-actions .list-actions{display:flex;gap:6px}
@media(max-width:900px){.audit-toolbar{grid-template-columns:1fr 1fr}.audit-card{grid-template-columns:42px 1fr auto}.audit-card>.list-meta{display:none}.database-actions{grid-template-columns:1fr}.db-table-list{grid-template-columns:1fr}}@media(max-width:600px){.audit-toolbar{grid-template-columns:1fr}.database-hero{align-items:flex-start;gap:14px;flex-direction:column}.database-hero .btn{width:100%}.feature-toggle-card{grid-template-columns:46px 1fr 48px}}

/* v5.33.1 - Audit log compact satu baris */
.audit-page-v5331{overflow:hidden}
.audit-page-head{align-items:center}
.audit-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.audit-head-actions .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.audit-head-actions svg{width:16px;height:16px}
.audit-toolbar-v5331{grid-template-columns:minmax(260px,1fr) 155px 145px 145px 105px;gap:10px}
.audit-list-v5331{display:grid;gap:8px;margin-top:14px}
.audit-row-card{display:grid;grid-template-columns:38px minmax(130px,.65fr) minmax(240px,1.5fr) 115px minmax(160px,.8fr) 38px;align-items:center;gap:12px;min-height:64px;padding:9px 12px;border:1px solid #e5e9f1;border-radius:14px;background:#fff;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.audit-row-card:hover{border-color:#cbc6f8;box-shadow:0 8px 22px rgba(31,41,55,.055);transform:translateY(-1px)}
.audit-row-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f2f4f8;color:#667085}
.audit-row-icon svg{width:17px;height:17px}
.audit-row-icon.action-success{background:#eaf8ef;color:#18834c}.audit-row-icon.action-danger{background:#fff0f1;color:#d43f4d}.audit-row-icon.action-warning{background:#fff7e6;color:#b76a00}.audit-row-icon.action-info{background:#eaf7ff;color:#1675a9}.audit-row-icon.action-primary{background:#f0edff;color:#6251df}
.audit-row-user,.audit-row-description,.audit-row-ip{min-width:0}
.audit-row-user strong,.audit-row-user small,.audit-row-description strong,.audit-row-description small,.audit-row-ip strong,.audit-row-ip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-row-user strong{font-size:.78rem;color:#20283a}.audit-row-user small{font-size:.64rem;color:#8992a5;margin-top:2px;text-transform:capitalize}
.audit-row-description strong{font-size:.75rem;color:#30384a;font-weight:700}.audit-row-description small{font-size:.63rem;color:#8a93a5;margin-top:3px;text-transform:capitalize}
.audit-row-ip{text-align:left}.audit-row-ip strong{font-size:.7rem;color:#3d4659}.audit-row-ip small{font-size:.62rem;color:#8a93a5;margin-top:3px}
.audit-action-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:5px 9px;border-radius:999px;font-size:.62rem;font-weight:800;white-space:nowrap;background:#f1f3f7;color:#5e687b}
.audit-action-badge.action-success{background:#e9f8ee;color:#18834c}.audit-action-badge.action-danger{background:#fff0f1;color:#c83746}.audit-action-badge.action-warning{background:#fff5df;color:#aa6500}.audit-action-badge.action-info{background:#eaf7ff;color:#176f9d}.audit-action-badge.action-primary{background:#efedff;color:#5a4cd4}
.audit-row-buttons{display:flex;justify-content:flex-end}.audit-row-buttons .btn-icon{width:34px;height:34px;border-radius:11px}
.audit-footer-v5331{margin-top:14px;padding-top:12px;border-top:1px solid #edf0f5}
.audit-clear-warning{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #ffd4d8;border-radius:14px;background:#fff6f7;color:#8d2731}
.audit-clear-warning>svg{width:22px;height:22px;flex:0 0 22px;margin-top:1px}.audit-clear-warning strong{display:block;font-size:.82rem}.audit-clear-warning p{margin:4px 0 0;font-size:.72rem;line-height:1.45;color:#a04b54}
@media(max-width:1180px){.audit-row-card{grid-template-columns:38px minmax(125px,.7fr) minmax(210px,1.4fr) 105px minmax(145px,.8fr) 38px}.audit-toolbar-v5331{grid-template-columns:minmax(240px,1fr) 145px 140px 140px 100px}}
@media(max-width:930px){.audit-toolbar-v5331{grid-template-columns:1fr 1fr}.audit-row-card{grid-template-columns:38px minmax(130px,.8fr) minmax(200px,1.4fr) 105px 38px}.audit-row-ip{display:none}}
@media(max-width:700px){.audit-page-head{align-items:stretch;flex-direction:column}.audit-head-actions{justify-content:stretch}.audit-head-actions .btn{flex:1;justify-content:center}.audit-toolbar-v5331{grid-template-columns:1fr}.audit-row-card{grid-template-columns:36px minmax(0,1fr) auto 34px;gap:9px;padding:9px 10px}.audit-row-description{grid-column:2/4}.audit-row-action{grid-column:3;grid-row:1}.audit-row-buttons{grid-column:4;grid-row:1/3}.audit-row-ip{display:none}.audit-row-icon{width:36px;height:36px}.audit-row-user strong{font-size:.75rem}.audit-row-description strong{font-size:.7rem}.audit-footer-v5331{align-items:flex-start;gap:10px;flex-direction:column}}

/* v5.34 - Status dan mutasi siswa */
.mutation-toolbar{grid-template-columns:minmax(260px,1fr) 210px auto}.mutation-status-filter{height:42px;border-radius:12px}.student-record-card{grid-template-columns:42px minmax(190px,1.25fr) 150px 145px minmax(170px,.8fr) auto}.student-status{display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;padding:5px 9px;border-radius:999px;font-size:.62rem;font-weight:800;white-space:nowrap;background:#f1f3f7;color:#5f6878}.student-status.status-aktif{background:#eaf8ef;color:#18834c}.student-status.status-pindah,.student-status.status-lulus{background:#eaf3ff;color:#2764aa}.student-status.status-mengundurkan_diri,.student-status.status-nonaktif_sementara{background:#fff5df;color:#a86500}.student-status.status-dikeluarkan{background:#fff0f1;color:#c83746}.student-status.status-meninggal{background:#f0f1f4;color:#4b5563}.btn-warning-soft{background:#fff5df!important;color:#a86500!important;border-color:#f5dfad!important}.btn-success-soft{background:#eaf8ef!important;color:#18834c!important;border-color:#c9ebd6!important}.mutation-note{display:flex;align-items:flex-start;gap:10px;font-size:.72rem}.mutation-note svg{width:18px;height:18px;flex:0 0 auto;color:#5b55e8}.mutation-timeline{display:grid;gap:0;padding:2px 0}.mutation-item{position:relative;display:grid;grid-template-columns:24px 1fr;gap:10px;padding-bottom:18px}.mutation-item:not(:last-child):before{content:"";position:absolute;left:7px;top:16px;bottom:0;width:2px;background:#e5e8ef}.mutation-dot{width:16px;height:16px;border:4px solid #e7e4ff;border-radius:50%;background:#6957ef;z-index:1}.mutation-content{padding:11px 13px;border:1px solid #e7eaf1;border-radius:14px;background:#fff}.mutation-content strong{font-size:.78rem}.mutation-content span{font-size:.64rem;color:#7c8799}.mutation-content p{margin:6px 0 4px;font-size:.71rem;color:#3f4859}.mutation-content small{font-size:.61rem;color:#8a94a6}.matrix-status.st-tidak-aktif{background:#eef0f3;color:#8992a0;border:1px dashed #cbd1da}
@media(max-width:1100px){.student-record-card{grid-template-columns:42px minmax(180px,1fr) 130px 135px auto}.student-record-card .card-meta-parent{display:none}.mutation-toolbar{grid-template-columns:1fr 190px auto}}
@media(max-width:760px){.mutation-toolbar{grid-template-columns:1fr}.student-record-card{grid-template-columns:42px minmax(0,1fr) auto}.student-record-card .card-meta{grid-column:2;display:flex;align-items:center;gap:7px}.student-record-card .card-actions{grid-column:3;grid-row:1/5;flex-direction:column}.mutation-status-filter{width:100%}}

/* v5.34.2 - Modal status & mutasi siswa lebih rapi + upload dokumen */
.mutation-modal-dialog{max-width:860px}
.mutation-modal-content{border:0;border-radius:22px;overflow:hidden;box-shadow:0 28px 70px rgba(25,34,54,.24)}
.mutation-modal-header{padding:18px 22px;border-bottom:1px solid #e9edf3;background:#fff}
.mutation-modal-header h5{margin:0;font-size:1rem;font-weight:800;color:#222b3e}
.mutation-modal-header small{display:block;margin-top:3px;font-size:.72rem}
.mutation-head-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#f0edff;color:#6755ec;flex:0 0 44px}
.mutation-head-icon svg{width:20px;height:20px}
.mutation-modal-body{padding:18px 22px 8px}
.mutation-info{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;margin-bottom:16px;border:1px solid #dcd7ff;border-radius:14px;background:#faf9ff;color:#4b5364;font-size:.73rem;line-height:1.55}
.mutation-info-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#6655ea;color:#fff;flex:0 0 30px}
.mutation-info-icon svg{width:16px;height:16px}
.mutation-form-grid label{display:block;margin-bottom:6px;font-size:.71rem;font-weight:750;color:#2f384b}
.mutation-form-grid .form-control,.mutation-form-grid .form-select{min-height:44px;border-radius:12px}
.mutation-form-grid textarea.form-control{min-height:auto;resize:vertical}
.mutation-upload{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 14px;border:1.5px dashed #c9c1ff;border-radius:15px;background:#fcfbff;cursor:pointer;transition:.18s ease}
.mutation-upload:hover,.mutation-upload.is-dragover{border-color:#6957ef;background:#f7f5ff;transform:translateY(-1px)}
.mutation-upload.has-file{border-style:solid;border-color:#8d80f2;background:#f8f7ff}
.mutation-upload.is-invalid{border-color:#dc3545;background:#fff7f8}
.mutation-upload-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#efecff;color:#6655ea}
.mutation-upload-icon svg{width:22px;height:22px}
.mutation-upload-copy{min-width:0}
.mutation-upload-copy strong,.mutation-upload-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mutation-upload-copy strong{font-size:.73rem;color:#293247}
.mutation-upload-copy small{margin-top:4px;font-size:.63rem;color:#7d8799}
#mutationFileError:empty{display:none!important}
.mutation-parent-option{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid #e7eaf1;border-radius:13px;background:#fafbfc}
.mutation-parent-option .form-check-input{margin-top:2px;flex:0 0 auto}
.mutation-parent-option label{margin:0;cursor:pointer}
.mutation-parent-option strong,.mutation-parent-option small{display:block}
.mutation-parent-option strong{font-size:.72rem;color:#30384b}
.mutation-parent-option small{margin-top:2px;font-size:.62rem;color:#7f899b;line-height:1.4}
.mutation-modal-footer{padding:14px 22px;border-top:1px solid #e9edf3;background:#fff;gap:8px}
.mutation-modal-footer .btn{min-width:110px;justify-content:center}
.mutation-document-link{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:6px 9px;border-radius:9px;background:#f0edff;color:#5b4bd5;font-size:.64rem;font-weight:700;text-decoration:none}
.mutation-document-link:hover{background:#e8e4ff;color:#493abf}
.mutation-document-link svg{width:14px;height:14px}
@media(max-width:767px){.mutation-modal-dialog{margin:.6rem}.mutation-modal-content{border-radius:18px}.mutation-modal-header,.mutation-modal-body,.mutation-modal-footer{padding-left:15px;padding-right:15px}.mutation-upload{grid-template-columns:42px minmax(0,1fr)}.mutation-upload .btn{grid-column:1/3;width:100%}.mutation-upload-icon{width:42px;height:42px}.mutation-modal-footer{position:sticky;bottom:0;z-index:3}.mutation-modal-footer .btn{flex:1;min-width:0}}

/* v5.34.3 - modal mutasi ringkas, scrollable, detail opsional */
.mutation-modal-dialog{height:calc(100vh - 2rem);margin:1rem auto}
.mutation-modal-content{max-height:100%;display:flex;overflow:hidden}
.mutation-modal-form{display:flex;flex-direction:column;min-height:0;max-height:100%;width:100%}
.mutation-modal-header{flex:0 0 auto}
.mutation-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:18px}
.mutation-modal-footer{flex:0 0 auto;position:relative;z-index:4;box-shadow:0 -10px 24px rgba(31,41,55,.035)}
.mutation-detail-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #e2e5ee;border-radius:14px;background:#fafbfe;color:#30394d;text-align:left;transition:.18s ease}
.mutation-detail-toggle:hover{border-color:#cac3ff;background:#f8f7ff}
.mutation-detail-toggle>span{display:grid;grid-template-columns:20px 1fr;column-gap:9px;align-items:center;min-width:0}
.mutation-detail-toggle>span>svg{grid-row:1/3;width:18px;height:18px;color:#6755ec}
.mutation-detail-toggle strong{font-size:.73rem;line-height:1.2}
.mutation-detail-toggle small{display:block;margin-top:3px;font-size:.62rem;color:#7d8798;line-height:1.35}
.mutation-detail-chevron{width:17px;height:17px;transition:transform .18s ease;flex:0 0 auto}
.mutation-detail-toggle.is-open .mutation-detail-chevron{transform:rotate(180deg)}
.mutation-detail-panel{padding:14px;border:1px solid #e4e7ef;border-radius:15px;background:#fcfcfe}
.mutation-detail-panel textarea{min-height:74px!important}
@media(max-width:767px){
  .mutation-modal-dialog{height:calc(100vh - .8rem);margin:.4rem}
  .mutation-modal-content{border-radius:16px}
  .mutation-modal-body{padding-top:14px}
  .mutation-info{font-size:.67rem;padding:11px 12px}
  .mutation-detail-toggle small{white-space:normal}
  .mutation-modal-footer{padding-top:10px;padding-bottom:10px}
}

/* v5.35 — Rekap periode interaktif */
.period-report-page{display:grid;gap:18px}.period-report-hero{overflow:visible}.period-report-head{align-items:flex-start;gap:18px}.section-eyebrow{display:block;margin-bottom:4px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6366f1}.period-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.period-export-btn{border:0;box-shadow:0 8px 20px rgba(22,163,74,.16)}.period-filter{display:grid;grid-template-columns:minmax(220px,1fr) 38px minmax(220px,1fr) auto;align-items:end;gap:12px;margin-top:18px;padding:14px;border:1px solid #e8ebf4;border-radius:18px;background:#fafbff}.period-filter-field label{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:.75rem;font-weight:800;color:#334155}.period-filter-field label svg{width:15px;height:15px;color:#6366f1}.period-filter-separator{display:grid;place-items:center;height:44px;color:#94a3b8}.period-show-btn{height:44px;white-space:nowrap}.period-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.period-summary-card{display:flex;align-items:center;gap:12px;min-height:88px;padding:15px;border:1px solid #e8ebf4;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.035)}.period-summary-card>span{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:13px;background:#eef2ff;color:#4f46e5}.period-summary-card>span svg{width:19px;height:19px}.period-summary-card div{min-width:0}.period-summary-card small,.period-summary-card em{display:block;color:#64748b;font-size:.69rem;font-style:normal;line-height:1.25}.period-summary-card strong{display:block;margin:2px 0;font-size:1.25rem;line-height:1.1;color:#172033}.period-summary-card.primary{border-color:#c7d2fe;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff}.period-summary-card.primary>span{background:rgba(255,255,255,.16);color:#fff}.period-summary-card.primary strong,.period-summary-card.primary small,.period-summary-card.primary em{color:#fff}.period-summary-card.is-loading{opacity:.55}.period-rombel-panel{padding-bottom:18px}.period-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.period-section-head h4,.period-detail-head h4{margin:0;color:#172033}.period-section-head p,.period-detail-head p{margin:3px 0 0;color:#64748b;font-size:.82rem}.period-overview-tools{display:flex;align-items:center;gap:10px}.list-search.compact{min-width:290px}.period-count-badge{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border-radius:12px;background:#f1f5f9;color:#475569;font-size:.76rem;font-weight:800;white-space:nowrap}.period-loading{display:flex;align-items:center;justify-content:center;gap:9px;min-height:150px;color:#64748b}.period-rombel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.period-rombel-card{position:relative;display:block;width:100%;padding:15px;text-align:left;border:1px solid #e6eaf2;border-radius:18px;background:#fff;color:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;overflow:hidden}.period-rombel-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#cbd5e1}.period-rombel-card.complete:before{background:#16a34a}.period-rombel-card.progressing:before{background:#f59e0b}.period-rombel-card.attention:before{background:#ef4444}.period-rombel-card:hover{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:0 14px 34px rgba(79,70,229,.1)}.period-rombel-top{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center}.period-rombel-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eef2ff;color:#4f46e5;font-weight:900}.period-rombel-top strong{display:block;color:#172033}.period-rombel-top div>span{display:block;margin-top:2px;color:#64748b;font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.period-state{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:10px;background:#f8fafc;color:#64748b;font-size:.68rem;font-weight:800}.period-state svg{width:14px;height:14px}.complete .period-state{background:#ecfdf5;color:#15803d}.attention .period-state{background:#fef2f2;color:#b91c1c}.period-progress{height:6px;margin:14px 0 11px;border-radius:999px;background:#eef2f7;overflow:hidden}.period-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6366f1,#8b5cf6)}.complete .period-progress span{background:linear-gradient(90deg,#16a34a,#22c55e)}.attention .period-progress span{background:linear-gradient(90deg,#ef4444,#f97316)}.period-rombel-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.period-rombel-stats span{min-width:0;padding:8px;border-radius:11px;background:#f8fafc}.period-rombel-stats b,.period-rombel-stats small{display:block}.period-rombel-stats b{font-size:.9rem;color:#172033}.period-rombel-stats small{margin-top:2px;color:#64748b;font-size:.62rem}.period-rombel-stats .danger b{color:#dc2626}.period-rombel-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:11px;border-top:1px dashed #e2e8f0;color:#64748b;font-size:.7rem}.period-rombel-footer span{display:inline-flex;align-items:center;gap:6px;min-width:0}.period-rombel-footer span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.period-rombel-footer svg{width:14px;height:14px}.period-detail-panel{padding-bottom:18px}.period-detail-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.period-detail-title{display:flex;align-items:center;gap:12px}.period-detail-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:14px}.period-detail-summary span{padding:10px 12px;border-radius:13px;background:#f8fafc;border:1px solid #edf0f5}.period-detail-summary small,.period-detail-summary strong{display:block}.period-detail-summary small{color:#64748b;font-size:.68rem}.period-detail-summary strong{margin-top:3px;color:#172033;font-size:1rem}.period-detail-summary .danger strong{color:#dc2626}.period-student-card .report-metrics.compact{grid-template-columns:repeat(5,minmax(54px,1fr))}.period-student-card .report-metrics .metric-hadir b{color:#15803d}.period-student-card .report-metrics .metric-terlambat b{color:#d97706}.period-student-card .report-metrics .metric-alpa b{color:#dc2626}
@media(max-width:1200px){.period-summary-grid{grid-template-columns:repeat(3,1fr)}.period-rombel-grid{grid-template-columns:1fr}.period-filter{grid-template-columns:1fr 28px 1fr}.period-show-btn{grid-column:1/-1}.period-show-btn{width:100%}}
@media(max-width:768px){.period-report-head,.period-section-head,.period-detail-head{align-items:stretch;flex-direction:column}.period-head-actions,.period-overview-tools{width:100%}.period-head-actions .btn{flex:1}.period-filter{grid-template-columns:1fr}.period-filter-separator{display:none}.period-summary-grid{grid-template-columns:repeat(2,1fr)}.period-summary-card{min-height:78px;padding:12px}.list-search.compact{min-width:0;flex:1}.period-detail-summary{grid-template-columns:repeat(2,1fr)}.period-detail-head .period-export-btn{width:100%}.period-student-card{grid-template-columns:42px minmax(0,1fr)!important}.period-student-card .report-metrics.compact,.period-student-card .attendance-percent{grid-column:1/-1}.period-rombel-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.period-summary-grid{grid-template-columns:1fr}.period-rombel-top{grid-template-columns:38px minmax(0,1fr)}.period-state{grid-column:1/-1;justify-content:center}.period-rombel-footer{align-items:flex-start;flex-direction:column}.period-overview-tools{align-items:stretch;flex-direction:column}.period-count-badge{width:100%}}

/* v5.36 — rekap periode/bulanan compact + export semua rombel */
.period-report-page{gap:12px}
.period-report-page>.panel-card,.monthly-page{padding:16px}
.period-report-head,.period-section-head,.period-detail-head{gap:12px}
.period-report-hero .panel-head{margin-bottom:0}
.period-filter{margin-top:12px;padding:11px 12px;border-radius:14px;gap:9px}
.period-filter-field label{margin-bottom:5px}
.period-summary-grid{gap:8px}
.period-summary-card{min-height:68px;padding:11px 12px;border-radius:14px;gap:9px}
.period-summary-card>span{width:34px;height:34px;flex-basis:34px;border-radius:10px}
.period-summary-card>span svg{width:16px;height:16px}
.period-summary-card strong{font-size:1.05rem}
.period-rombel-panel,.period-detail-panel{padding:14px}
.period-section-head{margin-bottom:10px}
.period-rombel-grid{gap:8px}
.period-rombel-card{padding:11px 12px;border-radius:14px}
.period-rombel-top{grid-template-columns:36px minmax(0,1fr) auto;gap:9px}
.period-rombel-avatar{width:36px;height:36px;border-radius:10px;font-size:.8rem}
.period-state{padding:5px 8px;border-radius:8px;font-size:.62rem}
.period-progress{margin:9px 0 8px;height:5px}
.period-rombel-stats{gap:6px}
.period-rombel-stats span{padding:6px 7px;border-radius:9px}
.period-rombel-stats b{font-size:.8rem}
.period-rombel-stats small{font-size:.56rem}
.period-rombel-footer{margin-top:8px;padding-top:8px;font-size:.63rem}
.period-detail-summary{gap:7px;margin-top:10px}
.period-detail-summary span{padding:8px 10px;border-radius:10px}
.period-head-actions .btn{min-height:38px}
.period-export-btn{box-shadow:none}
.period-export-btn.btn-outline-success{background:#fff}

.monthly-page{overflow:visible}
.monthly-page .panel-head{margin-bottom:10px}
.monthly-filter-row{margin-bottom:0;gap:9px}
.monthly-overview{gap:10px;margin-top:14px!important}
.monthly-overview-head{gap:10px}
.monthly-overview-tools{flex-wrap:wrap}
.monthly-export-all{white-space:nowrap;min-height:38px;display:inline-flex;align-items:center;gap:7px}
.monthly-rombel-grid{gap:7px}
.monthly-rombel-card{grid-template-columns:36px minmax(140px,1.1fr) minmax(82px,.45fr) minmax(135px,.7fr) minmax(180px,1fr) auto 16px;gap:9px;padding:9px 11px;border-radius:13px;box-shadow:none}
.monthly-rombel-card .daily-rombel-icon{width:36px;height:36px;border-radius:10px}
.monthly-rombel-card .daily-rombel-main strong{font-size:.76rem}
.monthly-rombel-card .daily-rombel-main small{font-size:.57rem}
.monthly-target b{font-size:.75rem}
.monthly-target small{font-size:.51rem}
.monthly-target em{font-size:.48rem}
.monthly-rombel-card .daily-rombel-progress{gap:5px}
.monthly-rombel-card .daily-rombel-progress b{font-size:.66rem}
.monthly-rombel-card .daily-rombel-progress small{font-size:.48rem}
.monthly-rombel-card .daily-rombel-metrics{gap:5px}
.monthly-rombel-card .daily-rombel-metrics span{padding:5px 7px;border-radius:8px}
.monthly-rombel-card .daily-rombel-metrics b{font-size:.68rem}
.monthly-rombel-card .daily-rombel-metrics small{font-size:.48rem}
.monthly-rombel-card .daily-rombel-state{padding:5px 7px;font-size:.54rem}
.monthly-detail-head{min-height:48px}

@media(max-width:1200px){
  .monthly-rombel-card{grid-template-columns:36px minmax(150px,1fr) minmax(82px,.45fr) minmax(135px,.75fr) auto 16px}
}
@media(max-width:820px){
  .period-report-page>.panel-card,.monthly-page{padding:12px}
  .monthly-overview-tools{align-items:stretch}
  .monthly-export-all{flex:1;justify-content:center}
}

/* v5.37 - Smart TV interactive live attendance */
.live-v2-body{overflow:hidden;touch-action:manipulation;background:#070b16}.live-v2-shell{height:100vh;display:grid;grid-template-rows:76px minmax(0,1fr) 30px;background:radial-gradient(circle at 10% 0%,rgba(99,102,241,.2),transparent 30%),radial-gradient(circle at 92% 10%,rgba(14,165,233,.16),transparent 28%),linear-gradient(160deg,#080d1b,#0d1427 55%,#0b1727);color:#f8fafc}.live-v2-header{display:grid;grid-template-columns:minmax(250px,.9fr) auto minmax(350px,1fr);align-items:center;gap:18px;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(5,9,20,.78);backdrop-filter:blur(20px);z-index:20}.live-v2-brand{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:12px;text-align:left;min-width:0}.live-v2-brand>span:last-child{min-width:0}.live-v2-brand small,.live-v2-brand strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-v2-brand small{font-size:10px;letter-spacing:.1em;color:#93a0bc;text-transform:uppercase}.live-v2-brand strong{font-size:19px;margin-top:1px}.live-v2-nav{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.04)}.live-v2-nav button{min-height:48px;padding:0 15px;border:0;border-radius:12px;background:transparent;color:#8996af;display:flex;align-items:center;gap:8px;font-weight:700;font-size:12px;transition:.2s ease}.live-v2-nav button svg{width:17px;height:17px}.live-v2-nav button.active,.live-v2-nav button:hover{background:linear-gradient(135deg,rgba(99,102,241,.95),rgba(59,130,246,.92));color:#fff;box-shadow:0 8px 22px rgba(37,99,235,.24);transform:translateY(-1px)}.live-v2-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}.live-v2-actions .live-clock{margin:0 4px}.live-v2-actions .live-clock strong{font-size:22px}.live-v2-actions .live-icon-button{min-width:48px;min-height:48px;cursor:pointer;transition:.2s}.live-v2-actions .live-icon-button:hover,.live-v2-actions .live-icon-button.active{background:rgba(99,102,241,.2);border-color:rgba(129,140,248,.5);transform:translateY(-1px)}.live-v2-main{min-height:0;overflow:hidden;padding:14px 20px}.live-v2-page{height:100%;overflow:auto;animation:livePageIn .38s ease both;padding:1px 2px 10px}.live-v2-page[hidden]{display:none!important}.live-v2-page::-webkit-scrollbar{width:6px}.live-v2-page::-webkit-scrollbar-thumb{background:#33405b;border-radius:999px}.live-v2-hero{min-height:112px;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(14,165,233,.06));position:relative;overflow:hidden}.live-v2-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:4%;top:-150px;background:radial-gradient(circle,rgba(129,140,248,.28),transparent 65%);animation:liveFloat 6s ease-in-out infinite}.live-v2-kicker{font-size:9px;letter-spacing:.16em;color:#8ea0c4;font-weight:800}.live-v2-hero h1,.live-v2-page-head h1{font-size:26px;margin:3px 0 2px}.live-v2-hero p,.live-v2-page-head p{margin:0;color:#8e9ab3;font-size:12px}.live-v2-presence{position:relative;z-index:2}.live-v2-ring,.live-v2-ring-small{--value:0deg;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#34d399 var(--value),rgba(255,255,255,.08) 0);position:relative}.live-v2-ring{width:84px;height:84px}.live-v2-ring:before,.live-v2-ring-small:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#11192b}.live-v2-ring strong,.live-v2-ring span,.live-v2-ring-small b{position:relative;z-index:1}.live-v2-ring strong{font-size:19px;align-self:end}.live-v2-ring span{font-size:8px;color:#91a0b9;align-self:start}.live-v2-stats{margin-top:12px;grid-template-columns:repeat(7,minmax(0,1fr))}.live-v2-stats .live-stat{min-height:78px;cursor:default;transition:.25s ease}.live-v2-stats .live-stat:hover{transform:translateY(-3px);border-color:rgba(129,140,248,.35);box-shadow:0 14px 34px rgba(0,0,0,.16)}.live-v2-dashboard-grid{display:grid;grid-template-columns:1.2fr .85fr .85fr;gap:12px;margin-top:12px;min-height:0}.live-v2-panel{padding:14px;min-height:210px}.live-v2-span-2{grid-column:span 2}.live-v2-link{min-height:42px;border:0;border-radius:11px;background:rgba(99,102,241,.12);color:#aeb5ff;padding:0 12px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px}.live-v2-link svg{width:15px}.live-v2-class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.live-class-row{width:100%;text-align:left;color:inherit;cursor:pointer;transition:.2s ease}.live-class-row:hover{transform:translateY(-2px);background:rgba(99,102,241,.09);border-color:rgba(129,140,248,.35)}.live-v2-class-foot{display:flex;justify-content:space-between;gap:8px;align-items:center}.live-v2-class-foot span{font-size:9px;color:#aab3c8}.live-v2-bars{height:145px;display:flex;align-items:flex-end;gap:6px;padding-top:8px}.live-v2-bars>div{flex:1;min-width:0;height:100%;display:grid;grid-template-rows:14px 1fr 15px;gap:4px;text-align:center}.live-v2-bars span,.live-v2-bars small{font-size:8px;color:#7f8da9}.live-v2-bars i{display:flex;align-items:flex-end;justify-content:center;border-radius:7px;background:rgba(255,255,255,.035);overflow:hidden}.live-v2-bars b{width:65%;min-height:4px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#7c83ff,#22c55e);animation:liveBarGrow .7s ease both}.live-v2-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:4px 4px 0}.live-v2-search{width:min(330px,38vw);height:48px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.05)}.live-v2-search svg{width:18px;color:#7d8aa6}.live-v2-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:13px}.live-v2-search input::placeholder{color:#69768f}.live-v2-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:920px;margin:0 auto 14px;align-items:end}.live-v2-podium-card{border:1px solid rgba(255,255,255,.09);border-radius:22px;background:rgba(255,255,255,.055);color:#fff;min-height:150px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:.25s}.live-v2-podium-card:hover{transform:translateY(-5px)}.live-v2-podium-card.rank-1{min-height:182px;background:linear-gradient(145deg,rgba(245,158,11,.18),rgba(255,255,255,.04));border-color:rgba(245,158,11,.35);order:2}.live-v2-podium-card.rank-2{order:1}.live-v2-podium-card.rank-3{order:3}.live-v2-podium-card>span{font-size:33px}.live-v2-podium-card strong{font-size:17px}.live-v2-podium-card b{font-size:27px;color:#cfd3ff}.live-v2-podium-card small{font-size:10px;color:#8d9ab3}.live-v2-table-panel{min-height:340px}.live-v2-leader-list{display:grid;gap:7px;overflow:auto}.live-v2-leader-row{min-height:58px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.035);color:#fff;display:grid;grid-template-columns:35px minmax(160px,1fr) minmax(160px,1fr) 70px 95px;gap:12px;align-items:center;padding:8px 12px;text-align:left;cursor:pointer}.live-v2-leader-row:hover{background:rgba(99,102,241,.09)}.live-v2-leader-row>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(99,102,241,.15);font-weight:800}.live-v2-leader-row strong,.live-v2-leader-row small{display:block}.live-v2-leader-row small{font-size:9px;color:#7e8ca8}.live-v2-leader-row b{text-align:center;color:#bfc4ff}.live-v2-leader-row em{font-style:normal;color:#fbbf24;font-size:10px;text-align:right}.live-v2-mini-progress{height:7px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}.live-v2-mini-progress i{display:block;height:100%;background:linear-gradient(90deg,#6366f1,#34d399)}.live-v2-rombel-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.live-v2-rombel-card{min-height:112px;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:rgba(255,255,255,.05);color:#fff;padding:14px;display:grid;grid-template-columns:44px minmax(0,1fr) 56px auto 20px;align-items:center;gap:11px;text-align:left;cursor:pointer;transition:.25s}.live-v2-rombel-card:hover{transform:translateY(-3px);border-color:rgba(129,140,248,.4);background:rgba(99,102,241,.08)}.live-v2-rombel-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(99,102,241,.15);color:#aeb4ff}.live-v2-rombel-card strong,.live-v2-rombel-card small{display:block}.live-v2-rombel-card small{font-size:9px;color:#8492ad;margin-top:3px}.live-v2-ring-small{width:50px;height:50px}.live-v2-ring-small:before{inset:5px}.live-v2-ring-small b{font-size:11px}.live-v2-rombel-meta{display:flex;flex-direction:column;gap:3px;align-items:flex-end}.live-v2-rombel-meta span,.live-v2-rombel-meta em{font-size:9px;font-style:normal;white-space:nowrap}.live-v2-rombel-meta span{color:#69dca0}.live-v2-rombel-meta em{color:#fbbf24}.live-v2-activity-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.live-v2-activity-card{min-height:76px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:rgba(255,255,255,.045);display:grid;grid-template-columns:44px minmax(0,1fr) auto 55px;align-items:center;gap:11px;padding:10px 13px;animation:liveRowIn .35s ease both}.live-v2-activity-card.is-new{border-color:rgba(52,211,153,.4);box-shadow:0 0 0 1px rgba(52,211,153,.08) inset}.live-v2-activity-card strong,.live-v2-activity-card small{display:block}.live-v2-activity-card small{color:#8290aa;font-size:9px;margin-top:3px}.live-v2-activity-card>b{text-align:right;font-size:16px}.live-v2-toast{position:fixed;right:24px;bottom:42px;z-index:80;min-width:330px;max-width:440px;border:1px solid rgba(52,211,153,.38);border-radius:18px;background:rgba(12,23,36,.94);backdrop-filter:blur(16px);box-shadow:0 22px 60px rgba(0,0,0,.38);padding:13px;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:11px;align-items:center;animation:liveToastIn .4s cubic-bezier(.2,.8,.2,1)}.live-v2-toast[hidden]{display:none}.live-v2-toast small,.live-v2-toast strong,.live-v2-toast span{display:block}.live-v2-toast small{font-size:8px;color:#63dba0;letter-spacing:.12em}.live-v2-toast strong{font-size:14px}.live-v2-toast div span{font-size:10px;color:#94a1b9}.live-v2-toast>svg{color:#34d399}.live-v2-modal{position:fixed;inset:0;z-index:100;background:rgba(2,6,15,.74);backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px}.live-v2-modal[hidden]{display:none}.live-v2-modal-card{width:min(980px,94vw);max-height:88vh;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:#11192a;box-shadow:0 30px 80px rgba(0,0,0,.48);overflow:hidden;animation:liveModalIn .28s ease}.live-v2-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.live-v2-modal-head small,.live-v2-modal-head h2,.live-v2-modal-head span{display:block}.live-v2-modal-head small{font-size:8px;color:#7f8ca7;letter-spacing:.13em}.live-v2-modal-head h2{font-size:22px;margin:2px 0}.live-v2-modal-head span{font-size:10px;color:#8e9ab3}.live-v2-modal-head button{width:48px;height:48px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.05);color:#fff}.live-v2-modal-body{max-height:calc(88vh - 90px);overflow:auto;padding:15px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.live-v2-student-row{min-height:64px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.04);display:grid;grid-template-columns:38px minmax(0,1fr) auto 52px;align-items:center;gap:9px;padding:8px 10px}.live-v2-student-row strong,.live-v2-student-row small{display:block}.live-v2-student-row small{font-size:9px;color:#7d8ba5}.live-v2-student-row>b{text-align:right;font-size:12px}.live-v2-status{font-size:9px;padding:5px 8px;border-radius:999px;background:rgba(148,163,184,.13);color:#b8c1d1}.live-v2-status.st-hadir{background:rgba(34,197,94,.13);color:#67e89e}.live-v2-status.st-terlambat{background:rgba(245,158,11,.14);color:#fbc65a}.live-v2-status.st-sakit{background:rgba(59,130,246,.14);color:#8bb8ff}.live-v2-status.st-izin{background:rgba(168,85,247,.14);color:#c9a0ff}.live-v2-status.st-alpa{background:rgba(244,63,94,.14);color:#fb8da0}.live-v2-footer{height:30px;padding:0 22px;align-items:center;background:rgba(5,9,20,.72)}.live-v2-loading{min-height:160px;display:flex;align-items:center;justify-content:center;gap:9px;color:#8390a8}.live-v2-loading svg{animation:liveSpin 1s linear infinite}
@keyframes livePageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes liveFloat{50%{transform:translateY(18px) scale(1.05)}}@keyframes liveBarGrow{from{height:0}}@keyframes liveRowIn{from{opacity:0;transform:translateX(10px)}}@keyframes liveToastIn{from{opacity:0;transform:translateY(18px) scale(.96)}}@keyframes liveModalIn{from{opacity:0;transform:scale(.97)}}@keyframes liveSpin{to{transform:rotate(360deg)}}
@media(max-width:1350px){.live-v2-header{grid-template-columns:minmax(220px,.8fr) auto minmax(280px,.9fr)}.live-v2-nav button{padding:0 11px}.live-v2-sync{display:none}.live-v2-rombel-board{grid-template-columns:repeat(2,minmax(0,1fr))}.live-v2-dashboard-grid{grid-template-columns:1.2fr 1fr}.live-v2-span-2{grid-column:span 2}}
@media(max-width:1024px){.live-v2-body{overflow:auto}.live-v2-shell{height:auto;min-height:100vh;grid-template-rows:auto 1fr 34px}.live-v2-header{grid-template-columns:1fr auto;padding:10px 14px}.live-v2-nav{grid-column:1/-1;grid-row:2;overflow-x:auto;justify-content:center}.live-v2-actions .live-sync,.live-v2-actions .live-clock span{display:none}.live-v2-main{overflow:visible;padding:12px}.live-v2-page{overflow:visible}.live-v2-stats{grid-template-columns:repeat(4,1fr)}.live-v2-dashboard-grid{grid-template-columns:1fr}.live-v2-span-2{grid-column:auto}.live-v2-class-grid{grid-template-columns:1fr 1fr}.live-v2-modal-body{grid-template-columns:1fr}.live-v2-activity-board{grid-template-columns:1fr}.live-v2-podium{max-width:none}}
@media(max-width:700px){.live-v2-header{position:sticky;top:0}.live-v2-brand strong{font-size:15px}.live-v2-brand-icon{width:42px;height:42px}.live-v2-actions .live-clock{display:none}.live-v2-actions .live-icon-button{min-width:44px;min-height:44px}.live-v2-nav{justify-content:flex-start}.live-v2-nav button{min-width:max-content}.live-v2-hero{padding:14px}.live-v2-hero h1,.live-v2-page-head h1{font-size:20px}.live-v2-stats{grid-template-columns:repeat(2,1fr)}.live-v2-class-grid{grid-template-columns:1fr}.live-v2-page-head{align-items:flex-start;flex-direction:column}.live-v2-search{width:100%}.live-v2-rombel-board{grid-template-columns:1fr}.live-v2-podium{grid-template-columns:1fr}.live-v2-podium-card,.live-v2-podium-card.rank-1{order:initial;min-height:110px}.live-v2-leader-row{grid-template-columns:32px 1fr 60px}.live-v2-leader-row .live-v2-mini-progress,.live-v2-leader-row em{display:none}.live-v2-modal{padding:8px}.live-v2-modal-card{width:100%;max-height:96vh}.live-v2-modal-body{max-height:calc(96vh - 90px)}.live-v2-toast{left:10px;right:10px;bottom:38px;min-width:0}.live-v2-footer span:first-child{display:none}}
@media(prefers-reduced-motion:reduce){.live-v2-page,.live-v2-toast,.live-v2-modal-card,.live-v2-bars b,.live-v2-hero:after{animation:none!important}.live-v2-nav button,.live-stat,.live-class-row,.live-v2-rombel-card{transition:none!important}}

/* v5.38 — detail kehadiran & timeline */
.period-student-card.is-interactive{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.period-student-card.is-interactive:hover,.period-student-card.is-interactive:focus-within{transform:translateY(-2px);border-color:rgba(79,70,229,.28);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.period-student-card .card-main small{display:block;margin-top:3px;color:#8b95a7;font-size:.72rem}
.attendance-detail-open{margin-left:auto;flex:0 0 auto}
.matrix-status{appearance:none;-webkit-appearance:none;border:0;font:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.matrix-status.is-clickable{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.matrix-status.is-clickable:hover,.matrix-status.is-clickable:focus{transform:scale(1.16);box-shadow:0 7px 16px rgba(15,23,42,.18);outline:2px solid rgba(79,70,229,.25);outline-offset:2px}
.matrix-status.is-static{cursor:default;opacity:.85}
.matrix-student-link{width:100%;display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:center;text-align:left;background:none;border:0;padding:0;color:inherit}
.matrix-student-link strong,.matrix-student-link small{grid-column:1}
.matrix-student-link svg{grid-column:2;grid-row:1/3;width:15px;height:15px;color:#6366f1;opacity:.55;transition:opacity .15s ease,transform .15s ease}
.matrix-student-link:hover svg{opacity:1;transform:translateX(2px)}
.attendance-detail-modal .modal-dialog{max-width:900px}
.attendance-detail-modal .modal-content{border:0;border-radius:24px;overflow:hidden;box-shadow:0 28px 70px rgba(15,23,42,.22)}
.attendance-detail-header{padding:18px 22px;border-bottom:1px solid #edf0f6;background:linear-gradient(135deg,#fff,#f8f9ff)}
.attendance-detail-person{display:flex;align-items:center;gap:13px;min-width:0}
.attendance-detail-avatar{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#6558f5,#8b7cff);color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 8px 18px rgba(99,88,245,.24)}
.attendance-detail-person h5{font-size:1.03rem;margin:1px 0 2px;color:#172033}
.attendance-detail-person small{color:#7a8599}
.attendance-detail-modal .modal-body{padding:18px 22px;background:#fbfcff}
.attendance-detail-loading{min-height:170px;display:flex;align-items:center;justify-content:center;gap:10px;color:#768197}
.attendance-detail-summary{display:grid;grid-template-columns:1.15fr repeat(3,1fr);gap:10px;margin-bottom:16px}
.attendance-detail-summary article{min-height:92px;border:1px solid #e7eaf1;border-radius:16px;padding:13px 14px;background:#fff;display:flex;flex-direction:column;justify-content:center;min-width:0}
.attendance-detail-summary article>small{font-size:.69rem;text-transform:uppercase;letter-spacing:.06em;color:#929bad;font-weight:700}
.attendance-detail-summary article>strong{font-size:1.08rem;color:#182236;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attendance-detail-summary article>em{font-size:.73rem;color:#7f899b;font-style:normal;margin-top:3px}
.attendance-detail-summary .attendance-detail-status{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center}
.attendance-detail-status>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eefbf4;color:#16a66a}
.attendance-detail-status>span svg{width:20px;height:20px}
.attendance-detail-status>div{display:flex;flex-direction:column;min-width:0}
.attendance-detail-status.tone-terlambat>span{background:#fff7df;color:#d48a00}.attendance-detail-status.tone-alpa>span{background:#fff0f1;color:#dc4354}.attendance-detail-status.tone-sakit>span,.attendance-detail-status.tone-izin>span{background:#eef6ff;color:#3479d7}
.attendance-detail-note{font-size:.86rem!important;white-space:normal!important;line-height:1.35}
.attendance-detail-tabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:#eef1f7;margin-bottom:14px}
.attendance-detail-tabs button{flex:1;border:0;background:transparent;border-radius:11px;padding:10px 12px;display:flex;justify-content:center;align-items:center;gap:7px;color:#6f798d;font-weight:700;font-size:.83rem;transition:.16s ease}
.attendance-detail-tabs button.active{background:#fff;color:#5547e8;box-shadow:0 5px 14px rgba(15,23,42,.08)}
.attendance-detail-tabs svg{width:16px;height:16px}
.attendance-timeline{position:relative;padding:4px 0}
.attendance-timeline:before{content:"";position:absolute;left:20px;top:16px;bottom:16px;width:2px;background:#e8eaf1}
.attendance-timeline-item{position:relative;display:grid;grid-template-columns:42px 54px 1fr;gap:10px;align-items:start;padding:9px 0}
.attendance-timeline-dot{z-index:1;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#eef2ff;color:#5d52ec;border:4px solid #fbfcff}
.attendance-timeline-item.tone-success .attendance-timeline-dot{background:#e9fbf2;color:#18a66b}.attendance-timeline-item.tone-warning .attendance-timeline-dot{background:#fff7df;color:#d68a00}.attendance-timeline-item.tone-danger .attendance-timeline-dot{background:#fff0f1;color:#d94255}.attendance-timeline-item.tone-purple .attendance-timeline-dot{background:#f2efff;color:#7458e8}.attendance-timeline-item.tone-muted .attendance-timeline-dot{background:#f1f3f7;color:#7b8496}
.attendance-timeline-dot svg{width:16px;height:16px}
.attendance-timeline-time{padding-top:10px;font-weight:800;color:#576175;font-size:.82rem}
.attendance-timeline-content{background:#fff;border:1px solid #e8ebf2;border-radius:15px;padding:12px 14px;min-width:0}
.attendance-timeline-content strong{color:#1d2739;font-size:.9rem}.attendance-timeline-content p{margin:3px 0 8px;color:#717c90;font-size:.79rem}
.attendance-timeline-meta{display:flex;flex-wrap:wrap;gap:6px}.attendance-timeline-meta span,.attendance-timeline-meta a{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;background:#f4f6fa;color:#5f6a7e;font-size:.7rem;text-decoration:none}.attendance-timeline-meta a:hover{color:#5145df;background:#efedff}.attendance-timeline-meta svg{width:12px;height:12px}
.attendance-detail-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7d8799;gap:4px}.attendance-detail-empty svg{width:30px;height:30px;color:#9aa4b5;margin-bottom:4px}.attendance-detail-empty strong{color:#384256}.attendance-detail-empty span{font-size:.78rem}
.attendance-timeline-filter{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:12px}.attendance-timeline-filter label{display:block;font-size:.72rem;font-weight:700;color:#566176;margin-bottom:5px}.attendance-timeline-filter .btn{height:42px;display:flex;align-items:center;gap:6px}
.attendance-history-list{display:flex;flex-direction:column;gap:7px;max-height:390px;overflow:auto;padding-right:3px}
.attendance-history-row{display:grid;grid-template-columns:48px minmax(150px,1fr) 70px 70px auto 18px;gap:10px;align-items:center;width:100%;border:1px solid #e7eaf1;background:#fff;border-radius:14px;padding:9px 11px;text-align:left;color:inherit;transition:.16s ease}.attendance-history-row:hover{border-color:#cfcafc;transform:translateX(2px);box-shadow:0 8px 18px rgba(15,23,42,.06)}
.attendance-history-date{width:42px;height:42px;border-radius:12px;background:#f0efff;color:#574be5;display:flex;flex-direction:column;align-items:center;justify-content:center}.attendance-history-date b{font-size:.98rem;line-height:1}.attendance-history-date small{font-size:.62rem;text-transform:uppercase}.attendance-history-main{display:flex;flex-direction:column;min-width:0}.attendance-history-main strong{font-size:.84rem;color:#202a3d}.attendance-history-main small{font-size:.69rem;color:#8590a2}.attendance-history-hours{display:flex;flex-direction:column}.attendance-history-hours b{font-size:.8rem}.attendance-history-hours small{font-size:.63rem;color:#929bac}.attendance-history-badge{border-radius:999px;padding:5px 8px;background:#f2f4f8;color:#697488;font-size:.68rem;white-space:nowrap}.attendance-history-badge.tone-hadir{background:#eafaf2;color:#13865a}.attendance-history-badge.tone-terlambat{background:#fff5da;color:#a96b00}.attendance-history-badge.tone-alpa{background:#fff0f1;color:#bd3245}
.attendance-history-row>svg{width:15px;height:15px;color:#9aa3b4}
.attendance-detail-footer{padding:13px 22px;border-top:1px solid #edf0f5;display:flex;justify-content:space-between}.attendance-detail-footer>span{display:flex;align-items:center;gap:6px;color:#8a94a5;font-size:.72rem}.attendance-detail-footer>span svg{width:14px;height:14px}
@media(max-width:767px){.attendance-detail-modal .modal-dialog{margin:.55rem}.attendance-detail-modal .modal-content{border-radius:19px}.attendance-detail-summary{grid-template-columns:1fr 1fr}.attendance-detail-summary .attendance-detail-status{grid-column:1/-1}.attendance-timeline-item{grid-template-columns:40px 1fr}.attendance-timeline-time{grid-column:2;padding-top:0;font-size:.72rem}.attendance-timeline-content{grid-column:2}.attendance-timeline-filter{grid-template-columns:1fr 1fr}.attendance-timeline-filter .btn{grid-column:1/-1;justify-content:center}.attendance-history-row{grid-template-columns:42px 1fr auto}.attendance-history-hours{display:none}.attendance-history-badge{grid-column:2}.attendance-history-row>svg{grid-column:3;grid-row:1/3}.attendance-detail-footer>span{display:none}.attendance-detail-footer{justify-content:flex-end}}

/* v5.39 — rekap periode lebih compact dan aksi lebih sederhana */
.period-report-page{display:grid;gap:12px}
.period-report-page>.panel-card{margin:0}
.period-report-hero{padding:16px 18px}
.period-report-head{margin-bottom:12px;align-items:flex-start}
.period-report-head h3{font-size:1.08rem;margin-bottom:2px}
.period-report-head p{font-size:.78rem;margin-top:2px}
.period-head-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.period-head-actions .btn{min-height:36px;padding:7px 11px;font-size:.78rem}
.period-filter{padding:10px 12px;gap:10px;border-radius:13px}
.period-filter-field label{font-size:.7rem;margin-bottom:5px}
.period-filter .form-control{min-height:40px;font-size:.82rem}
.period-filter-separator{width:28px}
.period-show-btn{min-height:40px;padding:8px 13px;font-size:.78rem}
.period-summary-grid{gap:7px;margin:0}
.period-summary-card{min-height:60px;padding:9px 10px;border-radius:12px}
.period-summary-card>span{width:31px;height:31px;flex:0 0 31px;border-radius:9px}
.period-summary-card>span svg{width:15px;height:15px}
.period-summary-card small{font-size:.6rem}
.period-summary-card strong{font-size:.95rem;line-height:1.05}
.period-summary-card em{font-size:.55rem;margin-top:1px}
.period-rombel-panel,.period-detail-panel{padding:13px 14px}
.period-section-head{margin-bottom:8px}
.period-section-head h4{font-size:1rem;margin-bottom:2px}
.period-section-head p{font-size:.72rem;margin:0}
.period-overview-tools{gap:7px}
.period-overview-tools .list-search{min-height:38px}
.period-overview-tools .form-control{min-height:38px;font-size:.78rem}
.period-count-badge{padding:7px 10px;font-size:.68rem}
.period-rombel-grid{gap:7px}
.period-rombel-card{padding:9px 10px;border-radius:12px}
.period-rombel-top{grid-template-columns:32px minmax(0,1fr) auto;gap:8px}
.period-rombel-avatar{width:32px;height:32px;border-radius:9px;font-size:.72rem}
.period-rombel-main strong{font-size:.78rem}
.period-rombel-main span{font-size:.62rem}
.period-state{padding:4px 7px;border-radius:8px;font-size:.56rem}
.period-progress{height:4px;margin:7px 0 6px}
.period-rombel-stats{gap:5px}
.period-rombel-stats span{padding:5px 6px;border-radius:8px}
.period-rombel-stats b{font-size:.72rem}
.period-rombel-stats small{font-size:.49rem}
.period-rombel-footer{margin-top:6px;padding-top:6px;font-size:.58rem}
.period-detail-head{margin-bottom:8px}
.period-detail-title{gap:8px}
.period-detail-title h4{font-size:1rem;margin:0}
.period-detail-title p{font-size:.68rem;margin:2px 0 0}
.period-detail-summary{gap:6px;margin-top:7px}
.period-detail-summary span{padding:7px 8px;border-radius:9px}
.period-detail-summary small{font-size:.54rem}
.period-detail-summary strong{font-size:.78rem}
.period-detail-panel .list-toolbar{padding:10px 0 12px;margin-top:6px!important}
.period-student-card{grid-template-columns:38px minmax(170px,1fr) minmax(360px,2.5fr) 92px!important;gap:10px!important;padding:9px 11px!important;min-height:64px}
.period-student-card .card-avatar{width:36px;height:36px;border-radius:10px;font-size:.76rem}
.period-student-card .card-main strong{font-size:.79rem}
.period-student-card .card-main span{font-size:.64rem;margin-top:1px}
.period-student-card .card-main small{font-size:.58rem;margin-top:1px}
.period-student-card .report-metrics{gap:6px}
.period-student-card .report-metrics span{padding:5px 6px;border-radius:8px;min-height:42px;display:flex;flex-direction:column;justify-content:center}
.period-student-card .report-metrics b{font-size:.78rem;line-height:1}
.period-student-card .report-metrics small{font-size:.49rem;margin-top:3px}
.period-student-card .attendance-percent strong{font-size:1.15rem;line-height:1}
.period-student-card .attendance-percent span{font-size:.58rem}
.period-student-card .attendance-percent small{font-size:.52rem;margin-top:2px}
.period-student-card.is-interactive:hover{transform:translateY(-1px)}
.period-student-card .attendance-detail-open{display:none!important}
.period-detail-panel .modern-list{gap:7px}
.period-detail-panel .list-footer{margin-top:12px;padding-top:12px}
@media(max-width:1050px){
  .period-student-card{grid-template-columns:36px minmax(150px,1fr) 2fr 84px!important}
}
@media(max-width:760px){
  .period-report-page{gap:9px}
  .period-report-hero,.period-rombel-panel,.period-detail-panel{padding:12px}
  .period-report-head{gap:9px}
  .period-head-actions{width:100%}
  .period-head-actions .btn{flex:1;justify-content:center}
  .period-student-card{grid-template-columns:36px 1fr!important;gap:8px!important;padding:9px!important}
  .period-student-card .report-metrics,.period-student-card .attendance-percent{grid-column:1/-1}
  .period-student-card .report-metrics{grid-template-columns:repeat(5,1fr)}
  .period-student-card .attendance-percent{text-align:left;display:flex;align-items:center;gap:7px}
}


/* v5.40 — spacing rekap dan tema terang/gelap global + live dashboard */
.period-summary-grid{margin-bottom:10px!important}
.period-rombel-panel{margin-top:0!important}
@media(min-width:768px){.period-summary-grid{margin-top:4px!important;margin-bottom:12px!important}}

.theme-toggle{display:inline-grid;place-items:center;flex:0 0 auto;margin-left:auto;margin-right:6px;color:#59647a;background:#f2f4f8;border:1px solid #e5e8ef;transition:.18s ease}
.theme-toggle:hover{transform:translateY(-1px);background:#eceffd;color:#5045df}
.theme-toggle svg{margin:0!important;width:18px;height:18px}

html[data-theme="dark"]{color-scheme:dark;--bg:#0c1220;--text:#e8edf7;--muted:#98a5ba;--border:#263149;--primary:#7568ff;--primary-dark:#5e51e8}
html[data-theme="dark"] body{background:#0c1220;color:var(--text)}
html[data-theme="dark"] .main,html[data-theme="dark"] .content{background:#0c1220}
html[data-theme="dark"] .topbar{background:#111827;border-color:#263149}
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .summary-chip,
html[data-theme="dark"] .attendance-card-v2,
html[data-theme="dark"] .modern-list-card,
html[data-theme="dark"] .period-summary-card,
html[data-theme="dark"] .period-rombel-card,
html[data-theme="dark"] .period-student-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .student-qr-card{background:#131c2d!important;border-color:#2a3650!important;color:#e8edf7}
html[data-theme="dark"] .form-control,html[data-theme="dark"] .form-select{background:#101827;border-color:#32405d;color:#e8edf7}
html[data-theme="dark"] .form-control::placeholder{color:#6f7d94}
html[data-theme="dark"] .dropdown-item{color:#dbe3f0}
html[data-theme="dark"] .dropdown-item:hover{background:#1d2940;color:#fff}
html[data-theme="dark"] .table{--bs-table-bg:transparent;--bs-table-color:#e8edf7;--bs-table-border-color:#2a3650}
html[data-theme="dark"] .btn-light,html[data-theme="dark"] .btn-icon,html[data-theme="dark"] .theme-toggle{background:#1b263a;border-color:#32405d;color:#dbe3f0}
html[data-theme="dark"] .page-title p,html[data-theme="dark"] .user-menu small,html[data-theme="dark"] .panel-head p,html[data-theme="dark"] .student-info small{color:#98a5ba}
html[data-theme="dark"] .user-menu>span{background:#2a2458;color:#b8b0ff}
html[data-theme="dark"] .user-menu strong,html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] strong{color:#f4f7fb}
html[data-theme="dark"] .period-rombel-stats span,html[data-theme="dark"] .period-detail-summary span,html[data-theme="dark"] .report-metrics span{background:#172237!important;border-color:#2a3650!important}
html[data-theme="dark"] .list-search,html[data-theme="dark"] .attendance-timeline-content,html[data-theme="dark"] .attendance-history-row{background:#111a2a!important;border-color:#2a3650!important;color:#e8edf7}
html[data-theme="dark"] .modal-header,html[data-theme="dark"] .modal-footer{border-color:#2a3650}
html[data-theme="dark"] .text-muted{color:#98a5ba!important}

/* live dashboard themes */
html[data-live-theme="light"]{color-scheme:light}
html[data-live-theme="light"] body.live-v2-body{background:#eef3fb;color:#172033}
html[data-live-theme="light"] .live-v2-shell{background:radial-gradient(circle at 20% 0,#ffffff 0,#eef3fb 42%,#e7edf7 100%)}
html[data-live-theme="light"] .live-v2-header{background:rgba(255,255,255,.94);border-color:#dce4ef;box-shadow:0 10px 28px rgba(37,54,84,.08)}
html[data-live-theme="light"] .live-v2-brand strong,html[data-live-theme="light"] .live-clock strong,html[data-live-theme="light"] .live-v2-page h1,html[data-live-theme="light"] .live-panel h2{color:#162033}
html[data-live-theme="light"] .live-v2-brand small,html[data-live-theme="light"] .live-clock span,html[data-live-theme="light"] .live-v2-page p,html[data-live-theme="light"] .live-panel-head small{color:#69758a}
html[data-live-theme="light"] .live-v2-nav button,html[data-live-theme="light"] .live-icon-button{color:#58657a;background:#f5f7fb;border-color:#dfe6f0}
html[data-live-theme="light"] .live-v2-nav button.active,html[data-live-theme="light"] .live-v2-nav button:hover,html[data-live-theme="light"] .live-icon-button:hover{background:#e9e7ff;color:#5346e6;border-color:#cbc6ff}
html[data-live-theme="light"] .live-sync{background:#edf9f1;color:#2b7e56;border-color:#ccebd8}
html[data-live-theme="light"] .live-panel,html[data-live-theme="light"] .live-stat,html[data-live-theme="light"] .live-v2-podium-card,html[data-live-theme="light"] .live-v2-leader-row,html[data-live-theme="light"] .live-v2-rombel-card,html[data-live-theme="light"] .live-v2-activity-card,html[data-live-theme="light"] .live-v2-modal-card{background:#fff;border-color:#dfe6f0;color:#1b2638;box-shadow:0 12px 30px rgba(34,49,76,.07)}
html[data-live-theme="light"] .live-class-row,html[data-live-theme="light"] .live-recent-row,html[data-live-theme="light"] .live-late-row,html[data-live-theme="light"] .live-v2-student-row{background:#f7f9fc;border-color:#e5eaf2;color:#1b2638}
html[data-live-theme="light"] .live-class-row strong,html[data-live-theme="light"] .live-recent-row strong,html[data-live-theme="light"] .live-late-row strong,html[data-live-theme="light"] .live-v2-student-row strong{color:#172033}
html[data-live-theme="light"] .live-class-row span,html[data-live-theme="light"] .live-recent-row small,html[data-live-theme="light"] .live-late-row small,html[data-live-theme="light"] .live-v2-student-row small{color:#748197}
html[data-live-theme="light"] .live-v2-hero{background:linear-gradient(135deg,#ffffff,#f0efff);border-color:#dddafc}
html[data-live-theme="light"] .live-v2-footer{color:#758197;border-color:#dce4ef;background:rgba(255,255,255,.86)}
html[data-live-theme="light"] .live-v2-search{background:#fff;border-color:#dce4ef;color:#1b2638}
html[data-live-theme="light"] .live-v2-search input{color:#1b2638}
html[data-live-theme="light"] .live-v2-search input::placeholder{color:#8a95a8}

/* =========================================================
   v5.40.1 - Dark theme refinement
   ========================================================= */
html[data-theme="dark"]{
  --surface:#131c2d;
  --surface-2:#172237;
  --surface-3:#1d2940;
  --surface-soft:#101827;
  --dark-text:#e8edf7;
  --dark-muted:#98a5ba;
  --dark-border:#2a3650;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .content{background:#0c1220;color:var(--dark-text)}

html[data-theme="dark"] .topbar{background:#111827;border-color:var(--dark-border);box-shadow:0 1px 0 rgba(255,255,255,.02)}
html[data-theme="dark"] .academic-year-context{background:var(--surface);border-color:var(--dark-border)}
html[data-theme="dark"] .academic-year-context .form-select{color:var(--dark-text)}
html[data-theme="dark"] .academic-year-context .form-select option{background:#111827;color:var(--dark-text)}
html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .page-title strong{color:#f8fafc}

/* common white surfaces */
html[data-theme="dark"] :is(
  .panel-card,.stat-card,.horizontal-card,.modern-list-card,.list-search,
  .attendance-kpi,.attendance-dashboard-head,.summary-chip,.daily-summary-card,
  .daily-rombel-card,.monthly-summary-card,.monthly-rombel-card,
  .period-report-hero,.period-summary-card,.period-rombel-panel,.period-rombel-card,
  .period-detail-panel,.period-student-card,.report-card,
  .wc-stat,.risk-summary-card,.parent-child-hero,.parent-summary-card,.parent-feed-card,
  .parent-pkl-banner,.student-calendar-card,.student-class-card,.student-quick-card,
  .task-date-card,.pkl-summary-card,.pkl-date-banner,
  .wizard-card,.wizard-room,.audit-card,.database-card
){background:var(--surface)!important;border-color:var(--dark-border)!important;color:var(--dark-text)!important;box-shadow:0 12px 30px rgba(0,0,0,.14)}

html[data-theme="dark"] :is(
  .attendance-dashboard-head,.period-report-hero,.period-filter,.daily-filter-card,
  .monthly-filter-card,.list-toolbar,.risk-info
){background:linear-gradient(135deg,#131c2d,#111a2a)!important;border-color:var(--dark-border)!important}

html[data-theme="dark"] :is(
  .attendance-dashboard-head h1,.attendance-dashboard-head h2,.attendance-dashboard-head h3,
  .period-section-head h4,.period-detail-head h4,.period-rombel-top strong,
  .period-rombel-stats b,.period-detail-summary strong,.card-main strong,
  .horizontal-card strong,.modern-list-card strong,.panel-card h1,.panel-card h2,.panel-card h3,.panel-card h4
){color:#f4f7fb!important}

html[data-theme="dark"] :is(
  .attendance-dashboard-head p,.attendance-dashboard-head small,.period-section-head p,
  .period-detail-head p,.period-rombel-top div>span,.period-rombel-footer,
  .period-summary-card small,.period-summary-card em,.card-main small,.card-meta,
  .meta-label,.panel-card p,.panel-card small,.mini-empty,.text-secondary
){color:var(--dark-muted)!important}

/* inputs, buttons and dropdowns */
html[data-theme="dark"] :is(.form-control,.form-select,.input-group-text,.list-search input,.daily-search input){
  background:#101827!important;border-color:#32405d!important;color:#eef2f7!important
}
html[data-theme="dark"] :is(.form-control,.list-search input,.daily-search input)::placeholder{color:#738099!important}
html[data-theme="dark"] .form-select option{background:#111827;color:#eef2f7}
html[data-theme="dark"] :is(.btn-light,.btn-icon,.theme-toggle,.period-count-badge){background:#1b263a!important;border-color:#32405d!important;color:#e3e9f3!important}
html[data-theme="dark"] :is(.btn-light,.btn-icon,.theme-toggle):hover{background:#243149!important;color:#fff!important}
html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1);opacity:.8}

/* dashboard admin */
html[data-theme="dark"] .attendance-kpi{background:var(--surface)!important;border-color:var(--dark-border)!important}
html[data-theme="dark"] .attendance-kpi strong{color:#f8fafc!important}
html[data-theme="dark"] .attendance-kpi small{color:var(--dark-muted)!important}
html[data-theme="dark"] .attendance-trend .trend-day{background:#172237;border-color:#2a3650;color:#dce4ef}
html[data-theme="dark"] .attendance-trend .trend-day.active{background:#211d4d;border-color:#6f63ff}
html[data-theme="dark"] .status-progress-row,
html[data-theme="dark"] .dashboard-rombel-list>*,
html[data-theme="dark"] .compact-person-list>*,
html[data-theme="dark"] .compact-activity-list>*{border-color:#263149!important}
html[data-theme="dark"] .progress{background:#263149}

/* master/list cards */
html[data-theme="dark"] .horizontal-card{background:var(--surface)!important}
html[data-theme="dark"] .horizontal-card:hover{border-color:#4b5d82!important;background:#162137!important}
html[data-theme="dark"] .card-avatar,
html[data-theme="dark"] .icon-avatar,
html[data-theme="dark"] .avatar-mini{background:#25224e!important;color:#bcb5ff!important}
html[data-theme="dark"] .status-dot.muted{background:#64748b}
html[data-theme="dark"] .list-footer{border-color:var(--dark-border)!important;color:var(--dark-muted)!important}
html[data-theme="dark"] .pagination-modern button{background:#172237;border-color:#2a3650;color:#dbe3ef}
html[data-theme="dark"] .pagination-modern button.active{background:var(--primary);color:#fff}

/* rekap periode/bulanan */
html[data-theme="dark"] .period-filter{background:#111a2a!important}
html[data-theme="dark"] .period-rombel-card:hover{background:#162137!important;border-color:#576a94!important}
html[data-theme="dark"] .period-state{background:#1b263a;color:#bac5d8}
html[data-theme="dark"] .period-progress{background:#263149}
html[data-theme="dark"] .period-rombel-footer{border-color:#32405d}
html[data-theme="dark"] :is(.period-rombel-stats span,.period-detail-summary span,.report-metrics span){background:#172237!important;border-color:#2a3650!important}
html[data-theme="dark"] :is(.period-rombel-stats small,.period-detail-summary small,.report-metrics small){color:#93a1b7!important}
html[data-theme="dark"] .period-summary-card.primary{background:linear-gradient(135deg,#5146d8,#675cf1)!important;border-color:#7167ff!important}
html[data-theme="dark"] .monthly-matrix-wrap,
html[data-theme="dark"] .report-matrix-wrap{border-color:var(--dark-border);background:var(--surface)}
html[data-theme="dark"] .table>:not(caption)>*>*{background:transparent;color:var(--dark-text);border-color:#263149}
html[data-theme="dark"] .table thead th{background:#172237!important;color:#aeb9ca!important}
html[data-theme="dark"] .table-hover>tbody>tr:hover>*{background:#18243a!important;color:#fff}

/* kiosk dark mode */
html[data-theme="dark"] .kiosk-v527{--kiosk-dark:#e8edf7;--kiosk-soft:#111827}
html[data-theme="dark"] .kiosk-hero-panel{background:linear-gradient(135deg,#151f32 0%,#121a2a 65%,#18243a 100%)!important;border-color:#2b3853!important}
html[data-theme="dark"] .kiosk-brand-wrap h2,
html[data-theme="dark"] .kiosk-clock-card strong,
html[data-theme="dark"] .kiosk-scan-intro h3,
html[data-theme="dark"] .kiosk-log-card h3{color:#f8fafc!important}
html[data-theme="dark"] .kiosk-system-state,
html[data-theme="dark"] .kiosk-clock-card small,
html[data-theme="dark"] .kiosk-scan-intro p{color:#9ca9bc!important}
html[data-theme="dark"] .kiosk-mode-banner,
html[data-theme="dark"] .kiosk-live-chip{background:#131c2d!important;border-color:#2a3650!important;color:#dbe3ef!important}
html[data-theme="dark"] .kiosk-main-card,
html[data-theme="dark"] .kiosk-log-card{background:#111a2a!important;border-color:#2a3650!important;color:#eef2f7!important}
html[data-theme="dark"] .kiosk-method-card,
html[data-theme="dark"] .kiosk-method-card-v527{background:#162137!important;border-color:#30405e!important;color:#eef2f7!important;box-shadow:none!important}
html[data-theme="dark"] .kiosk-method-card .terminal-eyebrow,
html[data-theme="dark"] .kiosk-method-card .method-title small,
html[data-theme="dark"] .dynamic-qr-footer{color:#9ca9bc!important}
html[data-theme="dark"] .kiosk-method-card h3,
html[data-theme="dark"] .kiosk-method-card h4,
html[data-theme="dark"] .method-title strong{color:#f4f7fb!important}
html[data-theme="dark"] .camera-toolbar-clean,
html[data-theme="dark"] .rfid-ready-card,
html[data-theme="dark"] .kiosk-manual-form{background:#111827!important;border-color:#30405e!important;color:#e8edf7!important}
html[data-theme="dark"] .dynamic-qr-box{background:#f8fafc!important;border-color:#293650!important}
html[data-theme="dark"] .kiosk-log-summary>div{background:#172237!important;border-color:#2a3650!important;color:#e7edf7!important}
html[data-theme="dark"] .recent-scan-v527{background:#172237!important;border-color:#2a3650!important;color:#e7edf7!important}
html[data-theme="dark"] .kiosk-feedback-card{background:#151f32!important;color:#f8fafc!important}

/* student/parent mobile dashboards */
html[data-theme="dark"] :is(.student-hero-card,.student-today-banner,.calendar-detail-box,.parent-status-card){border-color:#2a3650!important}
html[data-theme="dark"] .calendar-day{background:#172237;color:#dbe3ef;border-color:#2a3650}
html[data-theme="dark"] .calendar-day.empty{background:#101827;color:#4d5a70}
html[data-theme="dark"] .mini-calendar-weekdays{color:#9ca9bc}

/* modals */
html[data-theme="dark"] .modal-backdrop.show{opacity:.72}
html[data-theme="dark"] .modal-content{background:#131c2d!important;color:#eef2f7!important}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{background:#131c2d;border-color:#2a3650}
html[data-theme="dark"] .modal-body{background:#131c2d}
html[data-theme="dark"] .alert-light{background:#172237;border-color:#2a3650;color:#dbe3ef}

/* keep semantic soft badges readable */
html[data-theme="dark"] .badge-soft{border:1px solid transparent}
html[data-theme="dark"] .badge-soft.success{background:#123b2b;color:#75e0ad}
html[data-theme="dark"] .badge-soft.danger{background:#431d26;color:#ff9ca8}
html[data-theme="dark"] .badge-soft.warning{background:#473714;color:#ffd276}
html[data-theme="dark"] .badge-soft.info{background:#172f53;color:#91bfff}

@media(max-width:768px){
  html[data-theme="dark"] .topbar{background:#111827}
}

/* =========================================================
   v5.40.2 - Comprehensive dark mode surface normalization
   ========================================================= */
html[data-theme="dark"]{
  --dm-bg:#0b1220;
  --dm-surface:#131c2d;
  --dm-surface-2:#172237;
  --dm-surface-3:#1d2940;
  --dm-border:#2a3650;
  --dm-text:#eef3fb;
  --dm-muted:#9aa7bc;
}

/* Calendar akademik */
html[data-theme="dark"] .academic-calendar-switcher,
html[data-theme="dark"] .academic-calendar-card,
html[data-theme="dark"] .academic-calendar-view .card,
html[data-theme="dark"] #monthView .card,
html[data-theme="dark"] #matrixView .card,
html[data-theme="dark"] .calendar-side-card,
html[data-theme="dark"] .academic-matrix-card{
  background:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .academic-calendar-view-btn{
  background:transparent!important;
  color:var(--dm-muted)!important;
  border-color:transparent!important;
}
html[data-theme="dark"] .academic-calendar-view-btn.active{
  background:#2a2458!important;
  color:#c7c1ff!important;
}
html[data-theme="dark"] .academic-month-grid,
html[data-theme="dark"] .academic-matrix-wrap{
  background:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .academic-month-weekday,
html[data-theme="dark"] .academic-month-day,
html[data-theme="dark"] .academic-matrix-table th,
html[data-theme="dark"] .academic-matrix-table td{
  background:var(--dm-surface-2)!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .academic-month-day:hover{background:#202d45!important}
html[data-theme="dark"] .academic-month-day.is-muted,
html[data-theme="dark"] .academic-month-day.is-outside-year{background:#101827!important;color:#56647b!important}
html[data-theme="dark"] .academic-month-day.is-nonworkday{background:#35291e!important;color:#ffd39b!important}
html[data-theme="dark"] .academic-month-day.is-holiday{background:#3e1f28!important;color:#ffabb6!important}
html[data-theme="dark"] .academic-month-day.is-effective-day{background:#123a2d!important;color:#80e7b3!important}
html[data-theme="dark"] .academic-month-day.is-today{box-shadow:inset 0 0 0 2px #7568ff}
html[data-theme="dark"] .calendar-agenda-item{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .calendar-agenda-item:hover{background:#202d45!important}
html[data-theme="dark"] .matrix-day{background:#172237!important;color:#e7edf7!important;border-color:#2a3650!important}
html[data-theme="dark"] .matrix-day.is-holiday{background:#3e1f28!important;color:#ffabb6!important}
html[data-theme="dark"] .matrix-day.is-nonworkday{background:#35291e!important;color:#ffd39b!important}
html[data-theme="dark"] .matrix-day.is-effective-day{background:#123a2d!important;color:#80e7b3!important}

/* Rekap bulanan: hilangkan card putih */
html[data-theme="dark"] .monthly-summary-grid > *,
html[data-theme="dark"] .monthly-kpi,
html[data-theme="dark"] .monthly-rombel-list .monthly-rombel-card,
html[data-theme="dark"] .monthly-overview-card,
html[data-theme="dark"] .monthly-matrix-card{
  background:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .monthly-summary-grid strong,
html[data-theme="dark"] .monthly-rombel-card strong{color:var(--dm-text)!important}
html[data-theme="dark"] .monthly-summary-grid small,
html[data-theme="dark"] .monthly-rombel-card small{color:var(--dm-muted)!important}

/* Jadwal piket matrix */
html[data-theme="dark"] .duty-matrix,
html[data-theme="dark"] .duty-matrix-header,
html[data-theme="dark"] .duty-matrix-row,
html[data-theme="dark"] .duty-shift-label,
html[data-theme="dark"] .duty-day-header,
html[data-theme="dark"] .duty-matrix-corner,
html[data-theme="dark"] .duty-cell{
  background:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .duty-matrix-header{background:var(--dm-surface-2)!important}
html[data-theme="dark"] .duty-cell:hover{background:#1b2940!important}
html[data-theme="dark"] .duty-add-button{background:#25224e!important;color:#bfb8ff!important;border-color:#39346b!important}
html[data-theme="dark"] .duty-teacher-chip{background:#201d43!important;color:#e8e5ff!important;border-color:#373164!important}
html[data-theme="dark"] .duty-matrix-info{color:var(--dm-muted)!important}

/* Audit log */
html[data-theme="dark"] .audit-row-card{
  background:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .audit-row-card:hover{background:#18243a!important;border-color:#4c5e82!important}
html[data-theme="dark"] .audit-row-user strong,
html[data-theme="dark"] .audit-row-description strong,
html[data-theme="dark"] .audit-row-ip strong{color:#f3f6fb!important}
html[data-theme="dark"] .audit-row-user small,
html[data-theme="dark"] .audit-row-description small,
html[data-theme="dark"] .audit-row-ip small{color:var(--dm-muted)!important}
html[data-theme="dark"] .audit-row-icon{background:#25224e!important;color:#bdb6ff!important}
html[data-theme="dark"] .audit-toolbar{background:transparent!important}
html[data-theme="dark"] .audit-detail-grid pre{background:#0f1726!important;color:#dfe6f2!important;border:1px solid var(--dm-border)}

/* Database */
html[data-theme="dark"] .database-hero{background:linear-gradient(135deg,#171f33,#131c2d)!important}
html[data-theme="dark"] .database-action{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .database-action:hover{background:#202d45!important;border-color:#4d6188!important}
html[data-theme="dark"] .database-action strong{color:#f3f6fb!important}
html[data-theme="dark"] .database-action small{color:var(--dm-muted)!important}
html[data-theme="dark"] .db-table-list>div{
  background:var(--dm-surface-2)!important;
  border:1px solid var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .db-table-list code{color:#ff8bb3!important}
html[data-theme="dark"] .db-table-list strong{color:#f3f6fb!important}

/* Pengaturan sekolah */
html[data-theme="dark"] .workday-card,
html[data-theme="dark"] .attendance-method-card,
html[data-theme="dark"] .feature-toggle-card,
html[data-theme="dark"] .settings-choice-card,
html[data-theme="dark"] .settings-note,
html[data-theme="dark"] .gps-settings-panel,
html[data-theme="dark"] .selfie-settings-panel{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .workday-card:hover,
html[data-theme="dark"] .attendance-method-card:hover,
html[data-theme="dark"] .feature-toggle-card:hover{background:#202d45!important;border-color:#4c5e82!important}
html[data-theme="dark"] .workday-card:has(input:checked),
html[data-theme="dark"] .attendance-method-card:has(input:checked),
html[data-theme="dark"] .settings-choice-card:has(input:checked){
  background:#221f48!important;
  border-color:#7568ff!important;
  box-shadow:0 0 0 3px rgba(117,104,255,.13)!important;
}
html[data-theme="dark"] .workday-card strong,
html[data-theme="dark"] .attendance-method-card strong,
html[data-theme="dark"] .feature-toggle-card strong{color:#f4f7fb!important}
html[data-theme="dark"] .workday-card small,
html[data-theme="dark"] .attendance-method-card small,
html[data-theme="dark"] .feature-toggle-card small,
html[data-theme="dark"] .settings-note{color:var(--dm-muted)!important}
html[data-theme="dark"] .workday-icon,
html[data-theme="dark"] .attendance-method-icon{background:#222d42!important;color:#aeb8cb!important}
html[data-theme="dark"] .workday-card:has(input:checked) .workday-icon,
html[data-theme="dark"] .attendance-method-card:has(input:checked) .attendance-method-icon{background:#332d70!important;color:#d2cdff!important}
html[data-theme="dark"] .settings-savebar{background:linear-gradient(180deg,rgba(11,18,32,0),rgba(11,18,32,.96) 35%)!important}

/* Generic residual white Bootstrap surfaces */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .card:not(.live-v2-card),
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .accordion-item{
  background-color:var(--dm-surface)!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom{border-color:var(--dm-border)!important}
html[data-theme="dark"] .text-dark{color:var(--dm-text)!important}
html[data-theme="dark"] .bg-light{background:var(--dm-surface-2)!important;color:var(--dm-text)!important}

/* Better contrast for selected/default states */
html[data-theme="dark"] .btn-outline-secondary{color:#dbe3ef;border-color:#415171}
html[data-theme="dark"] .btn-outline-secondary:hover{background:#26344d;color:#fff;border-color:#53698f}
html[data-theme="dark"] .btn-outline-primary{color:#bcb5ff;border-color:#7568ff}
html[data-theme="dark"] .btn-outline-primary:hover{background:#2d2862;color:#fff}
html[data-theme="dark"] .btn-outline-danger{color:#ff8d9b;border-color:#e05264}
html[data-theme="dark"] .btn-outline-success{color:#6ee7a8;border-color:#2ba56c}


/* =========================================================
   v5.40.3 - Dark mode refinement for reports, modals & selectors
   ========================================================= */
html[data-theme="dark"]{
  --dm-bg:#0b1220;
  --dm-surface:#131c2d;
  --dm-surface-2:#172237;
  --dm-surface-3:#1d2940;
  --dm-border:#2a3650;
  --dm-text:#eef3fb;
  --dm-muted:#9aa7bc;
  --dm-soft:#202c43;
}

/* Attendance detail modal */
html[data-theme="dark"] .attendance-detail-modal .modal-content{
  background:var(--dm-surface)!important;
  color:var(--dm-text)!important;
  border:1px solid var(--dm-border)!important;
}
html[data-theme="dark"] .attendance-detail-header{
  background:linear-gradient(135deg,#18233a,#121b2d)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .attendance-detail-person h5,
html[data-theme="dark"] .attendance-detail-person .modal-title{color:var(--dm-text)!important}
html[data-theme="dark"] .attendance-detail-person small{color:var(--dm-muted)!important}
html[data-theme="dark"] .attendance-detail-modal .modal-body{background:#0f1829!important}
html[data-theme="dark"] .attendance-detail-summary article{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .attendance-detail-summary article>small{color:#9eabc0!important}
html[data-theme="dark"] .attendance-detail-summary article>strong{color:#f6f8fc!important}
html[data-theme="dark"] .attendance-detail-summary article>em{color:#a5b1c4!important}
html[data-theme="dark"] .attendance-detail-status>span{background:#17372c!important;color:#72dfaa!important}
html[data-theme="dark"] .attendance-detail-status.tone-terlambat>span{background:#493713!important;color:#ffd271!important}
html[data-theme="dark"] .attendance-detail-status.tone-alpa>span{background:#47212a!important;color:#ff9bab!important}
html[data-theme="dark"] .attendance-detail-status.tone-sakit>span,
html[data-theme="dark"] .attendance-detail-status.tone-izin>span{background:#18345a!important;color:#95c2ff!important}
html[data-theme="dark"] .attendance-detail-tabs{background:#1d2940!important}
html[data-theme="dark"] .attendance-detail-tabs button{color:#aeb8c9!important}
html[data-theme="dark"] .attendance-detail-tabs button.active{
  background:#302a68!important;
  color:#dedaff!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .attendance-timeline-content,
html[data-theme="dark"] .attendance-history-row{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .attendance-timeline-content strong,
html[data-theme="dark"] .attendance-history-row strong,
html[data-theme="dark"] .attendance-detail-empty strong{color:#f4f7fb!important}
html[data-theme="dark"] .attendance-timeline-content span,
html[data-theme="dark"] .attendance-history-row small,
html[data-theme="dark"] .attendance-detail-empty,
html[data-theme="dark"] .attendance-detail-empty span{color:var(--dm-muted)!important}
html[data-theme="dark"] .attendance-detail-footer{
  background:#121b2d!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .attendance-detail-footer>span{color:var(--dm-muted)!important}

/* Monthly report summary, detail header and matrix */
html[data-theme="dark"] .daily-mini-stat,
html[data-theme="dark"] .daily-detail-head,
html[data-theme="dark"] .monthly-rombel-card,
html[data-theme="dark"] .monthly-page .matrix-card{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .daily-mini-stat strong,
html[data-theme="dark"] .daily-detail-head strong,
html[data-theme="dark"] .monthly-rombel-card strong{color:#f5f7fb!important}
html[data-theme="dark"] .daily-mini-stat small,
html[data-theme="dark"] .daily-mini-stat em,
html[data-theme="dark"] .daily-detail-head small,
html[data-theme="dark"] .monthly-rombel-card small,
html[data-theme="dark"] .monthly-rombel-card em{color:var(--dm-muted)!important}
html[data-theme="dark"] .monthly-rombel-card:hover{background:#202d45!important;border-color:#526487!important}
html[data-theme="dark"] .daily-rombel-metrics>span,
html[data-theme="dark"] .monthly-rombel-card .daily-rombel-metrics>span{background:#202c43!important}
html[data-theme="dark"] .daily-rombel-progress>i{background:#2b3850!important}
html[data-theme="dark"] .attendance-matrix th,
html[data-theme="dark"] .attendance-matrix td,
html[data-theme="dark"] .attendance-matrix .sticky-no,
html[data-theme="dark"] .attendance-matrix .sticky-name{
  background:#172237!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .attendance-matrix thead th,
html[data-theme="dark"] .attendance-matrix thead .sticky-no,
html[data-theme="dark"] .attendance-matrix thead .sticky-name{
  background:#202c43!important;
  color:#dfe6f2!important;
}
html[data-theme="dark"] .attendance-matrix tbody tr:hover td,
html[data-theme="dark"] .attendance-matrix tbody tr:hover .sticky-no,
html[data-theme="dark"] .attendance-matrix tbody tr:hover .sticky-name{background:#1d2a41!important}
html[data-theme="dark"] .attendance-matrix .summary-col,
html[data-theme="dark"] .attendance-matrix .summary-cell{background:#1c283d!important}
html[data-theme="dark"] .matrix-student-link strong{color:#f4f7fb!important}
html[data-theme="dark"] .matrix-student-link small{color:var(--dm-muted)!important}
html[data-theme="dark"] .monthly-page .attendance-matrix-wrap{background:#101827!important}

/* Duty teacher modal */
html[data-theme="dark"] .duty-cell-summary>div,
html[data-theme="dark"] .duty-teacher-card,
html[data-theme="dark"] .duty-advanced-toggle,
html[data-theme="dark"] .duty-advanced{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .duty-cell-summary span,
html[data-theme="dark"] .teacher-info small,
html[data-theme="dark"] .duty-selected-info .text-muted{color:var(--dm-muted)!important}
html[data-theme="dark"] .duty-cell-summary strong,
html[data-theme="dark"] .teacher-info strong{color:#f5f7fb!important}
html[data-theme="dark"] .duty-teacher-card:hover{background:#202d45!important;border-color:#526487!important}
html[data-theme="dark"] .duty-teacher-card.selected{
  background:#2a2559!important;
  border-color:#7568ff!important;
  box-shadow:0 0 0 2px rgba(117,104,255,.12)!important;
}
html[data-theme="dark"] .teacher-avatar{background:#2c285f!important;color:#d4d0ff!important}
html[data-theme="dark"] .teacher-check{background:#26334a!important;color:#7f8ca1!important}
html[data-theme="dark"] .duty-teacher-card.selected .teacher-check{background:#6658f0!important;color:#fff!important}
html[data-theme="dark"] .duty-advanced-toggle{color:#c7d0df!important}
html[data-theme="dark"] .duty-advanced-toggle:hover{background:#202d45!important}

/* Rombel member transfer modal */
html[data-theme="dark"] .member-column,
html[data-theme="dark"] .member-column-selected,
html[data-theme="dark"] .member-column-head,
html[data-theme="dark"] .member-dropzone,
html[data-theme="dark"] .student-transfer-card,
html[data-theme="dark"] .promotion-transfer-grid .member-column{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .member-column-selected{background:#181f38!important;border-color:#4b437b!important}
html[data-theme="dark"] .member-column-head{background:#1d2940!important}
html[data-theme="dark"] .member-column-head strong,
html[data-theme="dark"] .student-transfer-info strong{color:#f4f7fb!important}
html[data-theme="dark"] .member-column-head small,
html[data-theme="dark"] .student-transfer-info small,
html[data-theme="dark"] .member-empty-note{color:var(--dm-muted)!important}
html[data-theme="dark"] .student-transfer-card:hover{background:#202d45!important;border-color:#526487!important}
html[data-theme="dark"] .member-dropzone.drag-over{background:#272454!important;box-shadow:inset 0 0 0 2px #7568ff!important}
html[data-theme="dark"] .transfer-empty,
html[data-theme="dark"] .transfer-loading{color:#8996aa!important}
html[data-theme="dark"] .btn-transfer{background:#292556!important;color:#c8c2ff!important}
html[data-theme="dark"] .btn-transfer:hover{background:#6658f0!important;color:#fff!important}
html[data-theme="dark"] .drag-handle{color:#7f8ba0!important}

/* Generic modal and form contrast fixes */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{border-color:var(--dm-border)!important}
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal-header h5,
html[data-theme="dark"] .modal-body label{color:#f3f6fb!important}
html[data-theme="dark"] .modal-header .text-muted,
html[data-theme="dark"] .modal-body .text-muted{color:var(--dm-muted)!important}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text{
  background:#111a2b!important;
  color:#f2f5fa!important;
  border-color:#34425f!important;
}
html[data-theme="dark"] .form-control::placeholder{color:#7f8ca0!important}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{background:#131f33!important;border-color:#7568ff!important;box-shadow:0 0 0 .2rem rgba(117,104,255,.14)!important}
html[data-theme="dark"] .btn-light{
  background:#1d2940!important;
  border-color:#34425f!important;
  color:#e8edf5!important;
}
html[data-theme="dark"] .btn-light:hover{background:#27354d!important;color:#fff!important;border-color:#4a5c7c!important}
html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.8}

/* Preserve strong status colors on dark surfaces */
html[data-theme="dark"] .st-hadir{background:#153d2d!important;color:#7be7b0!important}
html[data-theme="dark"] .st-terlambat{background:#4a3712!important;color:#ffd16a!important}
html[data-theme="dark"] .st-sakit{background:#17365f!important;color:#9bc7ff!important}
html[data-theme="dark"] .st-izin{background:#32255d!important;color:#d6c8ff!important}
html[data-theme="dark"] .st-alpa{background:#48212a!important;color:#ff9cab!important}
html[data-theme="dark"] .st-dispensasi{background:#123e48!important;color:#77dce9!important}
html[data-theme="dark"] .st-pulang_awal{background:#4a2e16!important;color:#ffc38c!important}
html[data-theme="dark"] .st-belum{background:#263249!important;color:#b2bfd1!important}
html[data-theme="dark"] .st-libur{background:#20293a!important;color:#77859a!important}
html[data-theme="dark"] .st-pkl{background:#31265c!important;color:#d7caff!important}

/* =========================================================
   v5.40.4 - Dark mode contrast refinements
   Dashboard, belum hadir, peserta kegiatan, live TV
   ========================================================= */

/* Dashboard date control: remove white date box in dark theme */
html[data-theme="dark"] .dashboard-date-nav input[type="date"]{
  color-scheme:dark;
  background:#111a2b!important;
  color:#f4f7fb!important;
  border-color:#34425f!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .dashboard-date-nav input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.7);
  opacity:.85;
}
html[data-theme="dark"] .attendance-dashboard-head{
  background:linear-gradient(135deg,#131d30,#101827)!important;
  border-color:#2c3a55!important;
}

/* Missing attendance summary and student rows */
html[data-theme="dark"] .attendance-mini-summary article{
  background:#151f32!important;
  border-color:#2d3a55!important;
  color:#eef3fb!important;
}
html[data-theme="dark"] .attendance-mini-summary article.success{
  background:#123126!important;
  border-color:#285d49!important;
}
html[data-theme="dark"] .attendance-mini-summary article.danger{
  background:#382516!important;
  border-color:#6a4327!important;
}
html[data-theme="dark"] .attendance-mini-summary article strong{color:#f7f9fc!important}
html[data-theme="dark"] .attendance-mini-summary article.success strong{color:#6ee7a8!important}
html[data-theme="dark"] .attendance-mini-summary article.danger strong{color:#ffac70!important}
html[data-theme="dark"] .attendance-mini-summary article span{color:#9facbf!important}
html[data-theme="dark"] .missing-student{
  background:#151f32!important;
  border-color:#2d3a55!important;
  color:#eef3fb!important;
}
html[data-theme="dark"] .missing-student:hover{
  background:#1a2740!important;
  border-color:#50658d!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .missing-main strong{color:#f5f7fb!important}
html[data-theme="dark"] .missing-main span,
html[data-theme="dark"] .missing-parent{color:#9eacc1!important}
html[data-theme="dark"] .missing-student .form-check-input{
  background-color:#101827!important;
  border-color:#50617f!important;
}
html[data-theme="dark"] .missing-student .form-check-input:checked{
  background-color:#6758ee!important;
  border-color:#6758ee!important;
}
html[data-theme="dark"] .missing-student .status-siswa,
html[data-theme="dark"] .missing-student .keterangan-siswa{
  background:#101827!important;
  border-color:#34425f!important;
  color:#f2f5fa!important;
}

/* Special activity participant transfer modal */
html[data-theme="dark"] .activity-member-column,
html[data-theme="dark"] .activity-member-selected,
html[data-theme="dark"] .activity-member-column-head,
html[data-theme="dark"] .activity-member-dropzone{
  background:#151f32!important;
  border-color:#2d3a55!important;
  color:#eef3fb!important;
}
html[data-theme="dark"] .activity-member-selected{
  background:#171d36!important;
  border-color:#4d477a!important;
}
html[data-theme="dark"] .activity-member-column-head{
  background:#1b2840!important;
}
html[data-theme="dark"] .activity-member-column-head strong{color:#f4f7fb!important}
html[data-theme="dark"] .activity-member-column-head small,
html[data-theme="dark"] .activity-member-note,
html[data-theme="dark"] .activity-member-hint{color:#9aa8bd!important}
html[data-theme="dark"] .activity-member-note{
  background:#151f32!important;
  border:1px solid #2d3a55!important;
}
html[data-theme="dark"] .activity-transfer-card{
  background:#1b2840!important;
  border-color:#33425f!important;
  color:#eef3fb!important;
}
html[data-theme="dark"] .activity-transfer-card:hover{
  background:#22314b!important;
  border-color:#596d95!important;
  box-shadow:0 7px 18px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .activity-transfer-info strong{color:#f4f7fb!important}
html[data-theme="dark"] .activity-transfer-info small{color:#9eacc1!important}
html[data-theme="dark"] .activity-drag-handle{color:#8997ad!important}
html[data-theme="dark"] .activity-transfer-btn{
  background:#292552!important;
  color:#c8c2ff!important;
}
html[data-theme="dark"] .activity-transfer-btn:hover{
  background:#6658f0!important;
  color:#fff!important;
}
html[data-theme="dark"] .activity-member-dropzone.drag-over{
  background:#272454!important;
  box-shadow:inset 0 0 0 2px #7568ff!important;
}
html[data-theme="dark"] .activity-member-column .text-bg-light{
  background:#26334a!important;
  color:#d7deea!important;
}

/* Generic white cards that can still appear inside dark modal/list contexts */
html[data-theme="dark"] .modal-content .bg-white,
html[data-theme="dark"] .modal-content .card,
html[data-theme="dark"] .modal-content .list-group-item{
  background:#151f32!important;
  color:#eef3fb!important;
  border-color:#2d3a55!important;
}

/* Live dashboard must stay fully dark and readable */
html[data-live-theme="dark"] body.live-v2-body,
html[data-live-theme="dark"] .live-v2-shell{
  color:#f8fafc!important;
}
html[data-live-theme="dark"] .live-v2-hero{
  background:linear-gradient(135deg,#1d244d 0%,#121b31 52%,#10304a 100%)!important;
  border-color:rgba(129,140,248,.22)!important;
}
html[data-live-theme="dark"] .live-v2-hero h1,
html[data-live-theme="dark"] .live-v2-page-head h1,
html[data-live-theme="dark"] .live-panel h2,
html[data-live-theme="dark"] .live-stat strong{
  color:#f8fafc!important;
}
html[data-live-theme="dark"] .live-v2-hero p,
html[data-live-theme="dark"] .live-v2-kicker,
html[data-live-theme="dark"] .live-stat small{
  color:#9ba8bf!important;
}
html[data-live-theme="dark"] .live-stat{
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;
  border-color:rgba(255,255,255,.09)!important;
  color:#f8fafc!important;
}
html[data-live-theme="dark"] .live-stat>span{
  background:rgba(255,255,255,.09)!important;
}
html[data-live-theme="dark"] .live-v2-ring:before,
html[data-live-theme="dark"] .live-v2-ring-small:before{
  background:#111a2d!important;
}
html[data-live-theme="dark"] .live-v2-ring strong,
html[data-live-theme="dark"] .live-v2-ring-small b{color:#fff!important}
html[data-live-theme="dark"] .live-v2-ring span{color:#9ca9bf!important}
html[data-live-theme="dark"] .live-panel,
html[data-live-theme="dark"] .live-v2-panel{
  background:rgba(18,27,45,.92)!important;
  border-color:rgba(255,255,255,.08)!important;
}
html[data-live-theme="dark"] .live-class-row,
html[data-live-theme="dark"] .live-recent-row,
html[data-live-theme="dark"] .live-late-row,
html[data-live-theme="dark"] .live-v2-activity-card,
html[data-live-theme="dark"] .live-v2-rombel-card,
html[data-live-theme="dark"] .live-v2-leader-row{
  background:rgba(255,255,255,.045)!important;
  color:#f4f7fb!important;
  border-color:rgba(255,255,255,.07)!important;
}
html[data-live-theme="dark"] .live-class-row strong,
html[data-live-theme="dark"] .live-recent-row strong,
html[data-live-theme="dark"] .live-late-row strong,
html[data-live-theme="dark"] .live-v2-activity-card strong,
html[data-live-theme="dark"] .live-v2-rombel-card strong,
html[data-live-theme="dark"] .live-v2-leader-row strong{color:#f5f7fb!important}
html[data-live-theme="dark"] .live-class-row small,
html[data-live-theme="dark"] .live-recent-row small,
html[data-live-theme="dark"] .live-late-row small,
html[data-live-theme="dark"] .live-v2-activity-card small,
html[data-live-theme="dark"] .live-v2-rombel-card small,
html[data-live-theme="dark"] .live-v2-leader-row small{color:#93a1b8!important}

/* Improve native controls and text contrast in all dark forms */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"]{color-scheme:dark}
html[data-theme="dark"] .text-muted{color:#9aa8bd!important}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom{border-color:#2d3a55!important}

/* v5.41 Profil Kehadiran Siswa */
.attendance-profile-page{display:grid;gap:16px}.attendance-profile-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary) 8%,var(--surface)));box-shadow:var(--shadow-sm)}.attendance-profile-identity{display:flex;align-items:center;gap:16px;min-width:0}.attendance-profile-avatar{display:grid;place-items:center;flex:0 0 68px;width:68px;height:68px;border-radius:22px;background:linear-gradient(135deg,var(--primary),#7c5cff);color:#fff;font-size:28px;font-weight:800;box-shadow:0 12px 28px rgba(91,75,255,.22)}.attendance-profile-identity h2{margin:2px 0 4px;font-size:26px}.attendance-profile-identity p{margin:0;color:var(--muted)}.attendance-profile-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.attendance-profile-badges>span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);font-size:12px}.attendance-profile-badges svg{width:14px;height:14px}.attendance-profile-hero-actions{display:flex;gap:8px;flex-wrap:wrap}.attendance-profile-today{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(2,minmax(120px,.55fr)) minmax(150px,.7fr);gap:10px;padding:12px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}.attendance-profile-today-main,.attendance-profile-time,.attendance-profile-score{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:15px;background:var(--surface-soft)}.attendance-profile-today-main>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}.attendance-profile-today-main small,.attendance-profile-time small,.attendance-profile-score small{display:block;color:var(--muted);font-size:11px}.attendance-profile-today-main strong,.attendance-profile-time strong,.attendance-profile-score strong{display:block;font-size:18px}.attendance-profile-today-main em,.attendance-profile-score span{display:block;color:var(--muted);font-size:12px;font-style:normal}.attendance-profile-time{display:block}.attendance-profile-score{display:block;text-align:right;background:linear-gradient(135deg,var(--primary),#6857ed);color:#fff}.attendance-profile-score small,.attendance-profile-score span{color:rgba(255,255,255,.78)}.attendance-profile-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.attendance-profile-stat{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--border);border-radius:17px;background:var(--surface)}.attendance-profile-stat>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--surface-soft)}.attendance-profile-stat svg{width:18px;height:18px}.attendance-profile-stat small{display:block;color:var(--muted);font-size:11px}.attendance-profile-stat strong{font-size:19px}.attendance-profile-stat.tone-hadir>span{color:#169c63;background:#e9fbf2}.attendance-profile-stat.tone-terlambat>span{color:#c88600;background:#fff6dc}.attendance-profile-stat.tone-sakit>span{color:#3568d4;background:#eaf1ff}.attendance-profile-stat.tone-izin>span{color:#7a54d8;background:#f0eaff}.attendance-profile-stat.tone-alpa>span{color:#dc4050;background:#ffebee}.attendance-profile-stat.tone-primary>span{color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent)}.attendance-profile-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:16px}.attendance-profile-grid.lower{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr)}.attendance-profile-panel{padding:18px;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);min-width:0}.attendance-profile-panel .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.attendance-profile-panel h3{margin:2px 0 0;font-size:18px}.attendance-profile-chip{padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-size:11px}.attendance-profile-bars{height:210px;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:12px;padding:14px 4px 0}.attendance-profile-bar{height:100%;border:0;background:none;display:grid;grid-template-rows:22px 1fr 24px;align-items:end;gap:5px;color:inherit;cursor:pointer}.attendance-profile-bar .bar-value{font-size:11px;font-weight:700;color:var(--muted);text-align:center}.attendance-profile-bar .bar-track{height:100%;border-radius:12px;background:var(--surface-soft);display:flex;align-items:flex-end;overflow:hidden}.attendance-profile-bar .bar-track i{display:block;width:100%;min-height:4px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#7d68ff,var(--primary));transition:height .35s ease,filter .2s}.attendance-profile-bar:hover .bar-track i{filter:brightness(1.12)}.attendance-profile-bar small{text-align:center;color:var(--muted);font-size:11px}.attendance-profile-trend-summary{display:flex;gap:12px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid var(--border)}.attendance-profile-trend-summary span{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}.attendance-profile-trend-summary svg{width:15px}.attendance-profile-calendar .form-control{width:150px}.attendance-profile-week,.attendance-profile-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.attendance-profile-week{margin-bottom:6px}.attendance-profile-week span{text-align:center;color:var(--muted);font-size:11px;font-weight:700}.profile-calendar-day,.attendance-profile-days>span{aspect-ratio:1;border-radius:11px}.profile-calendar-day{position:relative;border:1px solid transparent;background:var(--surface-soft);color:var(--text);font-weight:700;font-size:12px}.profile-calendar-day:hover{border-color:var(--primary);transform:translateY(-1px)}.profile-calendar-day.today{box-shadow:inset 0 0 0 2px var(--primary)}.profile-calendar-day i{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:5px;height:5px;border-radius:999px;background:currentColor}.profile-calendar-day.status-hadir{background:#e9fbf2;color:#128556}.profile-calendar-day.status-terlambat{background:#fff4d5;color:#b87500}.profile-calendar-day.status-sakit{background:#e8f0ff;color:#3568d4}.profile-calendar-day.status-izin{background:#efe9ff;color:#7049d2}.profile-calendar-day.status-alpa{background:#ffe8eb;color:#d93b4d}.attendance-profile-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.attendance-profile-legend span{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}.attendance-profile-legend i{width:7px;height:7px;border-radius:999px}.attendance-profile-legend .status-hadir{background:#24af72}.attendance-profile-legend .status-terlambat{background:#e1a21b}.attendance-profile-legend .status-sakit{background:#5685e9}.attendance-profile-legend .status-izin{background:#896be4}.attendance-profile-legend .status-alpa{background:#e55764}.profile-timeline-list{display:grid;gap:7px}.profile-timeline-row{display:grid;grid-template-columns:48px 34px minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);color:inherit;text-align:left}.profile-timeline-row:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));transform:translateX(2px)}.timeline-date{text-align:center}.timeline-date b{display:block;font-size:17px}.timeline-date small{display:block;color:var(--muted);font-size:10px}.timeline-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--surface)}.timeline-dot svg{width:15px}.timeline-dot.status-hadir{color:#169c63}.timeline-dot.status-terlambat{color:#d18a00}.timeline-dot.status-sakit{color:#3568d4}.timeline-dot.status-izin{color:#7955d5}.timeline-dot.status-alpa{color:#db4051}.timeline-copy strong,.timeline-copy small{display:block}.timeline-copy small{color:var(--muted);font-size:11px}.timeline-hours{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}.timeline-hours svg{width:13px}.profile-empty{display:grid;place-items:center;text-align:center;gap:6px;padding:34px;color:var(--muted)}.profile-empty svg{width:28px;height:28px}.profile-empty strong,.profile-empty span{display:block}.attendance-profile-info-stack{display:grid;gap:9px}.profile-info-card{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}.profile-info-card>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.profile-info-card svg{width:17px}.profile-info-card small,.profile-info-card strong,.profile-info-card em{display:block}.profile-info-card small{color:var(--muted);font-size:10px}.profile-info-card strong{font-size:13px;margin:2px 0}.profile-info-card em{color:var(--muted);font-size:11px;font-style:normal}.badge-status{padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.badge-status.success{background:#e8f9f0;color:#168a59}.badge-status.muted{background:var(--surface-soft);color:var(--muted)}
@media(max-width:1100px){.attendance-profile-stats{grid-template-columns:repeat(3,1fr)}.attendance-profile-grid,.attendance-profile-grid.lower{grid-template-columns:1fr}.attendance-profile-today{grid-template-columns:1.4fr repeat(2,.65fr) .8fr}}
@media(max-width:720px){.attendance-profile-page{gap:12px}.attendance-profile-hero{align-items:flex-start;padding:16px}.attendance-profile-hero,.attendance-profile-identity{flex-direction:column}.attendance-profile-hero-actions{width:100%}.attendance-profile-hero-actions .btn{flex:1}.attendance-profile-today{grid-template-columns:1fr 1fr}.attendance-profile-today-main,.attendance-profile-score{grid-column:1/-1}.attendance-profile-score{text-align:left}.attendance-profile-stats{grid-template-columns:repeat(2,1fr)}.attendance-profile-panel{padding:14px}.attendance-profile-bars{height:175px;gap:7px}.profile-timeline-row{grid-template-columns:42px 30px minmax(0,1fr) 16px}.timeline-hours{display:none}.attendance-profile-calendar .panel-head{align-items:flex-start}.attendance-profile-calendar .form-control{width:125px}.attendance-profile-avatar{width:58px;height:58px;flex-basis:58px}.attendance-profile-identity h2{font-size:22px}}
html[data-theme="dark"] .attendance-profile-hero,html[data-theme="dark"] .attendance-profile-panel,html[data-theme="dark"] .attendance-profile-today,html[data-theme="dark"] .attendance-profile-stat{background:#141e31;border-color:#2b3953}html[data-theme="dark"] .attendance-profile-today-main,html[data-theme="dark"] .attendance-profile-time,html[data-theme="dark"] .profile-timeline-row,html[data-theme="dark"] .profile-info-card,html[data-theme="dark"] .profile-calendar-day,html[data-theme="dark"] .attendance-profile-bar .bar-track{background:#10192a;border-color:#2b3953}html[data-theme="dark"] .timeline-dot{background:#18243a}html[data-theme="dark"] .attendance-profile-stat.tone-hadir>span{background:#123b2b}html[data-theme="dark"] .attendance-profile-stat.tone-terlambat>span{background:#443414}html[data-theme="dark"] .attendance-profile-stat.tone-sakit>span{background:#172d55}html[data-theme="dark"] .attendance-profile-stat.tone-izin>span{background:#2f2353}html[data-theme="dark"] .attendance-profile-stat.tone-alpa>span{background:#48202a}html[data-theme="dark"] .profile-calendar-day.status-hadir{background:#143b2c;color:#69d7a1}html[data-theme="dark"] .profile-calendar-day.status-terlambat{background:#423316;color:#f2c35e}html[data-theme="dark"] .profile-calendar-day.status-sakit{background:#182e55;color:#8eb2ff}html[data-theme="dark"] .profile-calendar-day.status-izin{background:#302551;color:#b49cff}html[data-theme="dark"] .profile-calendar-day.status-alpa{background:#45212a;color:#ff929d}

/* v5.42.1 - Floating submenu sidebar icon-only (restored from v5.41) */
.sidebar-flyout{position:fixed;z-index:1090;width:258px;max-height:calc(100vh - 24px);overflow:auto;padding:8px;background:#14192b;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 64px rgba(2,6,23,.42),0 0 0 1px rgba(124,108,255,.05);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-8px) scale(.98);transform-origin:left top;transition:opacity .15s ease,transform .15s ease,visibility .15s;scrollbar-width:thin;scrollbar-color:#3b4566 transparent}
.sidebar-flyout.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0) scale(1)}
.sidebar-flyout:before{content:"";position:absolute;left:-7px;top:20px;width:13px;height:13px;background:#14192b;border-left:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);transform:rotate(45deg)}
.sidebar-flyout-head{position:relative;padding:10px 12px 11px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-flyout-head strong,.sidebar-flyout-head small{display:block}.sidebar-flyout-head strong{font-size:.9rem;color:#fff}.sidebar-flyout-head small{margin-top:2px;font-size:.68rem;color:#77829c}
.sidebar-flyout-links{display:grid;gap:3px}
.sidebar-flyout-links a{display:flex;align-items:center;gap:11px;min-height:42px;padding:9px 11px;border-radius:11px;color:#aeb7ca;text-decoration:none;font-size:.82rem;font-weight:600;white-space:nowrap;transition:background .15s ease,color .15s ease,transform .15s ease}
.sidebar-flyout-links a svg{width:17px;height:17px;flex:0 0 17px;color:#7f8aa5}
.sidebar-flyout-links a:hover,.sidebar-flyout-links a:focus-visible{background:#202741;color:#fff;outline:0;transform:translateX(2px)}
.sidebar-flyout-links a:hover svg,.sidebar-flyout-links a:focus-visible svg{color:#a99cff}
.sidebar-flyout-links a.active{background:linear-gradient(135deg,rgba(108,92,231,.24),rgba(79,70,229,.13));color:#d8d3ff;box-shadow:inset 3px 0 0 #8b7cff}
body.sidebar-collapsed .nav-group.flyout-open>.nav-group-toggle{background:#282f49;color:#fff}
body.sidebar-collapsed .nav-group.flyout-open>.nav-group-toggle:before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 4px 4px 0;background:#8b7cff}
@media(max-width:991.98px){.sidebar-flyout{display:none!important}}
@media(prefers-reduced-motion:reduce){.sidebar-flyout,.sidebar-flyout-links a{transition:none!important}}

/* v5.43 Dashboard Piket - Perlu Tindakan */
.piket-action-hero{margin-bottom:14px}.piket-action-summary{display:grid;grid-template-columns:minmax(270px,1.45fr) repeat(4,minmax(135px,.7fr));gap:10px;margin:14px 0}.piket-action-summary-main,.piket-action-summary-chip{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.piket-action-summary-main{display:flex;align-items:center;gap:14px;padding:14px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),var(--surface))}.piket-action-summary-main>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--primary);color:#fff}.piket-action-summary-main svg{width:21px;height:21px}.piket-action-summary-main small{font-size:10px;letter-spacing:.12em;color:var(--primary);font-weight:800}.piket-action-summary-main strong{display:inline-block;margin-left:10px;font-size:25px}.piket-action-summary-main p{margin:2px 0 0;color:var(--muted);font-size:12px}.piket-action-summary-chip{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:11px 12px;color:var(--text);text-align:left;transition:.18s ease}.piket-action-summary-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 35%,var(--border))}.piket-action-summary-chip svg{width:17px;height:17px}.piket-action-summary-chip span{font-size:11px;color:var(--muted)}.piket-action-summary-chip b{font-size:16px}.piket-action-summary-chip.danger svg,.piket-action-summary-chip.danger b{color:#dc4050}.piket-action-summary-chip.purple svg,.piket-action-summary-chip.purple b{color:#7654d8}.piket-action-summary-chip.warning svg,.piket-action-summary-chip.warning b{color:#c88600}.piket-action-summary-chip.info svg,.piket-action-summary-chip.info b{color:#1686a7}.piket-action-panel{padding:16px}.piket-action-panel-head{margin-bottom:12px}.piket-action-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.piket-action-search{display:flex;align-items:center;gap:8px;min-width:300px;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}.piket-action-search svg{width:17px;color:var(--muted)}.piket-action-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}.piket-action-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 11px;border-bottom:1px solid var(--border);scrollbar-width:none}.piket-action-tabs::-webkit-scrollbar{display:none}.piket-action-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);color:var(--muted);white-space:nowrap}.piket-action-tabs button b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--surface);font-size:10px}.piket-action-tabs button.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}.piket-action-list{display:grid;gap:8px;padding-top:12px}.piket-action-card{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft);overflow:hidden}.piket-action-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--primary)}.piket-action-card.tone-danger:before{background:#dc4050}.piket-action-card.tone-warning:before{background:#d79a10}.piket-action-card.tone-purple:before{background:#7654d8}.piket-action-card.tone-info:before{background:#1686a7}.piket-action-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--surface);color:var(--primary)}.piket-action-card.tone-danger .piket-action-icon{color:#dc4050;background:#ffedf0}.piket-action-card.tone-warning .piket-action-icon{color:#b97b00;background:#fff6de}.piket-action-card.tone-purple .piket-action-icon{color:#7654d8;background:#f0eaff}.piket-action-card.tone-info .piket-action-icon{color:#1686a7;background:#e8f8fb}.piket-action-icon svg{width:18px}.piket-action-copy{min-width:0}.piket-action-copy>div{display:flex;align-items:center;gap:8px;min-width:0}.piket-action-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.piket-action-copy p{margin:3px 0 0;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.piket-priority{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.piket-priority.critical{background:#ffe7eb;color:#c92f42}.piket-priority.high{background:#fff0dc;color:#b76600}.piket-priority.medium{background:#eaf1ff;color:#3568d4}.piket-action-buttons{display:flex;gap:6px;align-items:center}.piket-action-buttons .btn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.piket-action-buttons svg{width:14px}.piket-action-empty,.piket-action-no-result{display:grid;place-items:center;text-align:center;gap:5px;padding:38px 16px;color:var(--muted)}.piket-action-empty svg,.piket-action-no-result svg{width:28px;height:28px}.piket-action-empty strong,.piket-action-no-result strong{color:var(--text)}.piket-action-empty span,.piket-action-no-result span{font-size:12px}.piket-kpi-grid{margin-top:0}
[data-theme="dark"] .piket-action-card.tone-danger .piket-action-icon{background:rgba(220,64,80,.14)}[data-theme="dark"] .piket-action-card.tone-warning .piket-action-icon{background:rgba(215,154,16,.14)}[data-theme="dark"] .piket-action-card.tone-purple .piket-action-icon{background:rgba(118,84,216,.16)}[data-theme="dark"] .piket-action-card.tone-info .piket-action-icon{background:rgba(22,134,167,.16)}[data-theme="dark"] .piket-priority.critical{background:rgba(220,64,80,.15);color:#ff8c99}[data-theme="dark"] .piket-priority.high{background:rgba(215,154,16,.15);color:#ffc66b}[data-theme="dark"] .piket-priority.medium{background:rgba(53,104,212,.17);color:#8eb2ff}
@media(max-width:1180px){.piket-action-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.piket-action-summary-main{grid-column:1/-1}.piket-action-panel-head{align-items:flex-start;flex-direction:column}.piket-action-tools{width:100%}.piket-action-search{flex:1;min-width:220px}}
@media(max-width:760px){.piket-action-summary{grid-template-columns:1fr 1fr}.piket-action-summary-chip{grid-template-columns:30px minmax(0,1fr) auto}.piket-action-card{grid-template-columns:38px minmax(0,1fr)}.piket-action-buttons{grid-column:1/-1;justify-content:flex-end}.piket-action-buttons .btn{flex:1;justify-content:center}.piket-action-copy>div{align-items:flex-start;flex-direction:column;gap:4px}.piket-action-copy strong,.piket-action-copy p{white-space:normal}.piket-action-search{min-width:100%;width:100%}.piket-action-tools .btn{width:100%;justify-content:center}}
@media(max-width:480px){.piket-action-summary{grid-template-columns:1fr}.piket-action-summary-main{grid-column:auto}.piket-action-summary-chip{padding:10px}.piket-action-panel{padding:12px}.piket-action-card{padding:10px}.piket-action-buttons{display:grid;grid-template-columns:1fr 1fr}.piket-action-buttons .btn:last-child:nth-child(3){grid-column:1/-1}}

/* v5.44 - initial interactive missing attendance overview */
.missing-overview-panel{background:var(--c-surface,#fff);border:1px solid var(--c-border,#e4e9f2);border-radius:22px;padding:18px;box-shadow:0 12px 28px rgba(15,23,42,.045)}
.missing-overview-head,.missing-overview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.section-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--bs-primary);display:block;margin-bottom:3px}
.missing-overview-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}.missing-overview-summary article{min-height:76px;border:1px solid var(--c-border,#e6ebf3);border-radius:16px;padding:11px 13px;display:flex;align-items:center;gap:11px;background:var(--c-soft,#f8fafc)}.missing-overview-summary article>svg{width:20px;color:#6757f5}.missing-overview-summary article span,.missing-overview-summary article small{display:block;font-size:.7rem;color:var(--c-muted,#77839a)}.missing-overview-summary article strong{display:block;font-size:1.25rem;line-height:1.1}.missing-overview-summary article.success strong{color:#14945e}.missing-overview-summary article.danger strong{color:#e24d5f}.missing-overview-summary article.primary{background:linear-gradient(135deg,#6657f5,#5144dd);color:#fff}.missing-overview-summary article.primary span,.missing-overview-summary article.primary small{color:rgba(255,255,255,.8)}
.overview-skeleton{height:76px;border-radius:16px;background:linear-gradient(90deg,#f1f4f9 25%,#fafbfc 50%,#f1f4f9 75%);background-size:200% 100%;animation:overviewShimmer 1.2s infinite}@keyframes overviewShimmer{to{background-position:-200% 0}}
.missing-overview-toolbar{margin:4px 0 12px}.missing-overview-toolbar .list-search{max-width:520px;width:100%}.missing-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.missing-overview-card{border:1px solid var(--c-border,#e3e8f0);background:var(--c-surface,#fff);border-radius:17px;padding:13px;text-align:left;color:inherit;transition:.18s ease;cursor:pointer}.missing-overview-card:hover{transform:translateY(-2px);border-color:#8b80fb;box-shadow:0 10px 22px rgba(74,58,208,.09)}.missing-overview-card-top{display:flex;align-items:center;gap:10px}.missing-overview-card-top .min-w-0{min-width:0;flex:1}.missing-overview-card-top strong,.missing-overview-card-top small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.missing-overview-card-top small{font-size:.72rem;color:var(--c-muted,#7d889b)}.overview-status{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:5px 8px;font-size:.68rem;font-weight:700;white-space:nowrap}.overview-status svg{width:13px}.overview-status.pending{background:#fff1f2;color:#d83c50}.overview-status.complete{background:#eaf9f0;color:#168653}.overview-progress{height:5px;background:var(--c-soft,#edf1f6);border-radius:999px;overflow:hidden;margin:11px 0 9px}.overview-progress span{display:block;height:100%;background:linear-gradient(90deg,#6657f5,#29b780);border-radius:inherit}.missing-overview-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.missing-overview-metrics span{background:var(--c-soft,#f7f9fc);border-radius:10px;padding:6px 8px;font-size:.67rem;color:var(--c-muted,#7a8699)}.missing-overview-metrics b{display:block;font-size:.88rem;color:var(--c-text,#172033)}.missing-overview-metrics .danger b{color:#df4155}.missing-overview-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed var(--c-border,#e5e9f0);margin-top:10px;padding-top:8px}.missing-overview-card-foot small{color:var(--c-muted,#7b8799)}.missing-overview-card-foot span{font-size:.72rem;font-weight:700;color:#6657f5;display:flex;align-items:center;gap:4px}.missing-overview-card-foot svg{width:14px}
html[data-theme="dark"] .missing-overview-panel,body.dark-mode .missing-overview-panel,html[data-theme="dark"] .missing-overview-card,body.dark-mode .missing-overview-card{background:#111a2d;border-color:#2a3851;color:#eef4ff}html[data-theme="dark"] .missing-overview-summary article,body.dark-mode .missing-overview-summary article,html[data-theme="dark"] .missing-overview-metrics span,body.dark-mode .missing-overview-metrics span{background:#172238;border-color:#2a3851}html[data-theme="dark"] .missing-overview-summary article strong,body.dark-mode .missing-overview-summary article strong,html[data-theme="dark"] .missing-overview-metrics b,body.dark-mode .missing-overview-metrics b{color:#f4f7ff}html[data-theme="dark"] .overview-skeleton,body.dark-mode .overview-skeleton{background:linear-gradient(90deg,#172238 25%,#202c44 50%,#172238 75%);background-size:200% 100%}
@media(max-width:991.98px){.missing-overview-summary{grid-template-columns:repeat(2,1fr)}.missing-overview-summary article.primary{grid-column:span 2}.missing-overview-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){.missing-overview-panel{padding:13px;border-radius:17px}.missing-overview-summary{gap:7px}.missing-overview-summary article{min-height:67px;padding:9px}.missing-overview-metrics{grid-template-columns:repeat(2,1fr)}}

/* v5.44.1 - compact and interactive missing-student cards */
#detailBelumPanel.app-card{padding:16px}.missing-attendance-list{gap:7px}.missing-student-compact{position:relative;display:grid;grid-template-columns:24px 38px minmax(180px,1fr) minmax(140px,.65fr) auto 82px;align-items:center;gap:10px;padding:9px 11px;border-radius:14px;cursor:pointer;min-height:58px}.missing-student-compact:hover{transform:translateY(-1px)}.missing-student-compact.is-selected{border-color:color-mix(in srgb,var(--primary) 58%,var(--border));background:color-mix(in srgb,var(--primary) 5%,var(--surface));box-shadow:0 8px 20px rgba(91,77,224,.08)}
.missing-select-control{display:grid;place-items:center;margin:0;cursor:pointer}.missing-select-control .form-check-input{margin:0;width:17px;height:17px}.missing-student-compact>.card-avatar{width:36px;height:36px;border-radius:11px}.missing-student-compact .missing-main strong{font-size:13px}.missing-student-compact .missing-main span{font-size:10.5px;margin-top:2px}.missing-contact{min-width:0}.missing-contact-btn,.missing-contact-empty{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:10.5px;color:var(--muted);text-decoration:none}.missing-contact-btn:hover{color:#168f64}.missing-contact-btn svg,.missing-contact-empty svg{width:14px;height:14px;flex:none}.missing-contact-btn span,.missing-contact-empty span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.missing-status-actions{display:flex;align-items:center;gap:4px}.missing-status-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:31px;min-width:31px;padding:0 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--muted);transition:.15s ease}.missing-status-btn b{font-size:11px}.missing-status-btn span{display:none;font-size:10px;font-weight:700}.missing-status-btn:hover{transform:translateY(-1px);border-color:currentColor}.missing-status-btn.active{box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent);border-color:currentColor}.missing-status-btn.tone-hadir{color:#168b56}.missing-status-btn.tone-sakit{color:#3f68c9}.missing-status-btn.tone-izin{color:#7550cb}.missing-status-btn.tone-dispensasi{color:#078a9d}.missing-status-btn.tone-alpa{color:#d74455}.missing-status-btn.tone-hadir.active{background:#e8f8ef}.missing-status-btn.tone-sakit.active{background:#eaf1ff}.missing-status-btn.tone-izin.active{background:#f1ebff}.missing-status-btn.tone-dispensasi.active{background:#e7f9fb}.missing-status-btn.tone-alpa.active{background:#ffedef}
.missing-note-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--muted);font-size:10.5px}.missing-note-toggle svg{width:14px}.missing-note-toggle:hover,.missing-note-toggle.active{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 55%,var(--border));background:color-mix(in srgb,var(--primary) 8%,var(--surface))}.missing-note-row{grid-column:3/-1;display:grid;grid-template-columns:18px minmax(0,1fr) 28px;align-items:center;gap:7px;padding-top:7px;border-top:1px dashed var(--border)}.missing-note-row>svg{width:15px;color:var(--primary)}.missing-note-row .form-control{height:34px}.missing-note-close{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:var(--surface-soft);color:var(--muted)}.missing-note-close svg{width:14px}
#summaryBelum.attendance-mini-summary{gap:8px;margin-bottom:10px!important}#summaryBelum.attendance-mini-summary article{min-height:62px;padding:10px 13px;border-radius:13px}#summaryBelum.attendance-mini-summary strong{font-size:1.35rem}#summaryBelum.attendance-mini-summary span{font-size:.72rem;margin-top:3px}#detailBelumPanel .list-toolbar{margin-bottom:8px;padding-bottom:8px}
[data-theme="dark"] .missing-student-compact.is-selected{background:rgba(111,92,255,.1)}[data-theme="dark"] .missing-status-btn{background:#111b2f;border-color:#31405b}[data-theme="dark"] .missing-status-btn.tone-hadir.active{background:rgba(22,139,86,.18)}[data-theme="dark"] .missing-status-btn.tone-sakit.active{background:rgba(63,104,201,.2)}[data-theme="dark"] .missing-status-btn.tone-izin.active{background:rgba(117,80,203,.2)}[data-theme="dark"] .missing-status-btn.tone-dispensasi.active{background:rgba(7,138,157,.2)}[data-theme="dark"] .missing-status-btn.tone-alpa.active{background:rgba(215,68,85,.2)}
@media(min-width:1200px){.missing-status-btn:hover span,.missing-status-btn.active span{display:inline}.missing-status-btn.active{min-width:65px}}
@media(max-width:1050px){.missing-student-compact{grid-template-columns:24px 36px minmax(160px,1fr) auto 82px}.missing-contact{display:none}.missing-note-row{grid-column:3/-1}}
@media(max-width:760px){#detailBelumPanel.app-card{padding:12px}.missing-student-compact{grid-template-columns:22px 36px minmax(0,1fr) 40px;padding:9px}.missing-status-actions{grid-column:2/-1;justify-content:flex-start}.missing-note-toggle{grid-column:4;grid-row:1}.missing-note-toggle span{display:none}.missing-note-row{grid-column:2/-1}.missing-status-btn{flex:1;max-width:74px}.missing-status-btn.active span{display:inline}.missing-main strong,.missing-main span{white-space:normal}.missing-contact{display:none}}
@media(max-width:480px){.missing-status-btn{padding:0 6px;min-width:29px}.missing-status-btn.active span{display:none}.missing-status-actions{gap:3px}}

/* v5.45 - kegiatan khusus mandiri dan export */
.activity-self-page{min-height:calc(100vh - 130px);display:grid;place-items:center;padding:24px}.activity-self-card{width:min(100%,520px);background:var(--surface,#fff);border:1px solid var(--border,#e5e9f2);border-radius:26px;padding:24px;box-shadow:0 22px 70px rgba(31,38,66,.12)}.activity-self-brand{display:flex;align-items:center;gap:14px}.activity-self-brand>span{width:52px;height:52px;border-radius:17px;background:#eeecff;color:#5b4cf0;display:grid;place-items:center}.activity-self-brand svg{width:24px;height:24px}.activity-self-brand small,.activity-self-brand strong{display:block}.activity-self-brand small{font-size:11px;letter-spacing:.1em;color:var(--muted,#7a8498)}.activity-self-brand strong{font-size:20px}.activity-self-event{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.activity-self-event>div{display:flex;align-items:center;gap:7px;padding:10px;border-radius:13px;background:var(--soft,#f6f7fb);font-size:12px}.activity-self-event svg{width:16px}.activity-self-student{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border,#e5e9f2);border-radius:16px;margin-bottom:16px}.activity-self-student small,.activity-self-student strong,.activity-self-student span{display:block}.activity-self-student span{font-size:12px;color:var(--muted,#748097)}.activity-self-state{display:grid;place-items:center;text-align:center;padding:26px 14px;border-radius:18px;gap:6px}.activity-self-state svg{width:34px;height:34px}.state-success{background:#ebfaf0;color:#14833d}.state-warning{background:#fff7e5;color:#a65d00}.state-danger{background:#fff0f0;color:#c63d43}.activity-self-ready{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:15px;background:#eefaf2;margin-bottom:16px}.activity-self-ready strong,.activity-self-ready small{display:block}.pulse-dot{width:11px;height:11px;border-radius:50%;background:#1ead5b;box-shadow:0 0 0 0 rgba(30,173,91,.35);animation:activityPulse 1.7s infinite}@keyframes activityPulse{70%{box-shadow:0 0 0 10px rgba(30,173,91,0)}100%{box-shadow:0 0 0 0 rgba(30,173,91,0)}}.activity-self-note{display:flex;align-items:flex-start;gap:8px;color:var(--muted,#78839a);font-size:12px;margin-top:16px}.activity-self-note svg{width:16px;flex:none}.activity-qr-mandiri{display:grid;place-items:center;min-height:250px}.activity-qr-mandiri img{padding:10px;background:#fff;border-radius:18px;border:1px solid #e7eaf1}.activity-share-link{display:flex;gap:8px}.activity-attendance-item{grid-template-columns:40px minmax(180px,1fr) auto 110px 55px auto}.activity-attendance-item.is-pending{border-color:#f0bd52;background:#fffaf0}.activity-attendance-item .badge-soft{display:inline-flex;margin-top:5px}.badge-warning{background:#fff0c9;color:#955600}.badge-danger{background:#ffe4e4;color:#bb2c36}.activity-source{font-size:11px;text-transform:capitalize;color:var(--muted,#78839a)}.activity-verify-actions{display:flex;gap:6px}.activity-card em{font-style:normal;color:#bd7100}.theme-dark .activity-self-card,.theme-dark .activity-self-student{background:#141e31;border-color:#2a3954}.theme-dark .activity-self-event>div{background:#10192a}.theme-dark .activity-self-ready{background:#123224}.theme-dark .activity-attendance-item.is-pending{background:#2a2416;border-color:#76591d}.theme-dark .activity-self-state.state-success{background:#123224}.theme-dark .activity-self-state.state-warning{background:#302816}.theme-dark .activity-self-state.state-danger{background:#32191d}@media(max-width:760px){.activity-self-event{grid-template-columns:1fr}.activity-attendance-item{grid-template-columns:38px minmax(0,1fr) auto}.activity-attendance-item .activity-status-buttons,.activity-attendance-item .activity-source,.activity-attendance-item .activity-verify-actions{grid-column:2/-1}.activity-attendance-item .activity-time{grid-column:3;grid-row:1}.activity-self-page{padding:12px}.activity-self-card{padding:18px;border-radius:20px}}

/* v5.46 - Detail kegiatan khusus */
.activity-detail-page{display:grid;gap:16px}.activity-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border:1px solid var(--border-color,#e3e8f2);border-radius:22px;background:var(--card-bg,#fff)}.activity-detail-hero-main{display:flex;align-items:center;gap:14px;min-width:0}.activity-detail-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:rgba(99,91,255,.12);color:#6255f5}.activity-detail-icon svg{width:23px;height:23px}.activity-detail-hero h2{font-size:1.45rem;margin:2px 0 3px}.activity-detail-hero p{margin:0;color:var(--text-muted,#77829b)}.activity-detail-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.activity-detail-info{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.activity-detail-info article{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--border-color,#e3e8f2);background:var(--card-bg,#fff);border-radius:15px;min-width:0}.activity-detail-info svg{width:18px;color:#6657f6}.activity-detail-info div{min-width:0}.activity-detail-info small,.activity-detail-row-meta small,.activity-detail-row-note small{display:block;color:var(--text-muted,#8490a8);font-size:.69rem;text-transform:uppercase;letter-spacing:.04em}.activity-detail-info strong{display:block;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-detail-stats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.activity-detail-stat{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--border-color,#e3e8f2);background:var(--card-bg,#fff);border-radius:15px}.activity-detail-stat>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(99,91,255,.1);color:#6657f6}.activity-detail-stat small{display:block;color:var(--text-muted,#8490a8);font-size:.7rem}.activity-detail-stat strong{font-size:1.2rem}.activity-detail-stat.is-success>span{background:#e9f9f1;color:#169c63}.activity-detail-stat.is-warning>span{background:#fff5dc;color:#d89200}.activity-detail-stat.is-danger>span{background:#ffeded;color:#de4040}.activity-detail-stat.is-info>span{background:#e9f5ff;color:#2685c7}.activity-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}.activity-detail-main{min-width:0}.activity-detail-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 170px 180px 170px;gap:9px;margin-bottom:12px}.activity-detail-attendance-list{display:grid;gap:8px}.activity-detail-row{display:grid;grid-template-columns:minmax(220px,1.4fr) 110px 90px 120px 120px minmax(150px,1fr) 80px;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border-color,#e3e8f2);border-radius:15px;background:var(--surface-soft,#f9fbff);transition:.18s ease}.activity-detail-row:hover{transform:translateY(-1px);border-color:rgba(99,91,255,.36);box-shadow:0 8px 20px rgba(28,34,66,.06)}.activity-detail-row.is-pending{border-color:rgba(230,159,0,.35);background:rgba(255,191,52,.055)}.activity-detail-person{display:flex;align-items:center;gap:10px;min-width:0}.activity-detail-person div{min-width:0}.activity-detail-person strong,.activity-detail-person small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-detail-person small{color:var(--text-muted,#8490a8)}.activity-detail-row-meta strong{font-size:.79rem}.activity-detail-row-note span{display:block;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-detail-row-actions{display:flex;gap:5px;justify-content:flex-end}.activity-detail-side{display:grid;gap:16px}.activity-detail-side .panel-card{padding:16px}.activity-detail-side .panel-head{margin-bottom:12px}.activity-detail-class-list,.activity-detail-source-list,.activity-detail-pending-list{display:grid;gap:9px}.activity-detail-class-list article,.activity-detail-source-list article{display:grid;grid-template-columns:1fr auto;gap:7px;padding:11px;border:1px solid var(--border-color,#e3e8f2);border-radius:13px;background:var(--surface-soft,#f9fbff)}.activity-detail-class-list span{display:block;color:var(--text-muted,#8490a8);font-size:.72rem}.activity-detail-class-list .progress,.activity-detail-source-list .progress{grid-column:1/-1;height:5px;border-radius:10px;background:rgba(137,148,174,.16);overflow:hidden}.activity-detail-class-list .progress span,.activity-detail-source-list .progress span{display:block;height:100%;background:#6657f6;border-radius:10px}.activity-detail-source-list article>span{display:flex;align-items:center;gap:7px;text-transform:capitalize;font-size:.8rem}.activity-detail-source-list svg{width:15px}.activity-detail-pending-list article{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid rgba(230,159,0,.26);border-radius:13px;background:rgba(255,191,52,.055)}.activity-detail-pending-list small{display:block;color:var(--text-muted,#8490a8)}.activity-detail-empty-ok{display:flex;align-items:center;gap:8px;color:#169c63;font-size:.8rem;padding:12px;background:rgba(22,156,99,.08);border-radius:12px}.activity-detail-empty-ok svg{width:18px}.badge-purple{background:#efeaff;color:#6957dc}.badge-muted{background:#eef1f6;color:#667085}.badge-info{background:#e7f4ff;color:#217abb}.badge-success{background:#e6f8ef;color:#158a58}.badge-danger{background:#ffebeb;color:#cc3333}
html[data-theme="dark"] .activity-detail-hero,html[data-theme="dark"] .activity-detail-info article,html[data-theme="dark"] .activity-detail-stat{background:#151f32;border-color:#2b3a54}html[data-theme="dark"] .activity-detail-row,html[data-theme="dark"] .activity-detail-class-list article,html[data-theme="dark"] .activity-detail-source-list article{background:#111b2d;border-color:#2a3953}html[data-theme="dark"] .activity-detail-hero h2,html[data-theme="dark"] .activity-detail-info strong,html[data-theme="dark"] .activity-detail-stat strong,html[data-theme="dark"] .activity-detail-row strong{color:#f5f7ff}
@media(max-width:1280px){.activity-detail-info{grid-template-columns:repeat(3,1fr)}.activity-detail-stats{grid-template-columns:repeat(4,1fr)}.activity-detail-grid{grid-template-columns:1fr}.activity-detail-side{grid-template-columns:repeat(3,1fr)}.activity-detail-row{grid-template-columns:minmax(210px,1.4fr) 100px 80px 110px 110px minmax(130px,1fr) 75px}}
@media(max-width:900px){.activity-detail-hero{align-items:flex-start;flex-direction:column}.activity-detail-actions{width:100%;justify-content:flex-start}.activity-detail-info{grid-template-columns:repeat(2,1fr)}.activity-detail-stats{grid-template-columns:repeat(2,1fr)}.activity-detail-toolbar{grid-template-columns:1fr 1fr}.activity-detail-side{grid-template-columns:1fr}.activity-detail-row{grid-template-columns:minmax(180px,1fr) 100px 85px}.activity-detail-row-meta:nth-of-type(n+3),.activity-detail-row-note{display:none}}
@media(max-width:600px){.activity-detail-hero{padding:16px;border-radius:18px}.activity-detail-hero-main{align-items:flex-start}.activity-detail-info{grid-template-columns:1fr}.activity-detail-toolbar{grid-template-columns:1fr}.activity-detail-row{grid-template-columns:1fr auto;gap:8px}.activity-detail-row>*:not(.activity-detail-person):not(.badge-soft):not(.activity-detail-row-actions){display:none}.activity-detail-row-actions{grid-column:1/-1;justify-content:flex-start}.activity-detail-stats{gap:8px}.activity-detail-stat{padding:10px}.activity-detail-stat>span{width:34px;height:34px}}
/* v5.47 WhatsApp CandyWA */
.wa-page{display:flex;flex-direction:column;gap:0}.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.wa-page .panel{background:var(--card,#fff);border:1px solid var(--border,#e4e9f2);border-radius:20px;padding:20px;box-shadow:0 8px 24px rgba(15,23,42,.04)}.wa-page .panel h3{margin:0;font-size:1.05rem}.wa-page .panel p{color:var(--muted,#71809c)}.wa-page .panel-head,.wa-page .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.wa-page .page-head{margin-bottom:16px}.wa-page .page-head h2{margin:.2rem 0}.wa-page .eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:#6657f5}.wa-device-selected{display:flex;flex-direction:column;padding:12px;border:1px dashed var(--border,#d9e0ec);border-radius:14px}.wa-rules{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.wa-rules label{padding:8px 11px;border:1px solid var(--border,#dfe5ef);border-radius:12px;font-size:.85rem}.device-list,.wa-logs{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}.device-card,.wa-log{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border,#e3e8f0);border-radius:14px}.device-card small,.wa-log small{display:block;color:var(--muted,#7d89a0)}.device-actions{display:flex;gap:6px;flex-wrap:wrap}.device-actions button{border:0;background:var(--soft,#f3f6fb);padding:7px 9px;border-radius:9px}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.template-card{border:1px solid var(--border,#e3e8f0);border-radius:15px;padding:14px;display:flex;flex-direction:column;gap:8px}.template-card strong,.template-card small{display:block}.template-card p{font-size:.85rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.qr-box{min-height:280px;display:grid;place-items:center}.wa-log span{min-width:0}.wa-log time{font-size:.75rem;color:var(--muted,#7d89a0)}.wa-log b{font-size:.72rem;text-transform:uppercase}.status-completed{color:#15915c}.status-failed{color:#dc3545}.status-queued,.status-pending,.status-processing{color:#d98b00}
[data-theme="dark"] .wa-page .panel,[data-bs-theme="dark"] .wa-page .panel{--card:#151f32;--border:#2b3952;--muted:#9ba9c2;--soft:#1e2a40;color:#eef4ff}.empty-state{padding:32px;text-align:center;color:var(--muted,#7d89a0)}
@media(max-width:900px){.wa-grid{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr}.device-card{align-items:flex-start;flex-direction:column}.wa-page .page-head{flex-direction:column}}

/* v5.47.1 WhatsApp tabbed control center */
.wa-page-v2{display:grid;gap:16px}.wa-page-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border:1px solid var(--border-color,#e2e8f0);border-radius:22px;background:linear-gradient(135deg,var(--card-bg,#fff),rgba(102,87,245,.055));box-shadow:0 10px 30px rgba(15,23,42,.045)}.wa-page-title{display:flex;align-items:center;gap:15px;min-width:0}.wa-page-icon,.wa-section-icon{display:grid;place-items:center;flex:0 0 auto;border-radius:15px;background:rgba(102,87,245,.12);color:#6757f5}.wa-page-icon{width:50px;height:50px}.wa-page-icon svg{width:23px;height:23px}.wa-page-title h2{margin:2px 0 3px;font-size:1.5rem}.wa-page-title p{margin:0;color:var(--text-muted,#71809b)}.wa-hero-status{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--surface-soft,#f6f8fc);border:1px solid var(--border-color,#e3e8f2)}.wa-hero-status small,.wa-hero-status strong{display:block}.wa-hero-status small{font-size:.68rem;text-transform:uppercase;color:var(--text-muted,#7c879b)}.wa-status-dot{width:10px;height:10px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 5px rgba(148,163,184,.13)}.wa-status-dot.is-online{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.13)}.wa-status-dot.is-warning{background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.12)}
.wa-tabs{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--border-color,#e3e8f2);border-radius:16px;background:var(--card-bg,#fff);overflow-x:auto;scrollbar-width:none}.wa-tabs::-webkit-scrollbar{display:none}.wa-tab-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:9px 15px;border:0;border-radius:11px;background:transparent;color:var(--text-muted,#64748b);font-weight:700;white-space:nowrap;transition:.18s ease}.wa-tab-btn svg{width:17px;height:17px}.wa-tab-btn:hover{background:var(--surface-soft,#f4f6fb);color:var(--text-color,#111827)}.wa-tab-btn.active{background:#6757f5;color:#fff;box-shadow:0 8px 18px rgba(103,87,245,.22)}.wa-tab-count{min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;border-radius:999px;background:rgba(100,116,139,.12);font-size:.7rem}.wa-tab-btn.active .wa-tab-count{background:rgba(255,255,255,.18)}
.wa-tab-panel{padding:20px;border:1px solid var(--border-color,#e3e8f2);border-radius:22px;background:var(--card-bg,#fff);box-shadow:0 8px 26px rgba(15,23,42,.035);animation:waTabIn .2s ease}.wa-tab-panel[hidden]{display:none!important}@keyframes waTabIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.wa-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.wa-panel-head>div:first-child{display:flex;align-items:center;gap:12px}.wa-section-icon{width:42px;height:42px}.wa-section-icon svg{width:19px;height:19px}.wa-panel-head h3{margin:0 0 3px;font-size:1.05rem}.wa-panel-head p{margin:0;color:var(--text-muted,#748098);font-size:.86rem}.wa-panel-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.wa-state-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:.72rem;font-weight:800}.wa-state-badge.is-success{background:#e7f8ef;color:#138a57}.wa-state-badge.is-muted{background:#eef1f5;color:#667085}
.wa-settings-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:16px}.wa-settings-main,.wa-rules-panel{padding:16px;border:1px solid var(--border-color,#e3e8f2);border-radius:17px;background:var(--surface-soft,#f8faff)}.wa-switch-card{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 14px;border:1px solid var(--border-color,#e3e8f2);border-radius:14px;background:var(--card-bg,#fff);cursor:pointer}.wa-switch-copy strong,.wa-switch-copy small{display:block}.wa-switch-copy small{margin-top:2px;color:var(--text-muted,#7a859b);font-size:.76rem}.wa-selected-device{display:flex;align-items:center;gap:11px;padding:13px;border:1px dashed rgba(103,87,245,.35);border-radius:14px;background:rgba(103,87,245,.045)}.wa-selected-device-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:rgba(103,87,245,.12);color:#6757f5}.wa-selected-device-icon svg{width:17px}.wa-selected-device small,.wa-selected-device strong{display:block}.wa-selected-device small{color:var(--text-muted,#7c879a);font-size:.68rem;text-transform:uppercase}.wa-subhead h4{margin:0;font-size:.92rem}.wa-subhead p{margin:3px 0 0;color:var(--text-muted,#79859b);font-size:.77rem}.wa-rule-list{display:grid;gap:7px;margin-top:12px}.wa-rule-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--border-color,#e3e8f2);border-radius:12px;background:var(--card-bg,#fff);cursor:pointer}.wa-rule-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(103,87,245,.1);color:#6757f5}.wa-rule-icon svg{width:15px}.wa-rule-item strong,.wa-rule-item small{display:block}.wa-rule-item strong{font-size:.8rem}.wa-rule-item small{color:var(--text-muted,#7b879d);font-size:.68rem}.wa-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:13px;padding-top:16px}.wa-save-hint{margin-right:auto;color:var(--text-muted,#7b879d);font-size:.76rem}
.wa-list-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:13px}.wa-list-toolbar>span{margin-left:auto;color:var(--text-muted,#7b879d);font-size:.76rem}.wa-search{display:flex;align-items:center;gap:9px;min-width:min(420px,100%);height:43px;padding:0 13px;border:1px solid var(--border-color,#dfe5ee);border-radius:12px;background:var(--input-bg,#fff)}.wa-search svg{width:17px;color:#8794aa}.wa-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text-color,#172033)}.wa-filter-select{width:180px}.wa-empty{min-height:230px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;color:var(--text-muted,#7a859b);border:1px dashed var(--border-color,#dce3ed);border-radius:16px;background:var(--surface-soft,#fafbfe)}.wa-empty svg{width:30px;height:30px}.wa-empty strong{color:var(--text-color,#1f2937)}.wa-empty span{font-size:.78rem}.wa-empty.is-loading{min-height:170px}.wa-empty.is-error{color:#dc3545}
.wa-device-list,.wa-template-list,.wa-log-list{display:grid;gap:9px}.wa-device-card{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:13px;padding:12px 13px;border:1px solid var(--border-color,#e2e8f0);border-radius:15px;background:var(--surface-soft,#f9fbff);transition:.18s ease}.wa-device-card:hover{transform:translateY(-1px);border-color:rgba(103,87,245,.4);box-shadow:0 8px 22px rgba(31,41,55,.06)}.wa-device-card.is-selected{border-color:#6757f5;background:rgba(103,87,245,.055)}.wa-device-main{display:flex;align-items:center;gap:10px;min-width:0}.wa-device-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(103,87,245,.11);color:#6757f5}.wa-device-main strong,.wa-device-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-device-main small{color:var(--text-muted,#7c879a);font-size:.74rem}.wa-device-status{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:#eef1f5;color:#667085;font-size:.7rem;font-weight:800;text-transform:capitalize}.wa-device-status span{width:7px;height:7px;border-radius:50%;background:#94a3b8}.wa-device-status.is-connected{background:#e8f8ef;color:#158958}.wa-device-status.is-connected span{background:#22c55e}.wa-device-status.is-qr,.wa-device-status.is-connecting{background:#fff4d8;color:#b96f00}.wa-device-status.is-qr span,.wa-device-status.is-connecting span{background:#f59e0b}.wa-device-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.wa-template-help{padding:12px 13px;margin-bottom:13px;border-radius:14px;background:rgba(103,87,245,.055);border:1px solid rgba(103,87,245,.16)}.wa-template-help>strong{display:block;margin-bottom:8px;font-size:.8rem}.wa-variable-chips{display:flex;gap:6px;flex-wrap:wrap}.wa-variable-chip{border:1px solid rgba(103,87,245,.2);border-radius:999px;background:rgba(103,87,245,.08);color:#5c4ce4;padding:5px 9px;font-size:.68rem;font-weight:700}.wa-template-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border-color,#e2e8f0);border-radius:14px;background:var(--surface-soft,#f9fbff)}.wa-template-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(103,87,245,.1);color:#6757f5}.wa-template-copy{min-width:0}.wa-template-copy>div{display:flex;align-items:baseline;gap:8px}.wa-template-copy strong{font-size:.86rem}.wa-template-copy small{color:#6757f5;font-size:.68rem}.wa-template-copy p{margin:3px 0 0;color:var(--text-muted,#758198);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-test-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}.wa-test-form{padding:17px;border:1px solid var(--border-color,#e3e8f2);border-radius:17px;background:var(--surface-soft,#f8faff)}.wa-test-preview{display:grid;place-items:center}.wa-phone-shell{width:min(310px,100%);border:8px solid #172033;border-radius:30px;overflow:hidden;background:#efeae2;box-shadow:0 18px 42px rgba(15,23,42,.18)}.wa-phone-head{display:flex;align-items:center;gap:9px;padding:12px;background:#075e54;color:#fff}.wa-phone-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18)}.wa-phone-head strong,.wa-phone-head small{display:block}.wa-phone-head small{font-size:.66rem;opacity:.82}.wa-chat-area{min-height:330px;padding:18px;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.22),transparent 28%),#efeae2}.wa-chat-bubble{position:relative;margin-left:auto;width:88%;padding:10px 11px;border-radius:9px 3px 9px 9px;background:#d9fdd3;color:#18201e;font-size:.78rem;line-height:1.45;white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wa-log-card{display:grid;grid-template-columns:40px minmax(150px,.8fr) minmax(220px,1.5fr) auto 145px;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border-color,#e2e8f0);border-radius:14px;background:var(--surface-soft,#f9fbff)}.wa-log-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(103,87,245,.1);color:#6757f5}.wa-log-recipient,.wa-log-message{min-width:0}.wa-log-recipient strong,.wa-log-recipient small,.wa-log-message strong,.wa-log-message small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-log-recipient small,.wa-log-message small{color:var(--text-muted,#7b879c);font-size:.69rem}.wa-log-message strong{font-size:.75rem;text-transform:capitalize}.wa-log-card time{font-size:.69rem;color:var(--text-muted,#7b879c);text-align:right}.wa-message-status{padding:5px 8px;border-radius:999px;font-size:.67rem;font-weight:800;text-transform:uppercase}.wa-message-status.is-completed{background:#e8f8ef;color:#158958}.wa-message-status.is-failed{background:#ffebeb;color:#c93636}.wa-message-status.is-queued,.wa-message-status.is-pending,.wa-message-status.is-processing{background:#fff4d8;color:#b96f00}.wa-qr-status{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px}.wa-qr-status p{margin:0}.wa-qr-placeholder{width:260px;height:260px;display:grid;place-items:center;border-radius:18px;background:#f5f7fb}.wa-qr-success{width:260px;height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border-radius:18px;background:#e9f9f0;color:#168d59}.wa-qr-success svg{width:50px;height:50px}
html[data-theme="dark"] .wa-page-hero,html[data-theme="dark"] .wa-tabs,html[data-theme="dark"] .wa-tab-panel{background:#121c2e;border-color:#2a3953;color:#f3f6ff}html[data-theme="dark"] .wa-hero-status,html[data-theme="dark"] .wa-settings-main,html[data-theme="dark"] .wa-rules-panel,html[data-theme="dark"] .wa-switch-card,html[data-theme="dark"] .wa-rule-item,html[data-theme="dark"] .wa-device-card,html[data-theme="dark"] .wa-template-card,html[data-theme="dark"] .wa-test-form,html[data-theme="dark"] .wa-log-card,html[data-theme="dark"] .wa-empty{background:#0f192a;border-color:#293851;color:#f3f6ff}html[data-theme="dark"] .wa-tab-btn:hover{background:#1b2940;color:#fff}html[data-theme="dark"] .wa-search{background:#0f192a;border-color:#30405b}html[data-theme="dark"] .wa-search input{color:#f4f7ff}html[data-theme="dark"] .wa-state-badge.is-muted{background:#253149;color:#b6c1d5}html[data-theme="dark"] .wa-phone-shell{border-color:#29344a}html[data-theme="dark"] .wa-template-help{background:rgba(103,87,245,.09)}
@media(max-width:1050px){.wa-settings-layout{grid-template-columns:1fr}.wa-test-layout{grid-template-columns:1fr}.wa-test-preview{display:none}.wa-device-card{grid-template-columns:minmax(200px,1fr) auto}.wa-device-actions{grid-column:1/-1}.wa-log-card{grid-template-columns:40px minmax(140px,.8fr) minmax(180px,1.4fr) auto}.wa-log-card time{grid-column:2/-1;text-align:left}}
@media(max-width:700px){.wa-page-hero,.wa-panel-head{align-items:flex-start;flex-direction:column}.wa-hero-status{width:100%}.wa-tabs{padding:5px}.wa-tab-btn{padding:9px 12px}.wa-tab-panel{padding:15px;border-radius:18px}.wa-panel-actions{width:100%;justify-content:flex-start}.wa-list-toolbar{align-items:stretch;flex-direction:column}.wa-search,.wa-filter-select{width:100%;min-width:0}.wa-list-toolbar>span{margin-left:0}.wa-device-card,.wa-template-card,.wa-log-card{grid-template-columns:1fr}.wa-device-status,.wa-state-badge,.wa-message-status{justify-self:start}.wa-device-actions{grid-column:auto;justify-content:flex-start}.wa-template-icon,.wa-log-icon{display:none}.wa-log-card time{text-align:left;grid-column:auto}.wa-form-actions{align-items:stretch;flex-direction:column}.wa-save-hint{margin-right:0}.wa-form-actions .btn{width:100%}.wa-page-title{align-items:flex-start}.wa-page-title h2{font-size:1.28rem}}

/* v5.47.7 — notifikasi manual CandyWA pada siswa belum hadir */
.missing-contact-btn {
    border: 1px solid var(--bs-border-color, #dbe3ef);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #172033);
    border-radius: 10px;
    min-height: 36px;
    padding: .4rem .65rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    transition: .18s ease;
}
.missing-contact-btn:hover {
    border-color: #22c55e;
    color: #15803d;
    background: rgba(34,197,94,.08);
    transform: translateY(-1px);
}
.missing-contact-btn svg { width: 15px; height: 15px; }
[data-theme="dark"] .missing-contact-btn {
    background: #111a2b;
    border-color: #2b3950;
    color: #dce7f7;
}
[data-theme="dark"] .missing-contact-btn:hover {
    background: rgba(34,197,94,.13);
    border-color: #22c55e;
    color: #86efac;
}

/* v5.48 — Absensi harian interaktif, WA, status belum dipilih, PKL, metode */
.attendance-summary{gap:10px;margin-bottom:14px}
.attendance-summary .summary-chip{min-width:0;flex:1 1 105px;padding:11px 14px;border:1px solid var(--line,#e6eaf2);border-radius:14px;background:var(--surface,#fff)}
.attendance-summary .summary-chip.status-belum{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.attendance-summary .summary-chip.status-pkl{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.attendance-card-compact{position:relative;display:grid;grid-template-columns:42px minmax(170px,1.1fr) minmax(420px,2.5fr) minmax(250px,1.25fr) auto;gap:12px;align-items:center;transition:.18s ease;border-left:4px solid transparent}
.attendance-card-compact.is-unrecorded{border-left-color:#f59e0b;background:linear-gradient(90deg,rgba(245,158,11,.055),transparent 28%)}
.attendance-card-compact.has-status.status-card-hadir{border-left-color:#16a34a}
.attendance-card-compact.has-status.status-card-terlambat{border-left-color:#f59e0b}
.attendance-card-compact.has-status.status-card-sakit{border-left-color:#3b82f6}
.attendance-card-compact.has-status.status-card-izin{border-left-color:#8b5cf6}
.attendance-card-compact.has-status.status-card-alpa{border-left-color:#ef4444}
.attendance-card-compact.has-status.status-card-dispensasi{border-left-color:#06b6d4}
.attendance-card-compact.has-status.status-card-pulang_awal{border-left-color:#ec4899}
.attendance-card-compact.is-pkl{border-left-color:#2563eb;background:linear-gradient(90deg,rgba(37,99,235,.08),transparent 34%)}
.student-live-state{display:inline-flex;width:max-content;margin-top:4px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;background:#fff7ed;color:#c2410c}
.has-status .student-live-state{background:#eef2ff;color:#4f46e5}
.attendance-pkl-mark{display:flex;align-items:center;gap:10px;min-width:0}
.attendance-pkl-mark small{color:var(--muted,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-pkl{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:700;white-space:nowrap}
.badge-pkl svg{width:14px;height:14px}
.attendance-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.attendance-method-chip{display:inline-flex;align-items:center;gap:6px;max-width:150px;padding:7px 9px;border-radius:10px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;white-space:nowrap}
.attendance-method-chip svg{width:14px;height:14px;flex:none}.attendance-method-chip span{overflow:hidden;text-overflow:ellipsis}
.btn-wa-harian{background:#dcfce7!important;border:1px solid #86efac!important;color:#15803d!important}
.btn-wa-harian:hover{background:#bbf7d0!important}.btn-wa-harian.is-disabled,.btn-wa-harian:disabled{opacity:.42}
.status-pill{transition:transform .14s ease,box-shadow .14s ease,background .14s ease}.status-pill:active{transform:scale(.96)}
.status-pill.active{box-shadow:0 5px 14px rgba(15,23,42,.12)}
@media(max-width:1350px){.attendance-card-compact{grid-template-columns:42px minmax(150px,1fr) minmax(360px,2fr) auto}.attendance-time-compact{grid-column:2/4}.attendance-row-actions{grid-column:4;grid-row:1/3}}
@media(max-width:900px){.attendance-card-compact{grid-template-columns:38px 1fr auto}.status-pills,.attendance-time-compact{grid-column:1/-1}.attendance-row-actions{grid-column:1/-1;grid-row:auto;justify-content:flex-start}.attendance-method-chip{max-width:none}.attendance-pkl-mark{grid-column:3}.attendance-card-compact.is-pkl .attendance-method-chip{grid-column:1/-1}}
html[data-theme="dark"] .attendance-summary .summary-chip,body.dark-mode .attendance-summary .summary-chip{background:#111c30;border-color:#2b3a55;color:#e5edf9}
html[data-theme="dark"] .attendance-summary .status-belum,body.dark-mode .attendance-summary .status-belum{background:#33200e;color:#fdba74;border-color:#6b3a12}
html[data-theme="dark"] .attendance-summary .status-pkl,body.dark-mode .attendance-summary .status-pkl{background:#10264b;color:#93c5fd;border-color:#244a82}
html[data-theme="dark"] .attendance-method-chip,body.dark-mode .attendance-method-chip{background:#18243a;color:#b9c6da}
html[data-theme="dark"] .student-live-state,body.dark-mode .student-live-state{background:#3a260d;color:#fdba74}
html[data-theme="dark"] .has-status .student-live-state,body.dark-mode .has-status .student-live-state{background:#24204d;color:#c4b5fd}
html[data-theme="dark"] .badge-pkl,body.dark-mode .badge-pkl{background:#15325f;color:#93c5fd}

/* v6.0 Multi Unit / Multi Jenjang */
.unit-context-switcher,.unit-context-single{display:flex;align-items:center;gap:.55rem;min-width:210px;padding:.42rem .65rem;border:1px solid var(--border,#dfe5ef);border-radius:14px;background:var(--surface,#fff)}
.unit-context-switcher .form-select{border:0;background:transparent;font-weight:700;padding-left:.15rem;box-shadow:none}
.unit-context-single span:not(.unit-context-dot){font-weight:800}.unit-context-single small{color:var(--muted,#7a8699);margin-left:auto}
.unit-context-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--unit-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--unit-color) 16%,transparent)}
.unit-page{display:grid;gap:16px}.unit-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.unit-head h2{margin:.15rem 0}.unit-head p{margin:0;color:var(--muted,#718096)}
.unit-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.unit-overview>div{padding:16px 18px;border:1px solid var(--border,#e1e7f0);border-radius:16px;background:var(--surface,#fff);display:flex;flex-direction:column}.unit-overview strong{font-size:1.55rem}.unit-overview span{font-size:.78rem;color:var(--muted,#718096)}
.unit-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.unit-toolbar .input-icon{max-width:520px;flex:1}.unit-list{display:grid;gap:10px}.unit-card{position:relative;display:grid;grid-template-columns:52px minmax(220px,1.2fr) minmax(260px,1.5fr) auto;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--border,#e1e7f0);border-left:4px solid var(--unit-color);border-radius:17px;background:var(--surface,#fff);transition:.18s ease}.unit-card:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(25,35,60,.08)}
.unit-avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--unit-color) 14%,transparent);color:var(--unit-color);font-weight:900}.unit-title{display:flex;align-items:center;gap:8px}.unit-title strong{font-size:1rem}.unit-main small,.unit-meta span{color:var(--muted,#718096)}.unit-meta{display:grid;gap:3px;min-width:0}.unit-meta span{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem}.unit-meta svg{width:14px;height:14px;flex:0 0 14px}.unit-actions{display:flex;gap:6px}.unit-access-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.unit-access-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border,#e1e7f0);border-radius:13px;cursor:pointer}.unit-access-item:has(input:checked){border-color:var(--primary,#6657f5);background:color-mix(in srgb,var(--primary,#6657f5) 8%,transparent)}.unit-access-item span{display:flex;flex-direction:column;min-width:0}.unit-access-item small{color:var(--muted,#718096);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="dark"] .unit-context-switcher,[data-theme="dark"] .unit-context-single,[data-theme="dark"] .unit-overview>div,[data-theme="dark"] .unit-card,[data-theme="dark"] .unit-access-item{background:#151f32;border-color:#2c3950;color:#edf3ff}
@media(max-width:900px){.unit-card{grid-template-columns:46px 1fr auto}.unit-meta{grid-column:2/4}.unit-access-list{grid-template-columns:1fr}.unit-context-switcher{min-width:170px}.unit-overview{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.unit-head{align-items:stretch;flex-direction:column}.unit-overview{grid-template-columns:1fr}.unit-card{grid-template-columns:42px 1fr}.unit-actions{grid-column:1/3;justify-content:flex-end}.unit-meta{grid-column:1/3}.unit-context-switcher,.unit-context-single{display:none}}


/* v6.0.1 Header hanya identitas unit sekolah */
.topbar{justify-content:flex-start;gap:12px}
.topbar>.unit-context-switcher,.topbar>.unit-context-single{margin-right:auto}
.topbar>.academic-year-context{flex:0 0 auto}
@media(max-width:991px){.topbar>.unit-context-switcher,.topbar>.unit-context-single{margin-right:auto}}

/* v6.1 - Pengguna multi-unit dan peran per unit */
.unit-role-section{border:1px solid var(--border-color,#e4e8f1);border-radius:18px;padding:16px;background:var(--surface-soft,#f8f9fc)}
.unit-role-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.unit-role-head>div{display:grid;gap:3px}.unit-role-head small{color:var(--text-muted,#74809a)}
.unit-role-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:330px;overflow:auto;padding-right:3px}
.unit-role-card{border:1px solid var(--border-color,#e4e8f1);border-radius:15px;padding:12px;background:var(--surface,#fff);opacity:.7;transition:.18s ease}.unit-role-card.is-enabled{opacity:1;border-color:rgba(102,87,245,.42);box-shadow:0 8px 24px rgba(31,38,80,.07)}
.unit-role-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0}.unit-role-toggle input{width:18px;height:18px}.unit-role-toggle span{display:grid;flex:1}.unit-role-toggle small{color:var(--text-muted,#74809a)}.unit-role-toggle>svg{width:18px;color:#6657f5;opacity:0}.unit-role-card.is-enabled .unit-role-toggle>svg{opacity:1}
.unit-role-options{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0 8px}.unit-role-options label{cursor:pointer}.unit-role-options input{position:absolute;opacity:0}.unit-role-options span{display:inline-flex;padding:7px 10px;border:1px solid var(--border-color,#dde3ee);border-radius:10px;font-size:.78rem;font-weight:700}.unit-role-options input:checked+span{background:rgba(102,87,245,.12);border-color:#6657f5;color:#5546dc}.unit-role-options input:disabled+span{opacity:.45;cursor:not-allowed}
.unit-default{display:flex;align-items:center;gap:7px;color:var(--text-muted,#74809a);font-size:.76rem}.unit-default input{accent-color:#6657f5}
.user-unit-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.unit-mini-chip{font-size:.68rem;padding:3px 7px;border-radius:999px;background:rgba(102,87,245,.09);color:#6657f5;font-weight:700}
html[data-theme="dark"] .unit-role-section,html[data-theme="dark"] .unit-role-card{background:#121c30;border-color:#2b3953}html[data-theme="dark"] .unit-role-card.is-enabled{background:#17233a}html[data-theme="dark"] .unit-role-options span{border-color:#34425d;color:#cbd4e7}html[data-theme="dark"] .unit-role-options input:checked+span{background:#2d285f;color:#c9c2ff;border-color:#7567ff}html[data-theme="dark"] .unit-mini-chip{background:#2b2856;color:#c9c2ff}
@media(max-width:767px){.unit-role-matrix{grid-template-columns:1fr;max-height:380px}}

/* v6.1.2 — unit sekolah lebih compact + filter pengguna per unit */
.unit-page{gap:12px}
.unit-head{align-items:center;padding-bottom:2px}
.unit-head h2{font-size:1.65rem;line-height:1.15}
.unit-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.unit-overview{gap:10px}
.unit-overview>div{min-height:74px;padding:12px 15px;border-radius:14px;justify-content:center}
.unit-overview strong{font-size:1.35rem;line-height:1}
.unit-toolbar{margin-top:0}
.unit-list{gap:8px}
.unit-card{grid-template-columns:44px minmax(230px,1.2fr) minmax(280px,1.4fr) auto;gap:12px;padding:10px 12px;border-radius:14px;min-height:68px}
.unit-avatar{width:40px;height:40px;border-radius:12px;font-size:.88rem}
.unit-main{min-width:0}
.unit-title{display:flex;align-items:center;gap:8px;min-width:0}
.unit-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-main>small{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-meta{gap:3px}
.unit-meta span{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-actions{gap:6px}
.unit-actions .btn-icon{width:36px;height:36px;border-radius:11px}
.user-filter-toolbar{grid-template-columns:minmax(260px,1fr) 190px 220px auto}
.unit-filter-wrap,.role-filter-wrap{position:relative}
.unit-filter-wrap>svg,.role-filter-wrap>svg{position:absolute;left:12px;top:50%;width:17px;height:17px;transform:translateY(-50%);z-index:2;color:var(--text-muted,#74809a);pointer-events:none}
.unit-filter-wrap .form-select,.role-filter-wrap .form-select{padding-left:38px}
@media(max-width:1100px){.user-filter-toolbar{grid-template-columns:1fr 190px 220px}.user-filter-toolbar .list-limit{grid-column:1/-1;justify-self:end}}
@media(max-width:850px){.unit-card{grid-template-columns:42px 1fr auto}.unit-meta{grid-column:2/4}.user-filter-toolbar{grid-template-columns:1fr 1fr}.user-filter-toolbar .list-search{grid-column:1/-1}.user-filter-toolbar .list-limit{grid-column:1/-1}}
@media(max-width:620px){.unit-head-actions{width:100%}.unit-head-actions .btn{flex:1}.user-filter-toolbar{grid-template-columns:1fr}.user-filter-toolbar .list-search,.user-filter-toolbar .list-limit{grid-column:auto}.unit-card{grid-template-columns:40px 1fr}.unit-meta,.unit-actions{grid-column:1/3}.unit-actions{justify-content:flex-end}}

/* v6.1.3 — penyempurnaan filter pengguna, daftar unit, pagination, dan detail unit */
.user-filter-toolbar{align-items:center;gap:10px;padding-top:12px}
.user-filter-toolbar .list-search,.user-filter-toolbar .role-filter-wrap,.user-filter-toolbar .unit-filter-wrap{height:44px}
.user-filter-toolbar .list-search{min-width:280px;border:1px solid var(--border-color,#dfe5ef);border-radius:13px;background:var(--surface,#fff);overflow:hidden}
.user-filter-toolbar .list-search .form-control{height:42px;border:0!important;background:transparent!important;box-shadow:none!important;padding-left:42px}
.role-filter-wrap,.unit-filter-wrap{min-width:205px;border:1px solid var(--border-color,#dfe5ef);border-radius:13px;background:var(--surface,#fff);overflow:hidden}
.role-filter-wrap .form-select,.unit-filter-wrap .form-select{height:42px;border:0!important;border-radius:0!important;background-color:transparent!important;box-shadow:none!important;padding-right:38px;font-weight:600;color:var(--text-color,#172033);background-position:right 13px center}
.user-filter-toolbar .list-limit{height:44px;display:flex;align-items:center;gap:8px;padding:0 4px;white-space:nowrap}
.user-filter-toolbar .list-limit .form-select{width:82px;height:42px;border-radius:12px;font-weight:700}
html[data-theme="dark"] .user-filter-toolbar .list-search,html[data-theme="dark"] .role-filter-wrap,html[data-theme="dark"] .unit-filter-wrap{background:#111b2e;border-color:#2c3a52}
html[data-theme="dark"] .role-filter-wrap .form-select,html[data-theme="dark"] .unit-filter-wrap .form-select{color:#edf3ff;color-scheme:dark}

.unit-data-panel{display:grid;gap:12px;padding:14px;border:1px solid var(--border-color,#e1e7f0);border-radius:18px;background:var(--surface,#fff)}
.unit-toolbar-modern{margin:0;align-items:center}
.unit-search-box{position:relative;flex:1;max-width:640px}
.unit-search-box>svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--text-muted,#8290a7);pointer-events:none;z-index:2}
.unit-search-box .form-control{height:46px;padding-left:43px;border-radius:14px;background:var(--surface-soft,#f8fafc)}
.unit-toolbar-right{display:flex;align-items:center;gap:10px}
.compact-select-shell{display:flex;align-items:center;gap:8px;color:var(--text-muted,#718096);font-size:.78rem;white-space:nowrap}
.compact-select-shell .form-select{width:76px;height:42px;border-radius:12px;padding-left:12px;font-weight:800;color:var(--text-color,#172033)}
.unit-card-clickable{cursor:pointer}
.unit-card-clickable:focus-visible{outline:3px solid color-mix(in srgb,var(--unit-color) 34%,transparent);outline-offset:2px}
.unit-card-clickable .unit-actions{position:relative;z-index:2}
.unit-list-footer{min-height:42px;padding-top:4px;border-top:1px solid var(--border-color,#e7ebf2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.unit-list-footer>span{font-size:.78rem}
.unit-pagination{display:flex;align-items:center;gap:5px}
.unit-pagination button{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--border-color,#dfe5ef);border-radius:10px;background:var(--surface,#fff);color:var(--text-color,#172033);font-weight:700;transition:.15s ease}
.unit-pagination button:hover:not(:disabled),.unit-pagination button.active{border-color:var(--primary,#6657f5);background:var(--primary,#6657f5);color:#fff}
.unit-pagination button:disabled{opacity:.42;cursor:not-allowed}

.unit-detail-modal{overflow:hidden}
.unit-detail-heading{display:flex;align-items:center;gap:12px}
.unit-detail-avatar{--unit-color:#6657f5;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--unit-color) 14%,transparent);color:var(--unit-color);font-weight:900}
.unit-detail-heading h5{margin:2px 0 0}
.unit-detail-grid{display:grid;gap:18px}
.unit-detail-summary{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);gap:16px;padding:18px;border:1px solid var(--border-color,#e1e7f0);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary,#6657f5) 7%,var(--surface,#fff)),var(--surface,#fff))}
.unit-detail-identity h4{margin:0 0 5px;font-size:1.35rem}.unit-detail-identity p{margin:0;color:var(--text-muted,#718096)}
.unit-detail-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.unit-detail-tags span{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--surface,#fff);border:1px solid var(--border-color,#e1e7f0);font-size:.72rem;font-weight:800}
.unit-detail-contact{display:grid;grid-template-columns:1fr;gap:8px}.unit-detail-contact>div{padding:10px 12px;border:1px solid var(--border-color,#e1e7f0);border-radius:13px;background:color-mix(in srgb,var(--surface,#fff) 92%,transparent);display:grid;gap:2px}.unit-detail-contact small{color:var(--text-muted,#718096)}.unit-detail-contact strong{font-size:.85rem}
.unit-detail-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}.unit-detail-section-title h6{margin:0;font-size:1rem}.unit-detail-section-title p{margin:3px 0 0;color:var(--text-muted,#718096);font-size:.78rem}
.unit-detail-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.unit-detail-stats.attendance{grid-template-columns:repeat(6,minmax(0,1fr))}
.unit-detail-stat{padding:12px;border:1px solid var(--border-color,#e1e7f0);border-radius:14px;background:var(--surface-soft,#f8fafc);display:grid;gap:2px}.unit-detail-stat strong{font-size:1.2rem}.unit-detail-stat span{font-size:.72rem;color:var(--text-muted,#718096)}
.unit-detail-stat.present strong{color:#14945b}.unit-detail-stat.late strong{color:#d28a00}.unit-detail-stat.sick strong{color:#3774d8}.unit-detail-stat.permit strong{color:#7457e6}.unit-detail-stat.absent strong{color:#dc3545}.unit-detail-stat.missing strong{color:#ef7d22}
.unit-attendance-rate{font-size:1.2rem;color:var(--primary,#6657f5)}
.unit-attendance-progress{height:8px;margin-bottom:10px;border-radius:999px;background:var(--surface-soft,#edf1f7);overflow:hidden}.unit-attendance-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6657f5,#39b98a);transition:width .4s ease}
.unit-role-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.unit-role-summary>div{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--border-color,#e1e7f0);border-radius:14px;background:var(--surface-soft,#f8fafc)}.unit-role-summary span{font-size:.8rem;color:var(--text-muted,#718096)}.unit-role-summary strong{font-size:1.05rem}
.detail-loading{min-height:260px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--text-muted,#718096)}
html[data-theme="dark"] .unit-data-panel,html[data-theme="dark"] .unit-search-box .form-control,html[data-theme="dark"] .compact-select-shell .form-select,html[data-theme="dark"] .unit-pagination button,html[data-theme="dark"] .unit-detail-summary,html[data-theme="dark"] .unit-detail-contact>div,html[data-theme="dark"] .unit-detail-tags span,html[data-theme="dark"] .unit-detail-stat,html[data-theme="dark"] .unit-role-summary>div{background:#111b2e;border-color:#2b3952;color:#edf3ff}
html[data-theme="dark"] .unit-detail-summary{background:linear-gradient(135deg,#171d3c,#111b2e)}
html[data-theme="dark"] .unit-attendance-progress{background:#25334c}
@media(max-width:1000px){.unit-detail-stats.attendance{grid-template-columns:repeat(3,1fr)}.unit-detail-summary{grid-template-columns:1fr}.unit-toolbar-modern{align-items:stretch;flex-direction:column}.unit-search-box{max-width:none}.unit-toolbar-right{justify-content:space-between}}
@media(max-width:700px){.unit-data-panel{padding:10px}.unit-toolbar-right{align-items:flex-start;flex-direction:column}.unit-detail-stats,.unit-detail-stats.attendance{grid-template-columns:repeat(2,1fr)}.unit-role-summary{grid-template-columns:1fr}.unit-list-footer{align-items:flex-start;flex-direction:column}.unit-pagination{width:100%;justify-content:flex-end}.user-filter-toolbar .role-filter-wrap,.user-filter-toolbar .unit-filter-wrap{min-width:0;width:100%}}
/* v6.3.1 - Absensi guru dan karyawan */
.staff-page-head{align-items:flex-start}.page-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:7px}.page-kicker svg{width:14px;height:14px}.staff-filter-card{display:grid;grid-template-columns:minmax(170px,.65fr) minmax(190px,.75fr) minmax(280px,1.5fr) minmax(130px,.5fr);gap:12px;align-items:end;padding:14px;border:1px solid var(--border);border-radius:18px;background:#f8fafc;margin-bottom:14px}.staff-filter-card label{font-size:.68rem;font-weight:750;color:#667085;margin-bottom:6px}.staff-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}.staff-summary-card{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:#fff;min-width:0}.staff-summary-card>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;flex:0 0 auto}.staff-summary-card>span svg{width:18px;height:18px}.staff-summary-card div{display:flex;flex-direction:column;min-width:0}.staff-summary-card small{font-size:.64rem;color:#7b8799}.staff-summary-card strong{font-size:1.15rem;line-height:1.1;margin-top:2px}.staff-summary-card em{font-style:normal;font-size:.57rem;color:#9aa4b3;margin-top:3px}.staff-summary-card.tone-success>span{background:#dcfce7;color:#15803d}.staff-summary-card.tone-warning>span{background:#fef3c7;color:#b45309}.staff-summary-card.tone-info>span{background:#dbeafe;color:#1d4ed8}.staff-summary-card.tone-danger>span{background:#fee2e2;color:#b91c1c}.staff-table-shell{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff}.staff-table-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border-bottom:1px solid var(--border)}.staff-table-head>div{display:flex;flex-direction:column}.staff-table-head strong{font-size:.86rem}.staff-table-head small{font-size:.64rem;color:#8893a4}.staff-legend{font-size:.62rem;color:#8490a1;display:flex;align-items:center;gap:6px}.staff-legend i{width:7px;height:7px;border-radius:50%;background:#6366f1}.staff-attendance-table thead th{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:#7d8898;background:#f8fafc;border-bottom:1px solid var(--border);padding:10px 14px;white-space:nowrap}.staff-attendance-table tbody td{padding:10px 14px;border-color:#eef1f5}.staff-person{display:flex;align-items:center;gap:10px;min-width:220px}.staff-person>span{width:36px;height:36px;border-radius:11px;background:#eef2ff;color:#4f46e5;display:grid;place-items:center;font-weight:850}.staff-person div,.staff-role{display:flex;flex-direction:column}.staff-person strong,.staff-role strong{font-size:.75rem}.staff-person small,.staff-role small{font-size:.61rem;color:#8792a3}.staff-time{font-size:.76rem;font-variant-numeric:tabular-nums}.staff-delay{display:block;font-size:.56rem;color:#b45309;margin-top:4px}.staff-row-actions{display:flex;justify-content:flex-end;gap:7px}.staff-row-actions .btn{display:inline-flex;align-items:center;gap:6px}.staff-row-actions svg{width:14px;height:14px}.staff-matrix-legend{margin-top:3px;max-width:none;justify-content:flex-start}.staff-matrix .sticky-name{min-width:235px;width:235px}.staff-matrix .matrix-status{border:0}.st-dinas{background:#cffafe;color:#0e7490}.st-cuti{background:#e2e8f0;color:#475569}.matrix-filter{grid-template-columns:minmax(170px,.65fr) minmax(190px,.75fr) minmax(280px,1.5fr) minmax(130px,.5fr)}
@media(max-width:1100px){.staff-summary-grid{grid-template-columns:repeat(3,1fr)}.staff-filter-card,.matrix-filter{grid-template-columns:repeat(2,1fr)}.staff-search{grid-column:1/-1}.staff-filter-card .d-flex{grid-column:1/-1}.staff-attendance-table{min-width:850px}}
@media(max-width:650px){.staff-page-head{gap:12px}.staff-page-head .btn{width:100%;justify-content:center}.staff-filter-card,.matrix-filter{grid-template-columns:1fr}.staff-search,.staff-filter-card .d-flex{grid-column:auto}.staff-summary-grid{grid-template-columns:repeat(2,1fr)}.staff-summary-card{padding:11px}.staff-summary-card:last-child{grid-column:1/-1}.staff-table-head{align-items:flex-start;flex-direction:column}.staff-legend{display:none}.staff-matrix .sticky-name{min-width:175px;width:175px}}

/* v6.4.3 person cards & modern import */
.person-card{grid-template-columns:46px minmax(220px,1.55fr) repeat(3,minmax(130px,.72fr)) auto;min-height:82px;padding:14px 16px}.person-card .card-main{min-width:0}.person-card .card-main strong{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-card .card-main span{font-size:.72rem;color:#718096}.person-card .card-meta{min-width:0;padding-left:14px;border-left:1px solid #eef1f6}.person-card .card-meta span:last-child{font-size:.78rem;font-weight:700;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-card>.list-actions{position:static!important;display:flex;gap:7px;justify-content:flex-end}.person-card>.list-actions .btn{width:36px;height:36px;padding:0;justify-content:center;border-radius:11px}.teacher-card{grid-template-columns:46px minmax(230px,1.6fr) repeat(3,minmax(135px,.75fr)) auto}.employee-card{grid-template-columns:46px minmax(210px,1.45fr) repeat(4,minmax(105px,.68fr)) auto}.import-modal{border:0;border-radius:22px;overflow:hidden;box-shadow:0 28px 80px rgba(15,23,42,.22)}.import-modal .modal-header{padding:20px 22px;border-bottom:1px solid #eef2f7}.import-modal-title{display:flex;align-items:center;gap:12px}.import-modal-title>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5}.import-modal-title svg{width:20px}.import-modal-title h5{margin:0;font-size:1rem}.import-modal-title small{color:#64748b}.template-download-card{display:grid;grid-template-columns:42px 1fr 20px;gap:12px;align-items:center;text-decoration:none;padding:14px;border:1px solid #dfe5ef;border-radius:16px;background:linear-gradient(145deg,#fff,#f8faff);color:#334155;transition:.18s}.template-download-card:hover{border-color:#a5b4fc;background:#eef2ff;transform:translateY(-1px)}.template-download-card>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#e0e7ff;color:#4338ca}.template-download-card strong,.template-download-card small{display:block}.template-download-card strong{font-size:.84rem}.template-download-card small{margin-top:2px;color:#64748b;font-size:.7rem}.template-download-card svg{width:18px}.excel-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:145px;padding:20px;border:1.5px dashed #cbd5e1;border-radius:17px;background:#f8fafc;cursor:pointer;text-align:center;transition:.18s}.excel-dropzone:hover{border-color:#818cf8;background:#eef2ff}.excel-dropzone>svg{width:28px;height:28px;color:#4f46e5}.excel-dropzone strong{font-size:.85rem}.excel-dropzone small{font-size:.72rem;color:#64748b}.excel-dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.import-modal .modal-footer{padding:14px 22px;background:#f8fafc;border-top:1px solid #eef2f7}.import-modal .modal-footer .btn{min-height:42px;border-radius:12px}@media(max-width:1100px){.person-card{grid-template-columns:44px minmax(180px,1.5fr) repeat(2,minmax(110px,.7fr)) auto}.person-card .card-meta:nth-last-of-type(2){display:none}.employee-card .card-meta:nth-last-of-type(3){display:none}}@media(max-width:760px){.person-card,.teacher-card,.employee-card{grid-template-columns:42px minmax(0,1fr) auto}.person-card .card-meta{grid-column:2/4;border-left:0;border-top:1px solid #eef1f6;padding:8px 0 0}.person-card>.list-actions{grid-column:3;grid-row:1;align-self:center}.person-card .card-meta:not(:first-of-type){display:none}}

/* v6.4.4 staff attendance dark mode & matrix interaction */
.staff-matrix .matrix-status{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.staff-matrix .matrix-status:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 7px 18px rgba(15,23,42,.16);filter:saturate(1.1)}.staff-matrix .matrix-status:focus-visible{outline:3px solid rgba(99,102,241,.3);outline-offset:2px}.matrix-detail-modal{border:0;border-radius:22px;overflow:hidden}.matrix-detail-date{font-size:.78rem;color:var(--muted);margin-bottom:14px}.matrix-detail-status{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--soft)}.matrix-detail-status .matrix-status{width:42px;height:42px;font-size:.82rem}.matrix-detail-status div{display:flex;flex-direction:column}.matrix-detail-status strong{font-size:.9rem}.matrix-detail-status small{font-size:.68rem;color:var(--muted)}.matrix-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.matrix-detail-grid article,.matrix-detail-note{padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--card)}.matrix-detail-grid small,.matrix-detail-note small{display:block;font-size:.63rem;color:var(--muted);margin-bottom:4px}.matrix-detail-grid strong{font-size:.9rem}.matrix-detail-note{margin-top:10px}.matrix-detail-note p{margin:0;font-size:.78rem}.staff-matrix-legend small{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}.staff-matrix-legend small svg{width:13px;height:13px}
[data-theme="dark"] .staff-attendance-page,[data-theme="dark"] .staff-matrix-page{color:#e5edf9}[data-theme="dark"] .staff-filter-card{background:#111b2d;border-color:#2a3953}[data-theme="dark"] .staff-filter-card label,[data-theme="dark"] .staff-table-head small,[data-theme="dark"] .staff-person small,[data-theme="dark"] .staff-role small,[data-theme="dark"] .staff-summary-card small,[data-theme="dark"] .staff-summary-card em{color:#9fb0ca}[data-theme="dark"] .staff-filter-card .form-control,[data-theme="dark"] .staff-filter-card .form-select,[data-theme="dark"] .list-search{background:#0f1728!important;border-color:#31415e!important;color:#f8fafc!important}[data-theme="dark"] .staff-filter-card .form-control::placeholder,[data-theme="dark"] .list-search input::placeholder{color:#8090aa}[data-theme="dark"] .staff-summary-card,[data-theme="dark"] .staff-table-shell,[data-theme="dark"] .matrix-card,[data-theme="dark"] .matrix-detail-modal,[data-theme="dark"] .matrix-detail-grid article,[data-theme="dark"] .matrix-detail-note{background:#162238;border-color:#2b3b57;color:#edf3fc}[data-theme="dark"] .staff-table-head{border-color:#2b3b57}[data-theme="dark"] .staff-attendance-table thead th{background:#1a2942;color:#b8c6db;border-color:#31415e}[data-theme="dark"] .staff-attendance-table tbody td{background:#162238;color:#eef4ff;border-color:#2b3b57}[data-theme="dark"] .staff-attendance-table tbody tr:hover td{background:#1a2942}[data-theme="dark"] .staff-time,[data-theme="dark"] .staff-person strong,[data-theme="dark"] .staff-role strong{color:#f7f9fd}[data-theme="dark"] .attendance-matrix.staff-matrix th{background:#1b2942;color:#e7eef9;border-color:#31415e}[data-theme="dark"] .attendance-matrix.staff-matrix td{background:#152136;color:#e7eef9;border-color:#2b3b57}[data-theme="dark"] .attendance-matrix.staff-matrix .sticky-name,[data-theme="dark"] .attendance-matrix.staff-matrix .sticky-no{background:#18253b!important;color:#f6f8fc}[data-theme="dark"] .attendance-matrix.staff-matrix tbody tr:hover td{background:#1b2942}[data-theme="dark"] .attendance-matrix.staff-matrix tbody tr:hover .sticky-name,[data-theme="dark"] .attendance-matrix.staff-matrix tbody tr:hover .sticky-no{background:#20304b!important}[data-theme="dark"] .summary-cell{color:#dbe6f5}[data-theme="dark"] .matrix-detail-status{background:#111b2d;border-color:#2b3b57}[data-theme="dark"] .btn-light{background:#1b2942;border-color:#31415e;color:#edf3fc}[data-theme="dark"] .btn-light:hover{background:#253653;color:#fff}
@media(max-width:650px){.matrix-detail-grid{grid-template-columns:1fr}.staff-matrix-legend small{display:none}}
/* Teacher adaptive desktop/mobile experience */
.teacher-bottom-nav{display:none}
@media(max-width:767.98px){
 body.teacher-adaptive-app{background:#f5f7fb;padding-bottom:86px}
 body.teacher-adaptive-app .sidebar{display:none!important}
 body.teacher-adaptive-app .main{margin-left:0!important;width:100%!important}
 body.teacher-adaptive-app .topbar{height:64px;padding:0 14px;background:#f5f7fb;border-bottom:0;position:sticky;top:0}
 body.teacher-adaptive-app #sidebarToggle{display:none!important}
 body.teacher-adaptive-app .page-title h1{font-size:17px}
 body.teacher-adaptive-app .page-title p{display:none}
 body.teacher-adaptive-app .user-menu div,body.teacher-adaptive-app .user-menu:after{display:none}
 body.teacher-adaptive-app .content{padding:10px 12px 24px;max-width:760px;margin:auto}
 body.teacher-adaptive-app .teacher-bottom-nav{display:grid}
}

/* WhatsApp notification method settings */
.wa-method-settings{margin-top:18px;padding:18px;border:1px solid var(--border,#e5e7eb);border-radius:20px;background:var(--card-bg,#fff)}.wa-method-settings .wa-subhead{margin-bottom:15px}.wa-method-settings .wa-subhead h4{margin:0 0 4px;font-size:16px}.wa-method-settings .wa-subhead p{margin:0;color:var(--muted,#667085);font-size:12px}.wa-method-group+.wa-method-group{margin-top:18px;padding-top:18px;border-top:1px solid var(--border,#edf0f5)}.wa-method-group h5{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#667085)}.wa-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.wa-method-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--border,#e7eaf0);border-radius:15px;background:#fbfcff;cursor:pointer}.wa-method-item:hover{border-color:#a5b4fc}.wa-method-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5}.wa-method-icon svg{width:18px;height:18px}.wa-method-item strong,.wa-method-item small{display:block}.wa-method-item strong{font-size:12px}.wa-method-item small{margin-top:2px;color:var(--muted,#667085);font-size:10px;line-height:1.35}.wa-method-item .form-check-input{width:2.25rem;height:1.2rem}@media(max-width:1100px){.wa-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.wa-method-settings{padding:14px;border-radius:17px}.wa-method-grid{grid-template-columns:1fr}.wa-method-item{padding:11px}}html[data-theme="dark"] .wa-method-settings{background:#111827;border-color:#263244}html[data-theme="dark"] .wa-method-item{background:#0f172a;border-color:#263244}html[data-theme="dark"] .wa-method-item small,html[data-theme="dark"] .wa-method-settings .wa-subhead p,html[data-theme="dark"] .wa-method-group h5{color:#94a3b8}

/* Candy Absensi v6.8.5 - template audience & polished switches */
.wa-template-audience-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}.wa-template-audience-tabs>button{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid var(--border-color,#e3e8f2);border-radius:17px;background:var(--card-bg,#fff);color:inherit;text-align:left;transition:.18s ease}.wa-template-audience-tabs>button:hover{border-color:#a5b4fc;transform:translateY(-1px)}.wa-template-audience-tabs>button.active{border-color:#6757f5;background:linear-gradient(180deg,rgba(103,87,245,.08),rgba(103,87,245,.035));box-shadow:0 9px 24px rgba(103,87,245,.10)}.wa-template-audience-tabs>button>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#eef2ff;color:#5b4cf0}.wa-template-audience-tabs strong,.wa-template-audience-tabs small{display:block}.wa-template-audience-tabs small{margin-top:2px;color:var(--text-muted,#7a859b);font-size:.72rem}.wa-template-audience-tabs b{min-width:30px;height:30px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-size:.75rem}
.wa-page .form-check.form-switch{display:flex;align-items:center;min-height:0;padding-left:0}.wa-page .form-check.form-switch .form-check-input{float:none;margin:0!important;width:44px;height:24px;border:0;background-color:#d7deea;background-position:left 3px center;background-size:18px 18px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);cursor:pointer;transition:background-position .18s ease,background-color .18s ease,box-shadow .18s ease}.wa-page .form-check.form-switch .form-check-input:checked{background-color:#4f46e5;background-position:right 3px center;box-shadow:0 6px 14px rgba(79,70,229,.22)}.wa-page .form-check.form-switch .form-check-input:focus{box-shadow:0 0 0 4px rgba(99,102,241,.15)}.wa-rule-item>.form-check-input{appearance:none;-webkit-appearance:none;width:42px;height:23px;border-radius:999px;border:0;background:#d7deea;position:relative;cursor:pointer;transition:.18s ease}.wa-rule-item>.form-check-input:before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(15,23,42,.22);transition:.18s ease}.wa-rule-item>.form-check-input:checked{background:#4f46e5}.wa-rule-item>.form-check-input:checked:before{transform:translateX(19px)}.wa-method-item .form-check-input{width:44px!important;height:24px!important}
@media(max-width:680px){.wa-template-audience-tabs{grid-template-columns:1fr}.wa-template-audience-tabs>button{padding:12px}.wa-template-audience-tabs>button>span{width:40px;height:40px}}
html[data-theme="dark"] .wa-template-audience-tabs>button{background:#0f192a;border-color:#293851}html[data-theme="dark"] .wa-template-audience-tabs>button.active{background:rgba(103,87,245,.11);border-color:#786af7}html[data-theme="dark"] .wa-page .form-check.form-switch .form-check-input,html[data-theme="dark"] .wa-rule-item>.form-check-input{background-color:#475569}

/* Candy Absensi v6.8.6 - riwayat WhatsApp */
.wa-log-toolbar .wa-page-size{min-width:110px;max-width:125px}.wa-log-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 2px 12px;color:var(--text-muted,#64748b);font-size:.78rem}.wa-log-summary strong{color:var(--text-main,#172033)}.wa-log-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}.wa-log-pagination .btn{display:inline-flex;align-items:center;gap:5px;border-radius:10px}.wa-log-pages{display:flex;align-items:center;gap:5px}.wa-log-pages .btn{width:34px;height:34px;padding:0;justify-content:center}.wa-log-page-ellipsis{padding:0 3px;color:var(--text-muted,#64748b)}html[data-theme="dark"] .wa-log-summary strong{color:#f3f6ff}@media(max-width:700px){.wa-log-toolbar .wa-page-size{width:100%;max-width:none}.wa-log-summary{align-items:flex-start;flex-direction:column}.wa-log-pagination{justify-content:space-between}.wa-log-pages{display:none}.wa-log-pagination>.btn{flex:1;justify-content:center}}
/* Login v6.9.5 */
.login-page-animated{overflow-x:hidden}.login-page-animated .login-visual{isolation:isolate}.login-page-animated .visual-content{position:relative;z-index:3;animation:loginReveal .75s cubic-bezier(.2,.8,.2,1) both}.login-page-animated .login-card-modern{animation:loginCardIn .65s cubic-bezier(.2,.8,.2,1) both;transition:transform .28s ease,opacity .28s ease}.login-page-animated .login-card-modern.login-success{transform:scale(.97);opacity:.45}.login-grid-pattern{position:absolute;inset:0;z-index:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to right,#000,transparent 85%)}.login-orb{position:absolute;border-radius:999px;filter:blur(4px);opacity:.28;z-index:1;animation:orbFloat 9s ease-in-out infinite}.orb-a{width:310px;height:310px;background:#c4b5fd;left:-110px;top:-80px}.orb-b{width:230px;height:230px;background:#60a5fa;right:8%;bottom:-85px;animation-delay:-4s}.login-page-animated .floating-card{z-index:4;animation:cardFloat 5.4s ease-in-out infinite}.login-page-animated .fc-two{animation-delay:-2.7s}.install-success{animation:noticeDrop .45s ease both}.login-options{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 18px}.remember-option{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:400;margin:0;user-select:none}.remember-option input{position:absolute;opacity:0;pointer-events:none}.remember-box{width:22px;height:22px;border:1.5px solid #cbd5e1;border-radius:7px;display:grid;place-items:center;color:#fff;transition:.18s ease;flex:0 0 auto}.remember-box svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:.18s ease}.remember-option input:checked+.remember-box{background:#4f46e5;border-color:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.1)}.remember-option input:checked+.remember-box svg{opacity:1;transform:scale(1)}.remember-option input:focus-visible+.remember-box{box-shadow:0 0 0 4px rgba(79,70,229,.16)}.remember-option strong,.remember-option small{display:block}.remember-option strong{font-size:13px;color:#334155}.remember-option small{font-size:11px;color:#94a3b8;margin-top:1px}.btn-login{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.btn-login:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(79,70,229,.24)}.btn-login:active{transform:translateY(0)}.btn-login.is-loading:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 75%);animation:loginShimmer 1s linear infinite}.brand-login>span{animation:brandPulse 3.5s ease-in-out infinite}.password-wrap button{width:36px;height:36px;display:grid;place-items:center;top:10px;right:8px;border-radius:10px}.password-wrap button:hover{background:#f1f5f9}.password-wrap button svg{width:18px}.login-card-modern .form-control{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.login-card-modern .form-control:focus{transform:translateY(-1px)}
@keyframes loginReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes loginCardIn{from{opacity:0;transform:translateX(24px) scale(.98)}to{opacity:1;transform:none}}@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(24px,-18px,0) scale(1.08)}}@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.3deg)}}@keyframes noticeDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes loginShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes brandPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.18)}50%{box-shadow:0 0 0 8px rgba(99,102,241,0)}}
@media(max-width:991px){.login-form-area{min-height:100vh;padding:24px}.login-card-modern{padding:30px}.login-page-animated .login-visual{display:none}}@media(max-width:480px){.login-form-area{padding:14px}.login-card-modern{border-radius:22px;padding:24px 20px}.login-copy{margin:28px 0 20px}.login-copy h2{font-size:24px}.remember-option small{display:none}}
@media(prefers-reduced-motion:reduce){.login-page-animated *{animation:none!important;transition:none!important}}


/* Candy Absensi v6.9.13 - slider ringkasan siswa & bottom nav docked */
.attendance-summary-slider{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:7px;margin-bottom:2px}
.attendance-summary-slider .attendance-summary-scroll{margin:0;padding:2px 1px 10px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain}
.attendance-summary-slider .attendance-summary-scroll article{scroll-snap-align:start;flex:0 0 94px;min-width:94px}
.attendance-summary-nav{width:34px;height:34px;border:1px solid var(--border,#e7eaf1);border-radius:11px;background:var(--card-bg,#fff);color:#667085;display:grid;place-items:center;padding:0;box-shadow:0 5px 14px rgba(15,23,42,.06);transition:.18s ease}
.attendance-summary-nav:hover{color:#4f46e5;border-color:#c7d2fe;transform:translateY(-1px)}
.attendance-summary-nav svg{width:16px;height:16px}
@media(max-width:767.98px){
  .attendance-summary-slider{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}
  .attendance-summary-nav{width:30px;height:30px;border-radius:10px}
  .attendance-summary-slider .attendance-summary-scroll{gap:7px;overflow-x:auto;overflow-y:hidden;padding:0 0 7px}
  .attendance-summary-slider .attendance-summary-scroll article{flex-basis:76px;min-width:76px;padding:8px 9px}
  .attendance-summary-slider .attendance-summary-scroll .attendance-summary-primary{min-width:84px;flex-basis:84px}
  body.student-mobile-app{padding-bottom:68px}
  body.student-mobile-app .student-bottom-nav-docked{left:0;right:0;bottom:0;height:64px;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 -8px 28px rgba(15,23,42,.10);background:rgba(255,255,255,.98)}
  body.student-mobile-app .student-bottom-nav-docked .student-nav-main>span{width:34px;height:34px;border-radius:12px;margin-top:0;box-shadow:none}
  body.student-mobile-app .student-bottom-nav-docked .student-nav-main small{margin-top:1px}
  body.student-mobile-app .student-bottom-nav-docked a{min-width:0}
}
html[data-theme="dark"] .attendance-summary-nav{background:#111827;border-color:#263244;color:#cbd5e1}
html[data-theme="dark"] body.student-mobile-app .student-bottom-nav-docked{background:rgba(15,23,42,.98);border-color:#263244}

/* Candy Absensi v6.9.14 - student icon alignment, floating nav, desktop mode */
/* Normalize every framed icon used across student pages */
:is(
  .today-status-icon,
  .calendar-detail-icon,
  .student-class-icon,
  .student-quick-card>span,
  .student-history-icon,
  .student-scan-icon,
  .student-avatar-lg,
  .student-nav-main>span,
  .stat-icon,
  .status-icon,
  .nav-icon,
  .brand-mark,
  .btn-icon,
  .teacher-status-card .status-icon,
  .teacher-metric-grid article>span,
  .teacher-role-actions>a>span,
  .shortcut-icon,
  .punch-status-icon
){
  display:grid!important;
  place-items:center!important;
  line-height:0!important;
  flex:0 0 auto;
}
:is(
  .today-status-icon,
  .calendar-detail-icon,
  .student-class-icon,
  .student-quick-card>span,
  .student-history-icon,
  .student-scan-icon,
  .student-nav-main>span,
  .stat-icon,
  .status-icon,
  .nav-icon,
  .brand-mark,
  .btn-icon,
  .teacher-status-card .status-icon,
  .teacher-metric-grid article>span,
  .teacher-role-actions>a>span,
  .shortcut-icon,
  .punch-status-icon
) svg{
  display:block!important;
  margin:0!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  vertical-align:middle!important;
}

/* Restore the floating mobile navigation style */
@media(max-width:991.98px){
  body.student-mobile-app{padding-bottom:86px}
  body.student-mobile-app .student-bottom-nav-docked{
    left:10px;
    right:10px;
    bottom:10px;
    height:66px;
    border:1px solid rgba(226,229,238,.9);
    border-radius:20px;
    padding:7px 8px max(7px,env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 14px 40px rgba(31,41,55,.18);
  }
  body.student-mobile-app .student-bottom-nav-docked .student-nav-main>span{
    width:44px;
    height:44px;
    border-radius:15px;
    margin-top:-24px;
    box-shadow:0 10px 20px rgba(79,70,229,.30);
  }
  body.student-mobile-app .student-bottom-nav-docked .student-nav-main small{margin-top:-1px}
}
html[data-theme="dark"] body.student-mobile-app .student-bottom-nav-docked{
  background:rgba(15,23,42,.96);
  border-color:#263244;
}

/* Desktop experience for student accounts */
@media(min-width:992px){
  body.student-mobile-app{padding-bottom:0;background:var(--bg)}
  body.student-mobile-app .sidebar{display:block!important;transform:none!important}
  body.student-mobile-app .main{margin-left:255px;width:calc(100% - 255px)}
  body.student-mobile-app .topbar{
    height:84px;
    padding:0 30px;
    border-bottom:1px solid var(--border);
    background:#fff;
  }
  body.student-mobile-app #sidebarToggle{display:none!important}
  body.student-mobile-app .user-menu div{display:block}
  body.student-mobile-app .user-menu:after{display:inline-block}
  body.student-mobile-app .content{padding:28px}
  body.student-mobile-app .student-bottom-nav{display:none!important}
  body.student-mobile-app .student-dashboard{max-width:1280px;margin:0 auto}
  body.student-mobile-app .student-hero-card{padding:26px 28px;border-radius:26px}
  body.student-mobile-app .student-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  body.student-mobile-app .student-calendar-card{padding:24px;border-radius:24px}
  body.student-mobile-app .student-today-banner{grid-template-columns:52px minmax(0,1fr) auto;padding:16px 18px;border-radius:18px}
  body.student-mobile-app .today-status-icon{width:52px;height:52px;border-radius:16px}
  body.student-mobile-app .today-status-icon svg{width:22px;height:22px}
  body.student-mobile-app .mini-calendar-grid,
  body.student-mobile-app .mini-calendar-weekdays{gap:8px}
  body.student-mobile-app .calendar-day{min-height:48px;border-radius:12px}
  body.student-mobile-app .student-class-card{padding:20px 22px;border-radius:22px}
  body.student-mobile-app .attendance-summary-slider{grid-template-columns:38px minmax(0,1fr) 38px;gap:10px}
  body.student-mobile-app .attendance-summary-slider .attendance-summary-scroll article{flex:1 0 112px;min-width:112px}
}
html[data-theme="dark"] body.student-mobile-app .topbar{background:#0f172a;border-color:#263244}


/* Candy Absensi v6.9.15 - student layout alignment, centered icons, offline QR */
.student-dashboard,
.student-dashboard>section,
.student-attendance-app,
.student-attendance-app>section{width:100%;min-width:0;box-sizing:border-box}
.student-dashboard .student-calendar-card{width:100%;max-width:none!important}
.student-dashboard .student-quick-grid{align-items:stretch}
.student-dashboard .student-quick-card{height:100%;min-width:0}
.student-dashboard .student-class-card{width:100%}

:is(.today-status-icon,.calendar-detail-icon,.attendance-today-icon,.attendance-detail-icon,.student-class-icon,.student-quick-card>span){
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:0!important;
  overflow:hidden;
}
:is(.today-status-icon,.calendar-detail-icon,.attendance-today-icon,.attendance-detail-icon,.student-class-icon,.student-quick-card>span)>svg{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  display:block!important;
}
.student-quick-card>span>svg{width:18px!important;height:18px!important}
.attendance-summary-scroll article{align-content:center;justify-items:center!important;text-align:center}
.attendance-summary-scroll article>svg{display:block;margin:0 auto 2px!important}

.student-qrcode{min-height:244px;display:flex!important;align-items:center!important;justify-content:center!important;padding:12px;border-radius:20px;background:#fff;border:1px solid #edf0f5}
.student-qrcode canvas,.student-qrcode img{display:block!important;max-width:220px;width:100%!important;height:auto!important;padding:0!important;border:0!important;border-radius:10px}
.qr-loading-state{display:flex;align-items:center;justify-content:center;gap:8px;color:#7c879d;font-size:13px}
.qr-error-state{display:grid;place-items:center;gap:7px;padding:22px;text-align:center;color:#64748b}
.qr-error-state svg{width:28px;height:28px;color:#ef4444}
.qr-error-state strong,.qr-error-state small{display:block}
.student-code:empty::before{content:'Kode absensi belum tersedia';color:#94a3b8;font-family:inherit;font-weight:600;letter-spacing:0}

@media(min-width:768px){
  .student-dashboard{max-width:1280px}
  .student-dashboard .student-calendar-card{max-width:none!important}
}
@media(max-width:767.98px){
  .student-dashboard{gap:14px}
  .student-dashboard .student-hero-card,
  .student-dashboard .student-quick-grid,
  .student-dashboard .student-calendar-card,
  .student-dashboard .student-class-card{width:100%;margin-inline:0}
  .student-dashboard .student-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .student-dashboard .student-quick-card{padding:14px 12px;text-align:left;place-items:start}
  .student-dashboard .student-quick-card>span{width:38px;height:38px}
  .student-dashboard .student-quick-card strong{font-size:13px}
  .student-dashboard .student-quick-card small{display:block;font-size:10px;line-height:1.35}
}
html[data-theme="dark"] .student-qrcode{background:#fff;border-color:#334155}

/* v6.9.16 - student attendance header alignment */
.student-attendance-header>div{min-width:0;display:flex;flex-direction:column;justify-content:center}.student-attendance-header .student-page-eyebrow,.student-attendance-header h2,.student-attendance-header p{line-height:1.25}.student-attendance-avatar{flex:0 0 auto;align-self:center}.student-attendance-header{min-height:104px}.attendance-today-card{align-items:center}.attendance-today-card>div{min-width:0}.attendance-today-icon,.attendance-detail-icon{flex:0 0 auto;align-self:center}.attendance-today-date{flex:0 0 auto;align-self:center}
@media(max-width:767.98px){.student-attendance-header{margin:0;border-radius:24px;padding:16px 18px;min-height:94px}.student-attendance-header h2{font-size:20px}.student-attendance-header p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 120px)}}

/* v6.9.17: mobile topbar academic year alignment */
@media(max-width:575.98px){
  .topbar{gap:8px!important;padding-left:10px!important;padding-right:10px!important}
  .topbar>.academic-year-context{order:-1;margin-left:0!important;margin-right:auto!important;max-width:154px!important;min-width:0!important;padding:.3rem .45rem!important}
  .topbar>.academic-year-context .form-select{font-size:.78rem!important;padding-left:.35rem!important;padding-right:1.8rem!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
  .topbar>.theme-toggle{margin-left:0!important;flex:0 0 auto}
  .topbar>.dropdown{flex:0 0 auto}
  body.teacher-adaptive-app .topbar>.academic-year-context{margin-right:auto!important}
}

/* v6.10.8 - Global scrollable modal system */
.modal{
  --candy-modal-viewport-gap: 1.5rem;
}
.modal .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down):not(.modal-fullscreen-md-down):not(.modal-fullscreen-lg-down):not(.modal-fullscreen-xl-down):not(.modal-fullscreen-xxl-down){
  max-height:calc(100dvh - var(--candy-modal-viewport-gap));
  margin-top:calc(var(--candy-modal-viewport-gap) / 2);
  margin-bottom:calc(var(--candy-modal-viewport-gap) / 2);
}
.modal .modal-content{
  max-height:calc(100dvh - var(--candy-modal-viewport-gap));
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal .modal-content>form,
.modal .modal-content>.modal-form{
  min-height:0;
  max-height:inherit;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  overflow:hidden;
}
.modal .modal-header,
.modal .modal-footer{
  flex:0 0 auto;
  position:relative;
  z-index:2;
  background:var(--card-bg,#fff);
}
.modal .modal-header{
  border-bottom:1px solid var(--border-color,var(--border,#e5e7eb));
}
.modal .modal-footer{
  border-top:1px solid var(--border-color,var(--border,#e5e7eb));
  box-shadow:0 -8px 22px rgba(15,23,42,.035);
}
.modal .modal-body{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
.modal .modal-body::-webkit-scrollbar{width:7px}
.modal .modal-body::-webkit-scrollbar-track{background:transparent}
.modal .modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.modal .modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.modal .modal-dialog-scrollable .modal-content{max-height:calc(100dvh - var(--candy-modal-viewport-gap))}
.modal .modal-dialog-scrollable .modal-body{overflow-y:auto}

@media(max-width:575.98px){
  .modal{--candy-modal-viewport-gap:.75rem}
  .modal .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down){
    margin-left:.5rem;
    margin-right:.5rem;
    width:auto;
  }
  .modal .modal-header{padding:1rem}
  .modal .modal-body{padding:1rem}
  .modal .modal-footer{
    padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
    gap:.65rem;
  }
  .modal .modal-footer>.btn{
    margin:0;
  }
}

html[data-theme="dark"] .modal .modal-header,
html[data-theme="dark"] .modal .modal-footer{
  background:#111827;
  border-color:#263244;
}
html[data-theme="dark"] .modal .modal-footer{box-shadow:0 -8px 22px rgba(0,0,0,.18)}
html[data-theme="dark"] .modal .modal-body{scrollbar-color:#475569 transparent}
html[data-theme="dark"] .modal .modal-body::-webkit-scrollbar-thumb{background:#475569}