/* JaideeBill UI - application theme only (issued PDFs keep each issuer's own branding).
   Palette sampled from the JaideeDigital logo (logo.png.webp, 108x57): wordmark blue #4B67A9, light "Digital" blue #8593D3, heart accent red #FD211B. */
/* Web font: K2D (SIL OFL 1.1, Cadson Demak) served from this application (/assets/fonts) - no external font service is contacted. Licence: assets/fonts/OFL-K2D.txt */
@font-face{font-family:"K2D";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/k2d-400-thai.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"K2D";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/k2d-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"K2D";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/k2d-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"K2D";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/k2d-600-thai.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"K2D";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/k2d-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"K2D";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/k2d-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --jb-primary:#4B67A9;--jb-primary-hover:#3A5190;--jb-primary-soft:#E9EDF8;
  --jb-secondary:#8593D3;--jb-secondary-dark:#5B6A9E;
  --jb-accent:#FD211B;
  --jb-bg:#F4F6FA;--jb-surface:#FFFFFF;--jb-text:#1F2937;--jb-muted:#5F6B7A;--jb-border:#D8DEE9;
  --jb-ok:#067647;--jb-ok-bg:#ECFDF3;--jb-ok-line:#ABEFC6;--jb-warn:#93370D;--jb-warn-bg:#FFFAEB;--jb-warn-line:#FEDF89;--jb-bad:#B42318;--jb-bad-bg:#FEF3F2;
  --jb-font:"K2D",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;--jb-focus:0 0 0 3px rgba(75,103,169,.35);--jb-nav-h:56px;--jb-ctl:2.5rem}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 var(--jb-font);color:var(--jb-text);background:var(--jb-bg)}
a{color:var(--jb-primary)}a:hover{color:var(--jb-primary-hover)}
:focus-visible{outline:2px solid var(--jb-primary);outline-offset:2px}

/* ---- top bar + grouped dropdown navigation ---- */
header.top{background:var(--jb-primary);color:#fff;border-bottom:3px solid var(--jb-accent);position:relative;z-index:50}
header.top .bar{display:flex;align-items:center;gap:.4rem;padding:0 1rem;min-height:var(--jb-nav-h)}
header.top .grow{flex:1}
.brandmark{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;margin-right:.8rem;font-size:1.1rem}
.brandmark:hover{color:#fff}.brandmark img{display:block;border-radius:6px;background:#fff}
.navtoggle,.burger{display:none}
ul.nav,ul.dd-m{list-style:none;margin:0;padding:0}
ul.nav{display:flex;gap:.1rem;align-items:center}
ul.nav>li{position:relative}
.nl{display:block;color:#fff;background:transparent;border:0;border-radius:6px;padding:.55rem .75rem;font:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}
.nl:hover{background:rgba(255,255,255,.16);color:#fff}
.nl.active{background:rgba(255,255,255,.22);font-weight:600;box-shadow:inset 0 -3px 0 #fff}
.caret{font-size:.7rem;opacity:.85}
.dd{position:relative}
.dd-m{display:none;position:absolute;top:100%;left:0;min-width:220px;max-width:92vw;background:var(--jb-surface);color:var(--jb-text);border:1px solid var(--jb-border);border-radius:8px;box-shadow:0 8px 24px rgba(31,41,55,.18);padding:.3rem;margin-top:2px;z-index:60}
.dd-m.dd-right{left:auto;right:0}
.dd.open>.dd-m{display:block}
html:not(.js) .dd:hover>.dd-m,html:not(.js) .dd:focus-within>.dd-m{display:block}
.dd-m a,.dd-m .linkbtn{display:block;width:100%;text-align:left;color:var(--jb-text);text-decoration:none;padding:.5rem .7rem;border-radius:6px;white-space:normal;background:transparent;border:0;font:inherit;cursor:pointer}
.dd-m a:hover,.dd-m .linkbtn:hover,.dd-m a:focus-visible{background:var(--jb-primary-soft);color:var(--jb-primary-hover)}
.dd-m a.active{background:var(--jb-primary-soft);color:var(--jb-primary);font-weight:600;box-shadow:inset 3px 0 0 var(--jb-accent)}
.dd-m form{margin:0}
.who{display:inline-block;max-width:30ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
@media (max-width:1180px){
  header.top .bar{flex-wrap:wrap;padding:.4rem .8rem}
  .burger{display:inline-block;cursor:pointer;background:rgba(255,255,255,.18);color:#fff;border-radius:6px;padding:.4rem .8rem;order:3}
  .grow{order:2}.usermenu{order:4}.burger{order:5}
  .mainnav{display:none;order:9;flex-basis:100%;padding:.3rem 0 .5rem}
  .navtoggle:checked ~ .mainnav{display:block}
  ul.nav{flex-direction:column;align-items:stretch;gap:.1rem}
  .nl{width:100%;text-align:left;padding:.65rem .7rem;white-space:normal}
  .mainnav .dd-m{position:static;box-shadow:none;border:0;background:rgba(255,255,255,.1);margin:0 0 .3rem .6rem;max-width:none;padding:.2rem}
  .mainnav .dd-m a{color:#fff}.mainnav .dd-m a:hover{background:rgba(255,255,255,.2);color:#fff}
  .mainnav .dd-m a.active{background:rgba(255,255,255,.25);color:#fff}
  html:not(.js) .mainnav .dd-m{display:block}
  .usermenu .dd-m{position:absolute}
  .usermenu .nl{width:auto}.usermenu .who{display:none}.usermenu .dd-t::before{content:"บัญชี"}
}
.dd-info{padding:.4rem .7rem;color:var(--jb-muted);font-size:.85rem;border-bottom:1px solid var(--jb-border);margin-bottom:.2rem}

/* ---- content: full width ---- */
main{width:100%;margin:1.25rem 0;padding:0 1.25rem}
.card{background:var(--jb-surface);border:1px solid var(--jb-border);border-radius:10px;padding:1rem 1.25rem;margin-bottom:1rem;overflow-x:auto;box-shadow:0 1px 2px rgba(31,41,55,.04)}
h1{font-size:1.4rem;margin:.2rem 0 1rem;color:var(--jb-primary-hover)}h2{font-size:1.1rem;margin:0 0 .75rem;color:var(--jb-text)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--jb-border);vertical-align:top}
th{color:var(--jb-secondary-dark);font-weight:600;font-size:.85rem;border-bottom-color:#C9D2EA}
tbody tr:hover td,table tr:hover>td{background:#FAFBFE}
td.r,th.r,.r{text-align:right}
label{display:block;margin:.6rem 0 .2rem;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{width:100%;max-width:520px;padding:.45rem .55rem;border:1px solid #AEB8CB;border-radius:6px;font:inherit;background:#fff;color:var(--jb-text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--jb-primary);box-shadow:var(--jb-focus)}
button,.btn{background:var(--jb-primary);color:#fff;border:0;border-radius:6px;padding:.45rem .9rem;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--jb-primary-hover);color:#fff}
button:focus-visible,.btn:focus-visible{box-shadow:var(--jb-focus);outline:none}
button:disabled{opacity:.6;cursor:progress}
button.danger{background:var(--jb-bad)}button.danger:hover{background:#912018}
button.secondary,.btn.secondary{background:var(--jb-primary-soft);color:var(--jb-primary-hover);border:1px solid #C9D2EA}
button.secondary:hover,.btn.secondary:hover{background:#DCE3F5;color:var(--jb-primary-hover)}
.err{color:var(--jb-bad);font-size:.9rem}
.flash{background:var(--jb-ok-bg);border:1px solid var(--jb-ok-line);color:var(--jb-ok);padding:.6rem .9rem;border-radius:6px;margin-bottom:1rem}
.warn{background:var(--jb-warn-bg);border:1px solid var(--jb-warn-line);color:var(--jb-warn);padding:.6rem .9rem;border-radius:6px;margin-bottom:1rem}
.badge{display:inline-block;border-radius:999px;background:var(--jb-primary-soft);color:var(--jb-primary-hover);padding:.05rem .55rem;font-size:.8rem}
.muted{color:var(--jb-muted)}
code,pre{background:#EEF1F7;border-radius:4px;padding:.15rem .35rem;word-break:break-all}
form.inline{display:inline}.center{max-width:420px;margin:3rem auto}
form.inline select,td select{width:auto;max-width:none}
td form.inline{display:inline-block;margin:.1rem 0}
footer.u-foot{text-align:center;padding:1rem}

@media (max-width:600px){main{padding:0 .6rem}.card{padding:.8rem .8rem}table{font-size:.88rem}input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{max-width:100%}.center{margin:1.5rem auto}.who{max-width:14ch}}
.u-inline{display:inline}.u-wauto{width:auto}.u-totals{max-width:420px;margin-left:auto}.u-normal{font-weight:normal}.u-foot{text-align:center;padding:1rem}.u-hp{position:absolute;left:-9999px}.u-w820{max-width:820px;margin:1.25rem auto;padding:0 1rem}.u-img80x240{max-height:80px;max-width:240px}.u-img80{max-height:80px}.u-img40{max-height:40px}.u-mb{margin-bottom:.5rem}
.authbrand{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:1.5rem;color:var(--jb-primary);margin:0 0 1rem}
.authbrand img{border-radius:8px}

/* ================= UAT revision 1: page header, toolbars, compact grid forms, date picker, line items ================= */
main{margin:.9rem 0}
.card{padding:.85rem 1.1rem;margin-bottom:.8rem}
h1{font-size:1.35rem;margin:.1rem 0 .7rem}h2{font-size:1.05rem;margin:.1rem 0 .5rem}
.card>p{margin:.35rem 0}
table th,table td{padding:.38rem .5rem}

/* page header: title left, the "create ..." action(s) right, on the same row (UAT-02) */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin:0 0 .7rem}
.pagehead h1{margin:0}
.pagehead .pa{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.backlink{margin:.1rem 0 .6rem}

/* search / filter toolbar: one row on a desktop, wraps on a narrow screen; equal control sizes (UAT-03) */
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem .6rem;align-items:center;margin:0 0 .75rem}
.toolbar input[type=text],.toolbar input[type=email],.toolbar input[type=number],.toolbar select{width:auto;flex:0 1 210px;min-width:150px;max-width:100%}
.toolbar input.grow{flex:1 1 240px}
.toolbar .dp{flex:0 1 200px;min-width:170px}
.toolbar label{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-weight:normal;white-space:nowrap}
.toolbar button,.toolbar .btn{flex:0 0 auto}
.toolbar .tb-end{margin-left:auto}

/* compact two-column forms (UAT-05, UAT-08, UAT-10, UAT-12). The grid is applied by app.js (class fg) or written into the template. */
form.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.5rem;align-items:start}
form.fg>.f{min-width:0}
form.fg>.f.w,form.fg>.fw{grid-column:1/-1}
form.fg input[type=text],form.fg input[type=email],form.fg input[type=password],form.fg input[type=number],form.fg input[type=date],form.fg select,form.fg textarea{max-width:none;width:100%}
form.fg .f>label:first-child{margin:.15rem 0 .2rem}
form.fg .f textarea{min-height:4.2rem}
form.fg .f .muted{margin:.15rem 0 0;font-size:.88rem}
form.fg>h2,form.fg>h3{margin:.5rem 0 .1rem}
form.fg>.actions,.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.35rem 0 0;padding-top:.6rem;border-top:1px solid var(--jb-border)}
form.fg>table,form.fg>.fw table{margin:.2rem 0}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.5rem}
@media (min-width:1700px){form.fg.f3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){form.fg,.f2{grid-template-columns:minmax(0,1fr)}.pagehead .pa{width:100%}.toolbar input[type=text],.toolbar select,.toolbar .dp{flex:1 1 100%}}

/* Thai date field + calendar popup (UAT-09) */
.dp{position:relative;display:inline-flex;gap:.3rem;align-items:center;max-width:100%;width:100%}
.dp-input{flex:1 1 auto;min-width:0;width:100%}
.dp-input.bad{border-color:var(--jb-bad);box-shadow:0 0 0 2px rgba(180,35,24,.2)}
.dp-btn{flex:0 0 auto;padding:.35rem .55rem;line-height:1.2}
.dp-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:70;width:19rem;max-width:92vw;background:var(--jb-surface);border:1px solid var(--jb-border);border-radius:10px;box-shadow:0 10px 28px rgba(31,41,55,.22);padding:.6rem}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-bottom:.4rem}
.dp-head strong{flex:1;text-align:center;font-size:.98rem}
.dp-head button{padding:.2rem .55rem}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{text-align:center;font-size:.8rem;color:var(--jb-muted);padding:.15rem 0}
.dp-day{background:transparent;color:var(--jb-text);padding:.35rem 0;border-radius:6px;text-align:center}
.dp-day:hover{background:var(--jb-primary-soft);color:var(--jb-primary-hover)}
.dp-day.today{box-shadow:inset 0 0 0 1px var(--jb-secondary)}
.dp-day.sel{background:var(--jb-primary);color:#fff}
.dp-foot{display:flex;justify-content:space-between;margin-top:.45rem}
.dp-foot button{padding:.25rem .7rem}
@media (max-width:600px){.dp-panel{position:fixed;left:.5rem;right:.5rem;bottom:.5rem;top:auto;width:auto;max-width:none}}

/* document line items (UAT-11) */
table.lines{margin:.2rem 0}
table.lines td{padding:.3rem .35rem;vertical-align:top}
table.lines input[type=text],table.lines textarea,table.lines select{max-width:none;width:100%}
table.lines td input[size]{width:100%;min-width:3.6rem}
table.lines textarea{min-height:2.6rem;margin-top:.25rem}
table.lines .rowdel{padding:.2rem .5rem}
table.lines th:last-child,table.lines td:last-child{white-space:nowrap}
.addrow-wrap{margin:.35rem 0 .2rem}
.noscript-rows{font-size:.9rem}

/* inline category creation in the item form (UAT-07) */
.catrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.catrow select{flex:1 1 220px}
.catadd{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.35rem}
.catadd[hidden]{display:none}
.catadd-name{width:15rem;max-width:100%}

/* workspace dashboard (UAT-04) */
.dash-hello{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
.dash-hello h1{margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;margin:.2rem 0 .8rem}
.kpi{background:var(--jb-surface);border:1px solid var(--jb-border);border-radius:10px;padding:.65rem .85rem}
.kpi .n{display:block;font-size:1.45rem;font-weight:600;color:var(--jb-primary-hover);line-height:1.2}
.kpi .l{display:block;font-size:.88rem;color:var(--jb-muted)}
.kpi a{text-decoration:none}
.kpi.warnk .n{color:var(--jb-warn)}
.kpi.badk .n{color:var(--jb-bad)}
.dash-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
@media (max-width:900px){.dash-cols{grid-template-columns:1fr}}
.shortcuts{display:flex;flex-wrap:wrap;gap:.5rem}
.todo{list-style:none;margin:0;padding:0}
.todo li{padding:.35rem 0;border-bottom:1px solid var(--jb-border);display:flex;justify-content:space-between;gap:.75rem}
.todo li:last-child{border-bottom:0}
[hidden]{display:none!important}
.actions-top{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .6rem}

/* step forms and report filters written as label + control pairs: fields side by side, button at the end of the row */
form.filterform{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:flex-end;margin:.2rem 0 .7rem}
form.filterform>.f{flex:0 1 250px;min-width:170px}
form.filterform input[type=text],form.filterform select{width:100%;max-width:none}
form.filterform>.fw{flex:1 1 100%}
form.filterform>.actions{flex:0 0 auto;border:0;padding:0;margin:0 0 .1rem}
form.filterform .f>label:first-child{margin:.15rem 0 .2rem}
form.filterform>select,form.filterform>input[type=text]{width:auto;min-width:220px;max-width:100%}

/* line items as cards on a phone (UAT-12): header row hidden, every field labelled by data-l (set by app.js from the table header) */
@media (max-width:700px){
  table.lines[data-addrows],table.lines[data-addrows] tbody{display:block;width:100%}
  table.lines[data-addrows] tr:first-child{display:none}
  table.lines[data-addrows] tr{display:block;border:1px solid var(--jb-border);border-radius:8px;padding:.45rem .55rem;margin:.5rem 0;background:var(--jb-surface)}
  table.lines[data-addrows] td{display:block;border:0;padding:.15rem 0;white-space:normal}
  table.lines[data-addrows] td::before{content:attr(data-l);display:block;font-size:.8rem;color:var(--jb-muted)}
  table.lines[data-addrows] td:last-child{display:flex;gap:.4rem;justify-content:flex-end}
  table.lines[data-addrows] td:last-child::before{content:none}
  table.lines[data-addrows] td input[size]{width:100%}
}

/* ---- CEO UAT revision 2: issuer PDF appearance (colour + font) - self-hosted OFL fonts, loaded only when the preview uses them ---- */
@font-face{font-family:'Sarabun';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/Sarabun-Regular.ttf') format('truetype')}
@font-face{font-family:'Sarabun';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/Sarabun-Bold.ttf') format('truetype')}
.ff-sarabun{font-family:'Sarabun',var(--jb-font)}
@font-face{font-family:'Prompt';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/Prompt-Regular.ttf') format('truetype')}
@font-face{font-family:'Prompt';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/Prompt-Bold.ttf') format('truetype')}
.ff-prompt{font-family:'Prompt',var(--jb-font)}
@font-face{font-family:'Kanit';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/Kanit-Regular.ttf') format('truetype')}
@font-face{font-family:'Kanit';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/Kanit-Bold.ttf') format('truetype')}
.ff-kanit{font-family:'Kanit',var(--jb-font)}
@font-face{font-family:'Bai Jamjuree';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/BaiJamjuree-Regular.ttf') format('truetype')}
@font-face{font-family:'Bai Jamjuree';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/BaiJamjuree-Bold.ttf') format('truetype')}
.ff-baijamjuree{font-family:'Bai Jamjuree',var(--jb-font)}
@font-face{font-family:'IBM Plex Sans Thai';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/IBMPlexSansThai-Regular.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Thai';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/IBMPlexSansThai-Bold.ttf') format('truetype')}
.ff-ibmplexsansthai{font-family:'IBM Plex Sans Thai',var(--jb-font)}
@font-face{font-family:'K2D PDF';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/K2D-Regular.ttf') format('truetype')}
@font-face{font-family:'K2D PDF';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/K2D-Bold.ttf') format('truetype')}
.ff-k2d{font-family:'K2D PDF',var(--jb-font)}
@font-face{font-family:'Krub';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/Krub-Regular.ttf') format('truetype')}
@font-face{font-family:'Krub';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/Krub-Bold.ttf') format('truetype')}
.ff-krub{font-family:'Krub',var(--jb-font)}
@font-face{font-family:'Thasadith';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/Thasadith-Regular.ttf') format('truetype')}
@font-face{font-family:'Thasadith';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/Thasadith-Bold.ttf') format('truetype')}
.ff-thasadith{font-family:'Thasadith',var(--jb-font)}
@font-face{font-family:'Noto Serif Thai';font-weight:400;font-display:swap;src:url('/assets/pdf-fonts/NotoSerifThai-Regular.ttf') format('truetype')}
@font-face{font-family:'Noto Serif Thai';font-weight:700;font-display:swap;src:url('/assets/pdf-fonts/NotoSerifThai-Bold.ttf') format('truetype')}
.ff-notoserifthai{font-family:'Noto Serif Thai',var(--jb-font)}
form.apform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1rem 2rem;align-items:start}
form.apform .apwide,form.apform .actions{grid-column:1/-1}
form.apform h3{margin:.2rem 0 .5rem;font-size:1rem}
.swatches{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 .8rem}
button.swatch{width:2.2rem;height:2.2rem;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--jb-border);cursor:pointer;min-height:0}
button.swatch.on{box-shadow:0 0 0 3px var(--jb-primary)}
.hexrow{display:flex;gap:.5rem;align-items:center}
.hexrow input[type=color]{width:3rem;height:2.4rem;padding:.1rem;flex:0 0 auto}
.hexrow input[type=text]{max-width:9rem;text-transform:uppercase}
.small{font-size:.85rem}
.fontlist{display:grid;gap:.4rem}
label.fontopt{display:flex;gap:.5rem;align-items:flex-start;padding:.45rem .6rem;border:1px solid var(--jb-border);border-radius:8px;cursor:pointer;margin:0}
label.fontopt:has(input:checked){border-color:var(--jb-primary);background:var(--jb-primary-soft)}
label.fontopt input{margin-top:.35rem;width:auto}
label.fontopt .fp{font-size:1rem;line-height:1.5}
.apv{--ap:#4B67A9;border:1px solid var(--jb-border);border-radius:8px;background:#fff;padding:.8rem 1rem;max-width:34rem}
.apv-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.apv-name{color:var(--ap);font-size:1.05rem}.apv-title{color:var(--ap);font-weight:700;font-size:1.25rem}
.apv-rule{height:3px;background:var(--ap);opacity:.45;margin:.4rem 0 .6rem}
.apv-th,.apv-row{display:grid;grid-template-columns:3.2rem 1fr 7rem;gap:.4rem;padding:.25rem .4rem}
.apv-th{background:var(--ap);color:#fff;font-weight:700}
.apv-row{border-bottom:1px solid #ccc}.apv-row span:last-child,.apv-th span:last-child,.apv-total{text-align:right}
.apv-total{display:flex;justify-content:space-between;padding:.4rem;color:var(--ap);font-size:1.05rem}
#appreview[aria-disabled=true]{pointer-events:none;opacity:.5}
@media (max-width:760px){form.apform{grid-template-columns:minmax(0,1fr)}.apv-th,.apv-row{grid-template-columns:2.6rem 1fr 5.5rem}}
.invitebox{padding:.8rem 1rem;border-radius:8px;margin:.6rem 0}
.invitebox .invitestatus{margin:.3rem 0 .5rem;font-weight:600}
.invitebox .copyrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.3rem 0}
.invitebox .copyrow input{flex:1 1 22rem;max-width:100%;min-width:0}
.ok{background:var(--jb-ok-bg);border:1px solid var(--jb-ok-line);color:#1F2937}
table.kv{border-collapse:collapse;margin:.4rem 0 .6rem}table.kv th{text-align:left;font-weight:600;padding:.3rem 1.2rem .3rem 0;color:var(--jb-muted);white-space:nowrap;vertical-align:top}table.kv td{padding:.3rem 0}

/* ---- CEO UAT revision 2: searchable customer selector + add-customer dialog ---- */
.cselrow{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.csel{position:relative;flex:1 1 18rem;min-width:0}
.csel-input{width:100%;padding-right:2rem}
.csel-clear{position:absolute;right:.35rem;top:.3rem;width:1.8rem;height:1.8rem;min-height:0;padding:0;border:0;background:transparent;color:var(--jb-muted);font-size:1.3rem;line-height:1;cursor:pointer}
.csel-list{position:absolute;z-index:60;left:0;right:0;top:100%;max-height:19rem;overflow:auto;margin:.2rem 0 0;padding:.2rem;list-style:none;background:var(--jb-surface);border:1px solid var(--jb-border);border-radius:8px;box-shadow:0 8px 24px rgba(31,41,55,.18)}
.csel-list[hidden],.csel-clear[hidden]{display:none}
.csel-list li{padding:.45rem .7rem;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:.05rem}
.csel-list li.on,.csel-list li[role=option]:hover{background:var(--jb-primary-soft)}
.csel-list .cs-sub{font-size:.82rem;color:var(--jb-muted)}
.csel-list li.csel-none,.csel-list li.csel-more{color:var(--jb-muted);cursor:default;font-size:.92rem}
.csel-list li.csel-more{cursor:pointer;color:var(--jb-primary);text-align:center}
.csel-msg{min-height:1.1rem;margin-top:.15rem}
dialog.cdlg{border:1px solid var(--jb-border);border-radius:12px;max-width:44rem;width:calc(100% - 2rem);padding:1rem 1.3rem;color:var(--jb-text)}
dialog.cdlg::backdrop{background:rgba(31,41,55,.45)}
dialog.cdlg .g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem}
dialog.cdlg .g .w{grid-column:1/-1}
dialog.cdlg .actions{display:flex;gap:.6rem;margin-top:.8rem}
@media (max-width:640px){dialog.cdlg .g{grid-template-columns:minmax(0,1fr)}.cselrow .csel-add{width:100%}}
form.filterform>.f:has(.cselrow){flex:1 1 28rem}

/* ---- CEO UAT revision 2 (UAT-R1-01): ONE pattern for every "pick an issuer / customer, then continue" row, report filter and toolbar: label above the control, the controls and the
   button share one height and one baseline, the button sits at the end of the row on a desktop and fills the row on a phone ---- */
form.filterform input[type=text],form.filterform select,form.filterform button,form.filterform .btn,
.toolbar input[type=text],.toolbar input[type=email],.toolbar input[type=number],.toolbar select,.toolbar button,.toolbar .btn,
.cselrow .csel-input,.cselrow button.csel-add{height:var(--jb-ctl);padding-top:0;padding-bottom:0;line-height:1.2}
form.filterform button,form.filterform .btn,.toolbar button,.toolbar .btn,.cselrow button.csel-add{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
form.filterform>.actions{margin:0}
form.filterform>.actions,form.filterform>.f{align-self:flex-end}
@media (max-width:600px){form.filterform>.actions{flex:1 1 100%}form.filterform>.actions button,form.filterform>.actions .btn{width:100%}form.filterform>.f{flex:1 1 100%}}

/* ---- CEO UAT revision 2 (UAT-R1-03): the document action toolbar - one row, primary first, secondary outline, destructive at the end ---- */
.doc-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.6rem 0 1rem}
.doc-toolbar form.inline{display:inline-flex;margin:0}
.doc-toolbar .btn,.doc-toolbar button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--jb-ctl);padding-top:0;padding-bottom:0;white-space:nowrap}
.doc-toolbar .tb-end{margin-left:auto}
.doc-toolbar .btn.primary,.doc-toolbar button.primary{background:var(--jb-primary);color:#fff;font-weight:600}
.doc-toolbar .btn.secondary{background:#fff;color:var(--jb-primary-hover);border:1px solid var(--jb-primary)}
.doc-toolbar .btn.secondary:hover{background:var(--jb-primary-soft)}
.doc-toolbar button.danger{background:#fff;color:var(--jb-bad);border:1px solid var(--jb-bad)}
.doc-toolbar button.danger:hover{background:var(--jb-bad);color:#fff}
@media (max-width:640px){.doc-toolbar .btn,.doc-toolbar form.inline,.doc-toolbar button{flex:1 1 100%}.doc-toolbar form.inline button{width:100%}.doc-toolbar .tb-end{margin-left:0}}
.doc-toolbar form.inline.tb-end{margin-left:auto}@media (max-width:640px){.doc-toolbar form.inline.tb-end{margin-left:0}}

/* ---- document detail: the action toolbar sits at the RIGHT of the title row (saves a line); phones and old browsers fall back to the stacked layout ---- */
@media (min-width:900px){
  .card:has(>.doc-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.2rem;align-items:start}
  .card:has(>.doc-toolbar)>*{grid-column:1/-1}
  .card:has(>.doc-toolbar)>h1{grid-column:1;grid-row:1}
  .card:has(>.doc-toolbar)>p.muted:nth-child(2){grid-column:1;grid-row:2}
  .card:has(>.doc-toolbar)>.doc-toolbar{grid-column:2;grid-row:1/span 2;justify-content:flex-end;max-width:58rem;margin:.2rem 0 .4rem}
  .card:has(>.doc-toolbar)>.doc-toolbar .tb-end{margin-left:0}
}

/* ---- CEO UAT 3: line totals, withholding box, live summary, payment screen, risky actions apart ---- */
table.lines .rowtotal{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;min-width:6.5rem}
table.lines .rowtotal output{display:inline-block}
.live-sum [data-sum]{font-variant-numeric:tabular-nums}
.live-sum tr[hidden],.wht-box [hidden]{display:none!important}
.wht-box{border:1px solid var(--jb-border);border-radius:8px;padding:.6rem .8rem;margin:.3rem 0 .8rem;background:var(--jb-surface)}
.wht-box .wht-rate{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0}
.wht-box .wht-rate label{margin:0}
.wht-box .wht-rate select,.wht-box .wht-rate input[type=text]{width:auto;min-width:5.5rem}
.danger-zone{margin-top:1rem;padding-top:.8rem;border-top:1px dashed var(--jb-border)}
table.paylines td{vertical-align:top}
table.paylines input[type=text]{width:100%;min-width:4.5rem}
table.paylines .payfull{padding:.2rem .5rem;margin-top:.25rem}
table.paylines output{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  table.paylines,table.paylines tbody{display:block;width:100%}
  table.paylines tr:first-child{display:none}
  table.paylines tr{display:block;border:1px solid var(--jb-border);border-radius:8px;padding:.45rem .55rem;margin:.5rem 0;background:var(--jb-surface)}
  table.paylines td{display:block;border:0;padding:.15rem 0;white-space:normal;text-align:left}
  table.paylines td::before{content:attr(data-l);display:block;font-size:.8rem;color:var(--jb-muted)}
  table.paylines td.r{text-align:left}
}

/* ---- document form: discount | withholding tax | summary side by side (3 equal columns from 768 px, stacked below; a Bootstrap col-md-4 equivalent without the dependency) ---- */
.calc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch;margin:.4rem 0 1rem}
.calc-col{min-width:0;border:1px solid var(--jb-border);border-radius:8px;padding:.2rem .9rem .8rem;background:var(--jb-surface)}
.calc-col>h2{margin-top:.6rem}
.calc-col .wht-box{border:0;padding:0;margin:0;background:none}
.calc-col .u-totals{max-width:none;width:100%;margin:0}
.calc-col .toolbar{flex-wrap:wrap}
.calc-col select,.calc-col input[type=text]{max-width:100%}
@media (max-width:767px){.calc-row{grid-template-columns:minmax(0,1fr)}}