@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap";
:root{--theme-sidebar:#5b7b8c;--theme-sidebar-hover:#4e6b7a;--theme-sidebar-active:#fff3;--theme-sidebar-divider:#ffffff2e;--theme-content-bg:#f0f5f8;--theme-card-bg:#f9fbfc;--theme-border:#cde0ea;--theme-table-header:#e8f0f5;--theme-accent:#5b7b8c;--theme-accent-hover:#4e6b7a;--theme-accent-light:#cde0ea;--success-mint:#a8d5ba;--success-mint-dark:#2d7a4f;--warning-peach:#f5c7a9;--warning-peach-dark:#856404;--danger-salmon:#e8a0a0;--danger-salmon-dark:#a94442;--accent-lavender:#b8b5d6;--accent-lavender-dark:#5a3d8a;--text-charcoal:#2d3748;--text-secondary:#4a5568;--text-muted:#718096;--shadow-sm:0 2px 6px #0000000a;--shadow-md:0 6px 16px #00000012;--shadow-lg:0 12px 28px #0000001a;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--transition:all .22s cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--theme-content-bg);color:var(--text-charcoal);-webkit-font-smoothing:antialiased;font-family:Nunito,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;transition:background-color .3s}.app-layout{min-height:100vh;display:flex;position:relative}.main-content{background-color:var(--theme-content-bg);flex:1;min-height:100vh;margin-left:260px;padding:32px 40px;transition:background-color .3s}.sidebar{background:var(--theme-sidebar);z-index:100;color:#fff;border-right:1px solid #0000000d;flex-direction:column;width:260px;height:100vh;transition:background-color .3s;display:flex;position:fixed;top:0;left:0;overflow-y:auto;box-shadow:2px 0 10px #0000000d}.sidebar-brand{border-bottom:1px solid var(--theme-sidebar-divider);align-items:center;gap:12px;padding:24px 20px 20px;display:flex}.sidebar-brand-icon{border-radius:var(--radius-sm);color:#fff;width:38px;height:38px;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff40;flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-brand h1{color:#fff;letter-spacing:-.3px;font-size:17px;font-weight:800;line-height:1.2}.sidebar-brand p{color:#ffffffe6;margin-top:2px;font-size:11px;font-weight:600}.sidebar-section{padding:16px 12px 4px}.sidebar-section-title{text-transform:uppercase;letter-spacing:1.2px;color:#ffffffd9;margin-bottom:8px;padding:0 8px;font-size:11px;font-weight:800}.sidebar-nav{flex-direction:column;gap:6px;list-style:none;display:flex}.sidebar-nav li a,.sidebar-nav li button{border-radius:var(--radius-sm);color:#fff;transition:var(--transition);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:10px 14px;font-family:inherit;font-size:14px;font-weight:700;text-decoration:none;display:flex}.sidebar-nav li a:hover,.sidebar-nav li button:hover{background:var(--theme-sidebar-hover);color:#fff}.sidebar-nav li a.active{background:var(--theme-sidebar-active);color:#fff;font-weight:800;box-shadow:inset 0 0 0 1px #ffffff4d}.sidebar-nav li a .nav-icon,.sidebar-nav li button .nav-icon{color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.sidebar-nav li a.active .nav-icon{color:#fff}.sidebar-divider{background:var(--theme-sidebar-divider);height:1px;margin:12px 16px}.sidebar-kelas-list{flex-direction:column;gap:6px;padding:0 12px 16px;list-style:none;display:flex}.sidebar-kelas-item{border-radius:var(--radius-sm);transition:var(--transition);cursor:default;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:700;display:flex;color:#fff!important}.sidebar-kelas-item:hover{background:var(--theme-sidebar-hover)}.sidebar-kelas-dot,.kelas-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block;box-shadow:none!important;border:none!important}.sidebar-kelas-item:hover .sidebar-kelas-dot,.sidebar-kelas-item:hover .kelas-dot{transform:scale(1.25)}.sidebar-kelas-item .kelas-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.sidebar-kelas-item .kelas-count{color:#fff;background:#fff3;border-radius:10px;flex-shrink:0;align-items:center;gap:4px;margin-left:auto;padding:2px 8px;font-size:11px;font-weight:800;display:flex}.sidebar-footer{border-top:1px solid var(--theme-sidebar-divider);color:#ffffffe6;letter-spacing:.3px;justify-content:flex-start;align-items:center;gap:3px;margin-top:auto;padding:14px 16px;font-size:11.5px;font-weight:700;display:flex}@keyframes heartPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}.heart-pulse-icon{transform-origin:50%;animation:2.6s ease-in-out infinite heartPulse;display:inline-block}.color-dot-option{cursor:pointer;width:30px;height:30px;transition:var(--transition);box-shadow:var(--shadow-sm);border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;display:flex}.color-dot-option:hover{transform:scale(1.15)}.color-dot-option.active{border-color:var(--text-charcoal)}.sidebar-empty{color:#ffffffb3;padding:8px 20px;font-size:12px;font-style:italic}.kelas-selector-wrapper{width:100%;margin-bottom:24px}.kelas-selector-label{color:var(--text-charcoal);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-size:13px;font-weight:800;display:block}.kelas-select-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.kelas-select-card{background:var(--theme-card-bg);border:1.5px solid var(--theme-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);flex-direction:column;gap:8px;padding:14px 16px;display:flex;position:relative}.kelas-select-card:hover{border-color:var(--theme-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}.kelas-select-card.active{border-color:var(--theme-accent);background:var(--theme-table-header);box-shadow:var(--shadow-md)}.kelas-select-card-top{align-items:center;gap:8px;display:flex}.kelas-select-title{color:var(--text-charcoal);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:15px;font-weight:800;overflow:hidden}.kelas-select-check{background:var(--theme-accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.kelas-select-card-bottom{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:12px;display:flex}.kelas-select-meta{color:var(--text-muted);font-weight:600}.kelas-select-count{background:#0000000a;border-radius:6px;align-items:center;gap:3px;padding:2px 7px;font-weight:700;display:flex}.theme-picker{z-index:1000;position:fixed;bottom:28px;right:28px}.theme-picker-toggle{background:var(--theme-card-bg);border:1.5px solid var(--theme-border);width:42px;height:42px;color:var(--text-charcoal);cursor:pointer;box-shadow:var(--shadow-md);transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;display:flex}.theme-picker-toggle:hover{box-shadow:var(--shadow-lg);border-color:var(--theme-accent);color:var(--theme-accent);transform:scale(1.08)}.theme-picker-dropdown{background:var(--theme-card-bg);border:1px solid var(--theme-border);border-radius:var(--radius-lg);width:200px;box-shadow:var(--shadow-lg);padding:16px;animation:.2s slideUp;position:absolute;bottom:54px;right:0}.theme-picker-title{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:12px;font-size:12px;font-weight:800}.theme-picker-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.theme-picker-swatch{cursor:pointer;color:#fff;width:34px;height:34px;transition:var(--transition);box-shadow:var(--shadow-sm);border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;display:flex}.theme-picker-swatch:hover{transform:scale(1.15)}.theme-picker-swatch.active{border-color:var(--text-charcoal)}.page-header{margin-bottom:20px}.page-header h2{color:var(--text-charcoal);letter-spacing:-.5px;font-size:24px;font-weight:800;line-height:1.2}.page-header p{color:var(--text-secondary);margin-top:2px;font-size:13px}.page-header-flex{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.page-header-flex h2{color:var(--text-charcoal);letter-spacing:-.5px;font-size:24px;font-weight:800;line-height:1.2}.page-header-flex p{color:var(--text-secondary);margin-top:2px;font-size:13px}.card{background:var(--theme-card-bg);border:1px solid var(--theme-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition);padding:24px}.card:hover{box-shadow:var(--shadow-md)}.card-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.card-header h3{color:var(--text-charcoal);font-size:16px;font-weight:800}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);white-space:nowrap;border:none;align-items:center;gap:6px;padding:9px 18px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.btn-primary{background:var(--theme-accent);color:#fff}.btn-primary:hover{background:var(--theme-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-success{color:#fff;background:#2a9d8f;font-weight:800}.btn-success:hover{box-shadow:var(--shadow-md);background:#238579;transform:translateY(-1px)}.btn-warning{color:#fff;background:#d97706;font-weight:800}.btn-warning:hover{box-shadow:var(--shadow-md);background:#b45309;transform:translateY(-1px)}.btn-danger{background:var(--danger-salmon);color:#fff}.btn-danger:hover{background:var(--danger-salmon-dark);transform:translateY(-1px)}.btn-outline{border:1.5px solid var(--theme-border);color:var(--text-charcoal);background:0 0}.btn-outline:hover{background:var(--theme-content-bg);border-color:var(--theme-accent)}.btn-sm{padding:6px 12px;font-size:12px}.btn-lg{padding:12px 24px;font-size:15px}.btn-icon{border-radius:var(--radius-sm);border:1px solid var(--theme-border);cursor:pointer;transition:var(--transition);color:var(--text-secondary);background:0 0;justify-content:center;align-items:center;padding:7px;line-height:1;display:inline-flex}.btn-icon:hover{background:var(--theme-content-bg);border-color:var(--theme-accent);color:var(--theme-accent)}.btn-icon svg{display:block}.form-group{margin-bottom:16px}.form-group label{color:var(--text-charcoal);margin-bottom:6px;font-size:13px;font-weight:700;display:block}.form-control{border:1.5px solid var(--theme-border);border-radius:var(--radius-sm);width:100%;color:var(--text-charcoal);transition:var(--transition);outline:none;padding:10px 14px;font-family:Nunito,sans-serif;font-size:14px;background:#fff!important}.modal-content .form-control,.modal-body .form-control{background:#fff!important}.form-control:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px #c2728026}.form-control::placeholder{color:var(--text-muted)}select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}input[type=date].form-control,input[type=date]{appearance:none;background-color:var(--theme-card-bg);border:1.5px solid var(--theme-border);border-radius:var(--radius-md);color:var(--text-charcoal);transition:var(--transition);cursor:pointer;box-shadow:var(--shadow-sm);outline:none;padding:9px 14px;font-family:Nunito,sans-serif;font-size:13.5px;font-weight:700}input[type=date].form-control:hover,input[type=date]:hover{border-color:var(--theme-accent);box-shadow:0 2px 8px #c2728026}input[type=date].form-control:focus,input[type=date]:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px #c2728033}input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;border-radius:var(--radius-sm);opacity:.9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C27280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;padding:4px;transition:transform .15s,opacity .15s}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;transform:scale(1.15)}.custom-datepicker-container{width:100%;position:relative}.datepicker-label{color:var(--text-charcoal);margin-bottom:6px;font-size:13px;font-weight:800;display:block}.datepicker-input-box{border:1.5px solid var(--theme-border);border-radius:var(--radius-md);color:var(--text-charcoal);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;height:42px;padding:9px 14px;font-family:Nunito,sans-serif;font-size:13.5px;font-weight:700;display:flex;background:#fff!important}.datepicker-input-box:hover{border-color:var(--theme-accent);box-shadow:0 2px 8px #c2728026}.datepicker-input-box.active{border-color:var(--theme-accent);box-shadow:0 0 0 3px #c2728033}.datepicker-icon{color:var(--theme-accent);flex-shrink:0;transition:transform .15s}.datepicker-input-box:hover .datepicker-icon{transform:scale(1.15)}.datepicker-popover{z-index:999;background:var(--theme-card-bg);border:1.5px solid var(--theme-border);border-radius:var(--radius-lg);width:280px;padding:16px;animation:.15s ease-out fadeIn;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 10px 25px #0000001f}.datepicker-popover-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.datepicker-title{color:var(--text-charcoal);font-size:14px;font-weight:800}.datepicker-nav-btn{background:var(--bg-light);border:1px solid var(--theme-border);border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;display:flex}.datepicker-nav-btn:hover{background:var(--theme-accent);color:#fff;border-color:var(--theme-accent)}.datepicker-weekdays{text-align:center;grid-template-columns:repeat(7,1fr);margin-bottom:8px;display:grid}.datepicker-weekday{color:var(--text-muted);text-transform:uppercase;font-size:11px;font-weight:800}.datepicker-days-grid{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.datepicker-day{aspect-ratio:1;border-radius:var(--radius-sm);color:var(--text-charcoal);cursor:pointer;transition:var(--transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;font-family:Nunito,sans-serif;font-size:12.5px;font-weight:700;display:flex}.datepicker-day:hover:not(.selected):not(.other-month){background:var(--theme-sidebar-hover);color:var(--theme-accent)}.datepicker-day.other-month{color:var(--text-muted);opacity:.35;cursor:default}.datepicker-day.today{border-color:var(--theme-accent);font-weight:800}.datepicker-day.selected{background:var(--theme-accent);color:#fff;font-weight:800;box-shadow:0 2px 6px #c2728059}.datepicker-popover-footer{border-top:1px solid var(--theme-border);justify-content:flex-end;margin-top:12px;padding-top:10px;display:flex}.datepicker-today-btn{color:var(--theme-accent);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);background:0 0;border:none;padding:4px 8px;font-family:Nunito,sans-serif;font-size:12px;font-weight:800}.datepicker-today-btn:hover{background:var(--theme-accent);color:#fff}.form-row{gap:16px;display:flex}.form-row .form-group{flex:1}.table-wrapper{border-radius:var(--radius-md);border:1px solid var(--theme-border);overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}thead{background:var(--theme-table-header)}thead th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);border-bottom:2px solid var(--theme-border);white-space:nowrap;padding:12px 14px;font-size:12px;font-weight:800}tbody tr{transition:var(--transition)}tbody tr:hover{background:#00000004}tbody td{border-bottom:1px solid var(--theme-border);color:var(--text-charcoal);padding:11px 14px}tbody tr:last-child td{border-bottom:none}.table-no-data{text-align:center;color:var(--text-muted);padding:40px 20px;font-style:italic}.sticky-col-right{z-index:5;position:sticky;right:0;box-shadow:-4px 0 8px #0000000f}th.sticky-col-right{border-left:1px solid #00000014;color:var(--text-charcoal)!important;background:#fff3cd!important}td.sticky-col-right{border-left:1px solid #0000000f;background:#fef9ed!important;font-weight:800!important}.badge{border-radius:20px;justify-content:center;align-items:center;gap:4px;padding:4px 11px;font-size:12.5px;font-weight:800;display:inline-flex}.badge-hadir{color:#238579;background:#2a9d8f1f;border:1px solid #2a9d8f40}.badge-sakit{color:#b45309;background:#d977061f;border:1px solid #d9770640}.badge-izin{color:#2c5282;background:#2b6cb01f;border:1px solid #2b6cb040}.badge-alpa{color:#c53030;background:#e53e3e1f;border:1px solid #e53e3e40}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#2d374866;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--theme-card-bg);border-radius:var(--radius-xl);width:90%;max-width:520px;max-height:85vh;box-shadow:var(--shadow-lg);border:1px solid var(--theme-border);padding:28px;animation:.2s slideUp;overflow-y:auto}.modal-content h3{color:var(--text-charcoal);margin-bottom:20px;font-size:18px;font-weight:800}.modal-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.tabs{background:var(--theme-border);border-radius:var(--radius-md);gap:4px;margin-bottom:24px;padding:4px;display:flex}.tab{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);text-align:center;background:0 0;border:none;flex:1;padding:10px 16px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700}.tab:hover{color:var(--text-charcoal)}.tab.active{background:var(--theme-card-bg);color:var(--text-charcoal);box-shadow:var(--shadow-sm);font-weight:800}.filter-bar{background:var(--theme-card-bg);border:1px solid var(--theme-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:24px;padding:20px;display:flex}.filter-bar .form-group{margin-bottom:0}.filter-row-30-70{align-items:flex-end;gap:16px;width:100%;display:flex}.filter-col-30{flex:0 0 28%;max-width:28%}.filter-col-70{flex:7;min-width:0}.rekap-filter-row{flex-wrap:wrap;align-items:flex-end;gap:16px;width:100%;display:flex}.rekap-filter-kelas{flex:2;min-width:240px}.rekap-filter-bulan{flex:1;min-width:170px}.rekap-filter-tahun{flex-shrink:0;width:120px}.stats-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{border-radius:var(--radius-lg);transition:var(--transition);box-shadow:var(--shadow-sm);color:#fff;border:none;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.stat-card-info{text-align:left;flex-direction:column;gap:2px;display:flex}.stat-card .stat-label{text-transform:uppercase;letter-spacing:.8px;color:#ffffffe6;font-size:12px;font-weight:800}.stat-card .stat-value{color:#fff;font-size:28px;font-weight:800;line-height:1.1}.stat-card-icon{border-radius:var(--radius-md);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff38;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.stat-card.stat-hadir{background:linear-gradient(135deg,#42b883 0%,#2a9d8f 100%)}.stat-card.stat-sakit{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.stat-card.stat-izin{background:linear-gradient(135deg,#4299e1 0%,#2b6cb0 100%)}.stat-card.stat-alpa{background:linear-gradient(135deg,#f56565 0%,#e53e3e 100%)}.status-btn-group{align-items:center;gap:8px;display:flex}.status-btn{width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:#0000000d;border:1.5px solid #0000;border-radius:50%;outline:none;justify-content:center;align-items:center;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;display:flex}.status-btn:hover{transform:scale(1.12)}.status-btn-hadir.active{color:#fff;background:#2a9d8f;border-color:#238579;box-shadow:0 2px 6px #2a9d8f59}.status-btn-sakit.active{color:#fff;background:#d97706;border-color:#b45309;box-shadow:0 2px 6px #d9770659}.status-btn-izin.active{color:#fff;background:#2b6cb0;border-color:#2c5282;box-shadow:0 2px 6px #2b6cb059}.status-btn-alpa.active{color:#fff;background:#e53e3e;border-color:#c53030;box-shadow:0 2px 6px #e53e3e59}.kelas-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}@media (max-width:1300px){.kelas-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:950px){.kelas-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.kelas-grid{grid-template-columns:1fr}}.kelas-card{background:var(--theme-card-bg);border:1.5px solid var(--theme-border);border-radius:var(--radius-lg);transition:var(--transition);cursor:pointer;box-shadow:var(--shadow-sm);flex-direction:column;gap:14px;padding:22px;display:flex}.kelas-card:hover{box-shadow:var(--shadow-md);border-color:var(--theme-accent);transform:translateY(-3px)}.kelas-card.expanded{border-color:var(--theme-accent);box-shadow:var(--shadow-md);grid-column:1/-1}.kelas-card-top{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.kelas-card-title-group{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.kelas-card-title-group h3{color:var(--text-charcoal);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:16px;font-weight:800;overflow:hidden}.kelas-card-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.kelas-card-meta{flex-wrap:wrap;align-items:center;gap:6px;width:100%;display:flex}.kelas-card-badge{border-radius:var(--radius-sm);color:var(--text-secondary);white-space:nowrap;background:#0000000a;align-items:center;gap:5px;padding:4px 9px;font-size:11.5px;font-weight:700;display:inline-flex}.kelas-card-badge.badge-siswa{margin-left:auto;box-shadow:0 2px 6px #2563eb47;color:#fff!important;background:#2563eb!important;border-radius:20px!important;padding:4px 12px!important;font-weight:800!important}.siswa-accordion{border-top:1px dashed var(--theme-border);margin-top:16px;padding-top:16px}.siswa-accordion-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.siswa-accordion-header h4{color:var(--text-charcoal);margin:0;font-size:15px;font-weight:800}.status-select{border:1.5px solid var(--theme-border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:#fff;outline:none;padding:6px 10px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700}.status-select:focus{border-color:var(--theme-accent)}.status-select.status-Hadir{color:#2d7a4f;background:#dff5e6;border-color:#a8d5ba}.status-select.status-Sakit{color:#856404;background:#fff3cd;border-color:#f5c7a9}.status-select.status-Izin{color:#5a3d8a;background:#e0d6f0;border-color:#b8b5d6}.status-select.status-Alpa{color:#a94442;background:#fde2e2;border-color:#e8a0a0}.nilai-input{border:1.5px solid var(--theme-border);border-radius:var(--radius-sm);text-align:center;width:80px;transition:var(--transition);outline:none;padding:6px 10px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700}.nilai-input:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px #c2728026}.empty-state,.lottie-empty-state{text-align:center;background:var(--theme-card-bg);border:1.5px dashed var(--theme-border);border-radius:var(--radius-xl);flex-direction:column;justify-content:center;align-items:center;margin-top:12px;padding:24px 20px 48px;display:flex;overflow:hidden}.lottie-wrapper{justify-content:center;align-items:center;width:100%;margin-bottom:-45px;display:flex}.empty-state h3,.lottie-empty-state h3{color:var(--text-charcoal);margin-bottom:6px;font-size:18px;font-weight:800}.empty-state p,.lottie-empty-state p{color:var(--text-secondary);max-width:420px;font-size:13.5px}.toast{border-radius:var(--radius-md);color:#fff;box-shadow:var(--shadow-lg);z-index:2000;align-items:center;gap:8px;padding:14px 22px;font-size:14px;font-weight:700;animation:.3s slideUp;display:flex;position:fixed;bottom:24px;right:24px}.toast-success{background:#2d7a4f}.toast-error{background:#a94442}.loading{color:var(--text-muted);justify-content:center;align-items:center;gap:10px;padding:40px;display:flex}.spinner{border:3px solid var(--theme-border);border-top-color:var(--theme-accent);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.task-list{flex-direction:column;gap:10px;display:flex}.task-item{background:var(--theme-card-bg);border:1px solid var(--theme-border);border-radius:var(--radius-md);transition:var(--transition);cursor:pointer;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.task-item:hover{border-color:var(--theme-accent-light);box-shadow:var(--shadow-sm)}.task-item.active{border-color:var(--theme-accent);background:var(--theme-table-header)}.task-item-info h4{font-size:14px;font-weight:800}.task-item-info p{color:var(--text-muted);margin-top:2px;font-size:12px}.task-item-actions{gap:6px;display:flex}@media (max-width:768px){.sidebar{width:220px}.main-content{margin-left:220px;padding:20px}.filter-bar{flex-direction:column}.filter-bar .form-group{min-width:100%}.kelas-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(2,1fr)}}.custom-select-group{width:100%;position:relative}.custom-select-label{color:var(--text-charcoal);margin-bottom:6px;font-size:13px;font-weight:700;display:block}.custom-select-trigger{border:1.5px solid var(--theme-border);border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:var(--transition);box-sizing:border-box;background:#fff;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding:10px 14px;display:flex}.custom-select-trigger:hover{border-color:var(--theme-accent)}.custom-select-trigger.open{border-color:var(--theme-accent);box-shadow:0 0 0 3px #c2728026}.custom-select-trigger.disabled{opacity:.6;cursor:not-allowed}.custom-select-value{color:var(--text-charcoal);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.custom-select-value.placeholder{color:var(--text-muted);font-weight:500}.custom-select-main-label{color:var(--text-charcoal);font-weight:700}.custom-select-sub-label{color:var(--text-muted);font-size:12px;font-weight:600}.custom-select-chevron{color:var(--text-muted);flex-shrink:0;transition:transform .2s}.custom-select-trigger.open .custom-select-chevron{transform:rotate(180deg)}.custom-select-dropdown{background:var(--theme-card-bg);border:1.5px solid var(--theme-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1050;animation:.18s slideUp;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden}.custom-select-search-box{border-bottom:1px solid var(--theme-border);background:var(--theme-content-bg);align-items:center;gap:8px;padding:8px 12px;display:flex}.custom-select-search-icon{color:var(--text-muted);flex-shrink:0}.custom-select-search-input{width:100%;color:var(--text-charcoal);background:0 0;border:none;outline:none;font-family:Nunito,sans-serif;font-size:13px;font-weight:600}.custom-select-options-list{max-height:220px;padding:4px;overflow-y:auto}.custom-select-option{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);justify-content:space-between;align-items:center;padding:9px 12px;display:flex}.custom-select-option:hover{background:var(--theme-table-header)}.custom-select-option.selected{background:var(--theme-table-header);font-weight:800}.custom-select-option-text{flex-direction:column;gap:1px;display:flex}.custom-select-option-label{color:var(--text-charcoal);font-size:13.5px;font-weight:700}.custom-select-option-sublabel{color:var(--text-muted);font-size:11.5px;font-weight:600}.custom-select-option-check{color:var(--theme-accent);flex-shrink:0}.status-circle-group{align-items:center;gap:8px;display:flex}.status-circle{color:#64748b;cursor:pointer;box-sizing:border-box;background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-family:Nunito,sans-serif;font-size:13.5px;font-weight:800;line-height:1;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.status-circle:hover:not(.active){border-color:var(--theme-accent);color:var(--text-charcoal);transform:translateY(-1px)}.status-circle.active{transform:scale(1.1);color:#fff!important;border:none!important}.status-circle.circle-hadir.active{box-shadow:0 3px 8px #2a9d8f59;background:#2a9d8f!important}.status-circle.circle-sakit.active{box-shadow:0 3px 8px #d9770659;background:#d97706!important}.status-circle.circle-izin.active{box-shadow:0 3px 8px #2563eb59;background:#2563eb!important}.status-circle.circle-alpa.active{box-shadow:0 3px 8px #e53e3e59;background:#e53e3e!important}.two-col-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}@media (max-width:900px){.two-col-layout{grid-template-columns:1fr}}.task-sidebar-card{padding:20px}.task-detail-card{padding:24px}.task-list{flex-direction:column;gap:10px;max-height:520px;display:flex;overflow-y:auto}.task-item{border:1.5px solid var(--theme-border);border-radius:var(--radius-md);cursor:pointer;background:#fff;justify-content:space-between;align-items:center;padding:12px 14px;transition:all .2s;display:flex}.task-item:hover{border-color:var(--theme-accent);background:var(--theme-content-bg)}.task-item.active{border-color:var(--theme-accent);background:var(--theme-table-header);box-shadow:var(--shadow-sm)}.task-item-info{flex:1;min-width:0}.task-item-title{color:var(--text-charcoal);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.task-item-date{color:var(--text-muted);margin-top:2px;font-size:12px}.task-item-delete{color:#e53e3e;opacity:.6;transition:opacity .2s}.task-item:hover .task-item-delete{opacity:1}.print-only-container{display:none}@page{size:A4 portrait;margin:0}@media print{@page{size:A4 portrait;margin:0}body{color:#000!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;background:#fff!important;margin:0!important;padding:0!important;font-family:Times New Roman,Times,serif!important}.sidebar,.top-navbar,.no-print,.modal-overlay,.toast,.theme-picker,.theme-picker-toggle,.theme-picker-dropdown{display:none!important}.main-wrapper,.main-content{width:100%!important;box-shadow:none!important;background:0 0!important;margin:0!important;padding:0!important}.print-only-container{color:#000;box-sizing:border-box;background:#fff;padding:15mm 18mm!important;display:block!important}.agenda-print-title{text-align:center;text-transform:uppercase;margin-top:5px;margin-bottom:20px;font-family:Times New Roman,serif;font-size:14pt;font-weight:700}.agenda-print-table{border-collapse:collapse;page-break-inside:auto;width:100%;margin-bottom:24px}.agenda-print-table tr{page-break-inside:avoid;break-inside:avoid}.agenda-print-table th,.agenda-print-table td{vertical-align:middle;color:#000!important;border:1px solid #000!important;padding:6px 8px!important;font-family:Times New Roman,serif!important;font-size:11pt!important}.agenda-print-table th{text-align:center;text-transform:none;font-weight:700;background:#fff!important}.agenda-signature-section{page-break-before:auto;justify-content:space-between;align-items:flex-start;margin-top:24px;padding:0 10px;font-family:Times New Roman,serif;font-size:11pt;display:flex;page-break-inside:avoid!important;break-inside:avoid!important}.agenda-signature-col{flex-direction:column;width:42%;display:flex;page-break-inside:avoid!important;break-inside:avoid!important}.agenda-signature-col.left,.agenda-signature-col.right{text-align:center}.signature-space{height:55px}.signature-name{font-weight:700}}.login-full-container{background:var(--theme-content-bg);width:100vw;min-height:100vh}.login-wrapper{background:linear-gradient(135deg, var(--theme-content-bg) 0%, #fff 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{border:1.5px solid var(--theme-border);border-radius:var(--radius-xl);width:100%;max-width:360px;box-shadow:var(--shadow-lg);background:#fff;flex-direction:column;gap:16px;padding:28px 24px;display:flex}.login-header{text-align:center}.login-logo-icon{background:var(--theme-sidebar);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin:0 auto 8px;display:flex;box-shadow:0 6px 16px #c272804d}.login-header h1{color:var(--text-charcoal);letter-spacing:-.5px;margin:0 0 2px;font-size:23px;font-weight:800;line-height:1.1}.login-header p{color:var(--text-muted);margin-top:0;font-size:12.5px;font-weight:600}.login-form{flex-direction:column;gap:8px;display:flex}.login-form .form-group{margin-bottom:0}.login-form .form-group label{margin-bottom:3px;font-size:12.5px}.input-with-icon{align-items:center;display:flex;position:relative}.input-with-icon .field-icon{color:var(--text-muted);pointer-events:none;position:absolute;left:14px}.input-with-icon .form-control{padding-left:44px}.btn-toggle-eye{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex;position:absolute;right:12px}.btn-toggle-eye:hover{color:var(--theme-accent)}.login-divider{background:var(--theme-border);opacity:.8;border:none;height:1px;margin:6px 0}.login-btn{border-radius:var(--radius-md);justify-content:center;width:100%;margin-top:2px;padding:11px;font-size:14px;font-weight:800;box-shadow:0 4px 14px #c2728059}.login-footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--theme-border);justify-content:center;align-items:center;padding-top:12px;font-size:12px;font-weight:700;display:flex}.sidebar-logout-btn{color:#fff;cursor:pointer;background:#ffffff2e;border:none;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;transition:all .2s;display:flex}.sidebar-logout-btn:hover{color:#fff;background:#e11d48;transform:scale(1.1)}