html,body,#root{height:100%}*{box-sizing:border-box;margin:0;padding:0}:root{--navy:#1c1f24;--navy-light:#33383f;--gold:#ed1b24;--gold-light:#f8b4b7;--bg:#f6f7f9;--white:#fff;--text:#1c1f24;--text-muted:#6b7280;--border:#e5e7eb;--success:#15803d;--success-bg:#dcfce7;--danger:#dc2626;--danger-bg:#fee2e2;--warning:#b45309;--warning-bg:#fef3c7;--info:#2563eb;--info-bg:#dbeafe;--radius:12px;--shadow:0 1px 2px #0f172a0a, 0 6px 20px #0f172a0f;--shadow-lg:0 24px 48px #0f172a29}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;min-height:100vh;font-family:-apple-system,Segoe UI,Inter,Arial,sans-serif}button,input,select,textarea{font-family:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border:2px solid var(--bg);background:#d1d5db;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#b0b5bd}*{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}@keyframes fadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.card,.stat-card,.annual-gauge{animation:.35s both fadeInUp}#login-screen{background:radial-gradient(circle at 15% 15%, var(--gold) 0%, transparent 45%), linear-gradient(135deg, var(--navy) 0%, #101216 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:var(--white);width:100%;max-width:420px;box-shadow:var(--shadow-lg);border-radius:16px;padding:48px 40px 40px}.login-logo{text-align:center;margin-bottom:32px}.login-logo .logo-icon{border-radius:16px;justify-content:center;align-items:center;width:88px;height:88px;margin:0 auto 16px;display:flex;overflow:hidden;box-shadow:0 6px 16px #ed1b2440}.login-logo .logo-icon img{object-fit:contain;width:100%;height:100%;display:block}.login-logo h1{color:var(--navy);letter-spacing:-.2px;font-size:20px;font-weight:700}.login-logo p{color:var(--text-muted);margin-top:4px;font-size:13px}.form-group{margin-bottom:18px}.form-group label{color:var(--text);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-group input,.form-group select,.form-group textarea{border:1.5px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);background:var(--white);padding:10px 14px;font-size:14px;transition:border-color .15s,box-shadow .15s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #ed1b241f}.btn{border-radius:var(--radius);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:11px 22px;font-size:14px;font-weight:600;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg, var(--navy-light), var(--navy));color:var(--white);box-shadow:inset 0 1px #ffffff0f,0 4px 10px #1c1f2433}.btn-primary:hover{background:linear-gradient(180deg, #3d434b, var(--navy-light))}.btn-gold{background:linear-gradient(180deg, #f43f3f, var(--gold));color:var(--white);box-shadow:0 4px 10px #ed1b2440}.btn-gold:hover{background:linear-gradient(#e23333,#c81017)}.btn-success{background:var(--success);color:var(--white)}.btn-success:hover{background:#0f5c2c}.btn-danger{background:var(--danger);color:var(--white)}.btn-danger:hover{background:#b91c1c}.btn-outline{border:1.5px solid var(--border);color:var(--text-muted);background:0 0}.btn-outline:hover{border-color:var(--navy);color:var(--navy)}.btn-sm{padding:7px 14px;font-size:13px}.btn-block{width:100%}.btn:disabled{opacity:.55;cursor:not-allowed}.login-hint{background:var(--bg);border-radius:var(--radius);color:var(--text-muted);margin-top:24px;padding:14px;font-size:12px;line-height:1.8}.login-hint strong{color:var(--navy)}#app{flex-direction:column;min-height:100vh;display:flex}.topbar{background:var(--navy);color:var(--white);justify-content:space-between;align-items:center;height:60px;padding:0 28px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0d,0 2px 8px #00000026}.topbar:after{content:"";background:linear-gradient(90deg, var(--gold) 0%, var(--gold) 30%, transparent 100%);height:3px;position:absolute;bottom:-3px;left:0;right:0}.topbar-left{align-items:center;gap:14px;display:flex}.topbar-logo{border-radius:9px;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.topbar-logo img{object-fit:contain;width:100%;height:100%;display:block}.topbar-title{letter-spacing:-.1px;font-size:15px;font-weight:700}.topbar-subtitle{color:#ffffff8c;font-size:11px}.topbar-right{align-items:center;gap:16px;display:flex}.user-avatar{background:var(--gold);width:34px;height:34px;color:var(--white);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.user-name{font-size:13px;font-weight:600}.user-role{color:#ffffff8c;font-size:11px}.btn-logout{color:var(--white);cursor:pointer;background:#ffffff1a;border:1px solid #ffffff29;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:600;transition:background-color .15s}.btn-logout:hover{background:#fff3}.nav-tabs{background:var(--white);border-bottom:1px solid var(--border);gap:0;padding:0 28px;display:flex;overflow-x:auto}.nav-tab{color:var(--text-muted);cursor:pointer;white-space:nowrap;border-bottom:3px solid #0000;align-items:center;gap:7px;padding:14px 18px;font-size:13px;font-weight:600;text-decoration:none;transition:color .15s,border-color .15s,background-color .15s;display:flex}.nav-tab:hover{color:var(--navy);background:var(--bg)}.nav-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:#ed1b240f}.nav-badge{background:var(--gold);color:var(--white);border-radius:12px;padding:1px 7px;font-size:10px;font-weight:700}.content{flex:1;padding:28px}.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:24px}.card-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:22px;padding-bottom:16px;display:flex}.card-title{color:var(--navy);letter-spacing:-.1px;font-size:16px;font-weight:700}.card-subtitle{color:var(--text-muted);margin-top:3px;font-size:12px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:20px;transition:box-shadow .15s,transform .15s}.stat-card:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0f172a0f,0 10px 28px #0f172a17}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700}.stat-value{color:var(--navy);letter-spacing:-.3px;margin:6px 0 2px;font-size:26px;font-weight:700}.stat-sub{color:var(--text-muted);font-size:12px}.stat-icon-badge{float:right;background:var(--bg);border-radius:12px;justify-content:center;align-items:center;width:42px;height:42px;margin-top:-2px;font-size:20px;display:flex}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}thead th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg);padding:10px 14px;font-size:11px;font-weight:700}tbody tr{border-bottom:1px solid var(--border);transition:background .15s}tbody tr:hover{background:var(--bg)}tbody td{padding:12px 14px}.badge{border:1px solid #0000;border-radius:20px;align-items:center;gap:6px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-flex}.badge-dot{background:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px}.badge-pending{background:var(--warning-bg);color:var(--warning);border-color:#b453092e}.badge-approved{background:var(--success-bg);color:var(--success);border-color:#15803d2e}.badge-rejected{background:var(--danger-bg);color:var(--danger);border-color:#dc26262e}.badge-waitinvoice{background:var(--info-bg);color:var(--info);border-color:#2563eb2e}.badge-completed{color:#6d28d9;background:#ede9fe;border-color:#6d28d92e}.badge-finance{color:#9d174d;background:#fce7f3;border-color:#9d174d2e}.badge-financecontrol{color:#0e7490;background:#cffafe;border-color:#0e74902e}.radio-group{flex-wrap:wrap;gap:10px;margin-top:4px;display:flex}.radio-option{border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;align-items:center;gap:7px;padding:9px 16px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.radio-option input[type=radio]{accent-color:var(--gold);width:15px;height:15px}.radio-option:has(input:checked){border-color:var(--gold);background:#fdecec}.pie-wrap{flex-wrap:wrap;align-items:center;gap:28px;display:flex}.pie-legend{flex:1;min-width:160px}.pie-legend-item{align-items:center;gap:8px;margin-bottom:9px;font-size:12px;display:flex}.pie-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.annual-gauge{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:20px;padding:20px 24px}.annual-gauge .gauge-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:13px;font-weight:700}.annual-gauge .gauge-numbers{justify-content:space-between;margin-bottom:6px;font-size:13px;display:flex}.annual-gauge .gauge-bar{background:var(--border);border-radius:99px;height:14px;overflow:hidden}.annual-gauge .gauge-fill{background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:99px;height:100%;transition:width .4s}.annual-gauge .gauge-sub{color:var(--text-muted);margin-top:6px;font-size:12px}.form-grid{grid-template-columns:1fr 1fr;gap:18px;display:grid}@media (width<=640px){.form-grid{grid-template-columns:1fr}}.form-group textarea{resize:vertical;min-height:90px}.amount-wrap{position:relative}.amount-wrap input{padding-right:40px}.amount-suffix{color:var(--text-muted);font-size:13px;font-weight:600;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.searchable-select-menu{z-index:20;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);max-height:260px;box-shadow:var(--shadow-lg);position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.searchable-select-option{color:var(--text);cursor:pointer;padding:9px 14px;font-size:14px}.searchable-select-option:hover{background:var(--bg)}.searchable-select-clear{color:var(--text-muted);border-bottom:1px solid var(--border);font-style:italic}.searchable-select-empty,.searchable-select-hint{color:var(--text-muted);padding:9px 14px;font-size:13px}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0c0d108c;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.modal-overlay.open{display:flex}.modal{background:var(--white);width:100%;max-width:560px;box-shadow:var(--shadow-lg);border-radius:14px;max-height:90vh;padding:30px;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.modal-title{color:var(--navy);font-size:17px;font-weight:700}.modal-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;font-size:24px;line-height:1}.modal-close:hover{color:var(--danger)}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:10px;margin-top:24px;padding-top:18px;display:flex}.detail-row{border-bottom:1px solid var(--border);justify-content:space-between;padding:10px 0;font-size:13px;display:flex}.detail-row:last-child{border-bottom:none}.detail-label{color:var(--text-muted);font-weight:600}.detail-value{color:var(--text);text-align:right;max-width:60%}.alert{border-radius:var(--radius);border:1px solid #0000;margin-bottom:18px;padding:14px 18px;font-size:13px}.alert-warning{background:var(--warning-bg);color:#7c3d0a;border-color:#fde68a}.alert-success{background:var(--success-bg);color:#14532d;border-color:#bbf7d0}.progress-bar{background:var(--border);border-radius:99px;height:8px;margin-top:6px;overflow:hidden}.progress-fill{background:var(--gold);border-radius:99px;height:100%;transition:width .3s}.empty-state{text-align:center;color:var(--text-muted);padding:48px 20px}.empty-icon{margin-bottom:12px;font-size:48px}#toast{z-index:9999;background:var(--navy);color:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:340px;padding:14px 22px;font-size:13px;font-weight:600;position:fixed;bottom:28px;right:28px}.section-title{color:var(--navy);letter-spacing:-.2px;margin-bottom:6px;font-size:18px;font-weight:700}.section-sub{color:var(--text-muted);margin-bottom:22px;font-size:13px}.chip{background:var(--bg);border:1px solid var(--border);color:var(--text-muted);border-radius:20px;padding:2px 10px;font-size:11px;display:inline-block}.budget-row{color:var(--text-muted);justify-content:space-between;font-size:12px;display:flex}.two-col{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;display:grid}@media (width<=768px){.two-col{grid-template-columns:1fr}}#reject-textarea{border:1.5px solid var(--border);resize:vertical;border-radius:8px;width:100%;min-height:80px;margin-top:10px;padding:10px;font-size:13px}#reject-textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #ed1b241f}