:root{--bg:#f5faff;--card:#fff;--text:#172b43;--muted:#7e8c9e;--line:#e4ebf2;--primary:#243e60;--primary2:#14283f;--sidebar:#e6f2ff;--sidebarText:#253d56;--shadow:0 1px 3px rgba(33,56,82,.1)}
body{font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;background:var(--bg)}
.sidebar{background:#e6f2ff;color:#223a56;width:232px;padding:0 9px;box-shadow:none;z-index:5;position:fixed;inset:0 auto 0 0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #d5e5f7}
.brand{padding:12px 5px 20px;gap:8px;border-bottom:1px solid #d5e5f7;margin-bottom:13px}.brand .logo{background:#14283f;color:#fff;width:32px;height:32px;font-size:11px;border-radius:10px}.brand strong{font-size:12px}.brand small{font-size:9px;color:#6c829c;margin-top:1px}
.sidebar nav{display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 0 12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.sidebar .brand{flex-shrink:0}.nav-item{width:100%;color:#25415d;font-weight:700;font-size:14px;line-height:1.55;min-height:44px;border-radius:10px;padding:10px 12px;margin-bottom:3px;white-space:normal;text-align:left}.nav-item:hover,.nav-item.active{background:#152b45;color:white}.nav-item:focus-visible,.sidebar-toggle:focus-visible,.sidebar-close:focus-visible{outline:3px solid #2b74b9;outline-offset:-3px}
.nav-group{margin-bottom:2px}.nav-parent{display:flex;justify-content:space-between;align-items:center;gap:6px}.nav-parent::after{content:"⌄";font-size:16px;opacity:.75;flex-shrink:0;transition:transform .15s}.nav-parent[aria-expanded="true"]::after{transform:rotate(180deg)}.nav-child{padding-left:35px;font-weight:500;font-size:14px}.nav-child.active{background:#d0e4fb;color:#173c69}.nav-icon{display:inline-grid;place-items:center;width:19px;margin-right:4px}
.sidebar-account{position:static;flex-shrink:0;background:#e6f2ff;padding:10px 0 max(6px,env(safe-area-inset-bottom));margin-top:0;border-top:1px solid #d7e7f7;font-size:12px}.sidebar-account>div{display:flex;gap:7px;align-items:center;background:#f6fbff;border-radius:10px;padding:8px}.avatar{border-radius:50%;background:#14283f;color:white;padding:5px 9px}.sidebar-account small{display:block;color:#7d91a9}.sidebar-account p{color:#607994;margin:9px 2px}
.main{margin-left:232px;width:calc(100% - 232px);min-width:0;padding:0 20px 30px}.topbar{background:#fff;margin:0 -20px 20px;padding:10px 20px;min-height:57px;align-items:center;border-bottom:1px solid #e6edf4}.topbar p{font-size:10px;margin:0;color:#8b9baa}.topbar h1{font-size:14px;margin:2px 0}.top-actions select{max-width:210px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font:inherit;font-size:12px}.top-actions button{font-size:12px}.workspace-heading{display:flex;align-items:center;gap:12px}.sidebar-toggle,.sidebar-close,.sidebar-backdrop{display:none}
.filters{display:flex;align-items:end;justify-content:flex-start;gap:8px;margin-bottom:15px;padding:12px;border-radius:13px}.filters .field{max-width:190px}.filters .field label{font-size:10px;color:#516478}.filters input{font-size:11px;padding:7px 9px}.filters>span{padding:0 2px 8px}.filters button{font-size:11px;padding:8px 10px;white-space:nowrap}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:7px 0 15px;gap:12px}.page-heading h2{font-size:20px;margin:2px 0 0}.page-heading p{margin:0;color:#8190a2;font-size:12px}.page-heading #pageSubtitle{color:#0a8e76;font-size:11px}.page-heading #pageActions{align-self:end}
.primary{background:#ef8b39;color:#fff}.primary:hover{background:#db7525}.ghost{background:#fff;color:#2b4260;border:1px solid #e4ebf2}.ghost:hover{background:#f2f7fc}.card{border-radius:13px;padding:15px}.stats{gap:12px}.stat{min-height:125px}.stat span{font-size:11px}.stat strong{font-size:20px}.stat small{font-size:10px}.section-head h2{font-size:15px}.section-head p{font-size:11px}.section-head h3{margin:0;font-size:14px}.chart{height:205px}.bar.income,.key.income{background:#2c6db8}.bar.expense,.key.expense{background:#8240d7}.bar{width:13px}.bar-label{font-size:10px}
.grid-two{grid-template-columns:1.5fr .8fr}.empty{font-size:12px}th,td{font-size:11px;padding:9px 8px}.sidebar-note{display:none}.notice{font-size:12px}
.dialog{border-radius:16px}.document-dialog{width:min(1050px,calc(100% - 30px))}.document-dialog h3{font-size:15px;border-bottom:1px solid var(--line);padding-bottom:8px}.doc-section{margin-top:22px}.items-table{min-width:780px}.items-table input{width:100%;min-width:55px;padding:6px;border:1px solid var(--line);border-radius:6px}.items-table .item-description{min-width:180px}.totals{margin:10px 0 18px auto;width:min(320px,100%);display:grid;gap:6px}.total-line{display:flex;justify-content:space-between}.total-line.final{font-weight:700;font-size:17px;border-top:1px solid var(--line);padding-top:7px}.flow-card{margin-bottom:16px;background:#fafdff}.flow-card h3{font-size:14px;margin:0 0 9px}.flow-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:7px 0;font-size:11px}.flow-row b{min-width:84px}.flow-step{background:#eaf3ff;padding:6px 9px;border-radius:7px}.flow-note{font-size:10px;color:#67819a}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.metric-grid .stat{min-height:95px}.document-actions{display:flex;gap:8px;align-items:center}.document-actions .primary{font-size:12px}.doc-table .actions{min-width:155px}.summary-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.summary-tabs button{background:#fff;border:1px solid var(--line);padding:10px;border-radius:10px;cursor:pointer}.summary-tabs button.active{background:#eaf4ff;border-color:#83afd8}.subheader{font-size:12px;color:#768b9f;margin:4px 0 15px}
@media(max-width:900px){.filters{flex-wrap:wrap}.grid-two{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.sidebar{width:min(300px,85vw);z-index:40;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:12px 0 36px #152b4526}.sidebar-open .sidebar{transform:translateX(0);visibility:visible}.sidebar .brand{padding:12px 3px;margin-bottom:10px}.sidebar nav{display:block;overflow-y:auto;overflow-x:hidden}.sidebar .nav-item{white-space:normal}.sidebar-account{display:block}.sidebar-close{display:grid;place-items:center;margin-left:auto;min-width:44px;min-height:44px;flex-shrink:0;background:transparent}.sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font-size:14px}.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:39;background:#14283f66;border:0;padding:0}.sidebar-open{overflow:hidden}.main{width:100%;margin:0;padding:0 12px 20px}.topbar{margin:0 -12px 12px;padding:10px 12px}.page-heading{align-items:flex-start;flex-direction:column}.filters .field{flex:1;min-width:120px}.stats,.metric-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}.full{grid-column:1/-1}}
@media(max-width:500px){.stats,.metric-grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.top-actions{width:auto;flex-wrap:wrap}.filters{gap:6px}.filters>span{display:none}.document-dialog{padding:14px}}
@media(prefers-reduced-motion:reduce){.sidebar,.nav-parent::after{transition:none}}