/* State Accounting (cash basis, IPSAS) — Quick Enterprise look: title bar, menu bar, icon bar, window, status bar */
:root {
  --font: 'Segoe UI', Tahoma, 'Phetsarath OT', 'Saysettha OT', 'Noto Sans Lao', 'Noto Sans Lao UI', 'Leelawadee UI', 'Lao UI', sans-serif;
  --mono: Consolas, 'Cascadia Mono', 'Roboto Mono', monospace;
  /* Quick Enterprise colours */
  --bg: #d6dfe9;
  --work: #eaeff5;
  --menu: #f3f5f8;
  --title1: #4f7ab3;
  --title2: #2d5a94;
  --form-bg: #f4f7fb;
  --form-head: #dfe8f3;
  --link: #1a4f9c;
  /* tokens used by the pages */
  --surface: #ffffff;
  --surface-2: #f2f6fa;
  --border: #c5d0dc;
  --border-strong: #9aaabb;
  --text: #1c2733;
  --text-2: #5d6b7a;
  --text-3: #8a96a8;
  --brand: #2d5a94;
  --brand-2: #3b7bd4;
  --brand-soft: #e3edf9;
  --ok: #217a36;
  --ok-soft: #e2f3e6;
  --warn: #9a6a00;
  --warn-soft: #fdf2dc;
  --bad: #b3261e;
  --bad-soft: #fbe7e5;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(20, 40, 70, .12);
  --shadow-lg: 2px 4px 14px rgba(20, 40, 70, .35);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 13px; line-height: 1.45; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.grow { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 6px; }

/* ---------- 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; }
.login { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.35); width: 620px; max-width: 95vw; overflow: hidden; margin: auto 0; flex-shrink: 0; }
.login small { font-weight: 400; opacity: .75; font-size: 11.5px; }
.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: 52px; height: 52px; flex: none; }
.login .lh h1 { margin: 0; font-size: 21px; color: #1f4b82; line-height: 1.3; }
.login .lh p { margin: 2px 0 0; color: var(--text-2); }
.login .lh p.en { font-size: 11.5px; opacity: .85; }
.login .lb { padding: 18px 24px 6px; }
.comp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.comp-head .cnt { color: var(--text-2); font-size: 12px; }
.comp-find { width: 250px; max-width: 55%; }
.complist { border: 1px solid #b8c6d6; max-height: min(300px, 38vh); min-height: 60px; overflow-y: auto; margin-bottom: 12px; border-radius: 4px; outline: none; }
.complist:focus { border-color: #3b7bd4; }
.complist div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #eef2f6; display: flex; justify-content: space-between; gap: 10px; }
.complist div:hover { background: #eaf2fd; }
.complist div.on, .complist div.on:hover { background: #1e6fd9; color: #fff; font-weight: 700; }
.complist div .cn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.complist div .cid { color: var(--text-2); white-space: nowrap; }
.complist div.on .cid { color: #e3eefc; }
.complist div.locked .cn { color: #9aa5b1; }
.complist div.locked .cid { color: var(--bad); }
.complist div.none { display: block; color: var(--text-2); cursor: default; border: 0; }
.complist div.none:hover { background: none; }
.fgrid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.fgrid label { color: #333; line-height: 1.25; }
.login .err { color: var(--bad); min-height: 18px; margin-top: 8px; white-space: pre-line; }
.login .lic { color: var(--text-2); font-size: 12px; margin-top: 4px; }
.login .lic.bad { color: var(--bad); }
.login .lf { padding: 12px 24px 18px; display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.login .lf .btn { flex-direction: column; gap: 0; line-height: 1.25; padding: 4px 14px; }
.login .lf .btn small { font-size: 11px; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } .login .lf { flex-direction: column; align-items: stretch; } .comp-find { width: 100%; max-width: none; } .comp-head { flex-wrap: wrap; } }

/* ---------- program frame ---------- */
#frame { 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; white-space: nowrap; overflow: hidden; }
#titlebar .logo { font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: 6px; }
#titlebar .logo svg { width: 18px; height: 18px; flex: none; }
#titlebar .company { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
#titlebar .spacer { flex: 1; }
#titlebar .user { cursor: pointer; opacity: .95; }
#titlebar .user:hover { text-decoration: underline; }
#titlebar .logout-btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 3px; padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; }
#titlebar .logout-btn:hover { background: #c0392b; border-color: #c0392b; }
#iconbar .ib.out { color: #aa3333; }
#iconbar .ib.out:hover { border-color: #e0a0a0; background: #fdf0ee; }
#menubar { background: var(--menu); border-bottom: 1px solid #c5d0dc; display: flex; user-select: none; position: relative; z-index: 900; flex-wrap: wrap; }
#menubar > .mi { padding: 4px 11px; cursor: default; position: relative; }
#menubar > .mi:hover, #menubar > .mi.open { background: #cfe0f5; }
#menubar .menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #8193a8; box-shadow: 2px 3px 8px rgba(0,0,0,.25); min-width: 250px; padding: 3px 0; z-index: 950; }
#menubar > .mi.open > .menu { display: block; }
.menu .mitem { padding: 4px 22px 4px 8px; white-space: nowrap; display: flex; align-items: center; gap: 8px; cursor: default; }
.menu .mitem svg { flex: none; }
.menu .mitem:hover { background: #d6e6fb; }
.menu .mitem .tag { margin-left: auto; }
.menu .sep { border-top: 1px solid #dde3ea; margin: 3px 0; }
#iconbar { background: linear-gradient(#fafcff, #e1e9f3); border-bottom: 1px solid var(--border-strong); display: flex; gap: 2px; padding: 3px 6px; align-items: stretch; overflow-x: auto; }
#iconbar .ib { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; 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.on { border-color: #7fa3cf; background: #dce9f8; }
#iconbar .ib svg { width: 24px; height: 24px; margin-bottom: 1px; }
#iconbar .ib .tag { position: absolute; top: 0; right: 4px; }
#iconbar .sep { width: 1px; background: #c4cfdb; margin: 3px 4px; flex: none; }
#iconbar .pick { align-self: center; display: flex; gap: 6px; }
#iconbar .pick select { width: auto; max-width: 200px; padding: 3px 6px; border-radius: 2px; }
#workspace { flex: 1; position: relative; overflow: hidden; background: var(--work); }
#statusbar { background: var(--menu); border-top: 1px solid #c5d0dc; padding: 2px 10px; font-size: 11.5px; color: var(--text-2); display: flex; gap: 18px; white-space: nowrap; overflow: hidden; }
#statusbar .warn { color: var(--warn); font-weight: 600; }
.tag { font-size: 10px; font-weight: 700; background: #d9412f; color: #fff; border-radius: 99px; padding: 0 6px; line-height: 16px; }

/* ---------- window ---------- */
.win { position: absolute; left: 20px; top: 12px; width: calc(100% - 40px); height: calc(100% - 24px); background: #fff; border: 1px solid #5a7597; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; border-radius: 4px 4px 2px 2px; overflow: hidden; }
.win .wt { background: linear-gradient(#9fb3cc, #8298b5); color: #fff; padding: 4px 6px 4px 10px; display: flex; align-items: center; gap: 6px; 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.max { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; border: 0; }
.win.min { height: auto; width: 300px; }
.win.min .wbody { display: none; }

/* ---------- pages inside the window ---------- */
.page { padding: 12px 14px 40px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -12px -14px 12px; padding: 7px 14px; background: linear-gradient(#f9fbfd, #e6edf5); border-bottom: 1px solid var(--border); }
.page-head h1 { font-size: 15px; margin: 0; font-weight: 700; color: #1f3a5f; }
.page-head .desc { color: var(--text-2); font-size: 12px; }
.page-head .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- home (workflow diagram) ---------- */
.home { display: grid; grid-template-columns: 1fr minmax(320px, 27%); gap: 12px; padding: 12px; min-width: 900px; }
.home .mainc, .home .side { display: flex; flex-direction: column; gap: 12px; }
.home .pane { background: #fff; border: 1px solid #b8c6d6; border-radius: 6px; }
.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.bud > h3 { background: linear-gradient(#8a73b8, #634c93); }
.home .pane.cashp > h3 { background: linear-gradient(#5aa05a, #347734); }
.home .pane.regp > h3 { background: linear-gradient(#d49a3a, #aa7418); }
.home .pane.comp > h3 { background: linear-gradient(#5d87bf, #33609b); }
.home .pane.balances > h3 { background: linear-gradient(#4a9aa8, #2a7380); }
.home .pane.duep > h3 { background: linear-gradient(#8a98ab, #66778e); }
.flow { display: flex; align-items: center; flex-wrap: wrap; padding: 16px 10px; }
.flow .node { width: 104px; 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.3; color: #1d3050; }
.flow .node:hover { background: #eef5ff; box-shadow: 0 0 0 1px #aac6ea inset; }
.flow .node .icw { position: relative; width: 46px; height: 46px; margin-bottom: 4px; }
.flow .node .icw svg { width: 46px; height: 46px; }
.flow .node .icw .tag { position: absolute; top: -4px; right: -8px; }
.flow .arr { width: 26px; height: 14px; flex: none; }
.flow .col { gap: 6px; }
.home .side .links { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.home .side .links .node { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; border: 1px solid #e3eaf3; background: #fbfcfe; border-radius: 8px; cursor: pointer; font-size: 12.5px; line-height: 1.25; color: #1d3050; 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 .icw { flex: 0 0 30px; width: 30px; height: 30px; }
.home .side .links .node .icw svg { width: 30px; height: 30px; }
.balances table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.balances td { padding: 5px 10px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
.balances td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.balances td .sub { font-size: 11px; color: var(--text-2); }
.balances tr:hover td { background: #eef5ff; cursor: pointer; }
.deadline { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }

/* ---------- buttons, inputs ---------- */
.btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #8b9cb0; background: linear-gradient(#fdfdfe, #e3e9f0); color: var(--text); border-radius: 3px; padding: 4px 12px; min-height: 26px; cursor: pointer; 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.ok { background: linear-gradient(#5aa05a, #347734); color: #fff; border-color: #2b602b; }
.btn.ok:hover { background: linear-gradient(#66ad66, #3c853c); }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { padding: 2px 8px; min-height: 22px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.iconbtn { border: 1px solid transparent; background: transparent; border-radius: 3px; width: 26px; height: 24px; cursor: pointer; display: grid; place-items: center; font-size: 13px; color: var(--text-2); }
.iconbtn:hover { border-color: #9db5d5; background: #eef4fc; color: var(--text); }
.field label { display: block; font-size: 12px; font-weight: 600; color: #34465c; margin-bottom: 2px; }
.field .req { color: var(--bad); }
.inp, select.inp, textarea.inp { width: 100%; border: 1px solid #a9b6c4; background: #fff; border-radius: 2px; padding: 3px 6px; min-height: 26px; outline: none; }
.inp:focus { outline: 2px solid #7fb0f0; outline-offset: -1px; border-color: #5b8fd6; }
.inp.num { text-align: right; }
.inp[readonly] { background: #f1f3f6; color: var(--text-2); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
.form-grid .span2 { grid-column: span 2; }
.form-grid .full { grid-column: 1 / -1; }
.seg { display: inline-flex; border: 1px solid #8b9cb0; border-radius: 3px; overflow: hidden; }
.seg button { border: 0; background: linear-gradient(#fdfdfe, #e3e9f0); padding: 3px 11px; cursor: pointer; }
.seg button + button { border-left: 1px solid #b4c1d0; }
.seg button:hover { background: linear-gradient(#fff, #d8e3ef); }
.seg button.on { background: linear-gradient(#e8f3ff, #cfe3fa); color: #1a4f9c; font-weight: 600; }
.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- cards (panes), KPI, badges ---------- */
.card { background: #fff; border: 1px solid #b8c6d6; border-radius: 4px; }
.card + .card { margin-top: 12px; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 5px 12px; background: linear-gradient(#6c95c9, #44709f); color: #fff; border-radius: 3px 3px 0 0; }
.card-h h3 { margin: 0; font-size: 13px; letter-spacing: .2px; }
.card-h .muted, .card-h .small { color: #e3ecf8; }
.card-b { padding: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { background: #fff; border: 1px solid #b8c6d6; border-left: 4px solid #3b7bd4; border-radius: 4px; padding: 10px 12px; }
.kpi .k { color: var(--text-2); font-size: 12px; }
.kpi .v { font-size: 19px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; color: #1f3a5f; }
.kpi .s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.kpi .bar { height: 6px; background: #eef2f6; border-radius: 2px; margin-top: 8px; overflow: hidden; border: 1px solid #dbe3ec; }
.kpi .bar i { display: block; height: 100%; background: #3b7bd4; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 0 8px; border-radius: 3px; background: #eef2f6; color: var(--text-2); border: 1px solid #d3dce6; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: #b9dcc1; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: #ecd49a; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: #efbcb7; }
.badge.info { background: var(--brand-soft); color: var(--brand); border-color: #bcd1ec; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.tile { background: #fbfcfe; border: 1px solid #d5dfea; border-radius: 6px; padding: 9px 10px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.tile:hover { background: #eef5ff; border-color: #aac6ea; }
.tile .ic { width: 32px; height: 32px; border-radius: 6px; background: #e3edf9; color: var(--brand); display: grid; place-items: center; font-size: 16px; flex: none; }
.tile b { display: block; color: #1d3050; }
.tile span { color: var(--text-2); font-size: 12px; }
.tile .code { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.report tr.drill { cursor: pointer; }
.report tr.drill:hover td { background: #eef5ff; }
@media print { .report tr.drill:hover td { background: none; } }
/* the voucher form of the manual (ບັດຜ່ານບັນຊີ / ບັດລົງບັນຊີ) */
.vpaper { background: #fff; border: 2px solid #333; border-radius: 2px; padding: 16px 18px 20px; margin: 12px 0 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); color: #111; }
.vpaper .vp-top { display: flex; gap: 24px; align-items: flex-start; border-bottom: 2px solid #333; padding-bottom: 12px; }
.vpaper .vp-left { flex: 1; min-width: 0; }
.vpaper .vp-title { text-align: center; font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.vpaper .vp-title small { display: block; font-weight: 400; font-size: 12px; }
.vpaper .vp-f { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.vpaper .vp-f label { flex: 0 0 96px; padding-top: 6px; font-weight: 600; }
.vpaper .vp-f .inp, .vpaper .vp-f textarea { flex: 1; border: 0; border-bottom: 1px dotted #555; border-radius: 0; background: transparent; }
.vpaper .vp-right { flex: 0 0 330px; display: flex; flex-direction: column; gap: 10px; }
.vpaper .vp-st { text-align: right; }
.vpaper table { border-collapse: collapse; width: 100%; }
.vpaper .vp-num th, .vpaper .vp-num td, .vpaper .vp-amt th, .vpaper .vp-amt td { border: 1px solid #333; padding: 4px 6px; text-align: center; font-size: 12.5px; }
.vpaper .vp-num th { background: #f3f5f8; font-weight: 600; }
.vpaper .vp-num td { font-family: var(--mono); height: 28px; }
.vpaper .vp-num td .inp { border: 0; width: 100%; text-align: center; padding: 2px; }
.vpaper .vp-amt .kip { width: 46px; border: 0; font-weight: 600; }
.vpaper .vp-amt .amt5 { font-family: var(--mono); font-weight: 700; font-size: 15px; text-align: right; min-height: 22px; }
.vpaper .vp-lines { margin-top: 12px; }
.vpaper .vp-lines th { border: 1px solid #333; background: #f3f5f8; padding: 5px 6px; font-weight: 600; }
.vpaper .vp-lines td { border: 1px solid #333; padding: 2px 3px; vertical-align: middle; }
.vpaper .vp-lines td .inp { border: 0; border-radius: 0; background: transparent; width: 100%; }
/* creditor / debtor and credit term under a class-4 line (AP / AR ageing) */
.vpaper .vp-lines tr.termrow td { background: #f7faff; border-top: 0; padding: 3px 8px; }
.vpaper .vp-lines .terms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.vpaper .vp-lines .terms .tlab { color: #23497a; font-weight: 600; margin-left: 6px; }
.vpaper .vp-lines .terms .inp { border: 1px solid #c9d6e6; border-radius: 4px; background: #fff; padding: 2px 6px; height: 26px; }
.vpaper .vp-lines .terms .tparty { width: 260px; } .vpaper .vp-lines .terms .tterm { width: 80px; } .vpaper .vp-lines .terms .tdue { width: 140px; }
@media print { .vpaper .vp-lines tr.termrow td { background: none; } .vpaper .vp-lines .terms .inp { border: 0; } }
.vpaper .vp-lines td.acc { width: 21%; }
.vpaper .vp-lines td.n { width: 13%; }
.vpaper .vp-lines td.off { background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 6px, #f1f3f6 6px, #f1f3f6 7px); cursor: pointer; }
.vpaper .vp-lines td.off .inp { color: #aab; }
.vpaper .vp-lines td.x, .vpaper .vp-lines th.x { width: 30px; border: 0; background: transparent; text-align: center; }
.vpaper .vp-lines tfoot td { border: 1px solid #333; padding: 6px; font-weight: 700; }
.vpaper .vp-lines tfoot td.n { font-family: var(--mono); text-align: right; }
.vpaper .vp-lines tfoot td.tot { text-align: right; }
.vpaper .vp-add { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.vpaper .vp-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }
.vpaper .sig b { display: block; margin-bottom: 6px; }
.vpaper .sig div { margin: 6px 0; display: flex; gap: 6px; }
.vpaper .sig .ln { flex: 1; border-bottom: 1px dotted #555; min-height: 18px; }
@media (max-width: 900px) { .vpaper .vp-top { flex-direction: column; } .vpaper .vp-right { flex-basis: auto; width: 100%; } }
/* new voucher: the kinds in home-page panes */
.home.kinds { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.home.kinds .tiles { padding: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.home.kinds .tile { align-items: center; min-height: 64px; padding: 10px 12px; border-color: #e3eaf3; border-radius: 8px; }
.home.kinds .tile:hover { border-color: #aac6ea; box-shadow: 0 1px 3px rgba(40, 80, 140, .12); }
.home.kinds .tile .icw { flex: 0 0 40px; width: 40px; height: 40px; }
.home.kinds .tile .icw svg { width: 40px; height: 40px; }
@media (max-width: 1000px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- toolbar + list table ---------- */
.toolbar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--border); background: linear-gradient(#f9fbfd, #e6edf5); }
.card > .toolbar:first-child { border-radius: 3px 3px 0 0; }
.toolbar .field { min-width: 140px; }
.tbl-wrap { overflow: auto; max-height: calc(100vh - 290px); }
.tbl-wrap.free { max-height: none; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: #fff; }
table.grid th { position: sticky; top: 0; z-index: 2; background: linear-gradient(#f3f6fa, #dfe8f3); color: #1f3a5f; font-weight: 600; text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border-strong); border-right: 1px solid #d3dce6; white-space: nowrap; }
table.grid thead tr:nth-child(2) th { top: 29px; }
table.grid th.c, table.grid td.c { text-align: center; }
table.grid td { padding: 4px 8px; border-bottom: 1px solid #e6ecf2; vertical-align: top; }
table.grid tbody tr:nth-child(even) td { background: #f6f9fc; }
table.grid tbody tr:hover td { background: #e3eefb; }
table.grid tr.click td { cursor: pointer; }
table.grid tr.sub td { background: #eef3f9; font-weight: 600; }
table.grid tr.tot td { background: #dfe8f3; font-weight: 700; border-top: 1px solid var(--border-strong); }
table.grid tr.lvl0 td { font-weight: 700; }
table.grid tr.lvl1 td:nth-child(2) { padding-left: 22px; }
table.grid tr.lvl2 td:nth-child(2) { padding-left: 36px; }
table.grid tr.lvl3 td:nth-child(2) { padding-left: 50px; }
table.grid td.neg { color: var(--bad); }
table.grid .colnum { color: var(--text-3); font-size: 11px; text-align: center; }
table.grid.bordered th, table.grid.bordered td { border-right: 1px solid #e0e7ef; }
.empty { text-align: center; color: var(--text-3); padding: 30px 10px; }

/* ---------- voucher entry ---------- */
.vlines td { padding: 3px 5px; }
.vlines td.acc { min-width: 300px; }
.vlines .del { color: var(--text-3); cursor: pointer; border: 0; background: none; font-size: 15px; }
.vlines .del:hover { color: var(--bad); }
.balance { display: flex; gap: 22px; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border); background: #f3f6fa; font-variant-numeric: tabular-nums; }
.balance .diff.bad { color: var(--bad); font-weight: 700; }
.balance .diff.ok { color: var(--ok); font-weight: 700; }
.acc-pick { position: relative; }
.acc-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; max-height: 300px; overflow: auto; background: #fff; border: 1px solid #8193a8; box-shadow: 2px 3px 8px rgba(0,0,0,.25); }
.acc-list div { padding: 4px 8px; cursor: pointer; display: flex; gap: 10px; }
.acc-list div:hover, .acc-list div.on { background: #d6e6fb; }
.acc-list .n { font-family: var(--mono); color: var(--link); min-width: 78px; }
.acc-list { min-width: 560px; max-height: 360px; }
.acc-list .grow { flex: 1; }
.acc-list .acc-tabs { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #eef3f9; border-bottom: 1px solid #c3cfdd; cursor: default; }
.acc-list .acc-tabs:hover { background: #eef3f9; }
.acc-tabs .tab { padding: 2px 10px; border: 1px solid #b7c5d6; border-radius: 3px; background: #fff; cursor: pointer; white-space: nowrap; font-size: 12px; }
.acc-tabs .tab em { font-style: normal; color: #6b7a8c; margin-left: 5px; font-size: 11px; }
.acc-tabs .tab.on { background: #1f5fa8; border-color: #1f5fa8; color: #fff; }
.acc-tabs .tab.on em { color: #d6e6fb; }
.acc-list .acc-grp { cursor: default; background: #f4f6f9; font-weight: 600; color: #233; }
.acc-list .acc-grp:hover { background: #f4f6f9; }
.acc-list .acc-grp.g1 { background: #e3eaf3; border-top: 1px solid #c9d5e3; }
.acc-list .acc-grp.g1:hover { background: #e3eaf3; }
.acc-list .acc-grp.g2 { font-weight: 500; color: #456; padding-left: 20px; }
.acc-list .acc-grp .n { color: #456; }
.acc-list .acc-it { padding-left: 20px; }
.acc-type { font-size: 11px; padding: 0 6px; border-radius: 3px; white-space: nowrap; align-self: center; border: 1px solid; }
.acc-type.rev { color: #1d6b2f; border-color: #8cc79a; background: #eef8f0; }
.acc-type.exp { color: #a2361c; border-color: #e6a796; background: #fdf1ee; }
.acc-type.cash { color: #1f5fa8; border-color: #9dbbe0; background: #eef4fb; }
.acc-type.third { color: #7a5a00; border-color: #e0c77a; background: #fdf8e8; }
.acc-type.res { color: #5a4a8a; border-color: #b9aee0; background: #f4f1fb; }
.steps { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.steps span { font-size: 12px; padding: 1px 9px; border-radius: 3px; background: #eef2f6; border: 1px solid #d3dce6; color: var(--text-3); }
.steps span.on { background: #2f69b3; color: #fff; border-color: #24558f; }
.steps span.done { background: var(--ok-soft); color: var(--ok); border-color: #b9dcc1; }

/* ---------- dialog, toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(30, 45, 65, .35); display: grid; place-items: center; z-index: 1000; padding: 16px; }
.dialog { background: var(--form-bg); border: 1px solid #5a7597; border-radius: 4px; width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; }
.dialog.wide { width: min(1180px, 100%); }
.dialog .dh { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; background: linear-gradient(var(--title1), var(--title2)); color: #fff; cursor: move; user-select: none; touch-action: none; }
.dialog .dh h3 { margin: 0; font-size: 13px; }
.dialog .dh .iconbtn { color: #fff; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); width: 22px; height: 18px; font-size: 11px; }
.dialog .dh .iconbtn:hover { background: #c9453a; }
.dialog .db { padding: 14px; overflow: auto; }
.dialog .df { display: flex; gap: 6px; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border); background: linear-gradient(#f9fbfd, #e6edf5); }
.toasts { position: fixed; right: 18px; bottom: 30px; display: flex; flex-direction: column; gap: 8px; z-index: 1100; }
.toast { background: #2d3e52; color: #fff; padding: 8px 14px; border-radius: 4px; box-shadow: var(--shadow-lg); max-width: 420px; white-space: pre-line; }
.toast.bad { background: var(--bad); }
.toast.ok { background: var(--ok); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--brand-2); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.note { border-left: 3px solid #3b7bd4; background: #e9f1fb; padding: 8px 12px; border-radius: 0 3px 3px 0; color: var(--text); font-size: 12.5px; }
.note.warn { border-color: var(--warn); background: var(--warn-soft); }

/* ---------- users and access rights (Quick Enterprise › Add User) ---------- */
.utb { align-items: center; }
.grid th.ck, .grid td.ck { width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
.grid td.ck input { width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; }
.utb .tb-sep { width: 1px; align-self: stretch; background: #c5d3e3; margin: 2px 4px; }
table.grid tr.sel td, table.grid tr.sel:hover td { background: #cfe2ff; }
.ud { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.ud small { display: block; font-weight: 400; font-size: 11px; color: var(--text-2); }
.ud .fgrid { grid-template-columns: 130px minmax(0, 1fr); gap: 7px 10px; }
.ud .fgrid label { font-size: 12.5px; }
.ud .req { color: var(--bad); }
.ud .ubranch { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ud .ubranch > b small { display: inline; margin-left: 6px; }
.ud .ubox { border: 1px solid #c5d0dc; background: #fff; padding: 6px 8px; max-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.ud .note-s { margin-top: 14px; font-size: 11.5px; color: var(--text-2); }
.ud .ar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ud .ar-head b small { display: inline; margin-left: 6px; }
.ud .ar-head select { width: auto; min-width: 260px; }
.rights { border: 1px solid #b8c6d6; background: #fff; max-height: 58vh; overflow: auto; }
.rights table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rights th { position: sticky; top: 0; z-index: 1; background: linear-gradient(#f3f6fa, #dfe8f3); color: #1f3a5f; text-align: left; padding: 5px 8px; border-bottom: 1px solid #9aaabb; }
.rights th small { display: block; font-size: 10.5px; color: var(--text-2); }
.rights .lv { width: 62px; text-align: center; }
.rights td { padding: 5px 8px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.rights td .hint { font-size: 11px; color: var(--text-3); }
.rights td.na { color: #c3ccd6; }
.rights tr.grp td { background: #e8eef6; font-weight: 700; color: #1f3a5f; border-bottom: 1px solid #d3dde9; }
.rights tr.grp td.lv a { font-weight: 400; font-size: 11px; color: var(--link); }
.rights tr:not(.grp):hover td { background: #f3f8ff; }
.rights input[type=radio] { width: 15px; height: 15px; cursor: pointer; }
.rights.dis { opacity: .45; pointer-events: none; }
@media (max-width: 900px) { .ud { grid-template-columns: 1fr; } }

/* ---------- document numbering (Quick Enterprise › Document numbering) ---------- */
.numhelp { color: var(--text-2); font-size: 12.5px; line-height: 1.6; margin-bottom: 10px; }
.numtbl td { vertical-align: middle; }
.numtbl .inp { min-height: 25px; }
.numtbl .fmtpick { width: 34px; padding: 2px; }
.numtbl .nx { font-weight: 700; color: #1f3a5f; white-space: nowrap; }
.numtbl .nx.muted { font-weight: 400; color: var(--text-2); }

/* ---------- official report (screen + print) ---------- */
.report { background: #fff; color: #000; padding: 28px 34px; border: 1px solid #b8c6d6; border-radius: 2px; font-size: 12.5px; overflow: auto; box-shadow: 0 1px 4px rgba(20,40,70,.15); }
.report .rhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; margin-bottom: 12px; }
.report .rhead .c { text-align: center; font-weight: 700; line-height: 1.6; }
.report .rhead .l, .report .rhead .r { font-size: 12px; line-height: 1.7; }
.report .rhead .r { text-align: right; }
.report h2 { text-align: center; font-size: 17px; margin: 12px 0 2px; }
.report .period { text-align: center; margin-bottom: 12px; }
.report table { width: 100%; border-collapse: collapse; }
.report th, .report td { border: 1px solid #555; padding: 4px 6px; }
.report th { background: #eef2f7; font-weight: 700; text-align: center; }
.report td.num { text-align: right; }
.report tr.b td { font-weight: 700; }
.report tr.t td { font-weight: 700; background: #f3f6fa; }
.report .sign { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 26px; font-weight: 700; }
.report .sign div span { display: block; font-weight: 400; margin-top: 60px; }
.report .unit { text-align: right; font-style: italic; margin-bottom: 4px; }
@media print {
  body { background: #fff; }
  #titlebar, #menubar, #iconbar, #statusbar, .win .wt, .no-print, .toolbar, .page-head, .toasts { display: none !important; }
  #frame { display: block; height: auto; }
  #workspace { overflow: visible; background: #fff; }
  .win { position: static; width: auto; height: auto; border: 0; box-shadow: none; overflow: visible; }
  .win .wbody { overflow: visible; background: #fff; }
  .page { padding: 0; }
  .card { border: 0; }
  .report { border: 0; padding: 0; overflow: visible; box-shadow: none; }
  .tbl-wrap { max-height: none; overflow: visible; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* budget units of a big organisation: search picker, chosen units, tree path */
.unit-pick .acc-list { min-width: 420px; }
.unit-pick .acc-list small { margin-left: 4px; }
.unit-pick.hdr { width: 240px; }
.unit-pick.hdr .inp { height: 30px; }
.unit-pick.hdr .acc-list { right: auto; }
.ud .uchips { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ud .uchips.dis { opacity: .55; }
.uchip { background: #e3eefc; border: 1px solid #b7cbe6; border-radius: 3px; padding: 1px 6px; font-size: 12.5px; }
.uchip a { cursor: pointer; color: #b42318; }
.ucrumbs a { cursor: pointer; color: var(--link); }
.ucrumbs { font-size: 13px; }

/* budget plan: the columns ticked for Import Excel / Delete */
.colpick { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.colpick input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.colpick.on { background: #fff3c4; outline: 1px solid #e0b400; }
.colpick.flash { animation: colflash .4s ease-in-out 4; }
@keyframes colflash { 50% { background: #ffd2cc; outline: 2px solid #d92d20; } }

/* ---- every page in the colours of its home-page pane (#main[data-theme], set by page() in state-core.js) ---- */
#main { --th1: #5d87bf; --th2: #33609b; --thl: #edf3fb; --thb: #bcd0ea; --tht: #23497a; }
#main[data-theme="bud"] { --th1: #8a73b8; --th2: #634c93; --thl: #f4f0fa; --thb: #cdc0e4; --tht: #4b3577; }
#main[data-theme="cashp"] { --th1: #5aa05a; --th2: #347734; --thl: #eef7ee; --thb: #b9dbb9; --tht: #255c25; }
#main[data-theme="rep"] { --th1: #4a9aa8; --th2: #2a7380; --thl: #eaf5f7; --thb: #b3d9df; --tht: #1d5660; }
#main[data-theme="regp"] { --th1: #d49a3a; --th2: #aa7418; --thl: #fcf5e6; --thb: #ead2a6; --tht: #7a5310; }
#main[data-theme="comp"] { --th1: #5d87bf; --th2: #33609b; --thl: #edf3fb; --thb: #bcd0ea; --tht: #23497a; }
#main .page-head { background: linear-gradient(var(--th1), var(--th2)); border-bottom: 0; padding: 9px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
#main .page-head h1 { color: #fff; font-size: 16px; letter-spacing: .2px; }
#main .page-head .desc { color: rgba(255,255,255,.86); }
#main .page-head .ph-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#main .page-head .ph-ic svg { width: 32px; height: 32px; }
#main .page-head .actions .btn:not(.primary):not(.danger):not(.ok) { background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.6); }
#main .page-head .actions .btn.primary { background: #fff; color: var(--tht); border-color: #fff; font-weight: 700; }
#main .card { border-color: var(--thb); border-radius: 6px; box-shadow: 0 1px 2px rgba(30,50,80,.06); }
#main .card-h { background: linear-gradient(var(--th1), var(--th2)); border-radius: 5px 5px 0 0; }
#main .card > .toolbar:first-child { background: var(--thl); border-top: 3px solid var(--th1); border-bottom: 1px solid var(--thb); border-radius: 5px 5px 0 0; }
#main .card > .toolbar:first-child label { color: var(--tht); font-weight: 600; }
#main .grid thead th { background: var(--thl); color: var(--tht); border-bottom: 2px solid var(--thb); }
#main .grid tr.sub td { background: var(--thl); color: var(--tht); font-weight: 700; }
#main .grid td.empty, #main .empty { padding: 28px 10px; color: #8796a8; text-align: center; font-size: 13px; }
#main .balance { background: var(--thl); border-top: 1px solid var(--thb); }
/* catalogue pages (reports, daily books): panes and tiles like the home page */
.home .pane.rep > h3 { background: linear-gradient(#4a9aa8, #2a7380); }
.page .home.kinds { padding: 0; min-width: 0; }
.home.kinds .tile .fno { flex: none; align-self: center; min-width: 30px; padding: 2px 7px; border-radius: 11px; font: 700 11.5px var(--mono); text-align: center; background: #eef3f9; color: #3b5a80; border: 1px solid #d3deea; }
.home.kinds .pane.bud .tile .fno { background: #f1ecfa; color: #5a3f8c; border-color: #dcd0ef; }
.home.kinds .pane.cashp .tile .fno { background: #eaf5ea; color: #2d6a2d; border-color: #c9e3c9; }
.home.kinds .pane.regp .tile .fno { background: #fbf1df; color: #85590f; border-color: #eedcb8; }
.home.kinds .pane.rep .tile .fno { background: #e6f3f5; color: #1f6470; border-color: #c4e2e7; }
.home.kinds .tile b { line-height: 1.35; }
.home.kinds .tile .code { display: block; margin-top: 2px; }
#main td.empty::before, #main div.empty:not(:has(.spinner))::before { content: '📭'; display: block; font-size: 30px; opacity: .45; margin-bottom: 6px; }
#main .card > .tbl-wrap:last-child, #main .card > .tbl-wrap + div { border-radius: 0 0 6px 6px; }
.report tr.drill:hover td { background: #fff6d6 !important; }
/* the manual (ຊ່ວຍເຫຼືອ › ປຶ້ມຄູ່ມື) */
.manual-frame { display: block; width: 100%; height: calc(100vh - 290px); min-height: 480px; border: 0; border-top: 1px solid var(--thb, #bcd0ea); border-radius: 0 0 6px 6px; background: #525659; }
/* foreign currency on a voucher line */
.vpaper .fx { display: flex; gap: 3px; margin-top: 3px; }
.vpaper .fx .fxcur { width: 62px; padding: 1px 2px; font-size: 11.5px; }
.vpaper .fx .fxamt, .vpaper .fx .fxrate { width: 86px; padding: 1px 4px; font-size: 11.5px; text-align: right; }
.vpaper .fxnote { text-align: right; }
/* the manual, typed out */
.man { display: grid; grid-template-columns: 320px 1fr; gap: 12px; align-items: start; }
.man-side { position: sticky; top: 4px; max-height: calc(100vh - 230px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--thb, #bcd0ea); border-radius: 6px; }
.man-q { padding: 8px; border-bottom: 1px solid #e3eaf3; }
.man-toc { overflow: auto; padding: 6px 0; }
.man-t { display: block; padding: 4px 10px; cursor: pointer; color: #1d3050; font-size: 12.5px; line-height: 1.35; border-left: 3px solid transparent; }
.man-t.l1 { font-weight: 700; background: var(--thl, #edf3fb); margin-top: 4px; }
.man-t.l2 { padding-left: 18px; font-weight: 600; }
.man-t.l3 { padding-left: 32px; color: #3c5273; }
.man-t:hover { background: #eef5ff; }
.man-t.on { border-left-color: var(--th1, #5d87bf); background: #fff6d6; }
.man-body { background: #fff; border: 1px solid var(--thb, #bcd0ea); border-radius: 6px; padding: 18px 26px; max-height: calc(100vh - 230px); overflow: auto; font-size: 14px; line-height: 1.75; }
.man-sec + .man-sec { margin-top: 18px; border-top: 1px dashed #d5dfea; padding-top: 10px; }
.man-body h1, .man-body h2, .man-body h3 { color: var(--tht, #23497a); margin: 8px 0 6px; }
.man-body h1 { font-size: 19px; } .man-body h2 { font-size: 16.5px; } .man-body h3 { font-size: 15px; } .man-html h4, .man-html h5, .man-html h6 { font-size: 14px; margin: 10px 0 4px; color: #2a4a70; }
.man-html p { margin: 4px 0 8px; text-align: justify; }
.man-html table.md { border-collapse: collapse; margin: 8px 0 12px; font-size: 12.5px; max-width: 100%; }
.man-html table.md th, .man-html table.md td { border: 1px solid #9fb3c8; padding: 3px 7px; vertical-align: top; }
.man-html table.md th { background: var(--thl, #edf3fb); color: var(--tht, #23497a); }
.man-html .pic { display: inline-block; background: #f3f5f8; border: 1px dashed #b8c6d6; padding: 1px 8px; border-radius: 4px; color: #556; font-size: 12px; }
.man-html .unread { color: #b42318; font-size: 12px; }
.man-html a.pg { display: inline-block; float: right; font-size: 11px; color: #6b7f99; border: 1px solid #d5dfea; border-radius: 10px; padding: 0 8px; margin: 2px 0 2px 8px; text-decoration: none; }
.man-html a.pg:hover { background: #eef5ff; color: var(--link); }
.man-html p.fn { font-size: 12px; color: #556; margin-left: 16px; }
.man-html mark { background: #ffe58a; padding: 0 1px; }
@media print { .man { display: block; } .man-body { max-height: none; overflow: visible; border: 0; } }
.pjsum { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pjsum .tile { cursor: default; } .pjsum .tile span { display: block; color: var(--text-2); font-size: 12px; }

/* ---- currency of the amounts in the entry helper */
.amt-cur{display:flex;align-items:stretch;gap:0}
.amt-cur .inp{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.cur-tag{display:inline-flex;align-items:center;padding:0 8px;font-size:12px;font-weight:700;color:#35506e;background:#eef3f9;border:1px solid #c5d2e0;border-left:0;border-radius:0 4px 4px 0;white-space:nowrap}
.cur-tag.fx{color:#8a4b00;background:#fff4e0;border-color:#e8c48a}
.acur-w{display:flex;gap:6px}
.acur-w .acur{width:90px;flex:none}
.acur-w .arate{width:110px;flex:none}

/* ---- language switch ລາວ | English */
.lang-sw{display:inline-flex;border:1px solid rgba(255,255,255,.55);border-radius:4px;overflow:hidden;margin-right:12px}
.lang-sw button{background:transparent;border:0;color:#fff;padding:3px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.lang-sw button.on{background:#fff;color:#1d4f8f;font-weight:700}
.lang-sw.login-sw{position:absolute;top:12px;right:14px;border-color:#9fb3cc;margin:0}
.lang-sw.login-sw button{color:#35506e}
.lang-sw.login-sw button.on{background:#2a6bc4;color:#fff}
.login .lh{position:relative;padding-right:130px}

/* ---- exchange rates (state-fx.js) */
.fx-tabs{display:flex;gap:4px;margin:0 0 10px;flex-wrap:wrap}
.fx-tabs .tab{border:1px solid #c5d2e0;background:#f4f7fb;border-radius:6px 6px 0 0;padding:7px 14px;font:inherit;cursor:pointer;color:#35506e}
.fx-tabs .tab.on{background:#fff;border-bottom-color:#fff;font-weight:700;color:#1d4f8f;box-shadow:0 -2px 0 #2a6bc4 inset}
.fx-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.fx-m{display:flex;gap:10px;align-items:flex-start;border:1px solid #d5dde8;border-radius:8px;padding:10px 12px;cursor:pointer;background:#fbfcfe}
.fx-m.on{border-color:#2a6bc4;background:#eef4fc;box-shadow:0 0 0 1px #2a6bc4}
.fx-m input{margin-top:4px}.fx-m p{margin:6px 0 0;color:#445}
.fx-pair{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.fx-pair .sep{color:#8899aa;margin:0 4px}
.fx-sum{display:flex;gap:10px;flex-wrap:wrap;padding:10px 12px}
.fx-sum>div{flex:1 1 160px;border:1px solid #d5dde8;border-radius:8px;padding:8px 10px;background:#fbfcfe}
.fx-sum small{display:block;color:#667}.fx-sum b{font-size:15px}
.fx-sum .ok{border-color:#7cc08a;background:#eef9f0}.fx-sum .ok b{color:#1e7a35}
.fx-sum .bad{border-color:#e39a9a;background:#fdf0f0}.fx-sum .bad b{color:#b3261e}
table.fx-pool td{white-space:nowrap}table.fx-pool td:nth-child(3){white-space:normal;min-width:220px}
tr.fx-bad td{background:#fdecec !important}
.badge.fx-in{background:#e5f4ea;color:#1e7a35;margin-left:6px}.badge.fx-out{background:#fdf1e3;color:#8a4b00;margin-left:6px}.badge.fx-reval{background:#e8eefb;color:#1d4f8f;margin-left:6px}
td.pos,b.pos{color:#1e7a35}td.neg,b.neg{color:#b3261e}
.fx-basis{color:#8a4b00;align-self:center;white-space:nowrap}

/* ---- manual: table of contents (number, title, dotted leader, page) */
.mtoc{margin:6px 0 14px;max-width:980px}
.mtoc .mt{display:flex;align-items:baseline;gap:6px;padding:3px 0;line-height:1.5}
.mtoc .mt .n{flex:none;min-width:58px;color:#1d4f8f;font-weight:600;font-variant-numeric:tabular-nums}
.mtoc .mt .t{flex:0 1 auto}
.mtoc .mt .dots{flex:1 1 30px;min-width:30px;border-bottom:1.5px dotted #9aa8b8;transform:translateY(-4px)}
.mtoc .mt .p{flex:none;min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:#334}
.mtoc .mt.d0{font-weight:700;color:#14365f;margin-top:10px;padding-top:6px;border-top:1px solid #e3e9f1}
.mtoc .mt.d0:first-child{margin-top:0;border-top:0}
.mtoc .mt.d1{padding-left:18px}.mtoc .mt.d2{padding-left:40px}.mtoc .mt.d3{padding-left:62px}.mtoc .mt.d4{padding-left:84px}
.mtoc .mt.d2 .n,.mtoc .mt.d3 .n,.mtoc .mt.d4 .n{font-weight:500;min-width:70px}
.fx-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid #e3e9f1}
.fx-bar .inp{width:auto;max-width:420px}.fx-bar .grow{flex:1}

/* spot rates: ticked rows, inactive currencies, right-click menu */
.grid td.chk-col,.grid th.chk-col{width:34px;text-align:center}
.grid tr.sel td{background:#eaf2fd}
.grid tr.inactive td{color:#8a94a3}
.ctx-menu{position:fixed;z-index:3000;background:#fff;border:1px solid #b9c6d6;border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.18);min-width:190px;padding:4px 0}
.ctx-menu .ctx-h{padding:6px 12px;font-size:12px;color:#556;border-bottom:1px solid #e3e9f1;margin-bottom:2px}
.ctx-menu .mitem{padding:7px 14px;cursor:pointer}.ctx-menu .mitem:hover{background:#eaf2fd}

/* Currency List (like Quick Enterprise) */
.cur-tb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid #d5dde8;background:#f6f8fb}
.cur-tb .tb{background:transparent;border:1px solid transparent;border-radius:4px;padding:6px 10px;font:inherit;cursor:pointer;color:#1f3550}
.cur-tb .tb:hover:not(:disabled){background:#e3ecf7;border-color:#c5d4e6}.cur-tb .tb:disabled{opacity:.45;cursor:default}
.cur-tb .tb-sep{width:1px;height:22px;background:#c5d0dc;margin:0 6px}.cur-tb .grow{flex:1}
.cur-tb .cur-search{width:220px}
.cur-note{padding:6px 12px;color:#556;font-size:13px;border-bottom:1px solid #e3e9f1}
.cur-list{max-height:52vh}
.cur-grid tbody tr{cursor:default}.cur-grid tbody tr.on td{background:#dbe8f8 !important}
.cur-foot{display:flex;align-items:center;gap:10px;padding:6px 12px;border-top:1px solid #e3e9f1}.cur-foot .grow{flex:1}
.cur-hist{max-height:34vh}
.ctx-menu .mitem.dis{color:#aab;cursor:default}.ctx-menu .mitem.dis:hover{background:none}

/* customise report */
.rc-tabs{display:flex;gap:4px;border-bottom:1px solid #c5d2e0;margin-bottom:10px}
.rc-tabs button{border:1px solid #c5d2e0;border-bottom:0;background:#f4f7fb;border-radius:6px 6px 0 0;padding:6px 14px;font:inherit;cursor:pointer;margin-bottom:-1px}
.rc-tabs button.on{background:#fff;font-weight:700;color:#1d4f8f}
.rc-fs{border:1px solid #d5dde8;border-radius:6px;padding:8px 12px;margin:0 0 10px}.rc-fs legend{font-weight:700;color:#1d4f8f;padding:0 4px}
.rc-fs .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rc-colwrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.rc-cols{flex:1 1 260px;max-height:300px;overflow:auto;border:1px solid #d5dde8;border-radius:4px}
.rc-col{display:flex;gap:8px;align-items:center;padding:5px 8px;cursor:pointer;border-bottom:1px solid #f0f3f7}.rc-col.on{background:#dbe8f8}
.rc-side{flex:1 1 260px;display:flex;flex-direction:column;gap:8px}.rc-side .row{display:flex;gap:6px;flex-wrap:wrap}
.rc-fx{display:flex;flex-direction:column;gap:6px;border:1px solid #e3e9f1;border-radius:6px;padding:8px}
.report.rf-small{font-size:11px}.report.rf-small table{font-size:11px}.report.rf-large{font-size:15px}.report.rf-large table{font-size:14.5px}
.rc-fs .row .inp{width:auto}

.fx-mbadge{margin-left:auto;cursor:pointer;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:12px;white-space:nowrap}
.fx-mbadge.avg{background:#fff4e0;color:#8a4b00;border:1px solid #e8c48a}.fx-mbadge.spot{background:#e8f1fb;color:#1d4f8f;border:1px solid #b9cfe8}
.fx-vnote{margin:6px 2px 0}
.mtoc .mt.go{cursor:pointer;border-radius:4px}.mtoc .mt.go:hover{background:#eaf2fd}.mtoc .mt.go:hover .t{color:#1d4f8f;text-decoration:underline}

.pj-rate-help{margin:6px 0 4px;padding:8px 10px;background:#f4f8fd;border:1px solid #d5e2f1;border-radius:6px;font-size:12.5px;line-height:1.55;color:#24364d}
.pj-rate-help.warn{background:#fff4e0;border-color:#e8c48a;color:#8a4b00}
.pj-rate-all{margin-top:6px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.5}
.pj-rate-all>div{border-left:3px solid #2a6bc4;padding:4px 10px;background:#fafcff}
/* Cash Basis IPSAS study manual (#/ipsas) */
.bk-lang { display: inline-flex; margin-right: 6px; } .bk-lang .btn { border-radius: 0; margin: 0; } .bk-lang .btn:first-child { border-radius: 4px 0 0 4px; } .bk-lang .btn:last-child { border-radius: 0 4px 4px 0; }
.bk-lang .btn.on { background: var(--th1, #5d87bf); color: #fff; border-color: var(--th1, #5d87bf); }
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .bk-two > div { min-width: 0; } .bk-two .bk-en { border-left: 1px dashed #d5dfea; padding-left: 16px; color: #2b3a4f; }
.bk-ipsas .man-html .ref { font-weight: 700; color: #23497a; white-space: nowrap; }
.bk-ipsas .man-html .prog { margin: 6px 0 10px; padding: 6px 10px; background: #eef8f1; border-left: 4px solid #3a9b5c; border-radius: 0 4px 4px 0; font-size: 13px; }
.bk-ipsas .man-html .req { display: inline-block; background: #fdecec; color: #a3261c; border: 1px solid #f1b4ae; border-radius: 3px; font-size: 11.5px; padding: 0 5px; margin-right: 3px; font-weight: 600; }
.bk-ipsas .man-html .enc { display: inline-block; background: #eef3fb; color: #2a5591; border: 1px solid #bcd0ea; border-radius: 3px; font-size: 11.5px; padding: 0 5px; margin-right: 3px; font-weight: 600; }
.bk-ipsas .man-html .ppg { float: right; font-size: 11px; color: #6b7f99; border: 1px solid #d5dfea; border-radius: 10px; padding: 0 8px; margin-left: 8px; }
.bk-ipsas .man-html table.md td.n { text-align: right; white-space: nowrap; }
.bk-foot { margin-top: 22px; padding-top: 8px; border-top: 1px solid #e3eaf3; }
@media (max-width: 900px) { .bk-two { grid-template-columns: 1fr; } .bk-two .bk-en { border-left: 0; padding-left: 0; } }

/* step 2 pulled from step 1: the payables still owed (payment / settlement helper) and the paid status on a payable */
.paypick { border: 1px solid #c9d6e6; border-radius: 6px; padding: 8px; background: #fbfdff; display: flex; flex-direction: column; gap: 8px; }
.paypick .tbl-wrap { max-height: 320px; overflow: auto; }
.paypick .inp:not(.num) { min-width: 260px; }
.paypick td .inp.num { width: 140px; }
.paypick tr.on td { background: #eaf3ff; }
.paypick td.late { color: #b3261e; font-weight: 600; }
.paystat { margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-weight: 600; }
.paystat.open { background: #fff4e0; color: #8a5300; } .paystat.done { background: #e6f6ea; color: #1e6b32; }
a.paylink { color: #1a56a8; text-decoration: underline; margin-left: 4px; }

/* average-rate check: how each row is worked out */
.fx-pool td.fx-how { font-size: 12px; color: #2b4a6f; min-width: 360px; white-space: normal; }