@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--navy:#102a43;--navy-2:#183b56;--blue:#1677ff;--blue-soft:#eaf3ff;--teal:#00a6a6;--bg:#f5f7fb;--panel:#fff;--text:#243b53;--muted:#829ab1;--line:#e5eaf0;--green:#20a464;--red:#d64545;--orange:#f59e0b;--shadow:0 10px 30px rgba(16,42,67,.07)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'IBM Plex Sans Thai',sans-serif;color:var(--text);background:var(--bg)}body{display:flex}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}.sidebar{width:245px;background:linear-gradient(180deg,var(--navy),#0a2238);color:#d9e7f3;position:fixed;inset:0 auto 0 0;padding:22px 15px;display:flex;flex-direction:column;z-index:10}.brand{height:60px;display:flex;gap:12px;align-items:center;padding:0 10px;color:#fff}.brand span,.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#2d9cdb,#00b8a9);font-weight:800;color:#fff;box-shadow:0 8px 18px rgba(0,184,169,.25)}.brand strong{font-size:18px}.sidebar nav{display:flex;flex-direction:column;gap:3px;margin-top:18px;overflow:auto}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;font-size:14px;transition:.18s}.sidebar nav a:hover{background:rgba(255,255,255,.08)}.sidebar nav a.active{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 5px 15px rgba(0,0,0,.12)}.sidebar nav svg{width:18px;height:18px}.sidebar-user{margin-top:auto;padding:15px 12px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column}.sidebar-user small{opacity:.68}.sidebar-user strong{font-size:14px;margin:2px 0 8px}.sidebar-user a{font-size:13px;color:#8fd3ff}.app{margin-left:245px;width:calc(100% - 245px)}header{height:84px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:5}header h1{font-size:23px;margin:0;color:var(--navy)}header p{font-size:12px;color:var(--muted);margin:2px 0 0}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:700}.mobile-menu{display:none;border:0;background:none;font-size:24px}main{padding:28px 34px 50px;max-width:1500px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px}.page-head h2{margin:0;font-size:24px;color:var(--navy)}.page-head p{margin:4px 0 0;color:var(--muted);font-size:14px}.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 17px;font-weight:600;cursor:pointer;transition:.15s}.btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(16,42,67,.1)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}.metrics article{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}.metrics span{display:block;font-size:13px;color:var(--muted)}.metrics strong{display:block;font-size:26px;color:var(--navy);margin:7px 0 1px}.metrics em{font-style:normal;font-size:12px;color:var(--muted)}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:auto}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:17px;margin:0;color:var(--navy)}.panel-head a{font-size:13px;color:var(--blue)}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:#627d98;background:#f8fafc;font-weight:600;padding:12px 16px;white-space:nowrap}td{padding:13px 16px;border-top:1px solid #edf1f5;vertical-align:middle}td strong{display:block;color:var(--navy)}td small{display:block;color:var(--muted);max-width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.number{text-align:right;font-variant-numeric:tabular-nums}.status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:99px;background:#eef2f6;color:#52667a;font-size:11px}.status.paid,.status.approved,.status.active,.status.reconciled,.status.customer{background:#e6f7ef;color:#138a52}.status.draft,.status.pending,.status.unpaid,.status.inactive{background:#fff5dc;color:#9b6800}.status.cancelled,.status.error{background:#fdecec;color:#b83333}.status.supplier{background:#e8f2ff;color:#216bc4}.quick{padding-bottom:16px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}.quick-grid a{background:#f7faff;border:1px solid #e4edfa;border-radius:12px;padding:20px 15px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;color:var(--navy);font-weight:500}.quick-grid a:hover{border-color:#a7cdfd;background:var(--blue-soft)}.quick-grid svg{color:var(--blue)}.alert{padding:12px 16px;border-radius:10px;background:#e7f7ef;color:#137548;margin-bottom:18px}.alert.error{background:#fdecec;color:#a82c2c}.notice{display:flex;gap:14px;background:#eef6ff;border:1px solid #cfe3fa;border-radius:13px;padding:17px 20px;margin-top:20px}.notice svg{color:var(--blue);flex:none}.notice strong{color:var(--navy)}.notice p{margin:2px 0 0;color:#627d98;font-size:13px}.account-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.account-cards article{background:linear-gradient(135deg,var(--navy-2),#1a5b79);color:white;padding:20px;border-radius:14px;box-shadow:var(--shadow)}.account-cards span,.account-cards small{display:block;opacity:.75;font-size:12px}.account-cards strong{display:block;margin:8px 0;font-size:18px}.integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.integration-grid article{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px;box-shadow:var(--shadow)}.integration-grid article>div:nth-child(2){flex:1}.integration-grid p{margin:2px 0 0;color:var(--muted);font-size:12px}.integration-icon{width:43px;height:43px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}dialog{border:0;border-radius:16px;padding:0;box-shadow:0 30px 90px rgba(8,28,48,.3);width:min(680px,calc(100% - 30px));max-height:90vh}dialog::backdrop{background:rgba(10,28,45,.55);backdrop-filter:blur(2px)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:26px;position:relative}.form-grid h2{grid-column:1/-1;margin:0 0 5px;color:var(--navy)}.dialog-close{position:absolute;right:17px;top:14px;background:none;border:0;font-size:28px;cursor:pointer;color:var(--muted)}label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500}input,select,textarea{border:1px solid #ccd7e2;border-radius:8px;padding:9px 11px;background:#fff;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,119,255,.11)}textarea{min-height:75px;resize:vertical}.full{grid-column:1/-1}.checkbox{flex-direction:row;align-items:center}.checkbox input{width:auto}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,#e6f4ff,transparent 36%),linear-gradient(135deg,#f7fbff,#edf5f7)}.login-card{width:min(410px,calc(100% - 35px));background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px;box-shadow:0 25px 75px rgba(16,42,67,.13)}.login-card .brand-mark{margin:auto}.login-card h1{text-align:center;color:var(--navy);margin:18px 0 0}.login-card>.muted{text-align:center;color:var(--muted);margin:2px 0 25px}.stack{display:flex;flex-direction:column;gap:16px}.stack .btn{margin-top:5px}
@media(max-width:1050px){.metrics{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}.integration-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.app{margin-left:0;width:100%}header{padding:0 18px}.mobile-menu{display:block}main{padding:20px 15px}.metrics,.account-cards,.integration-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;gap:15px}.page-head>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end}.form-grid{grid-template-columns:1fr}.form-grid>*{grid-column:1!important}.panel{max-width:calc(100vw - 30px)}}

.table-link{color:var(--blue);font-weight:600}.table-link:hover{text-decoration:underline}.document-dialog{width:min(1180px,calc(100% - 30px))}.document-dialog .form-grid{grid-template-columns:repeat(4,1fr)}.line-items{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfcfe}.line-head,.line-row{display:grid;grid-template-columns:1.1fr 2fr .55fr .8fr .7fr 36px;gap:10px;align-items:center;padding:10px 12px}.line-head{background:#f0f4f8;color:#52667a;font-size:12px;font-weight:600}.line-row{border-top:1px solid var(--line)}.line-row input,.line-row select{min-width:0;width:100%}.line-remove{width:30px;height:30px;border:0;border-radius:7px;background:#fdecec;color:var(--red);cursor:pointer}.line-add{margin:10px 12px}.document-summary{grid-column:3/-1;margin-left:auto;width:100%;display:grid;grid-template-columns:1fr auto;gap:8px 25px;padding:15px 0}.document-summary strong{text-align:right;color:var(--navy)}.back-link{display:inline-block;color:var(--blue);margin-bottom:15px}.doc-actions{display:flex;gap:10px;flex-wrap:wrap}.document-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}.document-paper{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:35px;min-height:720px}.paper-header{display:flex;justify-content:space-between;gap:30px;padding-bottom:25px;border-bottom:2px solid var(--navy)}.paper-header h2{margin:0;color:var(--navy)}.paper-header p{margin:4px 0;color:#627d98}.paper-title{text-align:right}.paper-title h1{margin:0;color:var(--blue);font-size:27px}.paper-title strong{font-size:17px}.paper-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.paper-meta section{padding:15px;background:#f8fafc;border-radius:10px}.paper-meta small{display:block;color:var(--muted);margin-bottom:4px}.paper-table th,.paper-table td{padding:12px}.paper-bottom{display:grid;grid-template-columns:1fr 310px;gap:30px;margin-top:22px}.paper-bottom .totals{display:grid;grid-template-columns:1fr auto;gap:8px 25px}.paper-bottom .grand{font-size:18px;border-top:2px solid var(--navy);padding-top:9px;color:var(--navy)}.document-side{display:flex;flex-direction:column;gap:15px}.side-panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow)}.side-panel h3{margin:0 0 14px;color:var(--navy)}.side-form{display:flex;flex-direction:column;gap:12px}.empty{color:var(--muted);text-align:center;padding:18px}.payment-list{display:flex;flex-direction:column;gap:10px}.payment-list article{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:9px}.payment-list small{display:block;color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;box-shadow:var(--shadow)}.project-card h3{margin:0;color:var(--navy)}.project-card>p{color:var(--muted);font-size:13px;min-height:38px}.project-numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.project-numbers div{background:#f8fafc;border-radius:9px;padding:10px}.project-numbers small{display:block;color:var(--muted)}.project-numbers strong{font-size:15px}.progress{height:7px;border-radius:99px;background:#e8edf2;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:inherit}.report-card{margin-bottom:20px}.report-card h2{font-size:17px;margin:0}.total-row td{font-weight:700;background:#f8fafc;color:var(--navy)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-form{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-form h2{grid-column:1/-1;margin:0 0 5px;color:var(--navy)}.audit-panel{grid-column:1/-1}.muted{color:var(--muted)}
.btn.danger{background:#fff1f1;border-color:#f3b6b6;color:#b83333}.workflow-actions{display:flex;flex-direction:column;gap:9px}.workflow-actions form,.workflow-actions .btn{width:100%}.journal-state{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}.journal-state span,.journal-state strong{display:block}.journal-state span{font-size:12px;color:var(--muted)}.journal-state strong{margin-top:3px;color:var(--navy);font-size:13px}
.rd-search{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;background:#eef6ff;border:1px solid #cfe3fa;border-radius:11px;padding:14px}.rd-result{grid-column:1/-1;font-size:12px;color:var(--muted)}.rd-result.success,.verified{color:var(--green)}.rd-result.error,.ocr-status.error{color:var(--red)}.ocr-upload{display:grid;grid-template-columns:1fr auto;gap:8px 15px;background:#f8fafc;border:1px dashed #aabccc;border-radius:12px;padding:16px}.ocr-upload label{grid-column:1/-1}.ocr-upload p{margin:0;color:var(--muted);font-size:12px}.ocr-upload progress{grid-column:1/-1;width:100%;height:8px}.ocr-status{font-size:12px;color:var(--muted)}.ocr-status.success{color:var(--green)}.ocr-preview{display:none;text-align:center}.ocr-preview:has(img[src]){display:block}.ocr-preview img{max-height:260px;max-width:100%;border:1px solid var(--line);border-radius:10px}.ocr-review{display:flex;flex-direction:column;background:#fff8e7;border:1px solid #f7daa0;border-radius:10px;padding:12px}.ocr-review span{font-size:12px;color:#8a6416}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

@media(max-width:1100px){.document-layout{grid-template-columns:1fr}.document-side{display:grid;grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.document-dialog .form-grid{grid-template-columns:1fr}.line-head{display:none}.line-row{grid-template-columns:1fr 1fr}.line-row>*:nth-child(2){grid-column:1/-1}.document-summary{grid-column:1!important}.document-paper{padding:20px}.paper-header,.paper-meta,.paper-bottom{grid-template-columns:1fr;display:grid}.paper-title{text-align:left}.paper-table{display:block;overflow:auto}.document-side,.project-grid,.settings-grid{grid-template-columns:1fr}.settings-form{grid-template-columns:1fr}.settings-form>*{grid-column:1!important}}
@media print{.sidebar,header,.page-head,.document-side,.back-link,.alert{display:none!important}.app{margin:0;width:100%}main{padding:0}.document-layout{display:block}.document-paper{border:0;box-shadow:none;padding:0;min-height:0}}
.rd-results{display:flex;flex-direction:column;gap:7px;max-height:260px;overflow:auto}.rd-choice{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid #d8e4f1;background:#fff;border-radius:8px;padding:9px 11px;cursor:pointer}.rd-choice:hover{border-color:var(--blue);background:var(--blue-soft)}.rd-choice b{color:var(--navy)}.rd-choice span{color:var(--muted);font-size:11px}

/* Expandable sidebar sections */
.sidebar{width:260px;padding:18px 13px}.app{margin-left:260px;width:calc(100% - 260px)}.sidebar nav{margin-top:12px;gap:3px;overflow-y:auto;overscroll-behavior:contain}.nav-group{border-radius:10px}.sidebar nav .nav-parent{width:100%;border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;text-align:left;cursor:pointer;transition:.18s}.sidebar nav .nav-parent:hover,.nav-group.active>.nav-parent{background:rgba(255,255,255,.09);color:#fff}.nav-parent span{flex:1}.nav-parent svg{width:18px;height:18px;flex:none}.nav-chevron{width:15px!important;transition:.2s}.nav-group.open .nav-chevron{transform:rotate(180deg)}.nav-submenu{display:none;margin:2px 0 7px 20px;padding-left:12px;border-left:1px solid rgba(255,255,255,.16)}.nav-group.open .nav-submenu{display:flex;flex-direction:column}.sidebar nav .nav-submenu a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:12.5px;color:#aec3d5;box-shadow:none}.sidebar nav .nav-submenu a:hover{background:rgba(255,255,255,.07);color:#fff}.sidebar nav .nav-submenu a.active{background:#fff;color:var(--navy);font-weight:600}.nav-submenu svg{width:14px!important;height:14px!important;flex:none}.sidebar-backdrop{display:none}
@media(max-width:760px){.app{margin-left:0;width:100%}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(7,25,40,.5);z-index:9}}