.sidebar[data-v-65f75471]{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:#fff;border-right:1px solid var(--color-border-light);display:flex;flex-direction:column;transition:width .2s ease,transform .25s ease;z-index:100;overflow:hidden}.sidebar.collapsed[data-v-65f75471]{width:var(--sidebar-w-collapsed)}.brand[data-v-65f75471]{height:var(--topbar-h);display:flex;align-items:center;gap:.6rem;padding:0 1rem;border-bottom:1px solid var(--color-border-light);flex-shrink:0}.brand-logo[data-v-65f75471]{width:36px;height:36px;background:var(--color-primary);color:#fff;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0}.brand-text[data-v-65f75471]{font-weight:700;font-size:1.05rem;color:var(--color-text);white-space:nowrap}.nav[data-v-65f75471]{flex:1;padding:.75rem .6rem;overflow-y:auto;overflow-x:hidden}.nav-item[data-v-65f75471]{display:flex;align-items:center;gap:.8rem;padding:.65rem .85rem;border-radius:var(--radius);color:var(--color-text-soft);font-weight:600;font-size:.9rem;margin-bottom:.15rem;transition:background .15s,color .15s;text-decoration:none}.nav-item[data-v-65f75471]:hover{background:var(--color-surface-alt);color:var(--color-text)}.nav-item.router-link-active[data-v-65f75471]{background:var(--color-primary-light);color:var(--color-primary)}.nav-ico[data-v-65f75471]{flex-shrink:0}.nav-label[data-v-65f75471]{white-space:nowrap}.side-user[data-v-65f75471]{padding:1rem;border-top:1px solid var(--color-border-light);flex-shrink:0}.side-user-info[data-v-65f75471]{font-size:.82rem}.side-user-name[data-v-65f75471]{font-weight:700;color:var(--color-text)}.side-user-school[data-v-65f75471]{color:var(--color-text-muted);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){.sidebar[data-v-65f75471]{width:var(--sidebar-w)!important;transform:translate(-100%);box-shadow:var(--shadow-lg)}.sidebar.mobile-open[data-v-65f75471]{transform:translate(0)}.sidebar.collapsed[data-v-65f75471]{width:var(--sidebar-w)!important}}.topbar[data-v-c6fc6f88]{height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--color-border-light);display:flex;align-items:center;gap:1rem;padding:0 1rem;position:sticky;top:0;z-index:50}.topbar-toggle[data-v-c6fc6f88]{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-soft);cursor:pointer;padding:.35rem;border-radius:var(--radius-sm)}.topbar-toggle[data-v-c6fc6f88]:hover{background:var(--color-surface-alt);color:var(--color-text)}.topbar-title[data-v-c6fc6f88]{flex:1;min-width:0;overflow:hidden}.topbar-sekolah[data-v-c6fc6f88]{font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-actions[data-v-c6fc6f88]{display:flex;align-items:center;gap:.65rem}.topbar-user[data-v-c6fc6f88]{display:flex;align-items:center;gap:.55rem;color:var(--color-text);text-decoration:none}.avatar[data-v-c6fc6f88]{width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}.topbar-user-name[data-v-c6fc6f88]{font-weight:600;font-size:.88rem;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 720px){.topbar-user-name[data-v-c6fc6f88],.logout-label[data-v-c6fc6f88]{display:none}.topbar-actions[data-v-c6fc6f88]{gap:.4rem}}.toast-wrap[data-v-2c68f309]{position:fixed;top:1rem;right:1rem;z-index:2000;display:flex;flex-direction:column;gap:.5rem;max-width:360px;width:calc(100% - 2rem)}.toast[data-v-2c68f309]{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.8rem 1rem;display:flex;align-items:flex-start;gap:.6rem;border-left:4px solid var(--color-info);animation:slide-in-2c68f309 .2s ease}.toast.success[data-v-2c68f309]{border-left-color:var(--color-accent);color:var(--color-accent)}.toast.error[data-v-2c68f309]{border-left-color:var(--color-danger);color:var(--color-danger)}.toast.warning[data-v-2c68f309]{border-left-color:var(--color-warning);color:var(--color-warning)}.toast.info[data-v-2c68f309]{border-left-color:var(--color-info);color:var(--color-info)}.toast-ico[data-v-2c68f309]{flex-shrink:0;margin-top:1px}.toast .msg[data-v-2c68f309]{flex:1;font-size:.88rem;color:var(--color-text)}.toast .x[data-v-2c68f309]{background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;padding:0;display:flex;align-items:center;flex-shrink:0}.toast .x[data-v-2c68f309]:hover{color:var(--color-text)}@keyframes slide-in-2c68f309{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 720px){.toast-wrap[data-v-2c68f309]{top:.5rem;right:.5rem;left:.5rem;max-width:none;width:auto}}.sidebar-overlay[data-v-d8a3d777]{position:fixed;top:0;right:0;bottom:0;left:0;background:#11182780;z-index:99;animation:fade-in-d8a3d777 .15s ease}@keyframes fade-in-d8a3d777{0%{opacity:0}to{opacity:1}}:root{--color-primary: #4f46e5;--color-primary-hover: #4338ca;--color-primary-light: #eef2ff;--color-primary-dark: #312e81;--color-accent: #10b981;--color-accent-hover: #059669;--color-accent-light: #ecfdf5;--color-danger: #ef4444;--color-danger-light: #fef2f2;--color-warning: #f59e0b;--color-warning-light: #fffbeb;--color-info: #0ea5e9;--color-info-light: #f0f9ff;--color-bg: #f6f7fb;--color-surface: #ffffff;--color-surface-alt: #fafbff;--color-border: #e5e7eb;--color-border-light: #f1f3f9;--color-text: #111827;--color-text-soft: #4b5563;--color-text-muted: #9ca3af;--color-hadir: #10b981;--color-izin: #0ea5e9;--color-sakit: #f59e0b;--color-alpa: #ef4444;--color-terlambat: #f97316;--sidebar-w: 250px;--sidebar-w-collapsed: 72px;--topbar-h: 60px;--radius-sm: 6px;--radius: 10px;--radius-lg: 16px;--radius-xl: 22px;--shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);--shadow: 0 4px 14px rgba(17, 24, 39, .08);--shadow-lg: 0 12px 36px rgba(17, 24, 39, .12);--font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100%}a{color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-primary-hover)}h1,h2,h3,h4,h5{margin:0 0 .5rem;font-weight:700;color:var(--color-text);line-height:1.3}h1{font-size:1.6rem}h2{font-size:1.3rem}h3{font-size:1.1rem}p{margin:0 0 1rem}button{font-family:inherit;cursor:pointer;border:none;background:none}input,select,textarea{font-family:inherit;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;transition:all .15s ease;border:1px solid transparent;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-accent{background:var(--color-accent);color:#fff}.btn-accent:hover:not(:disabled){background:var(--color-accent-hover)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-ghost{background:transparent;border-color:var(--color-border);color:var(--color-text-soft)}.btn-ghost:hover:not(:disabled){background:var(--color-surface-alt);color:var(--color-text)}.btn-light{background:var(--color-surface-alt);color:var(--color-text-soft);border:1px solid var(--color-border)}.btn-light:hover:not(:disabled){background:var(--color-primary-light);color:var(--color-primary)}.btn-sm{padding:.35rem .7rem;font-size:.82rem}.btn-lg{padding:.8rem 1.4rem;font-size:1rem}.btn-block{display:flex;width:100%}.card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);padding:1.25rem}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--color-border-light)}.card-title{margin:0;font-size:1.05rem;font-weight:700}.form-group{margin-bottom:1rem}.form-label{display:block;margin-bottom:.4rem;font-size:.85rem;font-weight:600;color:var(--color-text-soft)}.form-label .opt{color:var(--color-text-muted);font-weight:400}.form-control{width:100%;padding:.65rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius);background:#fff;color:var(--color-text);transition:border-color .15s,box-shadow .15s;outline:none}.form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4f46e526}.form-control::placeholder{color:var(--color-text-muted)}textarea.form-control{min-height:80px;resize:vertical}.form-hint{font-size:.78rem;color:var(--color-text-muted);margin-top:.3rem}.form-error{color:var(--color-danger);font-size:.8rem;margin-top:.3rem}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600}.badge-hadir{background:var(--color-accent-light);color:var(--color-hadir)}.badge-izin{background:var(--color-info-light);color:var(--color-izin)}.badge-sakit{background:var(--color-warning-light);color:var(--color-sakit)}.badge-alpa{background:var(--color-danger-light);color:var(--color-alpa)}.badge-terlambat{background:#ffedd5;color:var(--color-terlambat)}.badge-soft{background:var(--color-surface-alt);color:var(--color-text-soft)}.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--color-border-light)}table.table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff}.table th,.table td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--color-border-light)}.table th{background:var(--color-surface-alt);font-weight:600;color:var(--color-text-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.table tbody tr:hover{background:var(--color-surface-alt)}.table tbody tr:last-child td{border-bottom:none}.app-shell{min-height:100vh}.app-layout{display:flex;min-height:100vh}.app-main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;transition:margin-left .2s ease;min-width:0}.app-main.collapsed{margin-left:var(--sidebar-w-collapsed)}.app-content{flex:1;padding:1.5rem;max-width:1280px;width:100%;margin:0 auto}.app-footer{padding:1rem 1.5rem;text-align:center;color:var(--color-text-muted);font-size:.8rem}.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.page-header h1{margin:0;font-size:1.5rem}.page-header .sub{color:var(--color-text-muted);font-size:.88rem;margin-top:.2rem}.empty{text-align:center;padding:2.5rem 1rem;color:var(--color-text-muted)}.empty .icon{font-size:2.4rem;margin-bottom:.5rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1118278c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fade-in .15s ease}.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;animation:pop .15s ease}.modal.lg{max-width:720px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--color-border-light)}.modal-body{padding:1.25rem}.modal-footer{padding:1rem 1.25rem;border-top:1px solid var(--color-border-light);display:flex;justify-content:flex-end;gap:.5rem}.modal-close{background:transparent;color:var(--color-text-muted);font-size:1.5rem;line-height:1;padding:0 .25rem}.modal-close:hover{color:var(--color-text)}.toast-wrap{position:fixed;top:1rem;right:1rem;z-index:2000;display:flex;flex-direction:column;gap:.5rem;max-width:360px}.toast{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.8rem 1rem;display:flex;align-items:flex-start;gap:.6rem;border-left:4px solid var(--color-info);animation:slide-in .2s ease}.toast.success{border-left-color:var(--color-accent)}.toast.error{border-left-color:var(--color-danger)}.toast.warning{border-left-color:var(--color-warning)}.toast.info{border-left-color:var(--color-info)}.toast .ico{font-size:1.1rem}.toast .msg{flex:1;font-size:.88rem;color:var(--color-text)}.toast .x{color:var(--color-text-muted);cursor:pointer}.grid{display:grid;gap:1rem}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.5rem}.gap-2{gap:1rem}.flex-wrap{flex-wrap:wrap}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-2{margin-bottom:1rem}.text-muted{color:var(--color-text-muted)}.text-soft{color:var(--color-text-soft)}.text-center{text-align:center}.text-right{text-align:right}.w-full{width:100%}.font-bold{font-weight:700}.font-semibold{font-weight:600}.stat-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;border:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:1rem}.stat-card .stat-ico{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--color-primary-light);color:var(--color-primary);flex-shrink:0}.stat-card .stat-val{font-size:1.5rem;font-weight:700;line-height:1.1}.stat-card .stat-lbl{font-size:.82rem;color:var(--color-text-muted);margin-top:.15rem}.tabs{display:flex;gap:.25rem;border-bottom:2px solid var(--color-border-light);margin-bottom:1.25rem;overflow-x:auto}.tab{padding:.55rem 1rem;border:none;background:transparent;color:var(--color-text-soft);font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap}.tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.chip-group{display:inline-flex;background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:999px;padding:.25rem;gap:.25rem}.chip{padding:.35rem .85rem;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--color-text-soft);cursor:pointer;border:none;background:transparent;transition:all .15s}.chip.active{background:var(--color-primary);color:#fff}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.spinner.dark{border-color:#4f46e533;border-top-color:var(--color-primary)}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:1500}.spinner-lg{width:38px;height:38px;border:4px solid rgba(79,70,229,.15);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.fade-enter-active,.fade-leave-active{transition:opacity .15s ease}.fade-enter-from,.fade-leave-to{opacity:0}@media (max-width: 900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 720px){.app-main{margin-left:0!important}.app-content{padding:1rem}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:stretch}.page-header>div:first-child{width:100%}.page-header .btn{width:100%;justify-content:center}.stat-card{padding:.85rem 1rem;gap:.75rem}.stat-card .stat-ico{width:40px;height:40px}.stat-card .stat-val{font-size:1.25rem}.card{padding:1rem}.card-header{flex-wrap:wrap;gap:.5rem}.form-group{margin-bottom:.85rem}.form-control{padding:.7rem .8rem;font-size:16px}.table th,.table td{padding:.55rem .6rem;font-size:.82rem}.table-wrap{-webkit-overflow-scrolling:touch}.modal{max-width:100%;border-radius:var(--radius) var(--radius) 0 0}.modal-overlay{align-items:flex-end;padding:0}.modal-body{padding:1rem}.modal-footer{padding:.85rem 1rem}.modal-footer .btn{flex:1}h1{font-size:1.25rem}h2{font-size:1.1rem}.filter-bar{flex-direction:column;align-items:stretch}.filter-item{width:100%;margin-left:0!important}}@media (max-width: 380px){.app-content{padding:.75rem}.card{padding:.85rem}.stat-card{padding:.75rem;gap:.5rem}.stat-card .stat-ico{width:36px;height:36px}}