:root{--primary:#2563eb;--primary-hover:#1d4ed8;--navy:#17233a;--bg-page:#f6f8fc;--bg-card:#fff;--text:#172033;--text-secondary:#69768b;--border:#e5eaf2;--radius-sm:8px;--radius-md:12px;--shadow-sm:0 1px 3px rgb(24 39 75 / 6%);--shadow-md:0 12px 32px rgb(24 39 75 / 8%)}*{box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg-page);color:var(--text);font-size:14px}.app-shell{min-height:100vh;display:flex}.sidebar{width:250px;background:var(--navy);padding:22px 12px;flex:0 0 auto;color:#c8d2e1}.brand{color:#fff;text-decoration:none;display:flex;gap:11px;align-items:center;padding:4px 10px 24px}.brand strong,.brand small{display:block;line-height:1.2}.brand strong{font-size:14px}.brand small{font-size:11px;color:#98a8c1;margin-top:2px}.brand-mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#3269e6;font-size:16px}.nav-heading{margin:19px 10px 7px;font-size:10px;font-weight:700;color:#8291aa;letter-spacing:.09em;text-transform:uppercase}.nav-item{display:flex;gap:11px;align-items:center;padding:9px 10px;margin:2px 0;border-radius:8px;color:#c6d0df;text-decoration:none;transition:background .15s,color .15s}.nav-item i{font-size:16px;width:18px;text-align:center}.nav-item:hover{color:#fff;background:rgb(255 255 255 / 7%)}.nav-item.active{background:#2b4d8d;color:#fff;font-weight:600;box-shadow:inset 3px 0 #7facff}.is-disabled{opacity:.72}.app-main{min-width:0;flex:1}.topbar{height:62px;padding:0 28px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.topbar-context,.topbar-actions,.user-menu{display:flex;align-items:center;gap:10px}.company-chip,.period-chip{font-size:12px;border:1px solid var(--border);padding:6px 9px;border-radius:7px;color:var(--text-secondary);background:#fff}.company-chip{font-weight:600;color:var(--text)}.icon-button{width:32px;height:32px;border:0;background:transparent;border-radius:8px;color:#536174;display:grid;place-items:center}.icon-button:hover{background:#f1f4f9;color:var(--primary)}.notification{position:relative}.notification b{position:absolute;width:6px;height:6px;border-radius:50%;background:#ef4444;right:7px;top:7px}.avatar{width:30px;height:30px;border-radius:50%;background:#e3ecff;color:#2358cc;display:grid;place-items:center;font-size:11px;font-weight:700}.user-name{font-weight:600;font-size:13px}.page{padding:22px 28px 34px}.breadcrumb-context{font-size:12px;color:var(--text-secondary);display:flex;gap:8px;align-items:center;margin-bottom:17px}.breadcrumb-context i{font-size:9px}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.page-header h1{font-size:23px;letter-spacing:-.025em;margin:0 0 5px}.page-header p{color:var(--text-secondary);margin:0}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.kpi-card{padding:16px}.kpi-label{font-size:12px;color:var(--text-secondary);font-weight:500}.kpi-value{font-size:20px;font-weight:700;letter-spacing:-.025em;margin:8px 0 4px}.kpi-note{font-size:11px;color:#8291a5}.kpi-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--primary);background:#edf3ff;font-size:17px}.section-card{padding:18px}.section-title{font-size:14px;font-weight:700;margin:0}.section-subtitle{font-size:12px;color:var(--text-secondary)}.chart-placeholder{height:220px;margin-top:16px;border-radius:10px;background:linear-gradient(#f8faff,#fff);position:relative;overflow:hidden}.chart-placeholder:after{content:"";position:absolute;inset:18% 5% 18%;background:linear-gradient(150deg,transparent 40%,#8bb0ff 41% 43%,transparent 44% 57%,#346de2 58% 60%,transparent 61%);opacity:.8}.alert{border:0;border-radius:8px}.data-table thead th{background:#fafbfc;color:#778398;font-size:10px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);white-space:nowrap}.data-table td,.data-table th{padding:12px 15px;border-color:#eef1f5}.data-table tbody tr:hover{background:#f8faff}.number{text-align:right;font-variant-numeric:tabular-nums}.badge-status{font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px}.status-pending{background:#fff4d7;color:#956300}.status-posted{background:#e3f7ed;color:#16724a}.status-approved{background:#e6f2ff;color:#2166a2}.status-cancelled{background:#fde8e7;color:#b53c36}.form-control,.form-select{border-color:#d8e0eb;border-radius:8px;min-height:40px;font-size:14px}.form-control:focus,.form-select:focus{border-color:#80a8fa;box-shadow:0 0 0 3px rgb(37 99 235 / 12%)}.btn{border-radius:8px;font-weight:600}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.empty-state{border:1px dashed #ced8e7;border-radius:var(--radius-md);padding:2rem;text-align:center;color:var(--text-secondary)}.auth-page{min-height:100vh;background:#f5f7fb}.auth-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px}.auth-brand{text-align:center;margin-bottom:22px}.auth-brand .brand-mark{margin:0 auto 12px;width:42px;height:42px;border-radius:13px}.auth-brand h1{font-size:20px;letter-spacing:-.025em;margin:0}.auth-brand p{font-size:13px;color:var(--text-secondary);margin:5px 0 0}.auth-card{width:100%;max-width:424px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);padding:30px}.auth-card h2{font-size:20px;margin:0 0 7px;letter-spacing:-.02em}.auth-description{color:var(--text-secondary);font-size:13px;line-height:1.5;margin-bottom:23px}.auth-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#edf3ff;color:var(--primary);font-size:18px;margin-bottom:18px}.input-icon{position:relative}.input-icon i{position:absolute;left:13px;top:12px;color:#8190a5}.input-icon .form-control{padding-left:38px;min-height:44px}.auth-submit{width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}.auth-help{font-size:12px;color:var(--text-secondary);margin:18px 0 0;text-align:center}.auth-help i{margin-right:4px}.auth-alert{font-size:12px;padding:10px 12px;display:flex;gap:8px}.otp-input{text-align:center;font-size:22px;letter-spacing:.28em;min-height:48px}.auth-back{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--text-secondary);text-decoration:none;margin-bottom:22px}.auth-footer{margin:20px 0 0;color:#9aa6b8;font-size:11px}@media(max-width:900px){.sidebar{width:64px;padding:18px 8px}.brand span:last-child,.nav-item span,.nav-heading{display:none}.brand{justify-content:center;padding-bottom:20px}.nav-item{justify-content:center}.topbar{padding:0 16px}.company-chip{display:none}.page{padding:18px 16px}.user-name,.period-chip{display:none}}@media(max-width:560px){.auth-shell{padding:20px}.auth-card{padding:24px}.topbar-actions .icon-button:first-child{display:none}}
