:root {
  --font: 'Segoe UI', Tahoma, 'Phetsarath OT', 'Saysettha OT', 'Noto Sans Lao', 'Noto Sans Lao UI', 'Leelawadee UI', 'Lao UI', sans-serif;
  --bg: #d6dfe9;
  --work: #eaeff5;
  --menu: #f3f5f8;
  --border: #9aaabb;
  --border-lt: #c5d0dc;
  --title1: #4f7ab3;
  --title2: #2d5a94;
  --title-in1: #9fb3cc;
  --title-in2: #8298b5;
  --accent: #2d6a2d;
  --qbgreen: #3c7d25;
  --link: #1a4f9c;
  --panel: #fff;
  --form-bg: #f4f7fb;
  --form-head: #dfe8f3;
  --sel: #cfe2ff;
  --row-alt: #f6f9fc;
  --text: #1c2733;
  --muted: #5d6b7a;
  --danger: #b3261e;
  --ok: #217a36;
  --warn: #9a6a00;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg); }
button, input, select, textarea { font-family: inherit; font-size: 13px; color: inherit; }
input, select, textarea { border: 1px solid #a9b6c4; background: #fff; padding: 3px 5px; border-radius: 2px; min-height: 24px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #7fb0f0; outline-offset: -1px; border-color: #5b8fd6; }
input[readonly] { background: #f1f3f6; }
input.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
textarea { resize: vertical; }
a { color: var(--link); cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.neg { color: var(--danger); }
.btn { border: 1px solid #8b9cb0; background: linear-gradient(#fdfdfe, #e3e9f0); padding: 4px 12px; border-radius: 3px; cursor: pointer; min-height: 26px; white-space: nowrap; }
.btn:hover { background: linear-gradient(#fff, #d8e3ef); border-color: #5b7fa8; }
.btn:active { background: #d0dbe8; }
.btn.primary { background: linear-gradient(#5b93d6, #2f69b3); color: #fff; border-color: #24558f; }
.btn.primary:hover { background: linear-gradient(#6aa0e0, #3673c0); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: 2px 8px; min-height: 22px; font-size: 12px; }

/* ---------- app frame ---------- */
#app { display: flex; flex-direction: column; height: 100vh; }
#titlebar { background: linear-gradient(#5d87bf, #33609b); color: #fff; padding: 4px 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
#titlebar .logo { font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; gap: 6px; }
#titlebar .logo svg { width: 18px; height: 18px; }
#titlebar .company { font-weight: 600; }
#titlebar .spacer { flex: 1; }
#titlebar .user { opacity: .95; }
#menubar { background: var(--menu); border-bottom: 1px solid var(--border-lt); display: flex; user-select: none; position: relative; z-index: 9000; flex-wrap: wrap; }
#menubar > .mi { padding: 4px 10px; cursor: default; position: relative; }
#menubar > .mi:hover, #menubar > .mi.open { background: #cfe0f5; }
.menu { position: absolute; background: #fff; border: 1px solid #8193a8; box-shadow: 2px 3px 8px rgba(0,0,0,.25); min-width: 240px; padding: 3px 0; z-index: 9500; }
#menubar > .mi > .menu { top: 100%; left: 0; }
.menu .mitem { padding: 5px 24px 5px 26px; white-space: nowrap; position: relative; cursor: default; }
.menu .mitem:hover { background: #d6e6fb; }
.menu .mitem.dis { color: #999; }
.menu .mitem.dis:hover { background: none; }
.menu .mitem .sc { float: right; color: var(--muted); margin-left: 24px; font-size: 12px; }
.menu .mitem.sub::after { content: '▸'; position: absolute; right: 8px; color: #555; }
.menu .mitem > .menu { left: 100%; top: -4px; display: none; }
.menu .mitem:hover > .menu { display: block; }
.menu .sep { border-top: 1px solid #dde3ea; margin: 3px 0; }
.menu .mhdr { padding: 6px 24px 4px 12px; font-weight: 700; color: #1f3a5f; cursor: default; white-space: nowrap; }
.menu.grouped { max-height: calc(100vh - 90px); overflow-y: auto; }
.menu .mitem .chk { position: absolute; left: 8px; }
#iconbar { background: linear-gradient(#fafcff, #e1e9f3); border-bottom: 1px solid var(--border); display: flex; gap: 2px; padding: 3px 6px; align-items: stretch; overflow-x: auto; }
#iconbar .ib { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 2px 6px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 11.5px; color: #223; white-space: nowrap; }
#iconbar .ib:hover { border-color: #9db5d5; background: #eef4fc; }
#iconbar .ib svg { width: 24px; height: 24px; margin-bottom: 1px; }
#iconbar .sep { width: 1px; background: #c4cfdb; margin: 3px 4px; }
#iconbar .grow { flex: 1; }
#iconbar .search { align-self: center; display: flex; gap: 3px; }
#iconbar .search input { width: 150px; }
.langsw { display: flex; flex-shrink: 0; align-self: center; border: 1px solid #8b9cb0; border-radius: 3px; overflow: hidden; margin-left: 6px; }
.langsw span { padding: 3px 8px; cursor: pointer; background: #fff; font-size: 12px; white-space: nowrap; }
.langsw span + span { border-left: 1px solid #d5dde7; }
.langsw span.on { background: #2f69b3; color: #fff; }
#workspace { flex: 1; position: relative; overflow: hidden; background: var(--work); }
#statusbar { background: var(--menu); border-top: 1px solid var(--border-lt); padding: 2px 10px; font-size: 11.5px; color: var(--muted); display: flex; gap: 18px; }
#statusbar .grow { flex: 1; }

/* ---------- MDI windows ---------- */
.win { position: absolute; background: var(--panel); border: 1px solid #5a7597; box-shadow: 2px 4px 14px rgba(20,40,70,.35); display: flex; flex-direction: column; min-width: 260px; min-height: 120px; border-radius: 4px 4px 2px 2px; overflow: hidden; }
.win .wt { background: linear-gradient(var(--title-in1), var(--title-in2)); color: #fff; padding: 4px 6px 4px 10px; display: flex; align-items: center; gap: 6px; cursor: move; user-select: none; font-weight: 600; }
.win.active .wt { background: linear-gradient(var(--title1), var(--title2)); }
.win .wt .tt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win .wt .wb { width: 22px; height: 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 2px; background: rgba(255,255,255,.12); color: #fff; font-size: 11px; line-height: 15px; text-align: center; cursor: pointer; }
.win .wt .wb:hover { background: rgba(255,255,255,.3); }
.win .wt .wb.x:hover { background: #c9453a; }
.win .wbody { flex: 1; overflow: auto; position: relative; background: var(--form-bg); }
.win .rs { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #9aaabb 50%, transparent 60%, #9aaabb 70%, transparent 80%); }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win.min { height: auto !important; min-height: 0; width: 240px !important; }
.win.min .wbody, .win.min .rs { display: none; }

/* ---------- dialogs ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20,35,55,.35); z-index: 20000; display: flex; align-items: center; justify-content: center; }
.dlg { background: #fff; border: 1px solid #5a7597; box-shadow: 0 8px 30px rgba(0,0,0,.35); min-width: 320px; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; border-radius: 4px; resize: both; overflow: hidden; }
.dlg .dt { background: linear-gradient(var(--title1), var(--title2)); color: #fff; padding: 6px 12px; font-weight: 600; }
.dlg .db { padding: 14px 16px; overflow: auto; }
.dlg .db { flex: 1; min-height: 0; overflow-x: hidden; }
.dlg .df { padding: 10px 16px; border-top: 1px solid #e1e7ee; display: flex; justify-content: flex-end; gap: 8px; background: #f6f8fb; }
.dlg .msg { white-space: pre-wrap; line-height: 1.5; }
.dlg .msg.err::before { content: '⚠ '; color: var(--danger); font-weight: 700; }

/* ---------- forms ---------- */
.fgrid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.fgrid > * { min-width: 0; }
.fgrid select { max-width: 100%; }
.fgrid label { color: #333; white-space: nowrap; }
.fgrid .full { grid-column: 1 / -1; }
.frow { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.fld { display: flex; flex-direction: column; gap: 2px; }
.fld > label { font-size: 11.5px; color: #3d4a58; }
.toolbar { display: flex; gap: 4px; padding: 5px 8px; background: linear-gradient(#f9fbfd, #e6edf5); border-bottom: 1px solid var(--border-lt); align-items: center; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.toolbar .tb { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 12.5px; background: none; }
.toolbar .tb:hover { border-color: #9db5d5; background: #eef4fc; }
.toolbar .tb-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: #c5d3e3; }
.toolbar .tb svg { width: 16px; height: 16px; }
.footbar { display: flex; gap: 6px; padding: 8px 10px; background: #eef2f7; border-top: 1px solid var(--border-lt); align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; }
.footbar .grow { flex: 1; }
.txform { padding: 10px 14px 6px; min-width: 760px; }
.txform .fhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.txform .ftitle { font-size: 26px; font-weight: 300; color: #2c4f7c; letter-spacing: .5px; margin: 2px 0 8px; font-family: Georgia, 'Times New Roman', var(--font); }
body.lang-lo .txform .ftitle { font-family: var(--font); font-weight: 600; font-size: 22px; }
.txform .paper { background: #fff; border: 1px solid #b8c6d6; padding: 10px 12px; border-radius: 3px; }
.txform .band { background: var(--form-head); border: 1px solid #b8c6d6; border-radius: 3px; padding: 8px 10px; margin-bottom: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.txform .addr { width: 230px; height: 74px; }
.txform .totals { margin-left: auto; min-width: 280px; }
.txform .totals table { width: 100%; border-collapse: collapse; }
.txform .totals td { padding: 3px 6px; }
.txform .totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; min-width: 120px; }
.txform .totals tr.big td { font-weight: 700; font-size: 14px; border-top: 1px solid #b8c6d6; }
.fxbox { background: #fff8e1; border: 1px solid #e6cf85; padding: 4px 8px; border-radius: 3px; font-size: 12px; display: flex; gap: 6px; align-items: center; }
.fxbox input { width: 110px; }
.stamp { position: absolute; right: 30px; top: 60px; font-size: 34px; font-weight: 800; border: 4px solid; padding: 2px 14px; transform: rotate(-12deg); opacity: .55; pointer-events: none; letter-spacing: 2px; }
.stamp.paid { color: #1d7a2e; } .stamp.void { color: #b3261e; } .stamp.closed { color: #666; } .stamp.dep { color: #2d5a94; }
.tabs { display: flex; gap: 2px; margin-top: 8px; }
.tabs .tab { padding: 5px 14px; border: 1px solid #b8c6d6; border-bottom: none; background: #e3eaf3; cursor: pointer; border-radius: 3px 3px 0 0; }
.tabs .tab.on { background: #fff; font-weight: 600; }
.tabs .tab .amt { color: var(--muted); font-weight: 400; margin-left: 6px; }

/* ---------- grids ---------- */
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th { background: linear-gradient(#f7f9fc, #e2e9f2); border: 1px solid #c3cfdc; padding: 4px 6px; font-weight: 600; text-align: left; font-size: 12px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
table.grid td { border: 1px solid #dbe3ec; padding: 0; height: 26px; }
table.grid td.ro { padding: 3px 6px; background: #fafbfd; }
table.grid td input, table.grid td select { border: none; width: 100%; height: 26px; background: transparent; border-radius: 0; padding: 2px 5px; min-height: 0; }
table.grid td input:focus, table.grid td select:focus { background: #fffbe0; outline: 1px solid #7fb0f0; }
table.grid td.ck { text-align: center; }
table.grid td.ck input { width: auto; height: auto; }
table.grid td.del { width: 22px; text-align: center; color: #b55; cursor: pointer; font-weight: 700; }
table.grid td.del:hover { background: #fde8e6; }
table.grid tr:hover td { background-color: #fbfdff; }
.gridwrap { border: 1px solid #b8c6d6; max-height: 330px; overflow: auto; background: #fff; }
table.list { border-collapse: collapse; width: 100%; background: #fff; }
table.list th { background: linear-gradient(#f7f9fc, #e2e9f2); border-bottom: 1px solid #c3cfdc; border-right: 1px solid #d8e0e9; padding: 4px 7px; text-align: left; font-weight: 600; font-size: 12px; position: sticky; top: 0; z-index: 1; white-space: nowrap; cursor: default; }
table.list td { padding: 3px 7px; border-bottom: 1px solid #edf1f5; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
table.list tbody tr:nth-child(even) td { background: var(--row-alt); }
table.list tbody tr:hover td { background: #e8f1fd; cursor: default; }
table.list tbody tr.sel td { background: var(--sel) !important; }
table.list tr.inactive td { color: #999; font-style: italic; }
table.list td.num, table.list th.num { text-align: right; }
.listwrap { overflow: auto; background: #fff; border: 1px solid #b8c6d6; }

/* combo */
.combo { position: relative; display: inline-block; width: 100%; }
.combo input { width: 100%; padding-right: 18px; }
.combo .arrow { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #567; pointer-events: none; }
.combo-dd { position: fixed; background: #fff; border: 1px solid #7d93ad; box-shadow: 2px 4px 10px rgba(0,0,0,.25); max-height: 300px; overflow: auto; z-index: 30000; min-width: 260px; }
.combo-dd .opt { padding: 4px 8px; display: flex; justify-content: space-between; gap: 18px; white-space: nowrap; cursor: default; }
.combo-dd .opt .sub { color: var(--muted); font-size: 11.5px; margin-left: auto; }
/* currency of the account in every account list (LAK / THB / USD …) */
.combo-dd .opt .cur, .acur { flex: 0 0 auto; min-width: 38px; text-align: center; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: #eef2f7; color: #4a5a70; margin-left: 8px; }
.combo-dd .opt .cur.fx, .acur.fx { background: #fff3d6; color: #8a5a00; }
.combo-dd .opt.hi { background: #d6e6fb; }
.combo-dd .opt.add { color: var(--link); border-bottom: 1px solid #e3e9f0; }
.combo-dd .grp { padding: 3px 8px; font-size: 11px; font-weight: 700; color: #5a6c80; background: #f0f4f8; }

/* ---------- home page ---------- */
.home { display: grid; grid-template-columns: 1fr 300px; gap: 12px; padding: 12px; min-width: 900px; }
.home .pane { background: #fff; border: 1px solid #b8c6d6; border-radius: 6px; position: relative; }
.home .pane > h3 { margin: 0; padding: 5px 12px; font-size: 13px; color: #fff; background: linear-gradient(#6c95c9, #44709f); border-radius: 5px 5px 0 0; letter-spacing: .3px; }
.home .pane.vend > h3 { background: linear-gradient(#8a73b8, #634c93); }
.home .pane.cust > h3 { background: linear-gradient(#5aa05a, #347734); }
.home .pane.emp > h3 { background: linear-gradient(#d49a3a, #aa7418); }
.home .pane.comp > h3 { background: linear-gradient(#5d87bf, #33609b); }
.home .pane.bank > h3 { background: linear-gradient(#4a9aa8, #2a7380); }
.flow { display: flex; align-items: center; flex-wrap: wrap; padding: 14px 10px; gap: 0; }
.flow .node { width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; padding: 6px 2px; border-radius: 6px; font-size: 12px; line-height: 1.25; color: #1d3050; }
.flow .node:hover { background: #eef5ff; box-shadow: 0 0 0 1px #aac6ea inset; }
.flow .node .ic { width: 46px; height: 46px; margin-bottom: 4px; }
.flow .arr { width: 26px; height: 14px; flex: none; }
.flow .col { display: flex; flex-direction: column; gap: 6px; }
.home .side { display: flex; flex-direction: column; gap: 12px; }
.home .side .links { padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.home .side .links .node { flex-direction: row; width: auto; gap: 6px; text-align: left; justify-content: flex-start; }
.home .side .links .node .ic { width: 28px; height: 28px; margin: 0; }
.balances table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.balances td { padding: 4px 10px; border-bottom: 1px solid #eef2f6; }
.balances td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.balances tr:hover td { background: #eef5ff; cursor: pointer; }

/* centers */
.center { display: flex; height: 100%; }
.center .left { width: 330px; min-width: 240px; border-right: 1px solid #b8c6d6; display: flex; flex-direction: column; background: #fff; }
.center .left .tabsbar { display: flex; background: #e3eaf3; border-bottom: 1px solid #b8c6d6; }
.center .left .tabsbar div { padding: 5px 12px; cursor: pointer; }
.center .left .tabsbar div.on { background: #fff; font-weight: 600; }
.center .left .filt { padding: 5px; display: flex; gap: 4px; border-bottom: 1px solid #dde4ec; }
.center .left .filt input { flex: 1; }
.center .left .listwrap { flex: 1; border: none; }
.center .right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.center .info { padding: 10px 14px; background: #fff; border-bottom: 1px solid #b8c6d6; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3px 20px; min-height: 110px; }
.center .info h2 { grid-column: 1 / -1; margin: 0 0 4px; font-size: 17px; color: #25456f; display: flex; align-items: center; gap: 10px; }
.center .info .kv { display: flex; gap: 8px; } .center .info .kv b { min-width: 110px; font-weight: 600; color: #4d5b6b; }
.center .right .txbar { padding: 5px 8px; display: flex; gap: 6px; align-items: center; background: #eef2f7; border-bottom: 1px solid #c9d4e0; flex-wrap: wrap; }
.center .right .listwrap { flex: 1; border: none; }

/* reports */
.rptbar { display: flex; gap: 6px; padding: 6px 8px; align-items: center; background: linear-gradient(#f9fbfd, #e6edf5); border-bottom: 1px solid var(--border-lt); flex-wrap: wrap; }
.rptbar input[type=date] { width: 140px; }
.report { padding: 18px 24px; background: #fff; min-height: 100%; }
.report .rh { text-align: center; margin-bottom: 14px; }
.report .rh .co { font-weight: 700; font-size: 15px; }
.report .rh .ti { font-weight: 700; font-size: 18px; margin: 2px 0; }
.report .rh .pe { color: #444; }
.report .rh .cu { color: var(--muted); font-size: 12px; }
table.rpt { border-collapse: collapse; margin: 0 auto; min-width: 60%; font-size: 12.5px; }
table.rpt th { border-bottom: 2px solid #333; padding: 4px 8px; text-align: left; white-space: nowrap; font-weight: 700; }
table.rpt th.num { text-align: right; }
table.rpt td { padding: 2px 8px; white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
table.rpt td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.rpt tr.hdr td { font-weight: 700; padding-top: 6px; }
table.rpt tr.tot td { font-weight: 700; border-top: 1px solid #555; }
table.rpt tr.tot td:first-child { border-top: none; }
table.rpt tr.grand td { border-top: 1px solid #222; border-bottom: 3px double #222; font-weight: 800; }
table.rpt tr.sep td { border-top: 1px solid #e5e5e5; }
table.rpt tr.dr:hover td { background: #e8f1fd; cursor: zoom-in; }
.rcenter { display: flex; height: 100%; }
.rcenter .cats { width: 250px; background: #fff; border-right: 1px solid #b8c6d6; overflow: auto; }
.rcenter .cats div { padding: 7px 12px; cursor: pointer; border-bottom: 1px solid #eef2f6; }
.rcenter .cats div.on { background: #d6e6fb; font-weight: 600; }
.rcenter .rl { flex: 1; overflow: auto; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-content: start; }
.rcenter .rl .rc { background: #fff; border: 1px solid #c3cfdc; border-radius: 5px; padding: 10px 12px; cursor: pointer; }
.rcenter .rl .rc:hover { border-color: #5b8fd6; box-shadow: 0 2px 6px rgba(40,90,160,.15); }
.rcenter .rl .rc b { display: block; color: #1d3f6e; margin-bottom: 3px; }
.rcenter .rl .rc span { color: var(--muted); font-size: 12px; }

/* login */
.login-bg { position: fixed; inset: 0; background: linear-gradient(135deg, #2d5a94 0%, #4f7ab3 50%, #9fb8d8 100%); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 20px 0; box-sizing: border-box; }
.login { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.35); width: 600px; max-width: 95vw; overflow: hidden; margin: auto 0; flex-shrink: 0; }
.login .lh { background: linear-gradient(#f8fbff, #e1eaf5); padding: 18px 24px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #c5d0dc; }
.login .lh svg { width: 48px; height: 48px; }
.login .lh h1 { margin: 0; font-size: 22px; color: #1f4b82; }
.login .lh p { margin: 2px 0 0; color: var(--muted); }
.login .lb { padding: 18px 24px; }
.login .lb .fgrid { grid-template-columns: 140px 1fr; }
.login .lf { padding: 12px 24px 18px; display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.complist { border: 1px solid #b8c6d6; max-height: min(300px, 38vh); min-height: 60px; overflow-y: auto; margin-bottom: 12px; border-radius: 4px; outline: none; scrollbar-gutter: stable; }
.complist:focus { border-color: #3b7bd4; }
.complist div .cn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.comp-find { width: 240px; max-width: 55%; }
.complist div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #eef2f6; display: flex; justify-content: space-between; }
.complist div.on, .complist div.on:hover { background: #1e6fd9; color: #fff; font-weight: 700; }
.complist div.on .muted { color: #e3eefc; }
.complist div:hover { background: #eaf2fd; }
.complist div.locked .cn { color: #9aa5b1; }
.complist div.locked .muted { color: var(--danger, #b3261e); }
.err { color: var(--danger); min-height: 18px; white-space: pre-line; }

.snap { padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.card { background: #fff; border: 1px solid #b8c6d6; border-radius: 6px; padding: 10px 14px; }
.card h4 { margin: 0 0 8px; color: #25456f; font-size: 13.5px; }
.kpi { display: flex; gap: 12px; flex-wrap: wrap; }
.kpi div { flex: 1; min-width: 120px; background: #f4f8fd; border: 1px solid #d6e2f0; border-radius: 5px; padding: 8px 10px; }
.kpi b { display: block; font-size: 17px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.chart svg { width: 100%; height: 200px; }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #e3eaf3; color: #345; font-weight: 600; }
.badge.open { background: #fff1d6; color: #7a5200; } .badge.paid, .badge.closed { background: #dcf3e1; color: #1d6a30; } .badge.void { background: #fbe0de; color: #9b2119; }
.permtable td, .permtable th { padding: 4px 10px; }
.help { padding: 16px 22px; line-height: 1.6; max-width: 900px; background: #fff; min-height: 100%; }
.help h2 { color: #25456f; } .help code { background: #eef2f7; padding: 1px 5px; border-radius: 3px; }

@media print {
  body * { visibility: hidden; }
  .printable, .printable * { visibility: visible; }
  .printable { position: absolute; left: 0; top: 0; width: 100%; }
}
@media (max-width: 800px) {
  .home { grid-template-columns: 1fr; min-width: 0; }
  #iconbar .ib span { display: none; }
  #iconbar .ib { min-width: 36px; }
}
/* Lao financial statement forms */
.report .lao-h { margin-bottom: 10px; }
.report .lao-h .motto { text-align: center; font-weight: 700; line-height: 1.6; }
.report .lao-co { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; font-size: 12.5px; line-height: 1.6; }
.report .lao-ti { text-align: center; font-weight: 700; font-size: 18px; margin-top: 10px; }
.report .lao-pe { text-align: center; color: #333; margin-top: 2px; white-space: pre-line; }
.report table.rpt.lao th, .report table.rpt.lao td { border: 1px solid #9aa7b6; }
.report table.rpt th.grp { text-align: center; }
.report .lao-f { margin-top: 12px; }
.report .lao-f .fn { font-size: 11.5px; font-style: italic; color: #444; }
.report .lao-f .place { text-align: right; margin-top: 10px; }
.report .lao-f .sigs { display: flex; justify-content: space-around; text-align: center; margin-top: 8px; }
.report .lao-f .sigs .line { margin-top: 48px; color: #666; }
.rcenter .rl .rc-sep { grid-column: 1 / -1; border-top: 1px solid var(--line, #d5dde8); margin: 6px 0; height: 0; }
/* Lao journal entry book */
.lj-tot { display: flex; gap: 28px; justify-content: flex-end; margin-top: 8px; font-size: 13.5px; }
.lj-tot .err-text { color: var(--danger, #c0392b); font-weight: 700; }
.lj-tot .ok-text { color: #1e8449; font-weight: 700; }
.lj-mode { margin-left: 14px; font-size: 13px; font-weight: 400; color: #555; background: #eef3f9; border-radius: 10px; padding: 2px 10px; }
.lj-mode.edit { background: #fff3cd; color: #7a5a00; }
.lj-book table.rpt tr.sel td { background: #fff7d6; }
.toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: #2e7d32; color: #fff; padding: 10px 22px; border-radius: 6px; z-index: 9999; box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: opacity .5s; }
.toast.out { opacity: 0; }
.lj-find { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
.lj-find input { height: 26px; }
table.grid th.grp { text-align: center; border-bottom: 1px solid #c3cfdc; }
/* payroll: the accounting entry of the month under the table */
.pr-je { border-top: 1px solid var(--border-lt); background: #fbfcfe; padding: 4px 10px 6px; max-height: 240px; overflow: auto; flex-shrink: 0; }
.pr-je-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; min-height: 30px; }
.pr-je-head a { cursor: pointer; color: #1f4e8c; }
.pr-je-head .grow { flex: 1; }
.pr-je-t { width: 100%; max-width: 760px; font-size: 12.5px; }
.pr-je-t td, .pr-je-t th { padding: 3px 8px; }
.pr-je-t tr.tot td { font-weight: 700; border-top: 2px solid #c3cfdc; }
.pr-je-t td.lbl { color: #445; white-space: nowrap; }
.pr-je-acc { width: 100%; min-width: 260px; max-width: 420px; padding: 2px 4px; font-size: 12.5px; }
.pr-je-t { max-width: 1100px; }
.pr-je-acc.changed { background: #fff6e0; border-color: #e0a030; }
.pe-jv { margin-top: 12px; border-top: 1px solid var(--border-lt); padding-top: 6px; }
.pe-jv-sub { font-weight: 600; color: #445; margin: 8px 0 3px; font-size: 12.5px; }
.grid tr.pe-paid td { background: #f2f8f2; }
/* grids with two header rows (daily journal …): every column name in the middle of its column */
table.grid.hg2 th { text-align: center; vertical-align: middle; }
.lj-sep { display: inline-block; width: 1px; height: 22px; background: #c3cfdc; margin: 0 6px; vertical-align: middle; }
.win .paper .frow { flex-wrap: wrap; }
.report table.rpt.lao td { white-space: normal; }
.report table.rpt.lao td.wide { min-width: 200px; }
.report table.rpt:not(.lao) td:not(.num) { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.fxr td.fx-gain, .fx-gain { color: #1e8449; }
.fxr td.fx-loss, .fx-loss { color: #c0392b; }
.fxr tr.muted td { color: #999; }
.dlg .msg { white-space: pre-line; }

/* Modify Report dialog */
.rptbar .modbtn.on { background: linear-gradient(#fff4d6, #f3d98f); border-color: #c79a2c; font-weight: 600; }
.rptbar .btn.on:not(.modbtn) { background: linear-gradient(#e8f3ff, #cfe3fa); border-color: #5b8fd0; font-weight: 600; }
.ap-row:hover { background: #eef4fc; }
.mr { width: 100%; }
.mr-side .btn { white-space: normal; text-align: left; height: auto; }
.mr-side select { max-width: 100%; }
.mr-tabs { margin-top: 0; }
.mr-body { border: 1px solid #b8c6d6; padding: 10px 12px; background: #fff; min-height: 380px; }
.mr-pane fieldset { border: 1px solid #c5d0dc; border-radius: 3px; margin: 0 0 10px; padding: 6px 10px 10px; }
.mr-pane legend { color: #25456f; font-weight: 600; padding: 0 4px; }
.mr-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.mr-row input[type=date] { width: 140px; }
.mr-colwrap { display: flex; gap: 14px; }
.mr-cols { flex: none; width: 320px; height: 270px; overflow: auto; border: 1px solid #a9b6c4; background: #fff; }
.mr-col { display: flex; align-items: center; gap: 6px; padding: 2px 6px; cursor: default; white-space: nowrap; }
.mr-col:hover { background: #eef4fb; } .mr-col.sel { background: #cfe2ff; } .mr-col.fx span:nth-child(2) { color: #1a4f9c; }
.mr-tag { font-size: 10.5px; background: #e8effd; color: #1a4f9c; border-radius: 3px; padding: 0 4px; margin-left: auto; }
.mr-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mr-lab { font-weight: 600; margin-top: 8px; color: #3e4c59; }
.mr-line { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.mr-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* goods / services tabs in the item drop-down */
.combo-dd .combo-tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: 2px; padding: 4px 4px 0; background: #eef3f9; border-bottom: 1px solid #b8c6d6; }
.combo-dd .ctab { padding: 4px 10px; border: 1px solid #b8c6d6; border-bottom: none; border-radius: 4px 4px 0 0; background: #dfe7f1; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 12.5px; }
.combo-dd .ctab small { color: var(--muted); font-weight: 400; }
.combo-dd .ctab.on { background: #fff; color: #1a4f9c; position: relative; top: 1px; }
.combo-dd .ctab.empty { opacity: .55; }

/* tax document column */
select.taxdoc { width: 100%; border: 0; background: transparent; min-height: 22px; font-size: 12px; }
select.taxdoc.td-vat { color: #1d6b2a; font-weight: 600; } select.taxdoc.td-wht { color: #8a5a00; font-weight: 600; } select.taxdoc.td-none { color: #a33; }
/* attached documents */
.tb.att-tb.has, .btn.att-tb.has { color: #1a4f9c; font-weight: 700; }
.att-dlg { min-width: 560px; }
.att-drop { border: 2px dashed #9fb3cc; border-radius: 6px; padding: 12px; text-align: center; background: #f7fafd; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.att-drop.on { background: #e3efff; border-color: #3b7bd4; }
.att-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.att-list { margin-top: 10px; max-height: 46vh; overflow: auto; }
.att-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-bottom: 1px solid #e3e9f0; }
.att-row:hover { background: #f3f8ff; }
.att-thumb { width: 54px; height: 54px; object-fit: cover; border: 1px solid #c5d0dc; border-radius: 3px; cursor: pointer; background: #fff; }
.att-ico { width: 54px; text-align: center; font-size: 30px; cursor: pointer; }
.att-info { flex: 1; display: flex; flex-direction: column; cursor: pointer; min-width: 0; } .att-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-empty { padding: 14px; text-align: center; }
.report td.att-cell { text-align: center; width: 28px; } .report td.att-cell a { text-decoration: none; }
/* documents waiting for save + Document Center */
.tb.att-tb.wait, .btn.att-tb.wait { color: #b8641b; font-weight: 700; }
.att-note { background: #fff8e6; border: 1px solid #f0d9a8; border-radius: 4px; padding: 7px 10px; margin-bottom: 8px; font-size: 12.5px; }
.att-wait { color: #b8641b; font-size: 12px; }
.doc-center { display: flex; flex-direction: column; height: 100%; padding: 8px 10px; box-sizing: border-box; gap: 6px; }
.doc-stats { font-size: 12.5px; padding: 6px 8px; background: #f3f7fb; border: 1px solid #dde6f0; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tabs { display: flex; gap: 4px; border-bottom: 1px solid #c5d0dc; }
.doc-tab { padding: 6px 14px; cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; font-size: 13px; }
.doc-tab.on { background: #fff; border-color: #c5d0dc; font-weight: 700; margin-bottom: -1px; }
.doc-filters { flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.doc-grid { flex: 1; min-height: 0; overflow: auto; }
.doc-thumb { width: 38px; height: 38px; object-fit: cover; border: 1px solid #c5d0dc; border-radius: 3px; cursor: pointer; background: #fff; display: block; }
.doc-center .att-ico { width: 38px; font-size: 22px; }
/* input VAT column */
select.vatsel { width: 100%; font-size: 12px; }
select.vatsel.vat-ded { color: #1a6b2a; font-weight: 600; background: #eef8ef; }
select.vatsel.vat-nd { color: #9a4a00; font-weight: 600; background: #fff4e6; }
.att-status { font-size: 13px; }
.att-status.ok { color: #1f7a2e; font-weight: 700; background: #e7f6ea; border: 1px solid #b7e0bf; border-radius: 4px; padding: 4px 12px; }
.att-status.err { color: #b52a2a; font-weight: 700; }
.att-okline { color: #1f7a2e; font-size: 12px; }
.toast.att-toast { background: #2e7d32; font-weight: 600; }

#upd-bar { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 10000; background: #fff8e1; border: 1px solid #f0c36d; border-radius: 6px; padding: 8px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.2); font-size: 13.5px; display: flex; gap: 8px; align-items: center; }
.cur-foot { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; font-size: 13px; border-bottom: 1px solid #b8c6d6; }
/* Edit Currency dialog (QuickBooks style) */
.cur-edit-top { display: flex; gap: 16px; align-items: flex-start; }
.cur-edit-top .fgrid { flex: 1; }
.cur-inact { white-space: nowrap; padding-top: 6px; font-size: 13px; }
.cur-rates { margin-top: 10px; border: 1px solid #b8c6d6; border-radius: 4px; padding: 6px 10px 10px; }
.cur-rates legend { font-weight: 700; color: #25456f; padding: 0 4px; }
.cur-rate-hint { font-size: 12.5px; color: #3a4a5c; margin-bottom: 8px; }
.cur-rates-body { display: flex; gap: 14px; align-items: flex-start; }
.cur-cal { width: 238px; border: 1px solid #b8c6d6; border-radius: 4px; background: #fff; user-select: none; }
.cur-cal .cal-head { display: flex; justify-content: space-between; align-items: center; background: #e7eef7; padding: 3px 4px; font-size: 13px; }
.cur-cal .cal-head button { border: none; background: none; font-size: 18px; cursor: pointer; padding: 0 8px; color: #25456f; }
.cur-cal .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; padding: 4px; font-size: 12.5px; text-align: center; }
.cur-cal .cal-grid .wd { color: #7a8898; font-size: 11px; padding: 2px 0; }
.cur-cal .cal-grid .day { padding: 4px 0; cursor: pointer; border-radius: 3px; }
.cur-cal .cal-grid .day:hover { background: #dde8f5; }
.cur-cal .cal-grid .day.has { background: #d8f0dc; color: #145c22; font-weight: 700; }
.cur-cal .cal-grid .day.today { outline: 1px solid #7a9cc6; }
.cur-cal .cal-grid .day.sel { background: #2f6db3; color: #fff; }
.cur-cal .cal-foot { text-align: center; padding: 2px 0 5px; }
.cur-cal .linkbtn { border: none; background: none; color: #2f6db3; cursor: pointer; text-decoration: underline; font-size: 12.5px; }
.cur-cal-info { width: 238px; font-size: 12px; margin-top: 6px; }
.cur-rate-grid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cur-rate-scroll { width: 100%; height: 360px; overflow: auto; border: 1px solid #b8c6d6; }
.cur-rate-scroll table { width: 100%; border-collapse: collapse; }
.cur-rate-scroll th { position: sticky; top: 0; background: #e7eef7; text-align: left; padding: 4px 6px; font-size: 12.5px; }
.cur-rate-scroll td { padding: 2px 4px; border-bottom: 1px solid #eef2f7; }
.cur-rate-scroll td input { width: 100%; box-sizing: border-box; }
.cur-rate-scroll tr.hi td { background: #fff6cf; }
.cur-rate-scroll .rowdel { border: none; background: none; color: #b33; cursor: pointer; }
@media (max-width: 800px) { .cur-rates-body, .cur-edit-top { flex-direction: column; } }
.cur-cal-cap { font-size: 12.5px; margin-bottom: 6px; }
.cur-rate-scroll th.cur-d, .cur-rate-scroll td.cur-d { width: 45%; text-align: right; padding-right: 10px; border-right: 1px solid #b8c6d6; font-variant-numeric: tabular-nums; }
.cur-rate-scroll tbody tr:nth-child(even) td { background: #f3f7fb; }
.cur-rate-scroll tr.other td.cur-d { color: #8a96a6; }
.cur-rate-scroll input.cur-rate-in { border: 1px solid transparent; background: transparent; text-align: right; padding: 2px 6px; }
.cur-rate-scroll input.cur-rate-in:focus { border-color: #2f6db3; background: #fff; }
.cur-rate-scroll tr.hi td, .cur-rate-scroll tbody tr.hi:nth-child(even) td { background: #fff3bf; }
.cur-rate-scroll tr.hi td.cur-d { font-weight: 700; color: #1d3b63; }
.cur-rate-scroll td { padding: 0 4px; }
.cur-home-note { margin: 4px 2px 6px; font-size: 13px; color: #3a4a5c; }
.cur-jump-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 6px; }
.cur-jump-row .cur-jump { width: 150px; }
.cur-cal .cal-head span { display: flex; }
.cur-cal .cal-head button { padding: 0 5px; }
.adj-bottom { display: flex; gap: 18px; margin-top: 10px; align-items: flex-start; flex-wrap: wrap; }
.adj-left { flex: 1; min-width: 280px; }
.adj-valck { font-weight: 700; }
.adj-note { font-size: 12px; margin-top: 4px; }
.adj-journal { width: 520px; max-width: 100%; border: 1px solid #b8c6d6; border-radius: 4px; background: #fbfdff; }
.adj-journal .adj-jt { background: #e7eef7; padding: 4px 8px; font-weight: 700; color: #25456f; font-size: 13px; }
.adj-journal table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adj-journal th { text-align: left; padding: 3px 6px; border-bottom: 1px solid #b8c6d6; }
.adj-journal td { padding: 3px 6px; border-bottom: 1px solid #eef2f7; }
.adj-journal .num { text-align: right; font-variant-numeric: tabular-nums; }
.adj-journal td.code { color: #2f5d94; font-weight: 600; }
.adj-journal tr.tot td { font-weight: 700; border-top: 1px solid #b8c6d6; }
.adj-journal .adj-total { text-align: right; padding: 6px 8px; font-size: 13px; }
.adj-chk-sum { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; margin-bottom: 8px; }
.adj-chk-sum .okc { color: #1e7b34; } .adj-chk-sum .samec { color: #5b6b7d; } .adj-chk-sum .errc { color: #c00000; }
table.adj-chk { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.adj-chk th { position: sticky; top: 0; background: #f6e3e3; text-align: left; padding: 4px 6px; }
table.adj-chk td { padding: 3px 6px; border-bottom: 1px solid #f0d0d0; }
table.adj-chk tr.bad td { color: #b00000; background: #fff3f3; }
.adj-tpl-links { display: flex; flex-direction: column; gap: 4px; }
.adj-tpl-links a { color: #2f6db3; cursor: pointer; }

/* checkbox + its text on one line, vertically centred (Include inactive …) */
label.chk-lbl { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
label.chk-lbl > input[type=checkbox] { margin: 0; flex: none; position: relative; top: 0; }
.win .wt .wb.acc { width: 26px; font-size: 11px; background: rgba(255,214,90,.25); }

/* chart of accounts: tick the accounts in use */
.coa-tick { display: flex; align-items: center; gap: 3px; justify-content: center; height: 14px; line-height: 14px; }
.coa-tick input { width: 14px; height: 14px; margin: 0; padding: 0; cursor: pointer; accent-color: #2f8f3a; vertical-align: middle; }
.coa-tick input:disabled { cursor: default; }
.coa-tick .lock { font-size: 10px; opacity: .7; }
.coa-info { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 10px; font-size: 12px; background: #fffbe6; border-bottom: 1px solid #efe2a8; color: #5b4a12; }
.coa-info b { color: #25456f; white-space: nowrap; }
/* Company › Translations */
.tx-table td { vertical-align: middle; max-width: none; }
.tx-table td.tx-src { white-space: normal; font-weight: 600; }
.tx-table td.tx-where { white-space: normal; font-size: 11.5px; }
.tx-table input { padding: 2px 5px; font-size: 12.5px; }
.tx-table input::placeholder { color: #9aa7b6; font-style: italic; }
/* monthly payroll run (payrun.js) */
.pr-wrap { display: flex; height: 100%; min-height: 0; }
.pr-left { width: 210px; flex: none; border-right: 1px solid var(--border-lt); overflow: auto; background: #f6f9fc; }
.pr-right { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pr-year { display: flex; align-items: center; justify-content: space-between; padding: 6px; border-bottom: 1px solid var(--border-lt); }
.pr-month { padding: 5px 8px; border-bottom: 1px solid #e3e9f0; cursor: pointer; }
.pr-month:hover { background: #eaf2fc; }
.pr-month.sel { background: #d6e6fa; }
.pm-top { display: flex; justify-content: space-between; align-items: center; }
.pm-sub { font-size: 11px; color: #556; margin-top: 2px; }
.pr-badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: #e8e8e8; color: #666; white-space: nowrap; }
.pr-badge.draft { background: #fff1d6; color: #9a5b00; }
.pr-badge.posted { background: #daf2dc; color: #1c6b25; }
.pr-set { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 10px; border-bottom: 1px solid var(--border-lt); font-size: 12.5px; align-items: center; }
.pr-set label { display: inline-flex; gap: 5px; align-items: center; }
.pr-grid { flex: 1; overflow: auto; min-height: 0; background: #fff; }
table.pr-table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
table.pr-table th { position: sticky; top: 0; z-index: 1; white-space: normal; min-width: 70px; vertical-align: bottom; }
table.pr-table th.in { background: #eef5ff; }
table.pr-table th.k { background: #f1f1f1; }
table.pr-table th.k2 { background: #e6f5e8; }
table.pr-table td { white-space: nowrap; padding: 2px 5px; }
table.pr-table td.in { padding: 0; }
table.pr-table td.in input { width: 96px; border: 1px solid transparent; background: #fbfdff; padding: 3px 4px; }
table.pr-table td.in input:focus { border-color: #5b8fd6; background: #fff; }
table.pr-table td.k { background: #fafafa; }
table.pr-table td.k2 { background: #f1faf2; }
table.pr-table td.b { font-weight: 700; }
table.pr-table td.rn { color: #889; }
table.pr-table tr.neg td.k.b { color: #b3261e; }
table.pr-table tr.tot td { font-weight: 700; border-top: 2px solid #999; }
table.pr-table a.x { color: #b3261e; cursor: pointer; }
table.pr-table a { cursor: pointer; }
.pr-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 10px; border-top: 1px solid var(--border-lt); background: #f6f9fc; font-size: 12px; }
.pr-foot .pf { display: flex; flex-direction: column; }
.pr-foot .pf span { color: #667; font-size: 11px; }
.pr-foot .pf.net b { color: #1c6b25; }
.pr-foot .pf.pit b { color: #9a3b00; }
.pr-foot .pf.warn { color: #b8641b; justify-content: center; font-weight: 700; }
.pr-help { padding: 16px 20px; max-width: 760px; line-height: 1.6; }
.pr-empty { padding: 20px; color: #778; text-align: center; }
table.pr-table td:nth-child(3), table.pr-table th:nth-child(3) { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 #d5dde8; }
table.pr-table th:nth-child(3) { z-index: 2; background: #eef2f7; }
/* Lao general ledger, one account per page */
.glp-box .glp { max-width: 1000px; margin: 0 auto; }
.glp-box table.glp-t th, .glp-box table.glp-t td { border: 1px solid #9aa7b6; padding: 3px 6px; }
.glp-box table.glp-t tr.dr:hover td { background: #eef5ff; cursor: pointer; }
.glp-box hr.glp-sep { border: 0; border-top: 3px dashed #b8c6d6; margin: 26px 0; }
/* fiscal year window (fiscal.js) */
.fy-box { border: 1px solid var(--border-lt); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; background: #fff; }
.fy-box h3 { margin: 0 0 8px; font-size: 15px; color: #1f4e8c; }
.fy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fy-prev { display: block; margin-top: 6px; font-weight: 700; color: #1c6b25; }
table.fy-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.fy-table td, table.fy-table th { padding: 4px 6px; vertical-align: middle; }
table.fy-table tr.fy-cur td { background: #f3f8ff; }
.fy-acts { white-space: nowrap; }
.fy-acts .btn { margin: 1px 2px; }

/* advances / deposits deducted on Receive Payments / Pay Bills */
.adv-banner { margin-top: 10px; padding: 8px 12px; background: #fff7d6; border: 1px solid #e8c95a; border-radius: 6px; color: #5c4400; font-size: 13px; }
.adv-box { background: #fffbea; border: 1px solid #efd98a; border-radius: 6px; padding: 8px 10px; }
.adv-box .grid tr.adv-row td { background: #fffdf3; }
.adv-sum { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 22px; margin-top: 10px; padding: 8px 12px; background: #eef4fb; border: 1px solid #c9d8ea; border-radius: 6px; font-size: 13.5px; }
.adv-sum span:last-child b { color: #0b5a2a; font-size: 15px; }
.fx-line { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; background: #f6f1ff; border: 1px solid #d5c6f2; border-radius: 6px; font-size: 13.5px; }
.fx-line > span:first-child { font-weight: 600; }
.je-prev { margin-top: 10px; border: 1px solid #c9d8ea; border-radius: 6px; background: #fbfdff; padding: 6px 10px; }
.je-prev summary { cursor: pointer; font-weight: 600; color: #1f4b82; padding: 2px 0; }
.je-prev table { margin-top: 6px; }
.je-prev tr.tot td { border-top: 2px solid #9fb3cc; }
.je-manual { display: block; margin: 6px 0 2px; font-size: 13px; cursor: pointer; }
.je-prev td .combo { min-width: 260px; }
/* QuickBooks-style inactive mark: click to switch */
.inact-mark { display: block; min-height: 18px; text-align: center; cursor: pointer; font-weight: 700; color: #b3261e; border-radius: 3px; }
.inact-mark:hover { background: #fde8e6; outline: 1px dashed #d99; }
.inact-mark.off { color: #c3ccd8; font-weight: 400; }
.inact-mark.off:hover { color: #b3261e; }
.inact-mark.on:hover { background: #e6f4ea; outline-color: #7b7; color: #0b6b2e; }

/* tax reconciliation set-up */
.taxrec-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 10px 8px; }
.taxrec-sum > div { background: #f1f5fb; border: 1px solid #c9d6e6; border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; min-width: 150px; }
.taxrec-sum span { font-size: 11.5px; color: #555; }
.taxrec-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.taxrec-grid th, .taxrec-grid td { border: 1px solid #d5dde8; padding: 4px 6px; vertical-align: top; }
.taxrec-grid th { background: #e8eef7; }
.taxrec-grid td.num { text-align: right; white-space: nowrap; }
.taxrec-grid td.b { font-weight: 700; }
.taxrec-grid tr.grp td { background: #dfe8f5; font-weight: 700; }
.taxrec-grid tr.info td { color: #777; font-style: italic; }
.taxrec-grid input { border: 1px solid #b8c6d6; border-radius: 3px; padding: 3px 5px; background: #fff; box-sizing: border-box; }
.taxrec-grid td:nth-child(6) input { width: 120px; text-align: right; }
.fa-law { font-size: 12px; color: #25456f; font-weight: 600; }
.taxrec-acc { min-width: 260px; }
.taxrec-names { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.taxrec-chip { background: #eaf1fb; border: 1px solid #b9cbe4; border-radius: 10px; padding: 1px 6px; font-size: 11px; white-space: nowrap; max-width: 330px; overflow: hidden; text-overflow: ellipsis; }
.taxrec-chip b { margin-left: 5px; cursor: pointer; color: #a33; }
.taxrec-grid input[type=checkbox] { width: auto; padding: 0; border: none; }
.taxrec-grid tr.custom td { background: #fffbea; }
.taxrec-grid tr.custom textarea { border: 1px solid #b8c6d6; border-radius: 3px; padding: 3px 5px; font: inherit; resize: vertical; }
.taxrec-grid tr.addrow td { background: #f6f8fb; padding: 5px 8px; }

/* ---------------- print templates (printtpl.js) */
.tpl-mgr { display: flex; gap: 10px; padding: 10px; flex: 1; min-height: 0; overflow: hidden; }
.tpl-side { width: 330px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.tpl-main { flex: 1; display: flex; flex-direction: column; align-items: center; overflow: auto; background: #eef1f5; border: 1px solid #c9d3df; padding: 8px; }
.tpl-h { font-weight: 700; color: #25456f; align-self: stretch; }
.tpl-list { flex: 1; overflow: auto; border: 1px solid #b8c6d6; background: #fff; min-height: 160px; }
.tpl-row { padding: 5px 8px; border-bottom: 1px solid #eef1f5; cursor: pointer; }
.tpl-row:hover { background: #f1f6fc; } .tpl-row.on { background: #d6e6fa; }
.tpl-def { margin-left: 8px; font-size: 11px; color: #b8641b; font-weight: 600; }
.tpl-btns { display: flex; flex-direction: column; gap: 4px; } .tpl-btns .btn { text-align: left; }
.tpl-drop { border: 2px dashed #9fb3cc; border-radius: 6px; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b7c90; background: #f7f9fc; padding: 8px; text-align: center; }
.tpl-drop.over { background: #e3efff; border-color: #2f69b3; }
.tpl-ed { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.tpl-props { width: 340px; border-right: 1px solid #c9d3df; overflow: auto; padding: 0 10px 10px; background: #f7f9fc; }
.tpl-pane { background: #fff; border: 1px solid #b8c6d6; padding: 8px; }
.tpl-f { margin-top: 6px; } .tpl-f > label { display: block; font-size: 12px; color: #445; margin-bottom: 2px; }
.tpl-sec { font-weight: 700; color: #25456f; margin: 10px 0 4px; border-bottom: 1px solid #dde4ee; padding-bottom: 2px; }
.tpl-sw { display: flex; gap: 4px; flex-wrap: wrap; } .tpl-sw span { width: 20px; height: 20px; border-radius: 3px; cursor: pointer; border: 1px solid #fff; box-shadow: 0 0 0 1px #aab; }
.tpl-info { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 12px; }
.tpl-n input { width: 60px; } .tpl-cols { width: 100%; border-collapse: collapse; font-size: 12px; } .tpl-cols td { padding: 1px 2px; } .tpl-cols select { max-width: 92px; }
.tpl-canvas { flex: 1; overflow: auto; background: #8e9aa8; padding: 20px; }
.tpl-sheet { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); overflow: hidden; }
.tpl-sheet .tp-page { background-color: transparent !important; background-image: radial-gradient(#c5ccd6 0.6px, transparent 0.6px); background-size: 2.5mm 2.5mm; }
.tpl-canvas.nogrid .tpl-sheet .tp-page { background-image: none; }
.tpl-sheet .te { cursor: move; outline: 1px dotted rgba(47,105,179,.35); }
.tpl-sheet .te:hover { outline: 1px solid rgba(47,105,179,.8); }
.tpl-sheet .te.sel { outline: 2px solid #f5a623; overflow: visible; z-index: 5; }
.tpl-sheet .te.hid { opacity: .25; outline: 1px dashed #b33; display: block; }
.tpl-sheet .rz { position: absolute; right: -2mm; bottom: -2mm; width: 3mm; height: 3mm; background: #f5a623; border: 0.3mm solid #fff; cursor: nwse-resize; z-index: 6; }
.tpl-sep { width: 1px; height: 20px; background: #c9d3df; margin: 0 4px; }
.tpl-add { font-weight: 600; }

/* ---------------- Set up Tax Invoice (taxinv.js) */
.tx-head { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #c9d3df; background: #f7f9fc; }
.tx-state { font-weight: 700; padding: 4px 12px; border-radius: 14px; }
.tx-state.ok { background: #e3f4e6; color: #1b6e2f; } .tx-state.warn { background: #fff4e0; color: #9a5b00; } .tx-state.bad { background: #fde8e6; color: #b3261e; }
.tx-main { display: flex; flex: 1; min-height: 0; }
.tx-nav { width: 270px; border-right: 1px solid #c9d3df; background: #f2f5f9; padding: 8px; overflow: auto; }
.tx-step { padding: 8px 10px; border-radius: 5px; cursor: pointer; margin-bottom: 2px; display: flex; gap: 8px; align-items: center; }
.tx-step:hover { background: #e3ecf7; } .tx-step.on { background: #d0e2f8; font-weight: 700; }
.tx-ck { width: 20px; text-align: center; }
.tx-pane { flex: 1; overflow: auto; padding: 4px 18px 18px; }
.tx-h3 { color: #1f4b82; margin: 10px 0 6px; }
.tx-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tx-note { background: #eef5ff; border: 1px solid #c4d8f2; border-radius: 5px; padding: 8px 10px; margin: 6px 0; font-size: 12.5px; }
.tx-note.ok { background: #e9f6ec; border-color: #b7dfc0; }
.tx-code { font-family: Consolas, monospace; font-size: 12px; word-break: break-all; background: #f2f6fb; border: 1px solid #cfdae8; border-radius: 5px; padding: 8px; user-select: all; }
.tx-paths { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 6px; } .tx-paths > div { display: grid; grid-template-columns: 80px 1fr; gap: 6px; align-items: center; font-size: 12px; }
.tx-prev { min-width: 370px; }
.tx-badge { background: #e9f6ec; border: 1px solid #9fd1ab; color: #1b6e2f; border-radius: 4px; padding: 4px 10px; font-weight: 700; align-self: flex-end; }
.tx-badge.cx { background: #fde8e6; border-color: #f0b4ae; color: #b3261e; }
.tpl-grp { background: #eef2f7; color: #25456f; font-weight: 700; font-size: 12px; padding: 3px 8px; border-top: 1px solid #d5dde8; border-bottom: 1px solid #d5dde8; }
.tpl-2 { display: flex; gap: 4px; } .tpl-2 .btn { flex: 1; }
.tpl-tb { display: inline-flex; gap: 3px; align-items: center; margin-left: 4px; } .tpl-tb select { font-size: 12px; }
/* Excel / PDF export and Excel import of documents (txnio.js) */
.io-dlg .io-steps{margin:0 0 12px 18px;padding:0;line-height:1.7}
.io-dlg .io-opt{display:block;margin:6px 0;font-size:13px;cursor:pointer}
.io-dlg .io-btns{display:flex;gap:8px;margin:10px 0}
.io-out .io-sum{padding:8px 10px;border-radius:4px;font-weight:700;margin-bottom:6px}
.io-out .io-sum.ok{background:#e6f4ea;color:#1e6b34}.io-out .io-sum.bad{background:#fdecea;color:#a3261e}
.io-out .io-list{max-height:260px;overflow:auto;border:1px solid #d5dde6;border-radius:4px;padding:6px 8px;font-size:12.5px;line-height:1.6;background:#fafcfe}
.io-out .io-list.bad{border-color:#f0b8b3;background:#fff8f7}
.io-out .io-sub{margin:8px 0 4px;font-size:12.5px;color:#6b5a00}
/* 🤖 AI assistant window (aiassist.js) */
.ai-log{flex:1;overflow:auto;padding:12px;background:#f6f8fb;display:flex;flex-direction:column;gap:8px}
.ai-msg{max-width:88%;padding:8px 11px;border-radius:8px;line-height:1.55;font-size:13.5px;white-space:normal;word-wrap:break-word}
.ai-msg.user{align-self:flex-end;background:#2f6db3;color:#fff}
.ai-msg.ai{align-self:flex-start;background:#fff;border:1px solid #d5dde6}
.ai-msg.ai.err{border-color:#e0a09a;background:#fff4f3;color:#a3261e}
.ai-msg.sys{align-self:center;background:#eef3f9;color:#3d5572;font-size:12.5px;text-align:center}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}
.ai-chip{border:1px solid #b9c9dc;background:#fff;border-radius:14px;padding:3px 10px;font-size:12px;cursor:pointer}
.ai-chip:hover{background:#e8f0fa}
.ai-row{display:flex;gap:8px;padding:8px 12px}
.ai-row .ai-in{flex:1;resize:vertical;font:inherit;padding:6px}
.ai-note{font-size:11px;padding:0 12px 8px}
.ai-box{border:1px solid #b9c9dc;border-radius:10px;background:#fff;padding:6px}
.ai-box textarea{border:none;outline:none;resize:vertical}
.ai-box-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid #e3e9f0;padding-top:6px}
.ai-plus{border-radius:50%;width:32px;height:32px;padding:0;font-size:18px;line-height:1}
.ai-files{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ai-file{background:#eef3f9;border:1px solid #c9d6e6;border-radius:12px;padding:2px 8px;font-size:12px}
.ai-file a{color:#a3261e;text-decoration:none}
.ai-card{border:1px solid #d5dde6;border-radius:8px;padding:10px;margin-top:10px;background:#fbfcfe}
.ai-draft-h{font-size:13.5px}
.ai-expl{margin-top:6px;padding:6px 9px;background:#fff;border-left:3px solid #2f6db3;font-size:13px}
.ai-ok{color:#1e6b34;font-weight:700}
.ai-drop{outline:3px dashed #2f6db3;outline-offset:-6px}
/* ---- Opening balances (opening.js) */
.ob-win{padding:12px 14px;overflow:auto}
.ob-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.ob-date{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ob-date input{padding:4px 6px}
.ob-headbtns{display:flex;gap:6px;flex-wrap:wrap}
.ob-tabs{display:flex;gap:4px;border-bottom:2px solid #2f5d8a;margin-bottom:10px}
.ob-tab{border:1px solid #c9d6e3;border-bottom:none;background:#eef3f8;padding:7px 16px;border-radius:6px 6px 0 0;cursor:pointer;font-weight:600;color:#2f4a66}
.ob-tab.on{background:#2f5d8a;color:#fff;border-color:#2f5d8a}
.ob-intro,.ob-help{background:#f4f8fc;border:1px solid #d5e2ef;border-radius:6px;padding:8px 10px;margin-bottom:10px;line-height:1.6;font-size:13px}
.ob-steps td{vertical-align:middle}
.ob-steps tr.ob-grp td{background:#e8eef5;font-weight:700;color:#2f4a66}
.ob-ok{color:#1e6b34;font-weight:600}.ob-no{color:#a3261e;font-weight:600}
tr.ob-bad td{background:#fff1f0}
.ob-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:10px 0}
.ob-card{border:1px solid #d5dde6;border-radius:6px;padding:8px;background:#fafcfe}
.ob-card.on{border-color:#8cc59b;background:#f1faf3}
.ob-card-t{font-size:12px;font-weight:600;min-height:32px}.ob-card-n{font-size:22px;font-weight:700;color:#2f5d8a}
.ob-win h3{margin:16px 0 4px;font-size:15px;color:#2f4a66}
.ob-det{margin-top:10px}.ob-det summary{cursor:pointer;font-weight:600}
.ob-cmp-bar{display:flex;justify-content:space-between;align-items:center;margin:6px 0}
.ob-cmp-steps li{margin-bottom:6px}
.ob-win .small{font-size:12px}

/* ---- Planning & Budgeting (budgets.js): Set Up Budgets / Forecast, QuickBooks look */
.bud-wrap { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 8px 10px; gap: 6px; }
.bud-top, .bud-dim, .bud-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bud-lbl { font-weight: 600; margin-right: 6px; color: #25456f; }
.bud-top .bud-sel { min-width: 380px; background: #fff; }
.bud-dim select { min-width: 320px; }
.bud-grid-box { flex: 1; overflow: auto; border: 1px solid #c3cfdc; background: #fff; }
table.bud-grid { width: max-content; min-width: 100%; }
table.bud-grid th:first-child, table.bud-grid td.bud-acct { position: sticky; left: 0; z-index: 2; background: #fff; min-width: 240px; max-width: 300px; }
table.bud-grid thead th:first-child { z-index: 3; background: #e8eef5; }
table.bud-grid td { padding: 1px 4px; }
table.bud-grid tr.bud-parent td.bud-acct { font-weight: 700; }
table.bud-grid td.bud-annual { font-weight: 600; background: #f4f7fb; min-width: 110px; }
table.bud-grid input.bud-in { width: 96px; border: 1px solid transparent; padding: 2px 4px; background: transparent; font: inherit; }
table.bud-grid input.bud-in:hover { border-color: #c3cfdc; }
table.bud-grid input.bud-in:focus { border-color: #3d7bd9; background: #fffbe6; outline: none; }
table.bud-grid tfoot td { position: sticky; bottom: 0; background: #e8eef5; font-weight: 700; border-top: 1px solid #9fb3c8; padding: 4px; }
table.bud-grid tfoot td:first-child { left: 0; z-index: 3; }
.bud-foot { padding-top: 4px; }
.bud-imp-out { margin-top: 10px; max-height: 300px; overflow: auto; }
.bud-imp-out .ok-msg { color: #1d7a36; font-weight: 600; }
.bud-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: #1d7a36; color: #fff; padding: 8px 18px; border-radius: 4px; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* ---- Find / History on transaction forms (txnhist.js), like QuickBooks "Transaction History" */
.toolbar .tb.th-hist { font-weight: 600; }
.th-wrap { display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 10px 12px; }
.th-top { display: flex; gap: 12px; align-items: flex-start; }
.th-info { flex: 1; position: relative; border: 1px solid #c3cfdc; background: #f7f9fc; border-radius: 3px; padding: 6px 10px 10px; margin: 0; }
.th-info legend { font-weight: 700; color: #25456f; padding: 0 4px; }
.th-grid { display: grid; grid-template-columns: 110px 1fr 110px 1fr; gap: 3px 10px; font-size: 13px; }
.th-k { color: #555; } .th-v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.th-stamp { position: absolute; right: 10px; top: -4px; background: #f7f9fc; transform: rotate(-14deg); font-weight: 900; font-size: 26px; letter-spacing: 3px; border: 3px solid; padding: 0 8px; border-radius: 4px; opacity: .75; }
.th-stamp.paid { color: #2a3f96; } .th-stamp.void { color: #c9453a; }
.th-side { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.th-sec { font-weight: 700; color: #25456f; }
.th-tbox { flex: 1; overflow: auto; border: 1px solid #c3cfdc; background: #fff; min-height: 120px; }
.th-table td.th-nm, .th-tbox td.th-nm { max-width: 220px; }
.th-audit summary { cursor: pointer; color: #25456f; font-weight: 600; }
.th-audit table { margin-top: 4px; }
.th-filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.th-filters label { color: #25456f; font-weight: 600; }

/* ---- units of measure (uom.js) */
.uom-wrap { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 8px 12px; gap: 6px; }
.uom-intro { margin: 0; font-size: 12.5px; }
.uom-tbox { flex: 1; overflow: auto; border: 1px solid #c3cfdc; background: #fff; }
table.uom-edit td { vertical-align: top; } table.uom-edit td.ck { text-align: center; }
table.uom-edit input.num { width: 110px; }
.uom-example { margin-top: 8px; color: #1d7a36; font-weight: 600; font-size: 12.5px; }
table.grid select.uomsel { width: 100%; border: 0; background: transparent; font: inherit; }
/* tax invoice through the Ministry of Finance gateway (taxinv.js) */
.tx-badge.wait { background: #fff6dd; border-color: #eac56a; color: #8a5a00; }
.tx-env { border: 1px solid #cfdae8; border-radius: 6px; padding: 4px 10px 8px; margin: 8px 0; }
.tx-env.on { border-color: #4a7fc0; background: #f5f9ff; }
.tx-env legend { font-weight: 700; font-size: 12.5px; padding: 0 4px; }
/* home page: Company / Banking shortcuts — icon and text on one line, neat two-column grid */
.home .side .links { padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; align-items: stretch; }
.home .side .links .node { display: flex; flex-direction: row; align-items: center; gap: 8px; width: auto; min-height: 40px; padding: 5px 8px; border-radius: 6px; cursor: pointer; text-align: left; font-size: 12.5px; line-height: 1.25; color: #1d3050; box-sizing: border-box; }
.home .side .links .node:hover { background: #eef5ff; box-shadow: 0 0 0 1px #aac6ea inset; }
.home .side .links .node .ic { flex: 0 0 28px; width: 28px; height: 28px; margin: 0; }
.home .side .links .node > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* home page side panel — wider, even tiles: tinted icon square, text centred beside it */
.home { grid-template-columns: 1fr minmax(340px, 26%); }
.home .side .links { grid-auto-rows: 1fr; gap: 6px; padding: 10px; }
.home .side .links .node { min-height: 46px; padding: 6px 8px; border: 1px solid #e3eaf3; background: #fbfcfe; border-radius: 8px; font-weight: 500; }
.home .side .links .node:hover { background: #eef5ff; border-color: #aac6ea; box-shadow: 0 1px 3px rgba(40, 80, 140, .12); }
.home .side .links .node .ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; }

/* Lao forms (ລາຍງານມາດຕະຖານລາວ): negative amounts in black, not red */
table.rpt.lao td.neg { color: inherit; }

/* line grids: the ▼ of a drop-down shows only on the row under the mouse or in the cell being typed in */
table.grid td .combo .arrow { visibility: hidden; }
table.grid tr:hover td .combo .arrow, table.grid td .combo:focus-within .arrow { visibility: visible; }

/* custom financial statements designer (fsdesign.js) */
table.grid.fsd-grid td { padding: 3px 4px; vertical-align: top; height: auto; }
table.grid.fsd-grid td input[type=text], table.grid.fsd-grid td select { width: auto; height: 24px; border: 1px solid #c9d6e6; border-radius: 3px; background: #fff; }
table.grid.fsd-grid td input[type=checkbox] { width: auto; height: auto; margin: 0 2px 0 0; vertical-align: middle; }
table.grid.fsd-grid td label { display: inline-flex; align-items: center; margin-right: 6px; }
label.fsd-tip, th.fsd-tip, summary.fsd-tip { cursor: help; }
label.fsd-tip { text-decoration: underline dotted #9ab; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- ❓ help of every entry window (help.js) */
.win .wt .wb.hlp { width: auto; padding: 0 7px; font-size: 11.5px; font-weight: 600; background: #ffd65a; color: #3a2a00; border-color: #ffd65a; }
.win .wt .wb.hlp:hover { background: #ffe58c; }
.tb.hlp-btn, .btn.hlp-btn { background: #fff6d6; border-color: #e8c65a; color: #5a4300; font-weight: 600; }
.flow .node { position: relative; }
.hlp-badge { position: absolute; top: 0; right: 14px; width: 18px; height: 18px; border-radius: 50%; background: #ffd65a; color: #3a2a00; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.25); cursor: help; opacity: .85; }
.hlp-badge:hover { opacity: 1; transform: scale(1.15); }
.home .side .links .node .hlp-badge { position: static; flex: 0 0 18px; margin-left: auto; }
.wbody.hlp { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.hlp-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid #d5deea; background: #f4f7fb; flex: 0 0 auto; flex-wrap: wrap; }
.hlp-tabs button { border: 1px solid #d5deea; border-bottom: none; background: #e9eff7; padding: 6px 12px; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; font-size: 13px; color: #34496a; }
.hlp-tabs button.on { background: #fff; color: #10294d; font-weight: 700; position: relative; top: 1px; }
.hlp-pane { flex: 1 1 auto; overflow: auto; padding: 4px 18px 18px; font-size: 13.5px; line-height: 1.55; color: #1d2a3d; }
.hlp-pane > div.hlp-ai { display: flex; flex-direction: column; height: 100%; }
.hlp-pane > div.hlp-ai .ai-log { flex: 1 1 auto; min-height: 200px; }
.hlp-h { margin: 12px 0 4px; font-size: 18px; color: #10294d; }
.hlp-use { margin: 0 0 8px; color: #33465f; }
.hlp-pane h3 { margin: 16px 0 6px; font-size: 14.5px; color: #1f3d68; }
.hlp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.hlp-steps li, .hlp-tips li { margin: 3px 0; }
.hlp-note { background: #f1f6fd; border-left: 3px solid #4b7fc4; padding: 7px 10px; margin: 8px 0; color: #24405f; border-radius: 0 4px 4px 0; }
.hlp-entry { margin: 8px 0 12px; }
.hlp-case { font-weight: 600; color: #2a3d58; margin-bottom: 4px; }
.hlp-je { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 13px; }
.hlp-je th { background: #eaf0f8; text-align: left; padding: 4px 8px; border: 1px solid #d3dce8; font-weight: 600; }
.hlp-je td { padding: 4px 8px; border: 1px solid #e1e7ef; }
.hlp-je td.acc { font-family: Consolas, monospace; font-weight: 700; white-space: nowrap; }
.hlp-je .n { text-align: right; white-space: nowrap; }
.hlp-je tr.dr td:first-child { color: #0b5d2a; font-weight: 700; }
.hlp-je tr.cr td:first-child { color: #8a2a12; font-weight: 700; }
.hlp-small { font-size: 12px; margin-top: 2px; }
.hlp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hlp-ex { border: 1px solid #dfe6ef; border-radius: 6px; margin: 8px 0; padding: 8px 10px; background: #fcfdff; }
.hlp-ex-h { font-size: 13px; margin-bottom: 4px; }
.hlp-src { display: inline-block; background: #e3ecf8; color: #1f3d68; border-radius: 10px; padding: 0 8px; font-size: 11.5px; font-weight: 600; }
.hlp-ocr { margin-left: 6px; font-size: 10.5px; background: #fff1cc; color: #7a5600; border-radius: 3px; padding: 0 4px; }
.hlp-ex-text { white-space: pre-wrap; font-size: 13px; color: #24303f; }
.hlp-ex-text.fold { max-height: 5.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.hlp-more { font-size: 12px; cursor: pointer; color: #2a62b0; }
.hlp-sbar { display: flex; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
.hlp-sbar input { padding: 6px 8px; font: inherit; min-width: 200px; }
.hlp-srclist { margin: 6px 0 10px; padding-left: 20px; }
.hlp-after { margin-top: 6px; }
.ai-msg .hlp-ex { background: #fff; }
.ai-msg.sys .hlp-ex { text-align: left; }
/* item dropdown grouped by category (core.js itemOptions) */
.combo-dd .grp { font-size: 12px; color: #1f3d68; background: #e9f0f8; border-top: 1px solid #d6e1ee; padding: 4px 8px; position: sticky; top: 0; z-index: 1; }
/* item picker: category tree on the left (core.js combo o.cats) */
.combo-dd .combo-split { display: flex; align-items: stretch; max-height: 360px; }
.combo-dd .combo-cats { flex: 0 0 210px; overflow: auto; border-right: 1px solid #d5dde8; background: #f7f9fc; padding: 4px 3px; font-size: 12.5px; }
.combo-dd .ccat { display: flex; gap: 4px; padding: 3px 6px; border-radius: 4px; cursor: pointer; color: #1d3050; }
.combo-dd .ccat span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-dd .ccat small { color: #7a8899; }
.combo-dd .ccat:hover { background: #e8eff8; }
.combo-dd .ccat.on { background: #dde8f5; font-weight: 700; }
.combo-dd .ccat.empty { opacity: .5; }
.combo-dd .combo-list { flex: 1 1 auto; overflow: auto; min-width: 0; }
.combo-dd:has(.combo-split) { max-height: none; overflow: hidden; }
/* open purchase orders still to receive (forms.js pickPOs) */
.btn.po-pending { background: #fff1d6; border-color: #e0a640; color: #7a4a00; font-weight: 700; }
table.po-pick tr.po-h td { background: #eef3f9; border-top: 1px solid #cfdbe9; }
/* ຕົ້ນທຶນເພີ່ມ / Allocate tab (landed.js) */
.gridwrap.landed { padding: 8px 10px; overflow: auto; }
.gridwrap.landed .lc-intro { margin-bottom: 6px; font-size: 12.5px; }
.gridwrap.landed table.list td, .gridwrap.landed table.list th { padding: 3px 5px; }
.gridwrap.landed .lc-rows select, .gridwrap.landed .lc-rows input { font: inherit; }
.gridwrap.landed .lc-rows a.x { color: #c33; cursor: pointer; }
.gridwrap.landed .lc-existing { background: #f3f8f1; border: 1px solid #cfe3c8; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }
table.lc-alloc tfoot td { font-weight: 700; border-top: 2px solid #c9d5e3; }

/* reports: an amount with its own drill-down, the calculation window */
table.rpt td.cdr { cursor: zoom-in; text-decoration: underline dotted #7a9cc6; text-underline-offset: 3px; }
table.rpt tr.dr td { cursor: zoom-in; }
table.calc-t { width: 100%; } table.calc-t tfoot td { font-weight: 700; } table.calc-t tr.dr:hover td { background: #eef4fb; }

body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
/* a column to fill in, shown in light red (Adjust quantity: "new quantity") */
table.grid td.col-hl, table.grid td.col-hl input { background: #fde8e8 !important; }
table.grid th.col-hl { background: #f6c9c9 !important; color: #7a1f1f; }
table.grid td.col-hl input:focus { background: #fff4f4 !important; }

/* line grid: ⧉ split the line (goods into two warehouses) and × delete */
table.grid td.del .delx, table.grid td.del .splitx { display: inline-block; padding: 0 3px; cursor: pointer; }
table.grid td.del.del2 { width: 42px; white-space: nowrap; cursor: default; }
table.grid td.del .splitx { color: #2d5a94; font-weight: 700; }
table.grid td.del .splitx:hover { background: #e3edf9; border-radius: 3px; }

/* line grids: the current line and the buttons above the grid */
table.grid tr.cur-row > td { background: #fff7c2 !important; }
table.grid tr.cur-row > td input, table.grid tr.cur-row > td select { background: #fffbe0; }
.grid-bar { position: sticky; left: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 3px 4px; background: #f3f6fa; border: 1px solid #d5dde8; border-bottom: none; }
.grid-bar .btn.small { padding: 2px 8px; }
.grid-bar-hint { font-size: 11.5px; margin-left: 6px; }
/* the ▼ of a dropdown opens its list (in the line grids a click on a filled cell only selects the line) */
.combo .arrow { pointer-events: auto; cursor: pointer; padding: 4px 3px; }
table.grid tr.cur-row td .combo .arrow { visibility: visible; }
/* in the line grids the ▼ is a real button: always shown, easy to hit */
table.grid td .combo .arrow { visibility: visible !important; font-size: 10px; color: #2d5a94; background: #eef3f9; border-left: 1px solid #c8d4e3; top: 1px; bottom: 1px; transform: none; display: flex; align-items: center; padding: 0 5px; border-radius: 0 3px 3px 0; }
table.grid td .combo .arrow:hover { background: #d6e4f5; }

/* daily journal (ປື້ມບັນຊີປະຈໍາວັນ): no ▼ buttons in the line cells */
table.grid.no-arrow td .combo .arrow { display: none !important; }