/* Expense System – SmartPlan-inspired Executive Navy & Gold UI.
   UI only: official Word/PDF renderers intentionally do not import this file. */
:root{--sp-navy:#0b2340;--sp-navy-deep:#071e37;--sp-slate:#163859;--sp-gold:#c6a268;--sp-page:#f2f6fa;--sp-ink:#192f47;--sp-muted:#77879a;--sp-border:#e4ebf1;--sp-shadow:0 9px 28px rgba(24,58,88,.07);--sp-font-scale:1.15}
body.expense-ui{background:var(--sp-page);color:var(--sp-ink);font-family:'Sarabun',Tahoma,sans-serif;font-size:calc(14px * var(--sp-font-scale));line-height:1.55}
body.expense-ui :is(button,input,textarea,select){font-family:inherit}
body.expense-ui .top{height:72px;position:sticky;top:0;z-index:60;background:#fff;color:var(--sp-ink);padding:0 24px 0 258px;box-shadow:0 1px 9px #0b234009;border-bottom:1px solid var(--sp-border);display:flex;justify-content:space-between;gap:14px}
body.expense-ui .top strong{font-size:17px;color:var(--sp-navy)}body.expense-ui .top small{color:var(--sp-muted)}
body.expense-ui .top nav{gap:8px;align-items:center}body.expense-ui .top nav a{color:#24455e;padding:8px 13px;border-radius:10px;font-weight:650}body.expense-ui .top nav a:hover{background:#edf4f8;text-decoration:none}body.expense-ui .top nav a.active{background:#ead8b5;color:#102941}
body.expense-ui .mobile-menu-btn{display:none;background:#f1f6fa;color:var(--sp-navy);padding:8px 12px;border:0;border-radius:9px}
body.expense-ui .expense-side{position:fixed;inset:0 auto 0 0;width:226px;z-index:70;background:linear-gradient(174deg,#102d50 0%,#071e37 64%,#0b2a4d 100%);box-shadow:5px 0 24px rgba(10,46,74,.13);display:flex;flex-direction:column;color:#fff}
body.expense-ui .side-brand{padding:23px 18px;border-bottom:1px solid #ffffff21;display:flex;gap:11px;align-items:center}body.expense-ui .side-logo{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#dec28a,#a98b50);color:#0b2340;font-size:24px}body.expense-ui .side-brand strong{font-size:15px;line-height:1.4}body.expense-ui .side-brand small{display:block;color:#b9cee2;font-size:11px}
body.expense-ui .side-nav{padding:22px 9px;display:grid;align-content:start;gap:6px}body.expense-ui .side-nav-title{color:#aebfd0;font-size:11px;font-weight:750;padding:0 10px;margin-bottom:5px}body.expense-ui .side-nav a{color:#d4e2ef;border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:10px;font-weight:650}body.expense-ui .side-nav a:hover{background:#ffffff18;text-decoration:none;color:#fff}body.expense-ui .side-nav a.active{background:linear-gradient(110deg,#b99156,#e1c38c);color:#102941;box-shadow:0 8px 24px #0002}body.expense-ui .side-footer{margin-top:auto;padding:16px;border-top:1px solid #ffffff21;color:#b4c8db;font-size:12px}
body.expense-ui main{margin:26px 28px 35px 250px;max-width:none;padding:0;min-width:0}body.expense-ui main.narrow{max-width:470px;margin:8vh auto}
body.expense-ui .page-heading{background:linear-gradient(110deg,#0b2340,#174864 72%,#467d85);border-radius:17px;padding:22px 25px;color:#fff;box-shadow:var(--sp-shadow);margin-bottom:20px}body.expense-ui .page-heading h1{color:#fff;font-size:23px}body.expense-ui .page-heading p{color:#d4e4ef;font-size:14px}
body.expense-ui .panel{border:1px solid var(--sp-border);border-radius:16px;background:#fff;box-shadow:var(--sp-shadow);padding:24px}body.expense-ui h2{font-size:18px;color:var(--sp-ink)}
body.expense-ui label{color:#29445f;font-weight:750;font-size:14px}body.expense-ui input,body.expense-ui textarea{border:1px solid #d6e2ec;border-radius:10px;min-height:43px;background:#fff;color:var(--sp-ink);font-size:15px}body.expense-ui :is(input,textarea):focus{outline:3px solid #247da52c;border-color:#287fa2}
body.expense-ui button,body.expense-ui .button{border-radius:10px;background:#0d3d60;border-color:#0d3d60;font-size:14px;min-height:41px;font-weight:700;box-shadow:none}body.expense-ui button:hover,body.expense-ui .button:hover{background:#1c6682;border-color:#1c6682}body.expense-ui button.secondary,body.expense-ui .button.secondary{background:#fff;color:#21445d;border-color:#d7e2ea}body.expense-ui button.secondary:hover,body.expense-ui .button.secondary:hover{background:#eaf2f8}
body.expense-ui .page-heading>.button{background:linear-gradient(110deg,#b99156,#e1c38c);border-color:#dfc18a;color:#102941}body.expense-ui .page-heading>.button:hover{filter:brightness(.97)}
body.expense-ui table{font-size:14px}body.expense-ui thead th{background:#eaf1f7;color:#193b55;font-weight:800;border-bottom:2px solid #d9c195;padding:13px 12px}body.expense-ui tbody td{padding:13px 12px;border-bottom:1px solid #e7edf3}body.expense-ui tbody tr:nth-child(even){background:#f7f9fc}body.expense-ui tbody tr:hover{background:#edf5f9}
body.expense-ui .summary{align-items:center}body.expense-ui .summary strong{color:#173e5e}
body.expense-ui .actions a{color:#176889;font-weight:750}body.expense-ui .pin-panel{margin:auto}body.expense-ui .pin-pad button{font-size:24px;background:#f5f8fb;color:#183653;border-color:#e1e7ee}body.expense-ui .pin-pad button:hover{background:#e5eff7}body.expense-ui .pin-login-btn{background:#0b2340}
body.expense-ui .vendor-form{gap:13px}body.expense-ui .vendor-form h2{border-bottom:1px solid #e4ebf1;padding-bottom:13px}body.expense-ui .vendor-form .button-group{justify-content:flex-end}
body.expense-ui .form-grid{row-gap:7px}
body.expense-ui .side-backdrop{display:none}
@media(max-width:1020px){body.expense-ui .top{padding-left:18px}body.expense-ui .expense-side{transform:translateX(-105%);transition:transform .24s ease}body.expense-ui.menu-open .expense-side{transform:translateX(0)}body.expense-ui .mobile-menu-btn{display:block}body.expense-ui .side-backdrop{position:fixed;inset:0;background:#071524aa;z-index:65;display:none}body.expense-ui.menu-open .side-backdrop{display:block}body.expense-ui main{margin:22px 18px 30px}}
@media(max-width:660px){body.expense-ui .top{height:auto;min-height:65px;padding:11px 13px;gap:10px}body.expense-ui .top nav{display:none}body.expense-ui main{margin:16px 12px 25px}body.expense-ui .page-heading{padding:18px}body.expense-ui .page-heading h1{font-size:20px}body.expense-ui .panel{padding:17px}body.expense-ui .form-actions{flex-wrap:wrap}body.expense-ui .button-group{flex-wrap:wrap}body.expense-ui table{min-width:790px}}
@media(prefers-reduced-motion:reduce){body.expense-ui .expense-side{transition:none}}