@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
:root{--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-card:#1a1f35;--bg-card-hover:#222842;--bg-input:#151b2e;--bg-sidebar:#0d1117;--text-primary:#f0f4ff;--text-secondary:#94a3b8;--text-muted:#64748b;--text-accent:#818cf8;--border-color:#1e293b;--border-focus:#6366f1;--accent-primary:#6366f1;--accent-primary-hover:#818cf8;--accent-gradient:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a78bfa 100%);--success:#10b981;--success-bg:#10b9811f;--warning:#f59e0b;--warning-bg:#f59e0b1f;--error:#ef4444;--error-bg:#ef44441f;--info:#3b82f6;--info-bg:#3b82f61f;--glass-bg:#111827b3;--glass-border:#ffffff0f;--glass-blur:blur(20px);--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px #6366f126;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--sidebar-width:260px;--sidebar-collapsed-width:80px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.app-layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:100;flex-direction:column;padding:24px 0;transition:width .3s,transform .3s;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border-color);margin-bottom:8px;padding:0 20px 24px}.sidebar-logo{align-items:center;gap:12px;display:flex}.sidebar-logo-icon{background:var(--accent-gradient);border-radius:var(--radius-md);width:40px;height:40px;box-shadow:var(--shadow-glow);flex-shrink:0;justify-content:center;align-items:center;font-size:20px;display:flex}.sidebar-logo h1{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:16px;font-weight:700}.sidebar-logo p{color:var(--text-muted);margin-top:2px;font-size:11px}.sidebar-nav{-ms-overflow-style:none;scrollbar-width:none;flex:1;padding:8px 16px;overflow:hidden auto}.sidebar-nav::-webkit-scrollbar{display:none}.nav-section-label{letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);opacity:1;max-height:50px;padding:16px 12px 8px;font-size:10px;font-weight:700;transition:max-height .3s,padding .3s,opacity .3s;overflow:hidden}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;white-space:nowrap;align-items:center;gap:12px;margin-bottom:2px;padding:10px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover{background:var(--bg-card);color:var(--text-primary)}.nav-item.active{color:var(--accent-primary-hover);background:#6366f11f}.nav-item.active:before{content:"";background:var(--accent-primary);border-radius:0 4px 4px 0;width:3px;height:24px;position:absolute;left:0}.nav-icon{text-align:center;flex-shrink:0;width:24px;font-size:18px}.main-content{margin-left:var(--sidebar-width);flex:1;min-height:100vh;padding:32px;transition:margin-left .3s}.page-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.page-header h1{letter-spacing:-.5px;font-size:28px;font-weight:800}.page-header p{color:var(--text-secondary);margin-top:4px;font-size:14px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:32px;display:grid}.stat-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:24px;transition:all .3s;position:relative;overflow:hidden}.stat-card:before{content:"";background:var(--accent-gradient);opacity:0;height:3px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.stat-card:hover{box-shadow:var(--shadow-lg);border-color:#6366f133;transform:translateY(-2px)}.stat-card:hover:before{opacity:1}.stat-card-icon{margin-bottom:12px;font-size:28px}.stat-card-value{letter-spacing:-1px;background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:800}.stat-card-label{color:var(--text-secondary);margin-top:4px;font-size:13px;font-weight:500}.table-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}.table-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.table-header h2{font-size:16px;font-weight:700}table{border-collapse:collapse;width:100%}thead{background:#0003}th{text-align:left;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-color);padding:12px 20px;font-size:11px;font-weight:700}td{border-bottom:1px solid var(--border-color);color:var(--text-secondary);padding:14px 20px;font-size:14px}tr:last-child td{border-bottom:none}tr:hover td{background:var(--bg-card-hover)}.badge{letter-spacing:.3px;border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-error{background:var(--error-bg);color:var(--error)}.badge-info{background:var(--info-bg);color:var(--info)}.badge-muted{color:var(--text-muted);background:#64748b1f}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;align-items:center;gap:8px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-glow)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 30px #6366f14d}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{border-color:var(--accent-primary);background:var(--bg-card-hover)}.btn-sm{padding:6px 12px;font-size:12px}.btn-danger{background:var(--error-bg);color:var(--error);border:1px solid #ef444433}.btn-danger:hover{background:#ef444433}.form-group{margin-bottom:20px}.form-group label{color:var(--text-secondary);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-input,.form-select,.form-textarea{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--border-focus);outline:none;box-shadow:0 0 0 3px #6366f11a}.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);width:90%;max-width:560px;max-height:80vh;box-shadow:var(--shadow-lg);padding:32px;animation:.3s slideUp;overflow-y:auto}.modal h2{margin-bottom:24px;font-size:20px;font-weight:700}.modal-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.alert{border-radius:var(--radius-md);align-items:flex-start;gap:10px;margin-bottom:16px;padding:14px 18px;font-size:14px;display:flex}.alert-warning{background:var(--warning-bg);color:var(--warning);border:1px solid #f59e0b33}.alert-error{background:var(--error-bg);color:var(--error);border:1px solid #ef444433}.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #10b98133}.loading{color:var(--text-muted);justify-content:center;align-items:center;padding:60px;display:flex}.spinner{border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;width:32px;height:32px;margin-right:12px;animation:.8s linear infinite spin}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px}.empty-state-icon{margin-bottom:16px;font-size:48px}.empty-state h3{color:var(--text-secondary);margin-bottom:8px;font-size:16px;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width:768px){.sidebar{transform:translate(-100%)}.main-content{margin-left:0}.stats-grid{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}}.login-container{background:var(--bg-primary);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-container.employee{background:#f0f4ff}.login-bg-decor{z-index:0;position:absolute;inset:0}.login-bg-decor .circle1{filter:blur(100px);mix-blend-mode:screen;background:#6366f133;border-radius:50%;width:40%;height:40%;position:absolute;top:-10%;left:-10%}.login-bg-decor .circle2{filter:blur(100px);mix-blend-mode:screen;background:#10b98126;border-radius:50%;width:40%;height:40%;position:absolute;bottom:-10%;right:-10%}.employee .login-bg-decor .circle1{mix-blend-mode:multiply;background:#3b82f64d}.employee .login-bg-decor .circle2{mix-blend-mode:multiply;background:#a78bfa4d}.login-card{z-index:10;background:var(--glass-bg);width:100%;max-width:420px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);margin:20px;padding:40px;position:relative}.employee .login-card{color:#111827;background:#ffffffd9;border:1px solid #ffffff80;box-shadow:0 10px 40px #00000014}.login-header{text-align:center;margin-bottom:32px}.login-header .icon{background:var(--accent-gradient);width:64px;height:64px;box-shadow:var(--shadow-glow);border-radius:20px;justify-content:center;align-items:center;margin:0 auto 20px;font-size:28px;display:flex}.login-header h2{margin-bottom:8px;font-size:28px;font-weight:800}.employee .login-header h2{color:#1e293b}.login-header p{color:var(--text-muted);font-size:14px;font-weight:500}.login-input-group{margin-bottom:20px}.login-input-group label{color:var(--text-secondary);margin-bottom:8px;font-size:13px;font-weight:600;display:block}.employee .login-input-group label{color:#475569}.login-input{border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-primary);background:#0003;padding:14px 16px;font-family:inherit;font-size:15px;transition:all .2s}.employee .login-input{color:#0f172a;background:#fff;border:1px solid #cbd5e1;box-shadow:0 2px 4px #00000005}.login-input:focus{border-color:var(--accent-primary);background:#0000004d;outline:none;box-shadow:0 0 0 3px #6366f126}.employee .login-input:focus{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.login-btn{background:var(--accent-gradient);color:#fff;border-radius:var(--radius-md);cursor:pointer;width:100%;box-shadow:var(--shadow-glow);border:none;margin-top:10px;padding:14px;font-size:15px;font-weight:700;transition:all .2s}.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6366f166}.login-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.employee .login-btn{background:#0f172a;box-shadow:0 4px 12px #0f172a33}.employee .login-btn:hover{background:#1e293b;box-shadow:0 8px 20px #0f172a4d}.login-error{background:var(--error-bg);color:var(--error);border-radius:var(--radius-md);border:1px solid #ef444433;align-items:center;gap:8px;margin-bottom:24px;padding:12px 16px;font-size:13px;font-weight:500;display:flex}.login-footer{text-align:center;border-top:1px solid var(--border-color);color:var(--text-muted);margin-top:32px;padding-top:24px;font-size:12px}.employee .login-footer{color:#64748b;border-color:#e2e8f0}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar.collapsed .sidebar-logo h1,.sidebar.collapsed .sidebar-logo p,.sidebar.collapsed .nav-label{opacity:0;visibility:hidden;transition:opacity .2s}.sidebar.collapsed .nav-section-label{opacity:0;visibility:hidden;max-height:0;margin:0;padding-top:0;padding-bottom:0;transition:opacity .2s,max-height .3s,padding .3s}.sidebar-logo h1,.sidebar-logo p,.sidebar .nav-label{opacity:1;visibility:visible;transition:opacity .3s}.main-content.expanded{margin-left:var(--sidebar-collapsed-width)}