@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--primary: #0B1F3A;--primary-light: #132d52;--secondary: #F5F7FA;--accent: #6366F1;--accent-light: #818CF8;--accent-dark: #4F46E5;--teal: #14B8A6;--teal-light: #2DD4BF;--violet: #8B5CF6;--rose: #F43F5E;--amber: #F59E0B;--success: #10B981;--error: #EF4444;--warning: #F59E0B;--info: #6366F1;--text-primary: #0F172A;--text-secondary: #64748B;--text-muted: #94A3B8;--text-on-dark: #F1F5F9;--surface: rgba(255, 255, 255, .72);--surface-hover: rgba(255, 255, 255, .88);--surface-elevated: rgba(255, 255, 255, .92);--border: rgba(148, 163, 184, .2);--border-strong: rgba(148, 163, 184, .35);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-12: 12px;--spacing-16: 16px;--spacing-20: 20px;--spacing-24: 24px;--spacing-32: 32px;--spacing-48: 48px;--radius-6: 6px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .06);--shadow-glow-accent: 0 0 24px rgba(99, 102, 241, .15);--shadow-glow-teal: 0 0 24px rgba(20, 184, 166, .15);--glass-bg: rgba(255, 255, 255, .6);--glass-border: rgba(255, 255, 255, .3);--glass-blur: 16px;--gradient-primary: linear-gradient(135deg, #0B1F3A 0%, #1E3A5F 100%);--gradient-accent: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);--gradient-teal: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);--gradient-warm: linear-gradient(135deg, #F59E0B 0%, #F43F5E 100%);--gradient-success: linear-gradient(135deg, #10B981 0%, #14B8A6 100%);--gradient-body: linear-gradient(135deg, #EEF2FF 0%, #F0FDFA 30%, #FFF7ED 60%, #F5F7FA 100%);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--gradient-body);background-attachment:fixed;color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--primary);margin-bottom:var(--spacing-16);letter-spacing:-.02em;line-height:1.3}h1{font-size:28px;font-weight:800}h2{font-size:20px;font-weight:700}h3{font-size:16px;font-weight:600}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-dark)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-24)}.card{background:var(--surface);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:var(--radius-16);border:1px solid var(--border);box-shadow:var(--shadow-md);padding:var(--spacing-24);margin-bottom:var(--spacing-24);transition:box-shadow var(--transition-base),transform var(--transition-base),border-color var(--transition-base)}.card:hover{box-shadow:var(--shadow-lg);border-color:var(--border-strong)}.card-header{margin-bottom:var(--spacing-20);padding-bottom:var(--spacing-16);border-bottom:1px solid var(--border)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:var(--radius-8);font-weight:600;cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;font-family:var(--font-family);font-size:14px;letter-spacing:.01em;position:relative;overflow:hidden;gap:8px}.btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:0;transition:opacity var(--transition-fast);background:linear-gradient(180deg,#ffffff26,#fff0)}.btn:hover:before{opacity:1}.btn-primary{background:var(--gradient-accent);color:#fff;box-shadow:0 2px 8px #6366f140}.btn-primary:hover{box-shadow:0 4px 16px #6366f159;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0);box-shadow:0 1px 4px #6366f133}.btn-secondary{background:var(--surface);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:var(--border-strong);color:var(--text-primary)}.btn-secondary:hover{background:var(--surface-hover);border-color:var(--accent-light);color:var(--accent-dark)}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef444440}.btn-danger:hover{box-shadow:0 4px 16px #ef444459;transform:translateY(-1px)}.input-group{margin-bottom:var(--spacing-16)}.input-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-6);letter-spacing:.02em;text-transform:uppercase}.input-field{width:100%;padding:11px 14px;border:1.5px solid var(--border-strong);border-radius:var(--radius-8);font-family:var(--font-family);font-size:14px;background:var(--surface);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.input-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #6366f11f,var(--shadow-sm);background:var(--surface-elevated)}.input-field:disabled{background:var(--secondary);color:var(--text-muted);cursor:not-allowed;opacity:.7}.input-field::placeholder{color:var(--text-muted)}select.input-field{-webkit-appearance:none;-moz-appearance:none;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='%2364748B' 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-repeat:no-repeat;background-position:right 12px center;padding-right:36px}textarea.input-field{resize:vertical;min-height:80px}.table-container{overflow-x:auto;border-radius:var(--radius-12)}.table-container table{width:100%;border-collapse:collapse;text-align:left}.table-container thead{background:linear-gradient(135deg,#6366f10f,#8b5cf60a);border-bottom:2px solid var(--border)}.table-container thead th{padding:14px 16px;font-weight:700;font-size:12px;color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase}.table-container tbody tr{border-bottom:1px solid var(--border);transition:background var(--transition-fast)}.table-container tbody tr:nth-child(2n){background:#6366f105}.table-container tbody tr:hover{background:#6366f10d}.table-container td{padding:14px 16px;font-size:14px}.progress-bar{display:flex;gap:6px;margin-bottom:24px}.progress-step{flex:1;height:5px;border-radius:var(--radius-full);background-color:var(--border-strong);transition:all var(--transition-base);position:relative;overflow:hidden}.progress-step.active{background:var(--gradient-accent);box-shadow:0 0 12px #6366f14d}.progress-step.active:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite}.progress-step.completed{background:var(--gradient-success)}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;letter-spacing:.02em}.status-badge:before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-completed{background:#10b9811a;color:#059669}.status-completed:before{background:#10b981}.status-progress{background:#6366f11a;color:#4f46e5}.status-progress:before{background:#6366f1}.status-pending{background:#f59e0b1a;color:#d97706}.status-pending:before{background:#f59e0b}.status-hold{background:#ef44441a;color:#dc2626}.status-hold:before{background:#ef4444}.stat-card{position:relative;overflow:hidden}.stat-card .stat-icon{width:48px;height:48px;border-radius:var(--radius-12);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-16)}.stat-card .stat-value{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:4px;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-card .stat-label{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.stat-card:after{content:"";position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;opacity:.06;pointer-events:none}.stat-accent:after{background:var(--accent)}.stat-teal:after{background:var(--teal)}.stat-violet:after{background:var(--violet)}.stat-warm:after{background:var(--amber)}.toast-container{position:fixed;top:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:12px}.toast{padding:14px 20px;border-radius:var(--radius-12);color:#fff;font-size:14px;font-weight:500;box-shadow:var(--shadow-xl);animation:toastSlideIn .4s var(--transition-spring) forwards;min-width:300px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;gap:10px}.toast:before{content:"";width:20px;height:20px;flex-shrink:0;border-radius:50%;background:#ffffff40}.toast-success{background:linear-gradient(135deg,#10b981eb,#14b8a6eb)}.toast-error{background:linear-gradient(135deg,#ef4444eb,#dc2626eb)}.toast-info{background:linear-gradient(135deg,#6366f1eb,#8b5cf6eb)}.role-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;letter-spacing:.02em}.role-admin{background:linear-gradient(135deg,#ef44441a,#dc26260d);color:#dc2626}.role-hr{background:linear-gradient(135deg,#a855f71a,#8b5cf60d);color:#7c3aed}.role-manager{background:linear-gradient(135deg,#f59e0b1a,#ea580c0d);color:#d97706}.role-employee{background:linear-gradient(135deg,#6366f11a,#4f46e50d);color:#4f46e5}.role-workflow{background:linear-gradient(135deg,#10b9811a,#14b8a60d);color:#059669}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172a99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:fadeIn .2s ease-out}.modal-overlay .card{animation:modalSlideUp .35s var(--transition-spring) forwards}.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}.empty-state-icon{width:64px;height:64px;border-radius:50%;background:var(--secondary);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease-out forwards}@keyframes staggerFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(3deg)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background-color:#6366f126;color:var(--text-primary)}@media (max-width: 768px){h1{font-size:22px}h2{font-size:17px}.container{padding:0 var(--spacing-16)}.card{padding:var(--spacing-16);border-radius:var(--radius-12)}.toast-container{top:auto;bottom:16px;right:16px;left:16px}.toast{min-width:unset}.table-mobile-cards table,.table-mobile-cards thead,.table-mobile-cards tbody,.table-mobile-cards th,.table-mobile-cards td,.table-mobile-cards tr{display:block}.table-mobile-cards thead{display:none}.table-mobile-cards tbody tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-12);padding:var(--spacing-12);margin-bottom:var(--spacing-12);display:grid;grid-template-columns:1fr 1fr;gap:8px}.table-mobile-cards tbody tr:hover{background:var(--surface-hover)}.table-mobile-cards td{padding:4px 0;font-size:13px}.table-mobile-cards td:before{content:attr(data-label);display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}.table-mobile-cards td:last-child{grid-column:1 / -1;border-top:1px solid var(--border);padding-top:8px;margin-top:4px}}@media (max-width: 480px){h1{font-size:20px}.btn{padding:9px 16px;font-size:13px}.stat-card .stat-value{font-size:28px}}