:root{--primary:#8b5cf6;--primary-hover:#a78bfa;--sidebar-bg:#1e1e24;--sidebar-hover:#2b2b36;--sidebar-active:#3f3f4e;--bg-color:#050505;--text-color:#f8fafc;--text-muted:#94a3b8;--border-color:#27272a;--glass-bg:#121214;--glass-border:#27272a;--glass-shadow:0 8px 32px 0 #00000080;--shift-d:#1d4ed8;--shift-e:#a16207;--shift-n:#1e293b;--shift-l:#be123c;--shift-d-text:#fff;--shift-e-text:#fff;--shift-n-text:#fff;--shift-l-text:#fff;--error:#ef4444;--warning:#fbbf24;--success:#10b981}[data-theme=light]{--primary:#6d28d9;--primary-hover:#5b21b6;--bg-color:#f8fafc;--text-color:#0f172a;--text-muted:#475569;--border-color:#e2e8f0;--glass-bg:#fff;--glass-border:#e2e8f0;--glass-shadow:0 4px 15px #0000000d;--shift-d:#dbeafe;--shift-e:#fef08a;--shift-n:#e2e8f0;--shift-l:#fecdd3;--shift-d-text:#1e40af;--shift-e-text:#854d0e;--shift-n-text:#0f172a;--shift-l-text:#9f1239}body{background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;margin:0;font-family:Outfit,Inter,system-ui,sans-serif;transition:background-color .3s,color .3s}*{box-sizing:border-box}.app-layout{flex-direction:column;gap:16px;min-height:100vh;padding:16px;display:flex}.top-navbar{background:var(--glass-bg);border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--text-color);z-index:100;justify-content:space-between;align-items:center;padding:12px 24px;transition:transform .3s;display:flex;position:sticky;top:0}.navbar-hidden{transform:translateY(-100%)}.navbar-brand h1{letter-spacing:1px;margin:0;font-size:1.5rem}.navbar-nav{gap:12px;display:flex}.navbar-actions{align-items:center;display:flex}.nav-link{color:#fff;background:#ffffff08;border:1px solid #0000;border-radius:16px;padding:16px 20px;font-size:1.05rem;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0)}.nav-link:hover{border:1px solid var(--glass-border);background:#ffffff1a;transform:translateY(-2px);box-shadow:0 6px 15px #0003}.nav-link.active{background:#fff3;border:1px solid #fff6;font-weight:600;box-shadow:0 4px 15px #0000004d}.btn-dev{color:#fff;border:1px solid var(--glass-border);cursor:pointer;background:#ffffff1a;border-radius:12px;padding:10px 20px;font-size:1rem;font-weight:600;transition:all .3s}.btn-dev:hover{background:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.main-content{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;flex-direction:column;flex:1;display:flex;position:relative}.page-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:24px 32px;display:flex}.page-title{text-shadow:0 2px 5px #0006;margin:0;font-size:2rem;font-weight:700}.dev-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;border:1px solid var(--glass-border);z-index:9999;background:#0f172ad9;border-radius:20px;width:320px;padding:24px;position:fixed;bottom:30px;right:30px;box-shadow:0 15px 40px #00000080}.dev-panel-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;display:flex}.dev-panel-header h3{margin:0;font-size:1.2rem}.close-btn{color:#fff9;cursor:pointer;background:0 0;border:none;font-size:1.8rem;transition:color .2s}.close-btn:hover{color:#fff}.dev-option{align-items:center;gap:12px;margin-bottom:16px;font-size:1rem;display:flex}.dev-option input{width:18px;height:18px;accent-color:var(--primary)}.btn{cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #0000;border-radius:12px;padding:10px 20px;font-size:1rem;font-weight:600;transition:all .3s}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px #8b5cf64d}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 16px #8b5cf680}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-danger{color:#fff;background:#ef4444cc;border:1px solid #ef444480}.btn-danger:hover{background:#ef4444;transform:translateY(-2px)}.btn-outline{border:1px solid var(--glass-border);color:#fff;background:#ffffff0d}.btn-outline:hover{background:#ffffff26;transform:translateY(-1px)}.btn-sm{border-radius:8px;padding:6px 12px;font-size:.85rem}.input-group{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.input-label{color:var(--text-color);font-size:.95rem;font-weight:500}.input-field{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-color);border-radius:12px;padding:12px 16px;font-family:inherit;font-size:1rem;transition:all .2s}.input-field:focus{background:#0000004d;border-color:#8b5cf6cc;outline:none;box-shadow:0 0 0 4px #8b5cf633}.input-field option{color:#fff;background:#1e293b}.input-error{border-color:var(--error)}.error-text{color:#fca5a5;margin-top:4px;font-size:.85rem}.roster-container{flex:1;padding:16px}.filters-bar{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;flex-wrap:wrap;align-items:flex-end;gap:16px;padding:16px;display:flex}.table-responsive-wrapper{border:1px solid var(--glass-border);background:var(--glass-bg);border-radius:12px;width:100%;overflow-x:auto}.roster-grid,.data-table{border-collapse:collapse;width:100%;min-width:800px}.roster-grid th,.roster-grid td,.data-table th,.data-table td{text-align:center;border:1px solid #ffffff1a;padding:16px}.roster-grid th,.data-table th{background:var(--glass-bg);color:var(--text-color);z-index:10;font-weight:600;position:sticky;top:0}.roster-grid td.staff-col,.data-table td.staff-col{text-align:left;background:var(--glass-bg);z-index:5;font-weight:500;position:sticky;left:0}.roster-grid th.staff-col,.data-table th.staff-col{z-index:15;position:sticky;left:0}.cell-interactive{cursor:pointer;min-width:90px;height:54px;transition:all .2s}.cell-interactive:hover{background:#ffffff1a}.cell-interactive:focus{outline-offset:-2px;outline:2px solid #8b5cf6cc}.shift-badge{border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-weight:700;display:inline-flex;box-shadow:0 2px 8px #0003}.shift-badge.D{background:var(--shift-d);color:var(--shift-d-text);border:1px solid #60a5fa4d}.shift-badge.E{background:var(--shift-e);color:var(--shift-e-text);border:1px solid #facc154d}.shift-badge.N{background:var(--shift-n);color:var(--shift-n-text);border:1px solid #1e293b4d}.shift-badge.L{background:var(--shift-l);color:var(--shift-l-text);border:1px solid #f43f5e4d}.coverage-row td{background:#0003;font-size:.85rem}.coverage-item{justify-content:space-between;margin-bottom:6px;display:flex}.coverage-warning{color:var(--warning);text-shadow:0 0 8px #fbbf2480;font-weight:700}.coverage-error{color:#fca5a5;text-shadow:0 0 8px #ef444480;font-weight:700}.drawer-overlay{z-index:40;background:#00000080;position:absolute;inset:0}.drawer{-webkit-backdrop-filter:blur(24px);border-left:1px solid var(--glass-border);z-index:50;background:#1e1b4bf2;flex-direction:column;width:450px;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideIn;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-10px 0 30px #00000080}@keyframes slideIn{to{transform:translate(0)}}.drawer-header{background:#0003;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:24px;display:flex}.drawer-content{flex:1;padding:28px;overflow-y:auto}.drawer-footer{background:#0003;border-top:1px solid #ffffff1a;justify-content:flex-end;gap:16px;padding:24px;display:flex}.violation-banner{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;margin-bottom:16px;padding:14px 16px;font-size:.95rem}.violation-banner.ERROR{color:#fca5a5;background:#ef444433;border:1px solid #ef444466}.violation-banner.WARNING{color:#fde68a;background:#f59e0b33;border:1px solid #f59e0b66}.loading-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:30;background:#0f172a99;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner{border:4px solid #ffffff1a;border-top-color:#8b5cf6;border-radius:50%;width:50px;height:50px;animation:1s cubic-bezier(.4,0,.2,1) infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dialog-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{border:1px solid var(--glass-border);color:#fff;background:#1e1b4bf2;border-radius:20px;width:450px;max-width:90%;padding:32px;box-shadow:0 25px 50px -12px #00000080}.dialog h3{margin-top:0;margin-bottom:20px;font-size:1.5rem}.dialog-actions{justify-content:flex-end;gap:16px;margin-top:32px;display:flex}.status-badge{border:1px solid #0000;border-radius:12px;padding:6px 12px;font-size:.85rem;font-weight:600}.status-badge.PENDING{color:#fde047;background:#eab30833;border-color:#eab30866}.status-badge.APPROVED{color:#6ee7b7;background:#10b98133;border-color:#10b98166}.status-badge.REJECTED{color:#fca5a5;background:#ef444433;border-color:#ef444466}@media (width<=768px){.top-navbar{flex-direction:column;gap:16px;padding:16px}.navbar-nav{flex-wrap:wrap;justify-content:center}.app-layout{gap:0;padding:0}.main-content{border-bottom:none;border-left:none;border-right:none;border-radius:0}.roster-container{padding:8px}.filters-bar{flex-direction:column;align-items:stretch}.filters-bar .input-group,.drawer{width:100%}}