*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #05080f;--bg2: #080c18;--surface: #0e1422;--surface2: #131b2e;--surface3: #1a2440;--border: #1e2d47;--border2: #162035;--accent: #2e73f8;--accent2: #5a93ff;--accent-muted: rgba(46,115,248,.13);--accent-glow: rgba(46,115,248,.22);--success: #0fb981;--danger: #f04438;--warning: #f7a429;--info: #0bc5ea;--purple: #7c5cfc;--text: #dde4f0;--text2: #7a8ca8;--text3: #3d5068;--font-display: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--radius: 12px;--radius-sm: 8px;--radius-lg: 16px;--shadow: 0 4px 24px rgba(0,0,0,.55);--shadow-lg: 0 16px 56px rgba(0,0,0,.75);--shadow-accent: 0 6px 24px rgba(46,115,248,.3);--sidebar-w: 256px}[data-theme=light]{--bg: #f0f4fb;--bg2: #e8edf8;--surface: #ffffff;--surface2: #f4f7ff;--surface3: #edf1fc;--border: #dae0f5;--border2: #e8eefb;--accent: #1a60e8;--accent2: #3b7eff;--accent-muted: rgba(26,96,232,.09);--accent-glow: rgba(26,96,232,.16);--success: #059669;--danger: #dc2626;--warning: #d97706;--info: #0891b2;--purple: #6d28d9;--text: #0a1220;--text2: #475a7a;--text3: #8a9ab8;--shadow: 0 4px 24px rgba(10,18,32,.08);--shadow-lg: 0 16px 56px rgba(10,18,32,.14);--shadow-accent: 0 6px 24px rgba(26,96,232,.2)}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}#root{height:100%}a{text-decoration:none;color:inherit}button{cursor:pointer;font-family:var(--font-body)}h1,h2,h3,h4{font-family:var(--font-display)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--text3)}input,select,textarea{font-family:var(--font-body);background:var(--surface2);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted);background:var(--surface)}input::placeholder,textarea::placeholder{color:var(--text3);font-style:italic}select option{background:var(--surface);color:var(--text)}textarea{resize:vertical}label{display:block;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:var(--font-display)}.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;border:none;transition:all .2s cubic-bezier(.34,1.4,.64,1);white-space:nowrap;cursor:pointer;font-family:var(--font-body);letter-spacing:.01em}.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,#1650c8 100%);color:#fff;box-shadow:0 2px 10px var(--accent-glow),inset 0 1px #ffffff1a}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-accent);filter:brightness(1.1)}.btn-success{background:linear-gradient(135deg,var(--success),#067a52);color:#fff;box-shadow:0 2px 10px #0fb98133}.btn-success:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.btn-danger{background:linear-gradient(135deg,var(--danger),#b91c1c);color:#fff;box-shadow:0 2px 10px #f0443833}.btn-danger:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--border)}.btn-ghost:hover:not(:disabled){background:var(--surface2);color:var(--text);border-color:var(--text3);transform:translateY(-1px)}.btn-sm{padding:6px 14px;font-size:12px;gap:5px}.btn-xs{padding:4px 10px;font-size:11px;gap:4px}.btn-icon{padding:8px;border-radius:var(--radius-sm)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;filter:none!important}.card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:24px;transition:background .3s,border-color .3s}.card-hover{transition:all .22s cubic-bezier(.34,1.2,.64,1)}.card-hover:hover{border-color:#2e73f859;box-shadow:0 0 0 1px var(--accent-muted),var(--shadow);transform:translateY(-2px)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-display)}.badge-pending{background:#f7a4291f;color:var(--warning);border:1px solid rgba(247,164,41,.25)}.badge-approved,.badge-success{background:#0fb9811f;color:var(--success);border:1px solid rgba(15,185,129,.25)}.badge-rejected,.badge-danger{background:#f044381f;color:var(--danger);border:1px solid rgba(240,68,56,.25)}.badge-info{background:#0bc5ea1f;color:var(--info);border:1px solid rgba(11,197,234,.25)}.badge-purple{background:#7c5cfc1f;color:var(--purple);border:1px solid rgba(124,92,252,.25)}.form-grid{display:grid;gap:16px}.form-grid-2{grid-template-columns:1fr 1fr}.form-grid-3{grid-template-columns:1fr 1fr 1fr}.divider{border:none;border-top:1px solid var(--border2);margin:20px 0}.app-shell{display:flex;height:100vh;overflow:hidden}.app-main{flex:1;overflow-y:auto;background:var(--bg)}.app-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border2);display:flex;flex-direction:column;z-index:200;transition:transform .3s cubic-bezier(.4,0,.2,1)}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}.mobile-topbar{display:none;position:sticky;top:0;z-index:100;height:56px;background:var(--surface);border-bottom:1px solid var(--border2);padding:0 16px;align-items:center;justify-content:space-between;gap:12px}.mobile-menu-btn{background:none;border:none;color:var(--text2);padding:8px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .15s}.mobile-menu-btn:hover{background:var(--surface2);color:var(--text)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.animate-fade{animation:fadeIn .4s cubic-bezier(.34,1.2,.64,1) both}.animate-slide{animation:slideIn .35s cubic-bezier(.34,1.2,.64,1) both}.animate-scale{animation:scaleIn .3s cubic-bezier(.34,1.3,.64,1) both}.animate-up{animation:slideUp .4s cubic-bezier(.34,1.2,.64,1) both}.stagger-1{animation-delay:.04s}.stagger-2{animation-delay:.08s}.stagger-3{animation-delay:.13s}.stagger-4{animation-delay:.18s}.stagger-5{animation-delay:.23s}.loading{display:flex;align-items:center;justify-content:center;height:220px}.spinner{width:30px;height:30px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}.empty-state{text-align:center;padding:72px 24px;color:var(--text3)}.empty-state svg{opacity:.25;margin-bottom:16px}.empty-state p{font-size:15px;font-weight:500;color:var(--text2);margin-bottom:6px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;max-width:480px;width:100%;box-shadow:var(--shadow-lg);animation:scaleIn .25s cubic-bezier(.34,1.3,.64,1)}.theme-toggle{width:42px;height:23px;background:var(--border);border-radius:99px;position:relative;cursor:pointer;border:none;transition:background .3s;flex-shrink:0}.theme-toggle.active{background:var(--accent)}.theme-toggle:after{content:"";position:absolute;width:17px;height:17px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .3s cubic-bezier(.34,1.5,.64,1);box-shadow:0 1px 4px #00000059}.theme-toggle.active:after{transform:translate(19px)}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:500;transition:all .18s cubic-bezier(.34,1.2,.64,1);color:var(--text2);border:1px solid transparent;text-decoration:none}.nav-item:hover{background:var(--surface2);color:var(--text)}.nav-item.active{background:var(--accent-muted);color:var(--accent2);border-color:#2e73f833;font-weight:600}.nav-active-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 6px var(--accent-glow);margin-left:auto;flex-shrink:0;animation:blink 2.5s ease-in-out infinite}.data-table-wrap{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table thead tr{background:var(--surface2);border-bottom:1.5px solid var(--border)}.data-table th{padding:11px 14px;color:var(--text3);font-weight:700;font-family:var(--font-display);font-size:10px;text-transform:uppercase;letter-spacing:.07em;text-align:left;white-space:nowrap}.data-table tbody tr{border-bottom:1px solid var(--border2);transition:background .12s}.data-table tbody tr:hover{background:var(--surface2)}.data-table td{padding:12px 14px;vertical-align:middle}.data-table tbody tr:last-child{border-bottom:none}@media (max-width: 900px){.app-sidebar{position:fixed;top:0;left:0;bottom:0;transform:translate(-100%);box-shadow:var(--shadow-lg)}.app-sidebar.open{transform:translate(0)}.sidebar-overlay.open{display:block}.mobile-topbar{display:flex}.form-grid-2,.form-grid-3{grid-template-columns:1fr}.hide-mobile{display:none!important}}@media (max-width: 600px){.data-table{font-size:12px}.data-table th,.data-table td{padding:8px 10px}.modal-box{padding:18px}.card{padding:16px}.btn{font-size:13px}.btn-sm{padding:5px 11px;font-size:11.5px}}@media (max-width: 768px){.card{padding:16px!important}.form-grid-2{grid-template-columns:1fr!important}h1{font-size:20px!important}table{font-size:12px}.btn{font-size:12px;padding:8px 12px}input,select,textarea{font-size:14px!important}}@media (max-width: 480px){.card{padding:12px!important;border-radius:12px!important}h1{font-size:18px!important}}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px!important;cursor:pointer;transition:border-color .2s,box-shadow .2s}select:hover{border-color:var(--accent2, #3b82f6)}select:focus{border-color:var(--accent, #6c63ff);box-shadow:0 0 0 3px #6c63ff1f;outline:none}select option{background:var(--surface, #fff);color:var(--text, #0a1220);padding:8px 12px}input[type=date],input[type=datetime-local]{cursor:pointer;transition:border-color .2s,box-shadow .2s}input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;filter:var(--calendar-icon-filter, none);border-radius:4px;padding:2px;transition:opacity .2s}input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1;background:#6c63ff1a}[data-theme=dark] input[type=date]::-webkit-calendar-picker-indicator,[data-theme=dark] input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(1)}input:focus,textarea:focus{border-color:var(--accent, #6c63ff);box-shadow:0 0 0 3px #6c63ff1a;outline:none}