@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--font-family:"Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;--font-display:"Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;--font-mono:"Cascadia Code", "Consolas", "JetBrains Mono", monospace;--font-size-caption:.75rem;--line-height-caption:1.05rem;--font-size-body:.875rem;--line-height-body:1.35rem;--font-size-subtitle:1.025rem;--line-height-subtitle:1.45rem;--font-size-title-2:1.25rem;--line-height-title-2:1.65rem;--font-size-title-1:1.5rem;--line-height-title-1:1.85rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--space-2xs:2px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-xxl:48px;--space-3xl:64px;--radius-xs:2px;--radius-sm:4px;--radius-md:4px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1.6px 3.6px 0 #00000014, 0 .3px .9px 0 #0000000f;--shadow-md:0 3.2px 7.2px 0 #0000001a, 0 .6px 1.8px 0 #00000014;--shadow-lg:0 6.4px 14.4px 0 #0000001f, 0 1.2px 3.6px 0 #00000014;--shadow-xl:0 16px 32px 0 #00000024, 0 3px 8px 0 #0000001a;--shadow-flyout:0 6.4px 14.4px 0 #00000021, 0 1.2px 3.6px 0 #0000001c;--shadow-dialog:0 25.6px 57.6px 0 #00000038, 0 4.8px 14.4px 0 #0000002e;--transition-fast:.1s cubic-bezier(.1, .9, .2, 1);--transition-normal:.167s cubic-bezier(.1, .9, .2, 1);--transition-slow:.25s cubic-bezier(.1, .9, .2, 1);--z-dropdown:100;--z-sidebar:200;--z-overlay:300;--z-modal:400;--z-notification:500;--color-status-hadir:#059669;--color-status-hadir-bg:#ecfdf5;--color-status-hadir-border:#a7f3d0;--color-status-izin:#d97706;--color-status-izin-bg:#fffbeb;--color-status-izin-border:#fde68a;--color-status-sakit:#0284c7;--color-status-sakit-bg:#f0f9ff;--color-status-sakit-border:#bae6fd;--color-status-alpha:#e11d48;--color-status-alpha-bg:#fff1f2;--color-status-alpha-border:#fecdd3;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-active:#1e40af;--color-primary-light:#eff6ff;--color-primary-subtle:#f8fafc;--color-secondary:#475569;--color-secondary-hover:#334155;--color-accent:#2563eb;--color-bg:#f8fafc;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f1f5f9;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#64748b;--color-border:#e2e8f0;--color-border-solid:#cbd5e1;--color-border-hover:#94a3b8;--color-border-focus:#2563eb;--color-border-bottom-input:#94a3b8;--color-success:#059669;--color-success-light:#ecfdf5;--color-warning:#d97706;--color-warning-light:#fffbeb;--color-danger:#e11d48;--color-danger-light:#fff1f2;--color-info:#0284c7;--color-info-light:#f0f9ff;--color-overlay:#0f172a73}[data-theme=cobalt-slate]{--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-active:#1e40af;--color-primary-light:#eff6ff;--color-primary-subtle:#f8fafc;--color-secondary:#475569;--color-secondary-hover:#334155;--color-accent:#2563eb;--color-bg:#f8fafc;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f1f5f9;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#64748b;--color-border:#e2e8f0;--color-border-solid:#cbd5e1;--color-border-hover:#94a3b8;--color-border-focus:#2563eb;--color-status-hadir:#059669;--color-status-hadir-bg:#ecfdf5;--color-status-hadir-border:#a7f3d0;--color-status-izin:#d97706;--color-status-izin-bg:#fffbeb;--color-status-izin-border:#fde68a;--color-status-sakit:#0284c7;--color-status-sakit-bg:#f0f9ff;--color-status-sakit-border:#bae6fd;--color-status-alpha:#e11d48;--color-status-alpha-bg:#fff1f2;--color-status-alpha-border:#fecdd3;--color-success:#059669;--color-success-light:#ecfdf5;--color-warning:#d97706;--color-warning-light:#fffbeb;--color-danger:#e11d48;--color-danger-light:#fff1f2;--color-info:#0284c7;--color-info-light:#f0f9ff;--color-overlay:#0f172a73}[data-theme=excel-statistika]{--color-primary:#107c41;--color-primary-hover:#0e6b37;--color-primary-active:#0b582d;--color-primary-light:#ebf7f0;--color-primary-subtle:#f3faf6;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#107c41;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-hover:#00000024;--color-border-focus:#107c41;--color-status-hadir:#107c41;--color-status-izin:#d83b01;--color-status-sakit:#0078d4;--color-status-alpha:#d13438;--color-success:#107c41;--color-success-light:#107c4114;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#0078d4;--color-info-light:#0078d414;--color-overlay:#0006}[data-theme=biru-klasik]{--color-primary:#0078d4;--color-primary-hover:#106ebe;--color-primary-active:#005a9e;--color-primary-light:#eff6fc;--color-primary-subtle:#f3f9fd;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#0078d4;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-hover:#00000024;--color-border-focus:#0078d4;--color-status-hadir:#107c41;--color-status-izin:#d83b01;--color-status-sakit:#0078d4;--color-status-alpha:#d13438;--color-success:#107c41;--color-success-light:#107c4114;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#0078d4;--color-info-light:#0078d414;--color-overlay:#0006}.dark,[data-theme=cobalt-slate].dark{--color-primary:#3b82f6;--color-primary-hover:#60a5fa;--color-primary-active:#2563eb;--color-primary-light:#1e293b;--color-primary-subtle:#0f172a;--color-secondary:#94a3b8;--color-secondary-hover:#f8fafc;--color-accent:#3b82f6;--color-bg:#0f172a;--color-bg-card:#1e293b;--color-bg-sidebar:#1e293b;--color-bg-input:#1e293b;--color-bg-hover:#334155;--color-text:#f8fafc;--color-text-secondary:#cbd5e1;--color-text-muted:#94a3b8;--color-border:#334155;--color-border-solid:#475569;--color-border-hover:#64748b;--color-border-focus:#3b82f6;--color-border-bottom-input:#64748b;--color-status-hadir:#10b981;--color-status-hadir-bg:#064e3b;--color-status-hadir-border:#059669;--color-status-izin:#f59e0b;--color-status-izin-bg:#78350f;--color-status-izin-border:#d97706;--color-status-sakit:#38bdf8;--color-status-sakit-bg:#0c4a6e;--color-status-sakit-border:#0284c7;--color-status-alpha:#fb7185;--color-status-alpha-bg:#881337;--color-status-alpha-border:#e11d48;--color-success:#10b981;--color-success-light:#064e3b;--color-warning:#f59e0b;--color-warning-light:#78350f;--color-danger:#fb7185;--color-danger-light:#881337;--color-info:#38bdf8;--color-info-light:#0c4a6e;--color-overlay:#000000a6;--shadow-xs:0 1px 2px 0 #0006;--shadow-sm:0 1.6px 3.6px 0 #00000073, 0 .3px .9px 0 #00000059;--shadow-md:0 3.2px 7.2px 0 #00000080, 0 .6px 1.8px 0 #0006;--shadow-lg:0 6.4px 14.4px 0 #0000008c, 0 1.2px 3.6px 0 #00000073;--shadow-xl:0 16px 32px 0 #000000a6, 0 3px 8px 0 #00000080}[data-theme=excel-statistika].dark{--color-primary:#27a75e;--color-primary-hover:#36b76e;--color-primary-active:#1e8c4c;--color-primary-light:#163324;--color-primary-subtle:#11261b;--color-secondary:#d1d1d1;--color-secondary-hover:#fff;--color-accent:#27a75e;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-hover:#ffffff29;--color-border-focus:#27a75e;--color-border-bottom-input:#ffffff8c;--color-status-hadir:#27a75e;--color-status-izin:#f7630c;--color-status-sakit:#2886de;--color-status-alpha:#e81123;--color-success:#27a75e;--color-success-light:#27a75e29;--color-warning:#f7630c;--color-warning-light:#f7630c29;--color-danger:#e81123;--color-danger-light:#e8112329;--color-info:#2886de;--color-info-light:#2886de29;--color-overlay:#0009}[data-theme=biru-klasik].dark{--color-primary:#2886de;--color-primary-hover:#479ef5;--color-primary-active:#0078d4;--color-primary-light:#202d3c;--color-primary-subtle:#192430;--color-secondary:#d1d1d1;--color-secondary-hover:#fff;--color-accent:#2886de;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-hover:#ffffff29;--color-border-focus:#2886de;--color-border-bottom-input:#ffffff8c;--color-status-hadir:#54b054;--color-status-izin:#f7630c;--color-status-sakit:#2886de;--color-status-alpha:#e81123;--color-success:#54b054;--color-success-light:#54b05429;--color-warning:#f7630c;--color-warning-light:#f7630c29;--color-danger:#e81123;--color-danger-light:#e8112329;--color-info:#2886de;--color-info-light:#2886de29;--color-overlay:#0009;--shadow-xs:0 1px 2px 0 #00000059;--shadow-sm:0 1.6px 3.6px 0 #0006, 0 .3px .9px 0 #0000004d;--shadow-md:0 3.2px 7.2px 0 #00000073, 0 .6px 1.8px 0 #00000059;--shadow-lg:0 6.4px 14.4px 0 #00000080, 0 1.2px 3.6px 0 #0006;--shadow-xl:0 16px 32px 0 #0009, 0 3px 8px 0 #00000073}[data-theme=midnight]{--color-primary:#004e8c;--color-primary-hover:#003e70;--color-primary-active:#002d52;--color-primary-light:#edf5fb;--color-primary-subtle:#f4f8fc;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#004e8c;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-focus:#004e8c;--color-success:#107c10;--color-success-light:#107c1014;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#004e8c;--color-info-light:#004e8c14;--color-overlay:#0006}[data-theme=midnight].dark{--color-primary:#3a96dd;--color-primary-hover:#5eb0f5;--color-primary-active:#004e8c;--color-primary-light:#1d3147;--color-primary-subtle:#142333;--color-secondary:#d1d1d1;--color-secondary-hover:#fff;--color-accent:#3a96dd;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-focus:#3a96dd;--color-overlay:#0009}[data-theme=ocean]{--color-primary:#038387;--color-primary-hover:#026669;--color-primary-active:#014e50;--color-primary-light:#e6f7f7;--color-primary-subtle:#f0fbfb;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#038387;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-focus:#038387;--color-success:#107c10;--color-success-light:#107c1014;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#038387;--color-info-light:#03838714;--color-overlay:#0006}[data-theme=ocean].dark{--color-primary:#20b2aa;--color-primary-hover:#48d1cc;--color-primary-active:#038387;--color-primary-light:#1a3638;--color-primary-subtle:#122627;--color-accent:#20b2aa;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-focus:#20b2aa;--color-overlay:#0009}[data-theme=slate]{--color-primary:#3a6ba5;--color-primary-hover:#2c5282;--color-primary-active:#234168;--color-primary-light:#edf3f9;--color-primary-subtle:#f5f8fc;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#3a6ba5;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-focus:#3a6ba5;--color-success:#107c10;--color-success-light:#107c1014;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#3a6ba5;--color-info-light:#3a6ba514;--color-overlay:#0006}[data-theme=slate].dark{--color-primary:#6394cf;--color-primary-hover:#82ade3;--color-primary-active:#3a6ba5;--color-primary-light:#202f42;--color-primary-subtle:#16212e;--color-accent:#6394cf;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-focus:#6394cf;--color-overlay:#0009}[data-theme=arctic]{--color-primary:#0099bc;--color-primary-hover:#007d99;--color-primary-active:#006077;--color-primary-light:#e6f7fa;--color-primary-subtle:#f0fbfd;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#0099bc;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-focus:#0099bc;--color-success:#107c10;--color-success-light:#107c1014;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#0099bc;--color-info-light:#0099bc14;--color-overlay:#0006}[data-theme=arctic].dark{--color-primary:#33c5e8;--color-primary-hover:#66d5ee;--color-primary-active:#0099bc;--color-primary-light:#163640;--color-primary-subtle:#0e242b;--color-accent:#33c5e8;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-focus:#33c5e8;--color-overlay:#0009}[data-theme=steel]{--color-primary:#5c6b73;--color-primary-hover:#465258;--color-primary-active:#333c40;--color-primary-light:#f0f3f4;--color-primary-subtle:#f7f9fa;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#5c6b73;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-focus:#5c6b73;--color-success:#107c10;--color-success-light:#107c1014;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#5c6b73;--color-info-light:#5c6b7314;--color-overlay:#0006}[data-theme=steel].dark{--color-primary:#9db4c0;--color-primary-hover:#b8c9d3;--color-primary-active:#5c6b73;--color-primary-light:#2a3338;--color-primary-subtle:#1d2327;--color-accent:#9db4c0;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-focus:#9db4c0;--color-overlay:#0009}[data-theme=navy]{--color-primary:#0b4f8a;--color-primary-hover:#083b66;--color-primary-active:#062a4a;--color-primary-light:#e9f2f9;--color-primary-subtle:#f3f8fc;--color-secondary:#616161;--color-secondary-hover:#484644;--color-accent:#0b4f8a;--color-bg:#f5f5f5;--color-bg-card:#fff;--color-bg-sidebar:#fff;--color-bg-input:#fff;--color-bg-hover:#f3f2f1;--color-text:#242424;--color-text-secondary:#616161;--color-text-muted:#8a8886;--color-border:#0000000f;--color-border-solid:#e5e5e5;--color-border-focus:#0b4f8a;--color-success:#107c10;--color-success-light:#107c1014;--color-warning:#d83b01;--color-warning-light:#d83b0114;--color-danger:#d13438;--color-danger-light:#d1343814;--color-info:#0b4f8a;--color-info-light:#0b4f8a14;--color-overlay:#0006}[data-theme=navy].dark{--color-primary:#4a90e2;--color-primary-hover:#6ba4e8;--color-primary-active:#0b4f8a;--color-primary-light:#182c44;--color-primary-subtle:#101e2e;--color-accent:#4a90e2;--color-bg:#1f1f1f;--color-bg-card:#2b2b2b;--color-bg-sidebar:#2b2b2b;--color-bg-input:#2b2b2b;--color-bg-hover:#383838;--color-text:#fff;--color-text-secondary:#d1d1d1;--color-text-muted:#979593;--color-border:#ffffff14;--color-border-solid:#383838;--color-border-focus:#4a90e2;--color-overlay:#0009}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);font-size:var(--font-size-body);line-height:var(--line-height-body);font-weight:var(--font-weight-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;transition:background-color var(--transition-normal), color var(--transition-normal)}#root{min-height:100vh}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-hover);text-decoration:underline}img{max-width:100%;height:auto}button{cursor:pointer;font-family:var(--font-family);transition:all var(--transition-fast);border:none;outline:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}input,textarea,select{font-family:var(--font-family);border:1px solid var(--color-border-solid);border-bottom:2px solid var(--color-border-solid);border-radius:var(--radius-control);background-color:var(--color-bg-input);color:var(--color-text);transition:border-color var(--transition-fast), background-color var(--transition-fast);outline:none}input:focus,textarea:focus,select:focus{border-color:var(--color-border-solid);border-bottom-color:var(--color-primary);background-color:var(--color-bg-card)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.app-layout{background-color:var(--color-bg);flex-direction:column;min-height:100vh;display:flex}.main-content{box-sizing:border-box;width:100%;max-width:1200px;min-height:100vh;transition:margin-left var(--transition-slow);flex:1;margin:0 auto;padding:72px 16px 36px}@media (width>=640px){.main-content{padding:76px 24px 44px}}@media (width>=769px){.main-content{padding:80px 32px 52px}}@media (width>=1025px){.main-content{padding:84px 40px 60px}}@media (width>=1440px){.main-content{padding:88px 48px 64px}}.navbar{background-color:var(--color-bg-card);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border);height:54px;z-index:var(--z-sidebar);transition:background-color var(--transition-normal), border-color var(--transition-normal);justify-content:center;align-items:center;padding:0;display:flex;position:fixed;top:0;left:0;right:0}.navbar-container{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;max-width:1200px;height:100%;margin:0 auto;padding:0 16px;display:flex}@media (width>=640px){.navbar-container{padding:0 24px}}@media (width>=769px){.navbar{height:56px}.navbar-container{padding:0 32px}}@media (width>=1025px){.navbar{height:58px}.navbar-container{padding:0 40px}}@media (width>=1440px){.navbar-container{padding:0 48px}}.navbar-brand{align-items:center;gap:var(--space-sm);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.navbar-logo-box{border-radius:var(--radius-sm);width:34px;height:41px;box-shadow:var(--shadow-sm);border:1.5px solid var(--color-border);transition:transform var(--transition-fast), box-shadow var(--transition-fast);background-color:#0b0f19;flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.navbar-brand:hover .navbar-logo-box{transform:scale(1.06);box-shadow:0 2px 8px #0000002e}.navbar-logo-img{object-fit:contain;width:100%;height:100%;display:block}.navbar-brand h1{font-size:var(--font-size-subtitle);line-height:var(--line-height-subtitle);font-weight:var(--font-weight-semibold);color:var(--color-text);letter-spacing:-.01em}.navbar-brand span{font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-primary);font-weight:var(--font-weight-semibold);background-color:var(--color-primary-light);border-radius:var(--radius-control);border:1px solid #0078d426;padding:2px 8px}.navbar-actions{align-items:center;gap:var(--space-xs);display:flex}.navbar-icon-btn{border-radius:var(--radius-control);width:32px;height:32px;color:var(--color-text-secondary);transition:all var(--transition-fast);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;display:flex;position:relative}.navbar-icon-btn:hover{background-color:var(--color-bg-hover);color:var(--color-text)}.navbar-icon-btn .badge{background-color:var(--color-danger);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:10px;font-weight:700;display:flex;position:absolute;top:4px;right:4px}.hamburger-btn{border-radius:var(--radius-control);width:32px;height:32px;color:var(--color-text);background:0 0;border:1px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px;display:flex}.hamburger-btn:hover{background-color:var(--color-bg-hover)}.hamburger-line{background-color:var(--color-text);width:16px;height:2px;transition:all var(--transition-normal);border-radius:1px}.hamburger-btn.active .hamburger-line:first-child{transform:rotate(45deg)translate(4px,4px)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:rotate(-45deg)translate(4px,-4px)}.sidebar-overlay{background-color:var(--color-overlay);z-index:var(--z-sidebar);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-normal), visibility var(--transition-normal);position:fixed;inset:0}.sidebar-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.sidebar{background-color:var(--color-bg-sidebar);border-left:1px solid var(--color-border);width:290px;height:100vh;z-index:calc(var(--z-sidebar) + 1);transition:right var(--transition-slow);box-shadow:var(--shadow-dialog);padding:68px 16px 16px;position:fixed;top:0;right:-320px;overflow-y:auto}.sidebar.open{right:0}.sidebar-section{margin-bottom:var(--space-lg)}.sidebar-section-title{font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:8px;padding:0 8px}.sidebar-item{border-radius:var(--radius-control);min-height:36px;color:var(--color-text-secondary);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);cursor:pointer;transition:all var(--transition-fast);text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:10px;width:100%;padding:6px 12px;display:flex}.sidebar-item:hover{background-color:var(--color-bg-hover);color:var(--color-text)}.sidebar-item.active{background-color:var(--color-primary-subtle);color:var(--color-primary);font-weight:var(--font-weight-semibold);border-color:#0078d433}.sidebar-item svg{flex-shrink:0;width:16px;height:16px}.sidebar-divider{background-color:var(--color-border);height:1px;margin:12px 0}@media (width>=1025px){.sidebar-overlay{display:none!important}.sidebar{border-right:1px solid var(--color-border);width:260px;height:calc(100vh - 58px);box-shadow:none;z-index:90;transition:transform var(--transition-normal), width var(--transition-normal);border-left:none;padding:18px 14px;top:58px;left:0;right:auto;transform:none}.sidebar .modal-close{display:none!important}.main-content{box-sizing:border-box;transition:margin-left var(--transition-normal), width var(--transition-normal), max-width var(--transition-normal);width:calc(100% - 260px)!important;max-width:calc(100% - 260px)!important;margin-left:260px!important;padding:80px 36px 60px!important}.content-wrapper>*{max-width:1200px;margin-left:auto;margin-right:auto}.navbar-container{max-width:100%!important;padding:0 28px!important}.app-layout.sidebar-collapsed .sidebar{transform:translate(-100%)}.app-layout.sidebar-collapsed .main-content{width:100%!important;max-width:100%!important;margin-left:0!important}}.card{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-container);padding:var(--space-xl);transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);box-shadow:var(--shadow-card)}.card:hover{border-color:var(--color-border-solid);box-shadow:var(--shadow-card-hover)}.card-header{margin-bottom:var(--space-md);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.card-title{font-size:var(--font-size-subtitle);line-height:var(--line-height-subtitle);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;color:var(--color-text);align-items:center;gap:8px;display:flex}.card-subtitle{font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-text-secondary);margin-top:2px}.stat-grid{gap:var(--space-md);margin-bottom:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));display:grid}.stat-card{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-container);transition:all var(--transition-fast);box-shadow:var(--shadow-card);align-items:flex-start;gap:12px;padding:16px 20px;display:flex;position:relative}.stat-card:hover{border-color:var(--color-border-focus);box-shadow:var(--shadow-card-hover);transform:translateY(-1px)}.stat-icon{border-radius:var(--radius-control);border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.stat-icon.primary{background-color:var(--color-primary-light);color:var(--color-primary);border-color:#0078d42e}.stat-icon.success{background-color:var(--color-success-light);color:var(--color-success);border-color:#107c102e}.stat-icon.warning{background-color:var(--color-warning-light);color:var(--color-warning);border-color:#d83b012e}.stat-icon.danger{background-color:var(--color-danger-light);color:var(--color-danger);border-color:#d134382e}.stat-info{flex-direction:column;display:flex}.stat-info h3{font-size:var(--font-size-title-1);line-height:var(--line-height-title-1);font-weight:var(--font-weight-semibold);font-family:var(--font-mono);font-feature-settings:"tnum" 1;letter-spacing:-.02em;color:var(--color-text)}.stat-info p{font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);margin-top:4px}.btn{justify-content:center;align-items:center;gap:var(--space-sm);border-radius:var(--radius-control);height:32px;min-height:32px;font-size:var(--font-size-body);line-height:1;font-weight:var(--font-weight-semibold);letter-spacing:-.01em;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;padding:0 16px;text-decoration:none;display:inline-flex}.btn:hover{text-decoration:none}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover);color:#fff}.btn-primary:active{background-color:var(--color-primary-active)}.btn-secondary{background-color:var(--color-bg-card);color:var(--color-text);border:1px solid var(--color-border-solid)}.btn-secondary:hover{background-color:var(--color-bg-hover);color:var(--color-text);border-color:var(--color-text-muted)}.btn-secondary:active{background-color:var(--color-bg-input)}.btn-success{background-color:var(--color-success);color:#fff}.btn-success:hover{background-color:#0e6b0e}.btn-danger{background-color:var(--color-danger);color:#fff}.btn-danger:hover{background-color:#b72c30}.btn-warning{background-color:var(--color-warning);color:#fff}.btn-warning:hover{background-color:#bc3301}.btn-ghost{color:var(--color-text-secondary);background-color:#0000;border:1px solid #0000}.btn-ghost:hover{background-color:var(--color-bg-hover);color:var(--color-text)}.btn-sm{height:28px;min-height:28px;font-size:var(--font-size-caption);padding:0 12px}.btn-lg{height:40px;min-height:40px;font-size:var(--font-size-body);padding:0 20px}.btn-block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.form-group{margin-bottom:var(--space-md)}.form-label{font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:4px;display:block}.form-input{background-color:var(--color-bg-input);border:1px solid var(--color-border-solid);border-bottom:2px solid var(--color-border-solid);border-radius:var(--radius-control);width:100%;height:32px;min-height:32px;font-size:var(--font-size-body);color:var(--color-text);transition:all var(--transition-fast);padding:0 10px}.form-input::placeholder{color:var(--color-text-muted)}.form-input:focus{border-color:var(--color-border-solid);border-bottom-color:var(--color-primary);background-color:var(--color-bg-card)}.form-textarea{background-color:var(--color-bg-input);border:1px solid var(--color-border-solid);border-bottom:2px solid var(--color-border-solid);border-radius:var(--radius-control);width:100%;font-size:var(--font-size-body);color:var(--color-text);resize:vertical;min-height:80px;transition:all var(--transition-fast);padding:8px 10px}.form-textarea:focus{border-color:var(--color-border-solid);border-bottom-color:var(--color-primary);background-color:var(--color-bg-card)}.form-select{background-color:var(--color-bg-input);border:1px solid var(--color-border-solid);border-bottom:2px solid var(--color-border-solid);border-radius:var(--radius-control);width:100%;height:32px;min-height:32px;font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text);appearance:none;cursor:pointer;transition:all var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230078D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding:0 32px 0 10px}.form-select:hover{background-color:var(--color-bg-hover)}.form-select:focus{border-color:var(--color-border-solid);border-bottom-color:var(--color-primary);background-color:var(--color-bg-card)}.form-error{font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-danger);margin-top:4px}.table-container{border:1px solid var(--color-border);border-radius:var(--radius-container);background-color:var(--color-bg-card);box-shadow:var(--shadow-card);overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:var(--font-size-body)}.table th{background-color:var(--color-bg-hover);text-align:left;font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);white-space:nowrap;padding:8px 14px}.table td{font-size:var(--font-size-body);color:var(--color-text);border-bottom:1px solid var(--color-border);font-feature-settings:"tnum" 1;padding:10px 14px}.table tr:last-child td{border-bottom:none}.table tr:hover td{background-color:var(--color-bg-hover)}.table-sticky-col-1{z-index:2;background-color:var(--color-bg-card);position:sticky;left:0}.table-sticky-col-2{z-index:2;background-color:var(--color-bg-card);border-right:1px solid var(--color-border);position:sticky;left:48px;box-shadow:3px 0 8px -2px #0000001f}.dark .table-sticky-col-2{border-right:1px solid var(--color-border-solid);box-shadow:3px 0 8px -2px #00000059}.table thead th.table-sticky-col-1,.table thead th.table-sticky-col-2{z-index:3;background-color:var(--color-bg-hover)}.table tr:hover td.table-sticky-col-1,.table tr:hover td.table-sticky-col-2{background-color:var(--color-bg-hover)}.badge-status{border-radius:var(--radius-control);font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);text-transform:capitalize;white-space:nowrap;justify-content:center;align-items:center;gap:4px;padding:3px 8px;display:inline-flex}.badge-hadir{background-color:var(--color-status-hadir-bg,#ecfdf5);color:var(--color-status-hadir,#047857);border:1px solid var(--color-status-hadir-border,#a7f3d0)}.dark .badge-hadir{background-color:var(--color-status-hadir-bg,#064e3b);color:#6ee7b7;border-color:#047857}.badge-izin{background-color:var(--color-status-izin-bg,#fffbeb);color:var(--color-status-izin,#92400e);border:1px solid var(--color-status-izin-border,#fde68a)}.dark .badge-izin{background-color:var(--color-status-izin-bg,#78350f);color:#fcd34d;border-color:#b45309}.badge-sakit{background-color:var(--color-status-sakit-bg,#f0f9ff);color:var(--color-status-sakit,#075985);border:1px solid var(--color-status-sakit-border,#bae6fd)}.dark .badge-sakit{background-color:var(--color-status-sakit-bg,#0c4a6e);color:#7dd3fc;border-color:#0284c7}.badge-alpha{background-color:var(--color-status-alpha-bg,#fff1f2);color:var(--color-status-alpha,#9f1239);border:1px solid var(--color-status-alpha-border,#fecdd3)}.dark .badge-alpha{background-color:var(--color-status-alpha-bg,#881337);color:#fda4af;border-color:#be123c}.badge-info{background-color:var(--color-primary-light);color:var(--color-primary);border:1px solid var(--color-border);font-weight:600}.dark .badge-info{background-color:var(--color-primary-light);color:var(--color-primary);border-color:var(--color-border)}.badge-active-session,.dark .badge-active-session{background-color:var(--color-primary);color:#fff}.badge-baru{background-color:var(--color-primary-light);color:var(--color-primary);border:1px solid #0078d433}.badge-diproses{background-color:var(--color-warning-light);color:var(--color-warning);border:1px solid #d83b0133}.badge-selesai{background-color:var(--color-success-light);color:var(--color-success);border:1px solid #107c1033}@keyframes modalBackdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalWindowPopIn{0%{opacity:0;transform:scale(.95)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.modal-overlay,.modal-backdrop{z-index:var(--z-modal,400);background-color:var(--color-overlay);-webkit-backdrop-filter:blur(12px);padding:var(--space-md);justify-content:center;align-items:center;animation:.16s ease-out forwards modalBackdropFadeIn;display:flex;position:fixed;inset:0}.modal,.modal-content{background-color:var(--color-bg-card);border-radius:var(--radius-container);border:1px solid var(--color-border);width:100%;max-width:540px;max-height:90vh;box-shadow:var(--shadow-dialog);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;padding:var(--space-xl);flex-direction:column;animation:.18s cubic-bezier(.16,1,.3,1) forwards modalWindowPopIn;display:flex;position:relative;overflow-y:auto}.modal:before,.modal-content:before{content:none!important;display:none!important}.modal-content>form{padding:0!important}.modal-header{margin-bottom:var(--space-md);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.modal-header-icon{border-radius:var(--radius-control);background-color:var(--color-primary-light);width:32px;height:32px;color:var(--color-primary);border:1px solid #0078d42e;flex-shrink:0;justify-content:center;align-items:center;display:flex}.modal-title,.modal-header h2,.modal-header h3{font-size:var(--font-size-subtitle);line-height:var(--line-height-subtitle);font-weight:var(--font-weight-semibold);color:var(--color-text);letter-spacing:-.01em;align-items:center;gap:8px;margin:0;display:flex}.modal-close{border-radius:var(--radius-control);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);background-color:#0000;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.modal-close:hover{background-color:var(--color-bg-hover);color:var(--color-text)}.modal-body{flex:auto}.modal-footer{justify-content:flex-end;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg);border-top:1px solid var(--color-border);padding-top:14px;display:flex}.choice-pills{margin-top:6px;margin-bottom:var(--space-md);flex-wrap:wrap;gap:6px;display:flex}.choice-pill{border-radius:var(--radius-control);border:1px solid var(--color-border-solid);background-color:var(--color-bg-card);color:var(--color-text-secondary);font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:4px 10px;display:inline-flex}.choice-pill:hover{border-color:var(--color-text-muted);background-color:var(--color-bg-hover);color:var(--color-text)}.choice-pill.selected{border-color:var(--color-primary);background-color:var(--color-primary-light);color:var(--color-primary)}.choice-pill .pill-dot{background-color:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px}.choice-cards-grid{margin-top:6px;margin-bottom:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;display:grid}.choice-card-item{border-radius:var(--radius-control);border:1px solid var(--color-border-solid);background-color:var(--color-bg-card);cursor:pointer;transition:all var(--transition-fast);text-align:left;flex-direction:column;align-items:flex-start;padding:10px 12px;display:flex}.choice-card-item:hover{border-color:var(--color-text-muted);background-color:var(--color-bg-hover)}.choice-card-item.selected{border-color:var(--color-primary);background-color:var(--color-primary-light);color:var(--color-primary)}.login-container{min-height:100vh;padding:var(--space-lg);background-color:var(--color-bg);z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.login-card{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-container);width:100%;max-width:440px;box-shadow:var(--shadow-dialog);z-index:10;padding:32px;position:relative}.login-badge{font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-primary);background-color:var(--color-primary-light);border-radius:var(--radius-control);border:1px solid #0078d433;margin-bottom:12px;padding:2px 8px;display:inline-block}.login-header{text-align:center;margin-bottom:var(--space-xl)}.login-header h1{font-size:var(--font-size-title-1);line-height:var(--line-height-title-1);font-weight:var(--font-weight-semibold);color:var(--color-text);letter-spacing:-.01em;margin-bottom:6px}.login-header p{font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text-secondary)}.login-icon{border-radius:var(--radius-control);background-color:var(--color-primary-light);width:44px;height:44px;color:var(--color-primary);border:1px solid #0078d42e;justify-content:center;align-items:center;margin:0 auto 12px;display:flex}.login-logo-box{border:1.5px solid var(--color-border);width:90px;height:108px;transition:transform var(--transition-normal), box-shadow var(--transition-normal);cursor:pointer;background-color:#0b0f19;border-radius:12px;justify-content:center;align-items:center;margin:10px auto 14px;display:flex;overflow:hidden;box-shadow:0 4px 18px #00000029}.login-logo-box:hover{transform:scale(1.05);box-shadow:0 8px 24px #00000038}.login-logo-img{object-fit:contain;width:100%;height:100%;display:block}.login-error{background-color:var(--color-danger-light);color:var(--color-danger);border-radius:var(--radius-control);font-size:var(--font-size-caption);line-height:var(--line-height-caption);margin-bottom:var(--space-md);text-align:center;border:1px solid #d1343833;padding:8px 12px}.page-header{margin-bottom:var(--space-lg)}.page-title{font-size:var(--font-size-title-1);line-height:var(--line-height-title-1);font-weight:var(--font-weight-semibold);color:var(--color-text);letter-spacing:-.01em}.page-subtitle{font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text-secondary);margin-top:4px}.course-meta-grid{font-size:var(--font-size-body);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;display:grid}@media (width<=480px){.course-meta-grid{grid-template-columns:1fr;gap:8px}}.course-meta-item{background-color:var(--color-bg-hover);border-radius:var(--radius-md);border:1px solid var(--color-border);transition:all var(--transition-fast);flex-direction:column;justify-content:space-between;padding:12px 14px;display:flex}.course-meta-item:hover{background-color:var(--color-bg-card);border-color:var(--color-border-hover);box-shadow:var(--shadow-xs)}.course-meta-label{font-size:var(--font-size-caption);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.course-meta-val{color:var(--color-text);margin-top:4px;font-size:.938rem;font-weight:600}.course-meta-sub{font-size:var(--font-size-caption);color:var(--color-text-muted);margin-top:2px}.attendance-panel{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-container);padding:var(--space-xl);max-width:760px;box-shadow:var(--shadow-md);transition:all var(--transition-normal);margin:0 auto 24px;position:relative}.attendance-panel:before{content:none!important;display:none!important}.attendance-subject-header{border-bottom:1px solid var(--color-border);padding-bottom:16px}.attendance-subject{background-color:var(--color-bg-hover);border:1px solid var(--color-border-solid);border-radius:var(--radius-control);transition:all var(--transition-fast);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.attendance-subject:hover{border-color:var(--color-text-muted)}.attendance-subject h3{font-size:var(--font-size-subtitle);line-height:var(--line-height-subtitle);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0}.attendance-subject .arrow-icon{border-radius:var(--radius-control);background-color:var(--color-bg-card);border:1px solid var(--color-border);width:28px;height:28px;color:var(--color-text-secondary);transition:transform var(--transition-normal);flex-shrink:0;justify-content:center;align-items:center;display:flex}.attendance-subject.expanded .arrow-icon{color:var(--color-text);transform:rotate(180deg)}.admin-nav-tabs{background-color:var(--color-bg-hover);border:1px solid var(--color-border);border-radius:var(--radius-container);-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:4px;margin-bottom:24px;padding:4px;display:flex;overflow-x:auto}.admin-nav-tabs::-webkit-scrollbar{display:none}.admin-nav-tab{height:38px;min-height:38px;font-size:var(--font-size-body);color:var(--color-text-secondary);border-radius:var(--radius-control);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:0 0;border:1px solid #0000;flex:auto;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-weight:500;display:inline-flex}.admin-nav-tab:hover{color:var(--color-text);background-color:#ffffff0f}.admin-nav-tab.active{color:var(--color-primary);background-color:var(--color-bg-card);border-color:var(--color-border-solid);box-shadow:var(--shadow-sm);font-weight:600}.admin-nav-tab .tab-badge{font-size:var(--font-size-caption,.75rem);background-color:var(--color-primary-light);color:var(--color-primary);border-radius:999px;padding:1px 6px;font-weight:700}.attendance-options{flex-direction:column;gap:8px;margin-top:14px;display:flex}.attendance-option{border:1px solid var(--color-border-solid);border-radius:var(--radius-control);cursor:pointer;transition:all var(--transition-fast);background-color:var(--color-bg-card);text-align:left;width:100%;color:var(--color-text);font-size:var(--font-size-body);align-items:center;gap:12px;padding:12px 16px;display:flex;position:relative}.attendance-option:before{content:none!important;display:none!important}.attendance-option:hover{border-color:var(--color-text-muted);background-color:var(--color-bg-hover)}.attendance-option .option-icon-box{border-radius:var(--radius-control);background-color:var(--color-bg-hover);width:32px;height:32px;color:var(--color-text-secondary);border:1px solid var(--color-border);transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.attendance-option-hadir.selected{border-color:var(--color-status-hadir);background-color:var(--color-status-hadir-bg)}.attendance-option-hadir.selected .option-icon-box{background-color:var(--color-status-hadir);color:#fff;border-color:var(--color-status-hadir)}.attendance-option-izin.selected{border-color:var(--color-status-izin);background-color:var(--color-status-izin-bg)}.attendance-option-izin.selected .option-icon-box{background-color:var(--color-status-izin);color:#fff;border-color:var(--color-status-izin)}.attendance-option-sakit.selected{border-color:var(--color-status-sakit);background-color:var(--color-status-sakit-bg)}.attendance-option-sakit.selected .option-icon-box{background-color:var(--color-status-sakit);color:#fff;border-color:var(--color-status-sakit)}.attendance-option .option-dot{border:2px solid var(--color-border-solid);width:16px;height:16px;transition:all var(--transition-fast);background-color:var(--color-bg-card);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;display:flex}.attendance-option-hadir.selected .option-dot{border-color:var(--color-status-hadir);background-color:var(--color-status-hadir)}.attendance-option-izin.selected .option-dot{border-color:var(--color-status-izin);background-color:var(--color-status-izin)}.attendance-option-sakit.selected .option-dot{border-color:var(--color-status-sakit);background-color:var(--color-status-sakit)}.attendance-option.selected .option-dot:after{content:"";background-color:#fff;border-radius:50%;width:6px;height:6px}.attendance-done-msg{text-align:center;padding:var(--space-xl) var(--space-md)}.attendance-done-msg .check-icon{border-radius:var(--radius-container);background-color:var(--color-success-light);width:48px;height:48px;color:var(--color-success);margin:0 auto var(--space-md);border:1px solid #107c1033;justify-content:center;align-items:center;display:flex}.attendance-done-msg h3{font-size:var(--font-size-subtitle);line-height:var(--line-height-subtitle);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:4px}.attendance-done-msg p{font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text-secondary)}.file-upload-zone{border:1px dashed var(--color-border-solid);border-radius:var(--radius-container);text-align:center;cursor:pointer;transition:all var(--transition-fast);background-color:var(--color-bg-hover);padding:24px 16px;position:relative}.file-upload-zone:hover,.file-upload-zone.dragging{border-color:var(--color-primary);background-color:var(--color-primary-light)}.file-upload-zone svg{width:28px;height:28px;color:var(--color-text-secondary);transition:color var(--transition-fast);margin-bottom:6px}.file-upload-zone:hover svg{color:var(--color-primary)}.file-upload-zone p{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0}.file-upload-zone .upload-hint{font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-text-muted);margin-top:4px;display:inline-block}.file-preview{background-color:var(--color-bg-card);border:1px solid var(--color-border-solid);border-radius:var(--radius-control);box-shadow:var(--shadow-card);transition:all var(--transition-fast);align-items:center;gap:12px;margin-top:10px;padding:8px 12px;display:flex}.file-preview:hover{border-color:var(--color-text-muted)}.file-preview-icon{border-radius:var(--radius-control);background-color:var(--color-primary-light);width:36px;height:36px;color:var(--color-primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-preview-info{flex:1;min-width:0}.file-preview-info .file-name{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-preview-info .file-size{font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-text-muted)}.tabs{background-color:var(--color-bg-hover);border:1px solid var(--color-border);border-radius:var(--radius-control);margin-bottom:var(--space-lg);gap:2px;max-width:100%;padding:2px;display:inline-flex;overflow-x:auto}.tab{height:32px;min-height:32px;font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);border-radius:var(--radius-control);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0 14px;display:inline-flex}.tab:hover{color:var(--color-text);background-color:#ffffff0a}.tab.active{color:var(--color-text);background-color:var(--color-bg-card);border-color:var(--color-border-solid);font-weight:var(--font-weight-semibold);box-shadow:var(--shadow-card)}.notification-panel{background-color:var(--color-bg-card);border-left:1px solid var(--color-border);width:380px;height:calc(100vh - 54px);z-index:var(--z-dropdown);padding:var(--space-md);transition:right var(--transition-slow);box-shadow:var(--shadow-dialog);visibility:hidden;pointer-events:none;position:fixed;top:54px;right:-400px;overflow-y:auto}@media (width>=769px){.notification-panel{height:calc(100vh - 56px);top:56px}}@media (width>=1025px){.notification-panel{height:calc(100vh - 58px);top:58px}}.notification-panel.open{visibility:visible;pointer-events:auto;right:0}.notification-item{border-radius:var(--radius-control);border:1px solid var(--color-border-solid);margin-bottom:var(--space-xs);transition:all var(--transition-fast);cursor:pointer;padding:10px 12px}.notification-item:hover{background-color:var(--color-bg-hover)}.notification-item.unread{background-color:var(--color-primary-subtle);border-color:#0078d44d}.notification-item .notif-title{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:2px}.notification-item .notif-message{font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-text-secondary)}.notification-item .notif-time{font-size:var(--font-size-caption);color:var(--color-text-muted);margin-top:4px}.avatar{object-fit:cover;background-color:var(--color-primary-light);color:var(--color-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.avatar-sm{width:28px;height:28px;font-size:11px}.avatar-md{width:36px;height:36px;font-size:13px}.avatar-lg{width:64px;height:64px;font-size:20px}.avatar-xl{width:96px;height:96px;font-size:32px}.session-timer{align-items:center;gap:var(--space-sm);background-color:var(--color-warning-light);border-radius:var(--radius-control);font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);color:var(--color-warning);border:1px solid #d83b0133;padding:4px 10px;display:flex}.session-timer.urgent{background-color:var(--color-danger-light);color:var(--color-danger);border-color:#d1343833}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;display:flex}.empty-state svg{width:32px;height:32px;color:var(--color-text-muted);margin-bottom:12px}.empty-state h3{font-size:var(--font-size-subtitle);line-height:var(--line-height-subtitle);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:4px}.empty-state p{font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text-secondary);max-width:380px;margin:0 auto}.toast-container{top:60px;right:var(--space-md);z-index:var(--z-notification);gap:var(--space-sm);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{border-radius:var(--radius-container);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);box-shadow:var(--shadow-dialog);border:1px solid var(--color-border);align-items:center;gap:var(--space-sm);pointer-events:auto;min-width:280px;max-width:400px;padding:10px 16px;display:flex}.toast-success{background-color:var(--color-success);color:#fff}.toast-error{background-color:var(--color-danger);color:#fff}.toast-info{background-color:var(--color-primary);color:#fff}.theme-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.theme-option{border:1px solid var(--color-border-solid);border-radius:var(--radius-container);padding:var(--space-md);cursor:pointer;transition:all var(--transition-fast);text-align:center;background:var(--color-bg-card);width:100%}.theme-option:hover{border-color:var(--color-primary);box-shadow:var(--shadow-card-hover)}.theme-option.selected{border-color:var(--color-primary);background-color:var(--color-primary-subtle)}.theme-swatch{border-radius:var(--radius-control);width:100%;height:36px;margin-bottom:var(--space-xs);border:1px solid var(--color-border)}.theme-option .theme-name{font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);color:var(--color-text)}.dark-mode-toggle{background-color:var(--color-border-solid);cursor:pointer;width:44px;height:22px;transition:background-color var(--transition-fast);border:none;border-radius:11px;position:relative}.dark-mode-toggle.active{background-color:var(--color-primary)}.dark-mode-toggle .toggle-knob{width:16px;height:16px;transition:transform var(--transition-fast);box-shadow:var(--shadow-card);background-color:#fff;border-radius:50%;position:absolute;top:3px;left:3px}.dark-mode-toggle.active .toggle-knob{transform:translate(22px)}.calendar-grid{background-color:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-container);box-shadow:var(--shadow-card);grid-template-columns:repeat(7,1fr);gap:1px;display:grid;overflow:hidden}.calendar-header-cell{background-color:var(--color-bg-hover);text-align:center;font-size:var(--font-size-caption);line-height:var(--line-height-caption);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;padding:8px 4px}.calendar-cell{background-color:var(--color-bg-card);text-align:center;min-height:52px;font-size:var(--font-size-body);font-feature-settings:"tnum" 1;cursor:pointer;transition:all var(--transition-fast);color:var(--color-text);border:none;flex-direction:column;justify-content:flex-start;align-items:center;padding:6px 4px;display:flex;position:relative}.calendar-cell:hover{background-color:var(--color-bg-hover)}.calendar-cell.today{background-color:var(--color-primary-subtle);color:var(--color-primary);font-weight:var(--font-weight-semibold)}.calendar-cell.has-event{position:relative}.calendar-cell.has-event:after{display:none}.calendar-cell.other-month{background-color:var(--color-bg);color:var(--color-text-muted);opacity:.45;cursor:default}@media (width<=768px){.main-content{min-height:calc(100vh - 66px);padding:66px 14px 32px}.content-wrapper{padding-top:66px}.navbar{height:52px;padding:0}.navbar-container{padding:0 14px}.navbar-brand h1{font-size:var(--font-size-subtitle);letter-spacing:-.01em}.navbar-brand span{padding:2px 6px;font-size:11px}.navbar-actions{gap:4px}.navbar-icon-btn,.hamburger-btn{width:32px;height:32px}.page-header{margin-bottom:12px}.page-title{font-size:var(--font-size-title-2);line-height:var(--line-height-title-2)}.page-subtitle{font-size:var(--font-size-caption)}.card{border-radius:var(--radius-container);margin-bottom:12px;padding:16px}.card-header{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}.card-header>div:last-child{flex-wrap:wrap;gap:8px;width:100%;display:flex}.card-header .btn{flex:auto;justify-content:center}.stat-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}.stat-card{border-radius:var(--radius-container);padding:12px}.stat-card-title{font-size:var(--font-size-caption)}.stat-card-value{font-size:var(--font-size-subtitle)}.form-group{margin-bottom:12px}.form-label{font-size:var(--font-size-caption);margin-bottom:4px}.form-input,.form-textarea,.form-select{border-radius:var(--radius-control);height:38px;min-height:38px;padding:0 10px;font-size:16px!important}.form-textarea{height:auto;min-height:80px;padding:8px 10px}.btn{height:36px;min-height:36px;font-size:var(--font-size-body);border-radius:var(--radius-control);touch-action:manipulation;padding:0 14px}.btn-sm{height:30px;min-height:30px;font-size:var(--font-size-caption);padding:0 10px}.attendance-panel{border-radius:var(--radius-container);max-width:100%;padding:16px}.attendance-subject{border-radius:var(--radius-control);padding:10px 12px}.attendance-subject h3{font-size:var(--font-size-body)}.attendance-options{gap:6px;margin-top:10px}.attendance-option{border-radius:var(--radius-control);min-height:44px;padding:10px 12px}.table-container{-webkit-overflow-scrolling:touch;border-radius:var(--radius-container);width:100%;margin-bottom:8px;overflow-x:auto}.table{min-width:520px}.table th,.table td{font-size:var(--font-size-caption);white-space:nowrap;padding:8px 10px}.tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;gap:4px;margin-bottom:12px;padding-bottom:2px;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{height:32px;min-height:32px;font-size:var(--font-size-caption);flex-shrink:0;padding:0 12px}.modal-overlay,.modal-backdrop{align-items:flex-end;padding:0}.modal,.modal-content{max-height:88vh;margin:0;padding:18px 16px 24px;animation:.24s cubic-bezier(.16,1,.3,1) forwards modalSlideUp;border-radius:8px 8px 0 0!important;width:100%!important;max-width:100%!important}.modal-header{margin-bottom:12px}.modal-title{font-size:var(--font-size-subtitle)}.modal-footer{flex-direction:column-reverse;gap:8px;margin-top:14px;padding-top:10px}.modal-footer .btn{justify-content:center;width:100%}.sidebar{width:min(280px,85vw);padding:58px 12px 12px}.sidebar-item{min-height:36px;font-size:var(--font-size-body);padding:8px 10px}.notification-panel{width:100%;height:calc(100vh - 50px);top:50px;right:-100%}.login-container{padding:12px}.login-card{border-radius:var(--radius-container);padding:24px 16px}.login-header h1{font-size:var(--font-size-title-2)}.toast-container{pointer-events:none;width:auto;max-width:none;inset:auto 16px 16px}.toast{width:100%;font-size:var(--font-size-caption);pointer-events:auto}.theme-grid{grid-template-columns:repeat(2,1fr);gap:8px}}@media (width<=480px){.stat-grid{grid-template-columns:1fr;gap:8px}.navbar-brand h1{font-size:.875rem}.navbar-brand span{display:none}.page-title{font-size:1.15rem}.theme-grid{grid-template-columns:1fr}}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.text-primary{color:var(--color-primary)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-warning{color:var(--color-warning)}.text-sm{font-size:.813rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.w-full{width:100%}@media print{body{color:#000!important;background:#fff!important}.navbar,.sidebar,.sidebar-overlay,.tabs,.modal-close,.no-print{display:none!important}.content-wrapper{padding-top:0!important}.modal-backdrop{background:0 0!important;padding:0!important;display:block!important;position:static!important}.modal-content{box-shadow:none!important;color:#000!important;background:#fff!important;border:none!important;width:100%!important;max-width:100%!important;padding:0!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:1s linear infinite spin}@keyframes solidPulse{0%,to{opacity:1}50%{opacity:.45}}.skeleton{background-color:var(--color-border);border-radius:var(--radius-control);animation:1.4s ease-in-out infinite solidPulse}.dark .skeleton,[data-theme=dark] .skeleton{background-color:var(--color-border)}.skeleton-text{border-radius:var(--radius-xs);height:14px;margin-bottom:8px}.skeleton-title{border-radius:var(--radius-xs);width:50%;height:22px;margin-bottom:12px}.skeleton-box{border-radius:var(--radius-control)}.uas-progress-container{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-container);margin-bottom:20px;padding:18px 20px}.uas-bar-outer{background-color:var(--color-bg-hover);border:1px solid var(--color-border);border-radius:var(--radius-control);height:20px;margin:28px 0 16px;position:relative;overflow:visible}.uas-bar-inner{border-radius:3px 0 0 3px;height:100%;transition:width .6s cubic-bezier(.1,.9,.2,1)}.uas-bar-inner.success{background-color:var(--color-status-hadir)}.uas-bar-inner.warning{background-color:var(--color-status-izin)}.uas-bar-inner.danger{background-color:var(--color-status-alpha)}.uas-milestone-marker{z-index:3;background-color:#dc2626;width:2px;position:absolute;top:-8px;bottom:-8px;left:45%}.uas-milestone-label{color:#fff;border-radius:var(--radius-xs);white-space:nowrap;letter-spacing:.3px;background-color:#dc2626;padding:1px 6px;font-size:.75rem;font-weight:700;position:absolute;top:-24px;left:45%;transform:translate(-50%)}.uas-milestone-label:after{content:"";border:4px solid #0000;border-top-color:#dc2626;border-bottom-width:0;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.attendance-sticker-overlay{z-index:9999;-webkit-backdrop-filter:blur(8px);cursor:pointer;-webkit-user-select:none;user-select:none;background:#030712c7;flex-direction:column;justify-content:center;align-items:center;padding:20px;animation:.25s ease-out forwards stickerOverlayFadeIn;display:flex;position:fixed;inset:0}.attendance-sticker-overlay.closing{animation:.25s ease-in forwards stickerOverlayFadeOut}.attendance-sticker-container{pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.attendance-sticker-shockwave{pointer-events:none;border:3px solid #38bdf8e6;border-radius:50%;width:140px;height:140px;margin-top:-70px;margin-left:-70px;animation:1.8s cubic-bezier(.1,.8,.3,1) infinite stickerShockwaveRing;position:absolute;top:50%;left:50%;box-shadow:0 0 25px #38bdf8cc,inset 0 0 20px #0ea5e999}.attendance-sticker-shockwave.delay-1{animation-delay:.5s}.attendance-sticker-aura{filter:blur(14px);pointer-events:none;background-color:#2563eb40;border-radius:50%;width:270px;height:270px;animation:2s ease-in-out infinite alternate stickerAuraPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.attendance-sticker-wrapper{aspect-ratio:1;z-index:2;justify-content:center;align-items:center;width:min(270px,75vw);height:auto;animation:.45s cubic-bezier(.34,1.56,.64,1) forwards stickerPopIn;display:flex;position:relative}.attendance-sticker-overlay.closing .attendance-sticker-wrapper{animation:.25s cubic-bezier(.4,0,.2,1) forwards stickerPopOut}.attendance-sticker-img{object-fit:contain;filter:drop-shadow(0 0 22px #38bdf8cc)drop-shadow(0 8px 32px #0284c799);will-change:transform;width:100%;height:100%;animation:2.2s ease-in-out infinite alternate stickerFloat}.attendance-sticker-badge{color:#fff;letter-spacing:.3px;z-index:3;background-color:#2563eb;border-radius:9999px;align-items:center;gap:8px;margin-top:18px;padding:8px 18px;font-size:.875rem;font-weight:700;animation:.4s ease-out .15s both stickerBadgeSlideUp;display:inline-flex;box-shadow:0 4px 18px #2563eb66}.attendance-sticker-hint{color:#e0f2febf;letter-spacing:.2px;z-index:3;margin-top:8px;font-size:.75rem;animation:.4s ease-out .25s both stickerBadgeSlideUp}@keyframes stickerPopIn{0%{opacity:0;transform:scale(.2)rotate(-8deg)}70%{opacity:1;transform:scale(1.12)rotate(2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes stickerPopOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.35)rotate(6deg)}}@keyframes stickerFloat{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-8px)rotate(1.2deg)}to{transform:translateY(2px)rotate(-1deg)}}@keyframes stickerShockwaveRing{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(2.6)}}@keyframes stickerAuraPulse{0%{opacity:.5;transform:translate(-50%,-50%)scale(.85)}to{opacity:.9;transform:translate(-50%,-50%)scale(1.2)}}@keyframes stickerOverlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes stickerOverlayFadeOut{0%{opacity:1}to{opacity:0}}@keyframes stickerBadgeSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}