:root{--bg-page:#f1f5f9;--text-primary:#1e293b;--text-heading:#0f172a;--border-default:#e2e8f0;--border-subtle:#f1f5f9;--card-bg:#fff;--card-radius:12px;--card-shadow:0 1px 3px #0000000f;--card-shadow-hover:0 4px 12px #0000001f;--scrollbar-track:#f1f5f9;--scrollbar-thumb:#cbd5e1;--sidebar-bg:#0f172a;--sidebar-text:#94a3b8;--sidebar-text-dim:#64748b;--sidebar-text-faint:#475569;--sidebar-hover-bg:#1e293b;--sidebar-active-bg:#2563eb;--sidebar-border:#1e293b;--sidebar-icon-tile-bg:#2563eb;--login-gradient:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);--login-logo-gradient:linear-gradient(135deg,#1e3a5f,#2563eb);--login-footer-text:#94a3b8;--navy:#1e3a5f;--navy-hover:#1e40af;--blue-accent:#2563eb;--blue-focus:#3b82f6;--blue-focus-ring:#3b82f61a;--blue-bg-light:#eff6ff;--blue-border-light:#bfdbfe;--blue-text:#1d4ed8;--red-strong:#ef4444;--red-deep:#dc2626;--red-mid:#f87171;--red-border:#fca5a5;--red-bg:#fef2f2;--red-tile-border:#fca5a5;--orange-strong:#f97316;--orange-deep:#c2410c;--orange-mid:#fb923c;--orange-border:#fdba74;--orange-bg:#fff7ed;--orange-tile-border:#fdba74;--green-strong:#22c55e;--green-deep:#15803d;--green-mid:#4ade80;--green-border:#86efac;--green-bg:#f0fdf4;--green-tile-border:#86efac;--amber-strong:#f59e0b;--amber-bg:#fefce8;--amber-border:#fde68a;--amber-text:#92400e;--gray-50:#f8fafc;--gray-100:#f9fafb;--gray-200:#f5f5f5;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#64748b;--gray-700:#475569;--gray-800:#374151;--pill-neutral-bg:#f1f5f9;--pill-neutral-text:#475569;--pill-neutral-border:#e2e8f0;--radius-card:12px;--radius-pill:20px;--radius-btn:8px;--radius-alert:10px;--radius-logo:16px;--space-xxs:2px;--space-xs:4px;--space-sm:6px;--space-md:8px;--space-lg:10px;--space-xl:12px;--space-2xl:14px;--space-3xl:16px;--space-4xl:18px;--space-5xl:20px;--space-6xl:22px;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--sidebar-width:200px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-family);background:var(--bg-page);color:var(--text-primary)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{outline:none;font-family:inherit}a{color:inherit;text-decoration:none}.spin{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pulse{animation:2s infinite pulse}.card{background:var(--card-bg);border-radius:var(--radius-card);border:1px solid var(--border-default);box-shadow:var(--card-shadow)}.badge-red{background:var(--red-strong);color:#fff;border-radius:var(--radius-pill);padding:2px 8px;font-size:11px;font-weight:700}.badge-orange{background:var(--orange-strong);color:#fff;border-radius:var(--radius-pill);padding:2px 8px;font-size:11px;font-weight:700}.badge-green{background:var(--green-strong);color:#fff;border-radius:var(--radius-pill);padding:2px 8px;font-size:11px;font-weight:700}.nav-btn{border-radius:var(--radius-btn);width:100%;color:var(--sidebar-text);text-align:left;background:0 0;align-items:center;gap:8px;padding:9px 12px;font-size:12px;transition:all .15s;display:flex}.nav-btn:hover{background:var(--sidebar-hover-bg);color:#fff}.nav-btn.active{background:var(--sidebar-active-bg);color:#fff;font-weight:600}.dept-btn{border-radius:var(--radius-btn);width:100%;color:var(--sidebar-text);text-align:left;background:0 0;align-items:center;gap:7px;padding:7px 12px;font-size:11px;transition:all .15s;display:flex}.dept-btn:hover{background:var(--sidebar-hover-bg);color:#fff}.dept-btn.active{background:var(--sidebar-active-bg);color:#fff}.kpi-tile{border-radius:var(--radius-card);border-left:4px solid;flex:1;min-width:0;padding:14px}.kpi-red{background:var(--red-bg);border-color:var(--red-mid)}.kpi-orange{background:var(--orange-bg);border-color:var(--orange-mid)}.kpi-green{background:var(--green-bg);border-color:var(--green-mid)}.dept-tile{border-radius:var(--radius-card);border:1px solid var(--border-default);background:var(--card-bg);cursor:pointer;transition:box-shadow .15s}.dept-tile:hover{box-shadow:var(--card-shadow-hover)}.dept-tile-red{border-color:var(--red-tile-border)}.dept-tile-orange{border-color:var(--orange-tile-border)}.dept-tile-green{border-color:var(--green-tile-border)}.alert-card{border-radius:var(--radius-alert);border:1px solid;padding:10px 12px}.alert-red{background:var(--red-bg);border-color:var(--red-border)}.alert-orange{background:var(--orange-bg);border-color:var(--orange-border)}.alert-green{background:var(--green-bg);border-color:var(--green-border)}.tab-btn{border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--card-bg);color:var(--gray-600);padding:5px 12px;font-size:11px;transition:all .15s}.tab-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}.trend-cat-btn{border-radius:var(--radius-btn);border:1px solid var(--border-default);background:var(--card-bg);color:var(--gray-600);padding:6px 16px;font-size:11px;font-weight:500;transition:all .15s}.trend-cat-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}.trend-dept-btn{border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--card-bg);color:var(--gray-700);white-space:nowrap;padding:5px 12px;font-size:11px;transition:all .15s}.trend-dept-btn:hover{background:var(--gray-50);border-color:#94a3b8}.trend-dept-btn.active{color:#fff;border-color:#0000}.late-banner{border-radius:var(--radius-card);border:1px solid;padding:14px 16px}.late-pending{background:var(--amber-bg);border-color:var(--amber-border)}.late-rejected{background:var(--red-bg);border-color:var(--red-border)}.late-approved{background:var(--green-bg);border-color:var(--green-border)}.late-closed{background:var(--orange-bg);border-color:var(--orange-border)}.ceo-comment-box{background:var(--blue-bg-light);border:1px solid var(--blue-border-light);border-radius:var(--radius-card);margin-top:12px;padding:14px 16px}.req-card{background:var(--card-bg);border-radius:var(--radius-card);border:1px solid var(--border-default);margin-bottom:10px;padding:16px 18px}.req-card-pending{border-left:4px solid var(--amber-strong)}.req-card-approved{border-left:4px solid var(--green-strong)}.req-card-rejected{border-left:4px solid var(--red-strong)}.approve-btn{border-radius:var(--radius-btn);color:var(--green-deep);border:1px solid var(--green-border);background:#dcfce7;padding:7px 16px;font-size:12px;font-weight:600}.reject-btn{border-radius:var(--radius-btn);background:var(--red-bg);color:var(--red-deep);border:1px solid var(--red-border);padding:7px 16px;font-size:12px;font-weight:600}.form-input{border:1px solid var(--gray-300);border-radius:var(--radius-btn);width:100%;color:var(--gray-800);background:var(--card-bg);padding:8px 10px;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--blue-focus);box-shadow:0 0 0 3px var(--blue-focus-ring)}.submit-btn{border-radius:var(--radius-card);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.submit-btn.primary{background:var(--navy);color:#fff}.submit-btn.primary:hover{background:var(--navy-hover)}.submit-btn.done{background:var(--green-bg);color:var(--green-deep);border:1px solid var(--green-border);cursor:default}.filter-btn{border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--card-bg);color:var(--gray-600);padding:5px 12px;font-size:11px;font-weight:500;transition:all .15s}.filter-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:10px 14px}th{color:var(--gray-600);text-transform:uppercase;background:var(--gray-50);border-bottom:1px solid var(--border-default);font-size:10px;font-weight:600}td{color:var(--gray-800);border-bottom:1px solid var(--border-subtle);font-size:13px}tr:last-child td{border-bottom:none}tr:hover td{background:var(--gray-100)}.task-card{background:var(--card-bg);border-radius:var(--radius-card);border:1px solid var(--border-default);margin-bottom:10px;padding:14px 16px}.task-card-overdue{border-left:4px solid var(--red-strong)}.task-card-pending{border-left:4px solid var(--amber-strong)}.task-card-completed{border-left:4px solid var(--green-strong);opacity:.7}.prio-badge{border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.03em;padding:2px 9px;font-size:10px;font-weight:700}.prio-high{background:var(--red-bg);color:var(--red-deep);border:1px solid var(--red-border)}.prio-medium{background:var(--orange-bg);color:var(--orange-deep);border:1px solid var(--orange-border)}.prio-low{background:var(--blue-bg-light);color:var(--blue-text);border:1px solid var(--blue-border-light)}.status-pill{border-radius:var(--radius-pill);padding:2px 9px;font-size:10px;font-weight:700}.status-pending{background:var(--pill-neutral-bg);color:var(--pill-neutral-text);border:1px solid var(--pill-neutral-border)}.status-completed{color:var(--green-deep);border:1px solid var(--green-border);background:#dcfce7}.status-overdue{background:var(--red-bg);color:var(--red-deep);border:1px solid var(--red-border)}.complete-btn{border-radius:var(--radius-btn);color:var(--green-deep);border:1px solid var(--green-border);background:#dcfce7;padding:6px 14px;font-size:11px;font-weight:600}.reopen-btn{border-radius:var(--radius-btn);background:var(--pill-neutral-bg);color:var(--gray-700);border:1px solid var(--border-default);padding:6px 14px;font-size:11px;font-weight:600}.del-btn{border-radius:var(--radius-btn);background:var(--red-bg);color:var(--red-deep);border:1px solid var(--red-border);padding:6px 14px;font-size:11px;font-weight:600}.edit-btn{border-radius:var(--radius-btn);background:var(--blue-bg-light);color:var(--blue-text);border:1px solid var(--blue-border-light);padding:6px 14px;font-size:11px;font-weight:600}.app-shell{height:100vh;display:flex;overflow:hidden}.main-content{flex-direction:column;flex:1;display:flex;overflow:auto}.page{background:var(--bg-page);flex:1;overflow:auto}.page-header{background:var(--card-bg);border-bottom:1px solid var(--border-default);z-index:10;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;display:flex;position:sticky;top:0}.page-header h1{color:var(--text-heading);font-size:18px;font-weight:800}.page-header .subtitle{color:#94a3b8;margin-top:2px;font-size:11px}.page-body{flex-direction:column;gap:14px;padding:16px 20px;display:flex}.row{align-items:center;display:flex}.row-gap-4{align-items:center;gap:4px;display:flex}.row-gap-6{align-items:center;gap:6px;display:flex}.row-gap-8{align-items:center;gap:8px;display:flex}.row-gap-10{align-items:center;gap:10px;display:flex}.row-gap-12{align-items:center;gap:12px;display:flex}.row-between{justify-content:space-between;align-items:center;display:flex}.col{flex-direction:column;display:flex}.wrap{flex-wrap:wrap}.flex-1{flex:1}.muted{color:var(--gray-500)}.muted-light{color:#94a3b8}.small{font-size:11px}.xs{font-size:10px}.xxs{font-size:9px}.eyebrow{color:var(--sidebar-text-faint);text-transform:uppercase;padding:0 12px;font-size:9px;font-weight:700}.card-title{color:var(--gray-800);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;font-size:11px;font-weight:700}.nav-badge{color:#fff;border-radius:10px;margin-left:auto;padding:1px 6px;font-size:9px}.nav-badge-red{background:var(--red-strong)}.nav-badge-amber{background:var(--amber-strong)}.status-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.status-dot-red{background:var(--red-mid)}.status-dot-orange{background:var(--orange-mid)}.status-dot-green{background:var(--green-mid)}.status-dot-neutral{background:var(--gray-300)}.login-screen{background:var(--login-gradient);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{width:100%;max-width:380px;padding:32px}.login-logo{background:var(--login-logo-gradient);border-radius:var(--radius-logo);justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 12px;font-size:26px;display:flex}.login-field-label,.field-label{color:var(--gray-800);margin-bottom:5px;font-size:11px;font-weight:600;display:block}.login-error{color:var(--red-deep);background:var(--red-bg);border-radius:var(--radius-btn);padding:8px 10px;font-size:12px}.login-footer{color:var(--login-footer-text);text-align:center;margin-top:16px;font-size:10px}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--sidebar-bg);flex-direction:column;gap:3px;height:100vh;padding:12px 8px;display:flex;overflow-y:auto}.sidebar-brand{padding:8px 12px 12px}.sidebar-brand-row{align-items:center;gap:8px;margin-bottom:2px;display:flex}.sidebar-brand-icon{background:var(--sidebar-icon-tile-bg);border-radius:var(--radius-btn);flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:13px;display:flex}.sidebar-brand-name{color:#fff;font-size:11px;font-weight:700;line-height:1.2}.sidebar-brand-sub{color:var(--sidebar-text-dim);font-size:9px}.sidebar-spacer{flex:1}.sidebar-footer{border-top:1px solid var(--sidebar-border);margin-top:4px;padding:8px 12px}.sidebar-footer-name{color:var(--sidebar-text-dim);margin-bottom:2px;font-size:10px;font-weight:600}.sidebar-footer-title{color:#94a3b8;margin-bottom:4px;font-size:9px}.sidebar-signout{color:#94a3b8;text-align:left;background:0 0;width:100%;padding:4px 0;font-size:10px}.sidebar-mini-banner{border-radius:var(--radius-btn);margin:4px 8px;padding:6px 10px;font-size:10px}.sidebar-mini-banner.pending{background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber-text)}.sidebar-mini-banner.approved{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green-deep)}.sidebar-mini-banner.rejected{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red-deep)}.gate-screen{background:var(--login-gradient);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.placeholder-screen{background:var(--bg-page);flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.placeholder-card{text-align:center;max-width:460px;padding:32px}.placeholder-badge{letter-spacing:.04em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-bg);border:1px solid var(--orange-border);border-radius:var(--radius-pill);margin-bottom:12px;padding:4px 10px;font-size:10px;font-weight:700;display:inline-block}.access-denied-icon{margin-bottom:10px;font-size:34px}.app-shell-wrap{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-shell{flex:1;min-height:0;display:flex;overflow:hidden}.impersonation-banner{color:#78350f;background:#fef3c7;border-bottom:1px solid #fbbf24;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:12px;padding:8px 16px;font-size:12px;font-weight:600;display:flex}.impersonation-banner button{color:#fff;background:#78350f;border-radius:6px;flex-shrink:0;padding:5px 14px;font-size:11px;font-weight:700}.impersonation-banner button:disabled{opacity:.6;cursor:not-allowed}.modal-overlay{z-index:100;background:#0f172a8c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-box{background:var(--card-bg);border-radius:var(--radius-card);flex-direction:column;width:100%;max-height:90vh;display:flex;box-shadow:0 10px 40px #00000040}.modal-head{border-bottom:1px solid var(--border-default);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-head h3{color:var(--text-heading);font-size:14px;font-weight:800}.modal-close{color:var(--gray-500);border-radius:6px;padding:3px 7px;font-size:15px;line-height:1}.modal-close:hover{background:var(--gray-100);color:var(--gray-800)}.modal-body{padding:18px 20px;overflow-y:auto}.switch{background:var(--gray-300);border-radius:20px;flex-shrink:0;width:36px;height:20px;transition:background .15s;position:relative}.switch i{background:#fff;border-radius:50%;width:16px;height:16px;font-style:normal;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}.switch.on{background:var(--green-strong)}.switch.on i{transform:translate(16px)}.switch:disabled{opacity:.5;cursor:not-allowed}.table-scroll{overflow-x:auto}.matrix-table{min-width:640px}.matrix-table th,.matrix-table td{white-space:nowrap}.matrix-table th.role-col,.matrix-table td.role-col{background:var(--card-bg);white-space:normal;z-index:1;min-width:190px;position:sticky;left:0}.matrix-table th.role-col{background:var(--gray-50);z-index:2}.matrix-table tr.role-row-locked td{background:var(--gray-50)}.rolecard-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;display:grid}.rolecard{border:1px solid var(--border-default);border-radius:var(--radius-btn);color:var(--gray-800);cursor:pointer;align-items:center;gap:7px;padding:8px 10px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.rolecard:hover{border-color:#94a3b8}.rolecard.on{border-color:var(--navy);background:var(--blue-bg-light);color:var(--navy)}.rolecard.disabled{opacity:.55;cursor:not-allowed}.rolecard input{margin:0}.rolecard-level{color:var(--gray-500);margin-left:auto;font-size:10px;font-weight:700}.perm-grid{border:1px solid var(--gray-300);border-radius:var(--radius-btn);flex-direction:column;gap:10px;max-height:240px;padding:10px;display:flex;overflow-y:auto}.perm-check{color:var(--gray-800);cursor:pointer;align-items:center;gap:7px;font-size:12px;font-weight:600;display:flex}.copy-row{align-items:center;gap:8px;display:flex}.copy-row input{flex:1}.row-actions{flex-wrap:wrap;gap:6px;display:flex}.btn-sm{border:1px solid var(--border-default);background:var(--card-bg);color:var(--gray-700);white-space:nowrap;border-radius:6px;padding:5px 10px;font-size:11px;font-weight:600;transition:all .15s}.btn-sm:hover:not(:disabled){background:var(--gray-100)}.btn-sm:disabled{opacity:.5;cursor:not-allowed}.btn-sm-primary{background:var(--navy);color:#fff;border-color:var(--navy)}.btn-sm-primary:hover:not(:disabled){background:var(--navy-hover)}.btn-sm-danger{background:var(--red-bg);color:var(--red-deep);border-color:var(--red-border)}.btn-sm-danger:hover:not(:disabled){background:#fee2e2}