@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-base:#0b0d12;--bg-surface:#12151e;--bg-surface-raised:#181d2a;--bg-surface-hover:#1e2438;--bg-overlay:#0b0d12d9;--border-subtle:#1a1f2e;--border-default:#232b3e;--border-strong:#2d3650;--border-focus:#e84e00;--accent:#e84e00;--accent-hover:#d04400;--accent-deep:#b03a00;--accent-light:#e84e001a;--accent-light-md:#e84e002e;--accent-glow:#e84e004d;--accent-warm:#f07a20;--text-primary:#e4e9f5;--text-secondary:#7f8aab;--text-muted:#48526a;--text-inverse:#0b0d12;--text-accent:#f07a20;--success:#22c55e;--success-light:#22c55e1a;--warning:#f59e0b;--warning-light:#f59e0b1a;--danger:#ef4444;--danger-light:#ef44441a;--info:#3b82f6;--info-light:#3b82f61a;--role-superadmin:#ef4444;--role-owner:#e84e00;--role-finance:#3b82f6;--role-procurement:#8b5cf6;--role-sales:#22c55e;--role-manager:#06b6d4;--sidebar-w:240px;--sidebar-collapsed:64px;--topbar-h:56px;--content-max:1440px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-xs:0 1px 2px #0006;--shadow-sm:0 1px 4px #0006, 0 0 0 1px var(--border-subtle);--shadow-md:0 4px 16px #00000080, 0 0 0 1px var(--border-default);--shadow-lg:0 8px 32px #0009;--shadow-accent:0 0 24px var(--accent-glow);--t-fast:.1s ease;--t-base:.18s ease;--t-slow:.28s ease;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace}[data-theme=light]{--bg-base:#edf0f7;--bg-surface:#fff;--bg-surface-raised:#f4f6fc;--bg-surface-hover:#eaecf5;--bg-overlay:#edf0f7eb;--border-subtle:#dde2f0;--border-default:#c8d0e7;--border-strong:#a8b4d0;--border-focus:#e84e00;--accent:#e84e00;--accent-hover:#d04400;--accent-deep:#b03a00;--accent-light:#e84e001a;--accent-light-md:#e84e002e;--accent-glow:#e84e0038;--accent-warm:#f07a20;--text-primary:#0d1117;--text-secondary:#2d3a5c;--text-muted:#5a6b8c;--text-inverse:#fff;--text-accent:#d04400;--success:#16a34a;--success-light:#16a34a1a;--warning:#d97706;--warning-light:#d977061a;--danger:#dc2626;--danger-light:#dc26261a;--info:#2563eb;--info-light:#2563eb1a;--shadow-xs:0 1px 2px #0000000f;--shadow-sm:0 1px 4px #00000012, 0 0 0 1px var(--border-subtle);--shadow-md:0 4px 16px #00000017, 0 0 0 1px var(--border-default);--shadow-lg:0 8px 32px #0000001f;--shadow-accent:0 0 24px var(--accent-glow)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;font-size:14px}body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);min-height:100vh;line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}input,textarea,select,button{font-family:inherit}img{max-width:100%;display:block}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}h1{font-size:1.75rem;font-weight:700;line-height:1.2}h2{font-size:1.375rem;font-weight:600;line-height:1.3}h3{font-size:1.125rem;font-weight:600;line-height:1.4}h4{font-size:1rem;font-weight:600}h5{font-size:.875rem;font-weight:600}h6{color:var(--text-secondary);font-size:.8125rem;font-weight:500}p{color:var(--text-secondary)}.text-xs{font-size:.75rem}.text-sm{font-size:.8125rem}.text-base{font-size:.875rem}.text-lg{font-size:1rem}.text-xl{font-size:1.125rem}.text-2xl{font-size:1.375rem}.text-3xl{font-size:1.75rem}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.font-mono{font-family:var(--font-mono)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.layout{grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;min-height:100vh;transition:grid-template-columns var(--t-base);display:grid}.layout.sidebar-collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr}.topbar{z-index:100;grid-column:1/-1;position:sticky;top:0}.sidebar{top:var(--topbar-h);height:calc(100vh - var(--topbar-h));grid-row:2;position:sticky;overflow:hidden auto}.main-content{padding:var(--sp-6);min-height:calc(100vh - var(--topbar-h));grid-row:2;overflow-y:auto}.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--sp-6);transition:border-color var(--t-fast)}.card:hover{border-color:var(--border-strong)}.card-sm{padding:var(--sp-4);border-radius:var(--radius-md)}.card-header{margin-bottom:var(--sp-5);justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--text-primary);font-size:.9375rem;font-weight:600}.card-subtitle{color:var(--text-muted);margin-top:2px;font-size:.75rem}.btn{align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);border-radius:var(--radius-md);cursor:pointer;height:36px;transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid #0000;font-size:.8125rem;font-weight:500;text-decoration:none;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 4px 16px var(--accent-glow);color:#fff}.btn-secondary{background:var(--bg-surface-raised);color:var(--text-primary);border-color:var(--border-default)}.btn-secondary:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--border-strong);color:var(--text-primary)}.btn-ghost{color:var(--text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){background:var(--bg-surface-raised);color:var(--text-primary)}.btn-danger{background:var(--danger-light);color:var(--danger);border-color:#ef444440}.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff;border-color:var(--danger)}.btn-sm{height:28px;padding:0 var(--sp-3);border-radius:var(--radius-sm);font-size:.75rem}.btn-lg{height:44px;padding:0 var(--sp-6);border-radius:var(--radius-lg);font-size:.9375rem}.btn-icon{justify-content:center;width:36px;padding:0}.btn-icon.btn-sm{width:28px}.form-group{gap:var(--sp-1);flex-direction:column;display:flex}.form-label{color:var(--text-secondary);font-size:.8125rem;font-weight:500}.form-label.required:after{content:" *";color:var(--danger)}.input{height:36px;padding:0 var(--sp-3);background:var(--bg-surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--t-fast), box-shadow var(--t-fast);width:100%;font-size:.8125rem}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-light);outline:none}.input:disabled{opacity:.5;cursor:not-allowed}textarea.input{height:auto;padding:var(--sp-3);resize:vertical;min-height:80px}select.input{appearance:none;cursor:pointer}.input-error{border-color:var(--danger)!important}.form-error{color:var(--danger);margin-top:2px;font-size:.75rem}.form-hint{color:var(--text-muted);margin-top:2px;font-size:.75rem}.search-input-wrap{position:relative}.search-input-wrap .input{padding-left:34px}.search-input-wrap .search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em;align-items:center;gap:4px;padding:2px 8px;font-size:.6875rem;font-weight:600;display:inline-flex}.badge-success{background:var(--success-light);color:var(--success)}.badge-warning{background:var(--warning-light);color:var(--warning)}.badge-danger{background:var(--danger-light);color:var(--danger)}.badge-info{background:var(--info-light);color:var(--info)}.badge-accent{background:var(--accent-light);color:var(--accent)}.badge-neutral{background:var(--bg-surface-raised);color:var(--text-secondary);border:1px solid var(--border-default)}.table-wrap{overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:.8125rem}.table th{text-align:left;padding:var(--sp-3) var(--sp-4);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border-default);white-space:nowrap;font-size:.6875rem;font-weight:600}.table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);vertical-align:middle}.table tbody tr{transition:background var(--t-fast)}.table tbody tr:hover{background:var(--bg-surface-raised)}.table tbody tr:last-child td{border-bottom:none}.avatar{border-radius:var(--radius-full);background:var(--bg-surface-hover);border:1.5px solid var(--border-default);width:32px;height:32px;color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;display:flex;overflow:hidden}.avatar-lg{width:48px;height:48px;font-size:1rem}.avatar-xl{border-width:2px;width:64px;height:64px;font-size:1.25rem}.avatar img{object-fit:cover;width:100%;height:100%}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--sp-5);transition:border-color var(--t-base), transform var(--t-base);position:relative;overflow:hidden}.kpi-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}.kpi-card:before{content:"";background:var(--accent);opacity:0;height:2px;transition:opacity var(--t-base);position:absolute;top:0;left:0;right:0}.kpi-card:hover:before{opacity:1}.kpi-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:500}.kpi-value{color:var(--text-primary);margin-top:var(--sp-1);font-size:1.625rem;font-weight:700;line-height:1.2}.kpi-change{margin-top:var(--sp-1);align-items:center;gap:4px;font-size:.75rem;display:flex}.kpi-change.up{color:var(--success)}.kpi-change.down{color:var(--danger)}.kpi-icon{right:var(--sp-5);border-radius:var(--radius-md);background:var(--accent-light);width:40px;height:40px;color:var(--accent);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.status-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px;display:inline-block}.status-dot.active{background:var(--success);box-shadow:0 0 6px var(--success)}.status-dot.inactive{background:var(--text-muted)}.status-dot.warning{background:var(--warning)}.status-dot.danger{background:var(--danger)}.modal-backdrop{background:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;padding:var(--sp-4);animation:fadeIn var(--t-base) ease;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:90vh;animation:slideUp var(--t-slow) ease;overflow-y:auto}.modal-lg{max-width:720px}.modal-xl{max-width:960px}.modal-header{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border-default);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:1rem;font-weight:600}.modal-body{padding:var(--sp-6)}.modal-footer{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--border-default);justify-content:flex-end;gap:var(--sp-3);display:flex}.dropdown{display:inline-block;position:relative}.dropdown-menu{top:calc(100% + var(--sp-1));background:var(--bg-surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:150;min-width:180px;animation:slideDown var(--t-base) ease;position:absolute;right:0;overflow:hidden}.dropdown-item{align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);color:var(--text-secondary);cursor:pointer;transition:background var(--t-fast), color var(--t-fast);font-size:.8125rem;display:flex}.dropdown-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.dropdown-item.danger:hover{color:var(--danger)}.dropdown-divider{background:var(--border-default);height:1px;margin:var(--sp-1) 0}.toast-container{bottom:var(--sp-6);right:var(--sp-6);z-index:500;gap:var(--sp-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--bg-surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:all;min-width:280px;max-width:380px;animation:slideInRight var(--t-slow) ease;display:flex}.toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--danger)}.toast.warning{border-left:3px solid var(--warning)}.toast.info{border-left:3px solid var(--info)}.toast-message{flex:1;font-size:.8125rem}.toast-title{color:var(--text-primary);font-size:.8125rem;font-weight:600}.toast-body{color:var(--text-secondary);margin-top:2px;font-size:.75rem}.page-header{margin-bottom:var(--sp-6);justify-content:space-between;align-items:flex-start;gap:var(--sp-4);display:flex}.page-title{font-size:1.375rem;font-weight:700}.page-subtitle{color:var(--text-muted);margin-top:var(--sp-1);font-size:.8125rem}.page-actions{align-items:center;gap:var(--sp-3);flex-shrink:0;display:flex}.grid{gap:var(--sp-5);display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-kpi{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-6{gap:var(--sp-6)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}.divider{background:var(--border-default);height:1px}.spinner{border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}.spinner-sm{width:14px;height:14px}.spinner-lg{border-width:3px;width:32px;height:32px}.empty-state{padding:var(--sp-16) var(--sp-8);justify-content:center;align-items:center;gap:var(--sp-3);text-align:center;color:var(--text-muted);flex-direction:column;display:flex}.empty-icon{color:var(--border-strong)}.empty-title{color:var(--text-secondary);font-size:.9375rem;font-weight:600}.empty-desc{font-size:.8125rem}.skeleton{background:linear-gradient(90deg, var(--bg-surface-raised) 25%, var(--bg-surface-hover) 50%, var(--bg-surface-raised) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.4s infinite shimmer}.pagination{align-items:center;gap:var(--sp-1);padding:var(--sp-4) 0;display:flex}.page-btn{min-width:32px;height:32px;padding:0 var(--sp-2);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--t-fast);background:0 0;justify-content:center;align-items:center;font-size:.8125rem;display:flex}.page-btn:hover{background:var(--bg-surface-raised);color:var(--text-primary)}.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.page-btn:disabled{opacity:.35;cursor:not-allowed}.filter-bar{align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);flex-wrap:wrap;display:flex}.section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:var(--sp-2) 0;font-size:.6875rem;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (width<=1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){:root{--sidebar-w:0px}.layout{grid-template-columns:1fr}.sidebar{display:none}.sidebar.mobile-open{z-index:200;flex-direction:column;width:280px;display:flex;position:fixed;top:0;bottom:0;left:0}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.page-header{flex-direction:column}.main-content{padding:var(--sp-4)}}