/* Izox — one stylesheet for phone, tablet, laptop and desktop.
   Rule: nothing may be wider than the screen. Wide tables become stacked cards below 900px. */
:root {
  --bg: #f6f6f4; --panel: #fff; --ink: #1f2328; --muted: #62676e; --line: #e2e2de;
  --accent: #fc5408; --accent-ink: #fff; --ok: #1e7a3c; --warn: #8a5800; --err: #b3261e;
  --s1: #2a78d6; --s2: #eb6834;
  --tap: 44px;
}
*, *::before, *::after { box-sizing: border-box; }
input, select, textarea, button { scroll-margin-top: 130px; }   /* keep "Please fill out this field" below the sticky menu */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: anywhere; }
img, svg, video { max-width: 100%; }
a { color: #0b5cad; }
h1 { font-size: clamp(19px, 2.4vw, 23px); margin: 0 0 14px; display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; line-height: 1.25; }
h1 small { font-size: 12px; font-weight: 400; }
h2 { font-size: 16px; margin: 22px 0 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Top bar & navigation ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px 18px; padding: 8px max(16px, env(safe-area-inset-left)); background: #1f2328; color: #fff; flex-wrap: wrap; }
.top a { color: #d8dadd; text-decoration: none; }
.top .brand { font-weight: 700; color: var(--accent); font-size: 19px; padding: 4px 0; }
.top nav { display: flex; gap: 2px 14px; flex-wrap: wrap; flex: 1; align-items: center; }
.navgroup { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.navgroup + .navgroup { border-left: 1px solid #3a4048; padding-left: 12px; }
.navlabel { display: none; }
.top nav a { padding: 6px 9px; border-radius: 6px; font-size: 14px; white-space: nowrap; }
.top nav a.on, .top nav a:hover { background: #343a41; color: #fff; }
.top .who { font-size: 13px; color: #aab; }
.menu-btn { display: none; }
.only-mobile { display: none !important; }

/* ---- Page frame ---- */
main { padding: 20px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); max-width: 1320px; margin: 0 auto; }
main.narrow { max-width: 420px; padding-top: 10vh; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; display: block; min-width: 0; }
.muted { color: var(--muted); } .small, small { font-size: 12.5px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* ---- Forms ---- */
label { display: block; font-weight: 600; font-size: 13px; min-width: 0; }
label small { display: block; font-weight: 400; color: var(--muted); }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
input, select, textarea { width: 100%; max-width: 100%; font: inherit; font-size: 15px; padding: 8px 10px; min-height: 40px; border: 1px solid #c9c9c4; border-radius: 7px; background: #fff; color: var(--ink); margin-top: 3px; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: var(--accent); }
input[type=file] { padding: 6px; }
input[readonly], input:disabled, select:disabled { background: #f0f0ee; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #fc540855; border-color: var(--accent); }
.upper { text-transform: uppercase; }
.form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wide { grid-column: 1 / -1; } .wide2 { grid-column: span 2; }
.form2 h2, .form3 h2 { margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0 0; padding: 10px 12px; min-width: 0; }
fieldset.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
fieldset.perms legend { font-weight: 600; font-size: 13px; }
.pgroup strong { display: block; font-size: 13px; margin-bottom: 2px; }
.pgroup label.check { font-size: 13px; padding: 3px 0; }

/* ---- Buttons ---- */
button, .btn { font: inherit; font-size: 14.5px; padding: 8px 14px; min-height: 40px; border-radius: 7px; border: 1px solid #c9c9c4; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.2; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.danger, button.danger { color: var(--err); border-color: #f3b8b3; }
button.link { border: 0; background: none; color: var(--muted); padding: 4px 6px; min-height: 0; }
button:hover, .btn:hover { filter: brightness(.96); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.actions label { flex: 1 1 150px; }
form.inline { display: inline; }
form.stack { display: flex; flex-direction: column; gap: 6px; }

/* ---- Tables ---- */
.grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.grid th { background: #fafaf8; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.grid .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid input.num { text-align: right; }
.grid.lines td { padding: 5px 6px; }
.grid.lines input, .grid.lines select, .grid.lines textarea { margin: 0; }
.grid tr.sep td { border-top: 2px solid var(--line); }
.grid tr.dim td { color: #9a9a9a; }
.grid.small td, .grid.small th { font-size: 13px; }
.internal { background: #fff8e6 !important; }
.internal-box { background: #fff8e6; border-color: #f0dca8; }

/* ---- Messages, status ---- */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; border: 1px solid; }
.flash.ok { background: #e9f6ee; border-color: #b6e0c3; color: var(--ok); }
.flash.warn { background: #fff6e0; border-color: #f0d38a; color: var(--warn); }
.flash.err { background: #fdecea; border-color: #f3b8b3; color: var(--err); }
.flash ul { margin: 4px 0 0 18px; padding: 0; }
.status, .tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #eceae4; color: #555; white-space: nowrap; }
.s-Draft { background: #eceae4; } .s-PendingApproval { background: #fff0c2; color: #7a5200; }
.s-Approved { background: #dcecff; color: #134a8a; } .s-Issued, .s-Posted { background: #d9f2e1; color: #1e6b36; }
.s-Billed { background: #e6e0f7; color: #4a2f91; } .s-Sent { background: #dcecff; color: #134a8a; } .s-Signed { background: #d9f2e1; color: #1e6b36; } .s-Cancelled, .s-Void { background: #f4dcdc; color: #8a1f1f; }
.tag.ok { background: #d9f2e1; color: #1e6b36; } .tag.bad { background: #fdecea; color: var(--err); }
.searchbar { display: flex; gap: 8px; margin: 0 0 12px; max-width: 560px; } .searchbar input { flex: 1; min-width: 0; margin: 0; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .tabs a { padding: 6px 12px; border-radius: 99px; background: #eceae4; text-decoration: none; color: #333; font-size: 13.5px; } .tabs a.on { background: #1f2328; color: #fff; }
.suggest { color: #1e6b36; } .suggest.blocked { color: var(--warn); }
.f7 { color: var(--err); font-weight: 600; }
.wrap { word-break: break-word; }

/* ---- Dashboard ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 8px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.kpi span { display: block; font-size: 12.5px; color: var(--muted); }
.kpi strong { font-size: clamp(16px, 2vw, 20px); font-variant-numeric: tabular-nums; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; }
.meta span { display: block; font-size: 12px; color: var(--muted); }
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; transition: opacity .2s; }
.charts.loading { opacity: .6; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card h2 { margin-top: 0; }
.chart { width: 100%; min-height: 60px; }
.chart svg { display: block; overflow: visible; }

.chart line.gl { stroke: #ecebe7; stroke-width: 1; }
.chart line.base { stroke: #bdbcb6; stroke-width: 1; }
.chart .tick { fill: #62676e; font-size: 11px; }
.chart .lbl { fill: #1f2328; font-size: 12.5px; }
.chart .val { fill: #3b3f45; font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .cross { stroke: #9a9a94; stroke-width: 1; }
.chart path.mark:hover { opacity: .85; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sw.line { height: 3px; width: 16px; border-radius: 2px; }
.viz-tip { position: fixed; z-index: 50; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 8px 10px; font-size: 13px; max-width: 260px; }
.viz-tip .tt { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.viz-tip .tr { display: flex; align-items: center; gap: 8px; }
.viz-tip .tr i { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.viz-tip .tr b { font-variant-numeric: tabular-nums; }
.viz-tip .tr span { color: var(--muted); }
details > summary { cursor: pointer; }
details.fix summary { font-weight: 600; color: var(--muted); }
.fixform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.fixform input[name=reason] { flex: 1 1 220px; }
.fixform input[type=file] { flex: 1 1 200px; }
.fixform label { flex: 1 1 180px; }
.drop { border: 2px dashed #c9c9c4; background: #fffdfb; } .drop.off { border-color: #e2e2de; background: #f6f6f4; }
.drop form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .drop input[type=file] { max-width: 360px; }
select option[value=new] { font-weight: 600; }
.f5 td.bx { font-weight: 700; color: var(--muted); text-align: center; }
.f5 tr.sec td { background: #f6f6f4; font-weight: 700; font-size: 13px; color: #444; }
.f5 tr.hi td { background: #fff6d6; }
.f5 td.adj input, .f5 td.num input { text-align: right; max-width: 160px; }

/* ---- Tablet & phone (portrait tablets, all phones) ---- */
/* ---- Delivery orders ---- */
.sigpad { position: relative; border: 2px dashed var(--line); border-radius: 10px; background: #fff; height: 160px; max-width: 520px; margin: 6px 0; touch-action: none; }
.sigpad canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.sigpad .hint { position: absolute; left: 10px; bottom: 6px; font-size: 12px; color: #9a9ea4; pointer-events: none; }
.sigpad.inked .hint { display: none; }
.dropzone { border: 2px dashed #c9d6e6; background: #f5f9fe; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.dz-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; } .dz-row input[type=file] { flex: 1 1 220px; min-width: 0; margin: 0; }
[data-importmsg] div { margin-top: 4px; }
.pickinv { margin: 0 0 12px; } .pickinv summary { cursor: pointer; font-weight: 600; color: #0b5cad; padding: 4px 0; }
.invlist { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 8px 0; background: #fcfcfb; }
.invlist label.check { font-size: 13.5px; padding: 4px 0; } .invlist label[hidden] { display: none; }
.share { display: grid; gap: 10px; }
.share .linkbox { display: flex; gap: 8px; } .share .linkbox input { flex: 1; min-width: 0; margin: 0; font-size: 13px; }
.btn.wa { background: #25d366; border-color: #25d366; color: #fff; font-weight: 600; }
.sigimg { height: 70px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.filelist { list-style: none; padding: 0; margin: 0 0 10px; } .filelist li { display: flex; gap: 8px; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.timeline { list-style: none; padding: 0; margin: 0; font-size: 13px; } .timeline li { padding: 4px 0; color: var(--muted); } .timeline b { color: var(--ink); font-weight: 600; }
.rx-no { color: var(--err); font-weight: 600; } .rx-ok { color: var(--ok); font-weight: 600; }

/* ---- Document chain (paper trail) ---- */
.chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 4px; margin: 0 0 14px; }
.chain-node { display: flex; flex-direction: column; min-width: 0; max-width: 220px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); text-decoration: none; color: var(--ink); line-height: 1.25; }
.chain-node small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.chain-node b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-node i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.chain-node:hover { border-color: #b9c6d6; }
.chain-node.on { border-color: var(--s1); box-shadow: inset 0 0 0 1px var(--s1); background: #f3f8fe; }
.chain-node.void b { text-decoration: line-through; color: var(--muted); }
.chain-arrow { align-self: center; color: #9aa0a6; }
.deliv { margin: 0 0 16px; } .deliv table { margin: 6px 0 0; }

/* ---- Home tiles (app-style) ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin: 4px 0 22px; }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-width: 0; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(31,35,40,.08); border-color: #d2d2cc; }
.tile-main { display: flex; flex-direction: column; gap: 3px; padding: 16px 16px 14px; min-height: 124px; color: var(--ink); text-decoration: none; border-radius: 14px; }
.tile-main:focus-visible { outline: 3px solid var(--s1); outline-offset: 2px; }
.tile-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; }
.g-sales .tile-ico { background: #e6f0fb; color: #1d5fae; }
.g-buy .tile-ico { background: #fdeee5; color: #c2410c; }
.g-money .tile-ico { background: #e3f4ea; color: #1e6b36; }
.g-admin .tile-ico { background: #ececea; color: #4a4f55; }
.has-add .tile-main { padding-right: 52px; }
.tile-title { font-weight: 650; font-size: 15px; line-height: 1.25; }
.tile-sub { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.badge { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 650; line-height: 1; padding: 5px 9px; border-radius: 99px; background: #eceae4; color: #4a4f55; white-space: nowrap; pointer-events: none; max-width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis; }
.badge.alert { background: var(--err); color: #fff; }
.badge.todo { background: #fff1d6; color: #7a4b00; }
.badge.info { background: #e6f0fb; color: #1d5fae; }
.tile-add { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; line-height: 1; font-weight: 500; text-decoration: none; background: #fff; border: 1.5px solid currentColor; }
.g-sales .tile-add { color: #1d5fae; } .g-buy .tile-add { color: #c2410c; } .g-money .tile-add { color: #1e6b36; } .g-admin .tile-add { color: #4a4f55; }
.g-sales .tile-add:hover { background: #e6f0fb; } .g-buy .tile-add:hover { background: #fdeee5; } .g-money .tile-add:hover { background: #e3f4ea; } .g-admin .tile-add:hover { background: #ececea; }
.tile-add:focus-visible { outline: 3px solid var(--s1); outline-offset: 2px; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}
@media (max-width: 420px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-main { min-height: 116px; padding: 14px 12px 12px; }
  .tile-ico { width: 40px; height: 40px; }
  .badge { top: 10px; right: 10px; font-size: 11.5px; padding: 4px 8px; }
  .tile-add { width: 36px; height: 36px; }
}
@media print { .tiles { display: none; } }

@media (max-width: 900px) {
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px; min-height: var(--tap); }   /* 16px stops iOS zooming into fields */
  button, .btn { min-height: var(--tap); font-size: 15px; }
  main { padding: 14px max(12px, env(safe-area-inset-right)) 90px max(12px, env(safe-area-inset-left)); }
  .form2, .form3, .cols2, .charts { grid-template-columns: minmax(0, 1fr); }
  .wide2 { grid-column: auto; }

  /* hamburger navigation */
  .top { padding: 8px 12px; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; margin-left: auto; width: var(--tap); height: var(--tap); padding: 10px; background: transparent; border: 1px solid #3a4048; position: relative; }
  .menu-btn span:not(.sr) { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; }
  .menu-btn .dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .top nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 0 10px; max-height: calc(100vh - 64px); overflow-y: auto; }
  .top.open nav { display: flex; }
  .navgroup { flex-direction: column; align-items: stretch; }
  .navgroup + .navgroup { border-left: 0; padding-left: 0; border-top: 1px solid #3a4048; padding-top: 6px; }
  .navlabel { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8b9097; padding: 4px 10px 0; }
  .top nav a { padding: 11px 10px; font-size: 16px; }
  .only-mobile { display: block !important; } .top nav .who.only-mobile { padding: 10px; }
  .only-desktop { display: none !important; }

  /* every table becomes a list of cards: one row = one card, each cell labelled */
  .grid, .grid tbody, .grid thead, .grid tfoot, .grid tr, .grid td { display: block; width: 100%; }
  .grid { border: 0; background: transparent; }
  .grid tr.hdr, .grid thead tr { display: none; }
  .grid tr { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 6px 12px; }
  .grid td { border: 0; padding: 5px 0; display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; }
  .grid td::before { content: attr(data-label); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding-top: 2px; }
  .grid td.nolabel, .grid td:not([data-label]), .grid td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .grid td.nolabel::before, .grid td:not([data-label])::before, .grid td[data-label=""]::before { display: none; }
  .grid td.empty { display: none; }
  .grid .num, .grid td.num { text-align: right; white-space: normal; justify-items: end; }
  .grid td.num::before { justify-self: start; }
  .grid tr.span-row { padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
  .grid tr.span-row td { display: block; width: auto; padding: 2px 0; text-align: left; flex: 1 1 auto; }
  .grid tr.span-row td.num { text-align: right; flex: 0 1 auto; }
  .grid tr.span-row td[colspan] { flex: 1 1 60%; }
  .grid tr.span-row td input { min-width: 110px; }
  .grid tr.sec { background: transparent; border: 0; padding: 12px 0 0; margin: 0; }
  .grid tr.sep td { border-top: 0; }
  .grid.lines tr { padding: 10px 12px; }
  .grid.lines td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .grid.lines td::before { padding: 0; }
  .grid.lines td[data-t] { grid-template-columns: auto minmax(0, 1fr); font-weight: 600; }
  .grid.lines td button[data-del] { justify-self: end; border: 1px solid #f3b8b3; color: var(--err); padding: 8px 14px; min-height: var(--tap); }
  .grid.lines tfoot tr, .grid.lines tr.span-row { background: #fafaf8; }
  .f5 td.adj input, .f5 td.num input { max-width: none; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions .btn, .actions button { flex: 1 1 auto; }
  #docform .actions.sticky, #docform > p.actions:last-child { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 18%); padding: 14px 0 max(10px, env(safe-area-inset-bottom)); margin-bottom: 0; z-index: 5; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .fixform > * { flex: 1 1 100%; }
  .drop input[type=file] { max-width: 100%; }
}
@media (max-width: 380px) {
  .meta { grid-template-columns: minmax(0, 1fr); }
  .grid td { grid-template-columns: minmax(84px, 40%) minmax(0, 1fr); }
}
@media print {
  .top, .actions, details.fix, .menu-btn { display: none !important; }
  main { padding: 0; max-width: none; }
  .card, .grid { break-inside: avoid; }
}
/* delivery order: letterhead or blank */
.lhpick{border:1px solid var(--line,#e2e2de);border-radius:8px;padding:8px 12px;margin:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.lhpick legend{font-size:12px;font-weight:600;padding:0 4px}
.lhbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.chip{border:1px solid var(--line,#d6d6d0);background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.chip.on{background:#FC5408;border-color:#FC5408;color:#fff;cursor:default;opacity:1}
.lhpick label.check{display:flex;align-items:flex-start;gap:8px;flex:1 1 300px;margin:0;font-weight:400}
.lhpick label.check input{width:auto;flex:0 0 auto;margin:3px 0 0}
.lhpick label.check span.t{display:block;min-width:0}
.hidepick{display:flex;align-items:flex-start;gap:8px;font-weight:400}
.hidepick input{width:auto;flex:0 0 auto;margin:3px 0 0}
/* Save buttons stay in view at the bottom of long forms */
.savebar{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.97);border-top:1px solid var(--line,#e2e2de);margin:16px -12px 0;padding:10px 12px;box-shadow:0 -4px 14px rgba(0,0,0,.06);border-radius:10px 10px 0 0}
@media (max-width:640px){.savebar{display:flex;flex-wrap:wrap;gap:8px}.savebar .btn{flex:1 1 auto;text-align:center}}
.check.remember{display:flex;align-items:center;gap:8px;font-weight:400;margin-top:6px}
.check.remember input{width:auto;margin:0}
form.signout{display:inline;margin:0}
button.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
/* "Put Izox on your home screen" */
.installcard{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid #f6c7ad;background:#fff8f3}
.installcard img{border-radius:12px;flex:0 0 auto}
.installcard .ic-text{flex:1 1 200px;display:flex;flex-direction:column;gap:2px}
.installcard .ic-btns{display:flex;gap:8px}
/* installed app: room for the phone's status bar / notch */
@media (display-mode: standalone){ header.top{padding-top:max(8px, env(safe-area-inset-top))} }
[hidden]{display:none !important}
.card.installcard{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px 14px;padding:12px 14px}
.card.installcard .ic-text{min-width:0}
@media (max-width:560px){.card.installcard{grid-template-columns:52px 1fr}.card.installcard .ic-btns{grid-column:1/-1}}
/* Import from Financio */
.importsteps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.importstep h2{margin:0 0 4px;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.importstep .stepno{display:inline-flex;width:26px;height:26px;border-radius:50%;background:#FC5408;color:#fff;font-size:14px;align-items:center;justify-content:center}
.importstep .dz-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.importstep input[type=file]{flex:1 1 180px;min-width:0}
.scrollx{overflow-x:auto;max-width:100%}
.newacct{display:inline-flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.newacct[hidden]{display:none}
/* Reference photos */
.phcell{min-width:90px}
.phthumbs{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}
.phthumb{position:relative;display:inline-block;line-height:0}
.phthumb img{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line,#ddd);background:#f4f4f2}
.phthumbs.big .phthumb img{width:110px;height:110px}
.phx{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:#b3261e;color:#fff;font-size:13px;line-height:20px;padding:0;cursor:pointer}
.phadd{display:inline-flex;align-items:center;justify-content:center;width:56px;height:30px;border:1px dashed #b9b9b3;border-radius:6px;cursor:pointer;font-size:16px;background:#fff}
.phadd:hover{border-color:#FC5408}
.phaddbtn{cursor:pointer}
[data-phcell].busy .phadd,[data-phgallery].busy .phaddbtn{opacity:.5;pointer-events:none}
.phgallery .phprint{margin-top:8px}
.s-wo-Open{background:#e8f0fe;color:#1a56b8}.s-wo-InProgress{background:#fff3d6;color:#8a5a00}.s-wo-Done{background:#e5f4ea;color:#1e7a3c}.s-wo-Cancelled{background:#f1f1ef;color:#777}

/* Upload a document to fill the form in */
.readpick { position: relative; display: inline-block; margin: 0; }
.readpick input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.readpick .btn { pointer-events: none; }
[data-readcard] strong { flex: 1 1 100%; }
[data-readcard] small { flex: 1 1 260px; }
.ocrbar { height: 10px; background: #eee; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.ocrbar span { display: block; height: 100%; width: 2%; background: #FC5408; transition: width .3s; }
.findaddr { display: block; margin-top: 2px; } .findaddr .link { font-size: .85rem; } .findaddr small { color: #555; }
.paidpick label.check { align-items: flex-start; font-weight: 400; margin: 4px 0; } .paidpick label.check input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.fxinv[hidden] { display: none !important; } .fxinv input { max-width: 180px; } .fxhint { color: #555; }
.editbar{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 12px}
.editbar .small.muted{flex:1 1 260px}
.editbar>div{flex-basis:100%}
.editnote{border-left:4px solid var(--warn)}
.savebar .editreason{flex:1 1 100%;margin:0;font-size:.85em}
.savebar .editreason input{margin-top:2px}
@media (max-width:640px){#docform p.actions.savebar,#docform .actions.sticky.savebar{padding-left:12px;padding-right:12px;margin-left:-12px;margin-right:-12px}.savebar .editreason{font-size:.8em}.savebar a:not(.btn){flex:0 0 auto}}
.flash .small-btn{padding:3px 10px;font-size:.85em;margin-left:8px;vertical-align:middle}
/* date · currency · rate · 1 SGD = ? in one compact row */
.fxrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-start;grid-column:span 2}
.fxrow>label{flex:0 0 auto;margin:0}
.fxrow input[type=date]{width:auto;min-width:160px}
.fxrow input[name=currency]{width:64px;text-align:center}
.fxrow input[name=fx_rate],.fxrow input[data-inv]{width:100px}
.fxrow .fxhint{display:block;font-size:.75em;white-space:nowrap}
.fxrow .fxinv{display:block}
@media (max-width:640px){.fxrow{grid-column:auto}.fxrow input[type=date]{width:auto;min-width:160px}}
.fxrow input[name=party_uen]{width:150px}
.fxrow input[name=party_ref]{width:170px}
label small[data-permit]{display:block;margin-top:2px}
@media (min-width:641px){.fxrow.fxpad{padding-top:19px}}
.reptabs{margin-bottom:10px}
.accpick{position:relative}
.accpick>summary{list-style:none;cursor:pointer}
.accpick>summary::-webkit-details-marker{display:none}
.accpick .accgrid{position:absolute;z-index:30;background:var(--bg,#fff);border:1px solid #ddd;border-radius:8px;padding:8px 10px;max-height:320px;overflow:auto;width:340px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.accpick .accgrid .check{display:flex;gap:6px;margin:2px 0}
@media print{.reptabs{display:none}}
.bst{font-weight:600;white-space:nowrap}.bst-draft{color:var(--ok)}.bst-check,.bst-duplicate{color:var(--warn)}.bst-failed{color:var(--err)}
.dictate>summary{cursor:pointer;font-weight:600}
.dictate textarea{width:100%}
.dictate [data-mic].rec{background:#c62828;color:#fff;border-color:#c62828}
.dictprev table{margin:4px 0}
.dictprev th{white-space:nowrap}
.lnmeta{display:flex;gap:4px;margin-bottom:3px;align-items:center}
.lnmeta .lnno{width:52px;padding:4px 6px}
.lnmeta .lnkind{width:auto;padding:4px 6px;font-size:.85em}
.lnmeta .lnptext{width:110px;padding:4px 6px;font-size:.85em}
.lnnote{margin-top:3px;font-size:.82em;padding:3px 6px;border-style:dashed;color:#8a5a00;background:#fffaf0}
.lnnote:not(.has):not(:focus){opacity:.55}
tr.ln-optional td{background:#f7f7fb} tr.ln-tba td{background:#fbf8f2}
/* site walk */
.asum{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 10px}
.asum .dc{font-size:.85em;padding:3px 9px;border-radius:12px;background:#eef0f2}
.dc-confirm{background:#e3f3ea!important;color:#1e7a46}.dc-change{background:#fff2d6!important;color:#9a6400}.dc-drop{color:#5d6672}.dc-hold{background:#ffe8dc!important;color:#b34500}
.aitem{border-left:5px solid #c9ced4;padding-top:10px}
.aitem.dec-confirm{border-left-color:#1e7a46}.aitem.dec-change{border-left-color:#d99100}.aitem.dec-drop{border-left-color:#9aa4af;opacity:.75}.aitem.dec-hold{border-left-color:#FC5408}
.aihead{display:flex;gap:6px;align-items:center}
.aihead .aino{width:62px;font-weight:700;text-align:center}
.aihead .aititle{flex:1;font-weight:600}
.aihead .aisaved{font-size:.78em;color:#1e7a46;white-space:nowrap;min-width:70px;text-align:right}
.aiquote{margin:6px 0;padding:6px 8px;background:#f7f8fa;border-radius:6px}
.decbtns{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.decbtns button{flex:1 1 70px;padding:9px 6px;border:1px solid #d5dae0;border-radius:8px;background:#fff;font-weight:600;cursor:pointer;min-height:42px}
.decbtns button[data-dec="confirm"].on{background:#1e7a46;color:#fff;border-color:#1e7a46}
.decbtns button[data-dec="change"].on{background:#d99100;color:#fff;border-color:#d99100}
.decbtns button[data-dec="drop"].on{background:#5d6672;color:#fff;border-color:#5d6672}
.decbtns button[data-dec="hold"].on{background:#FC5408;color:#fff;border-color:#FC5408}
.aigrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.aigrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.airem{display:block;margin-top:8px}
.airem .mic{font-size:1.1em} .mic.rec{color:#c62828;font-weight:700}
.aiphotos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.aiphotos .phthumb{position:relative;display:inline-block}
.aiphotos .phthumb img{width:84px;height:84px;object-fit:cover;border-radius:6px;border:1px solid #d5dae0}
.aiphotos .phk{position:absolute;left:3px;bottom:3px;font-size:10px;background:rgba(0,0,0,.55);color:#fff;padding:0 4px;border-radius:3px}
.sketchpad{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;display:flex;align-items:center;justify-content:center}
.sketchpad[hidden]{display:none}
.sketchpad .skbox{background:#fff;border-radius:10px;padding:10px;width:min(96vw,920px)}
.sketchpad canvas{width:100%;height:auto;border:1px solid #d5dae0;border-radius:6px;touch-action:none;background:#fff}
@media (max-width:640px){.aigrid{grid-template-columns:repeat(2,minmax(0,1fr))}.aigrid2{grid-template-columns:1fr}}
.decbtns button{flex:1 1 0;min-width:0;padding:9px 2px;font-size:.92em;white-space:nowrap}
.aihead .aititle{min-width:0}
.aiphotos .phadd,.aiphotos [data-sketch]{white-space:nowrap;width:auto;flex:0 0 auto}
@media (max-width:640px){.aihead .aino{width:52px}.aihead .aisaved{min-width:0;font-size:.7em}}
.tile-title{overflow-wrap:normal;word-break:normal;hyphens:auto}

.aisaved2{color:#1e7a46;font-weight:600;white-space:nowrap}
.aisaved.warn,.aisaved2.warn{color:#b42318}
.aest{font-size:.9em;margin-left:auto}
.aest .warnt,.aigrid .warnt{color:#b42318}
.aigrid .lnt{display:block;margin-top:3px;color:#444}
.phwrap{position:relative;display:inline-block;vertical-align:top}
.phx{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:1px solid #c9ced4;background:#fff;color:#555;font-size:13px;line-height:16px;padding:0;cursor:pointer}
.phx:hover{background:#b42318;color:#fff;border-color:#b42318}
.phfile{display:inline-flex;flex-direction:column;justify-content:center;width:120px;height:84px;padding:6px 8px;border:1px solid #d5dae0;border-radius:6px;background:#f7f8fa;text-decoration:none;color:#1f2328;box-sizing:border-box;overflow:hidden}
.phfile .fi{font-size:22px;line-height:1}
.phfile .fn{font-size:11px;line-height:1.25;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phfile .fs{font-size:10px;color:#6a737d}
.aiphotos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.perrow{display:flex;gap:6px}.perrow input{flex:1 1 auto;min-width:0}.perrow select{flex:0 0 auto;width:auto;max-width:48%}
.aigrid .szt{display:block;margin-top:3px;color:#444}
.aigrid .itot{background:#eef7f1;border-color:#9fd0b2;font-weight:700;color:#14532d;text-align:right;cursor:default}
.aigrid .itot.empty{background:#f6f7f8;border-color:#d5dae0;color:#888;font-weight:400}
.aigrid .itotn{display:block;margin-top:3px;color:#444}
.tottbl{width:100%;max-width:560px;border-collapse:collapse}.tottbl td{padding:6px 4px;border-bottom:1px solid #eceef1}.tottbl td.num{text-align:right;white-space:nowrap}
.tottbl tr.grand td{font-weight:700;font-size:1.1em;border-top:2px solid #1f2328}
.warnt{color:#b42318}
.nextstep{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #FC5408;border-radius:8px;padding:8px 12px;margin:10px 0}
.sendgrp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 8px;border:1px dashed #fdba74;border-radius:10px;background:#fff7ed}
.aidesc{display:block;margin:6px 0}.aidesc textarea{background:#fbfcfd}
/* line descriptions: big, grow with the text (no little box with its own scroll bar) */
textarea.grow{overflow:hidden;resize:vertical;line-height:1.45}
.grid.lines textarea.lndesc{min-height:5.2em;font-size:15px;padding:8px 10px;width:100%;box-sizing:border-box}
.grid.lines textarea.lnnote{min-height:2.2em;width:100%;box-sizing:border-box}
.grid.lines[data-lines]{table-layout:fixed}
@media (max-width:900px){.grid.lines[data-lines]{table-layout:auto}}
.grid.lines[data-lines] th{white-space:normal;vertical-align:bottom}
.modal-bg{position:fixed;inset:0;background:rgba(15,20,25,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:12px;max-width:560px;width:100%;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.modal h2{margin:0 0 8px;font-size:1.15em}.modal label{display:block}
tr.logwarn td{background:#fff5f5}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.payroll{min-width:1350px;table-layout:auto}
table.payroll th,table.payroll td{white-space:nowrap}
table.payroll td:first-child,table.payroll th:first-child{min-width:210px;white-space:normal;word-break:normal;overflow-wrap:normal;position:sticky;left:0;background:#fff;z-index:1}
table.payroll tr.tot td:first-child{background:inherit}
table.payroll th:first-child{background:#fafaf8}
@media (max-width:900px){table.payroll tr.tot{display:none}table.payroll{min-width:0}table.payroll td,table.payroll td:first-child{white-space:normal;position:static;min-width:0}table.payroll td input{width:100%!important}}

/* ---- 04-19: simple menu (5 groups), find box, reports in plain questions, home actions ---- */
.top { flex-wrap: nowrap; }
.top nav { flex-wrap: nowrap; gap: 2px; flex: 0 1 auto; }
.top nav .navhome, .top details.dd > summary { padding: 8px 12px; border-radius: 8px; font-size: 15px; color: #e6e8ea; cursor: pointer; white-space: nowrap; list-style: none; user-select: none; }
.top details.dd > summary::-webkit-details-marker { display: none; }
.top details.dd > summary::after { content: ' ▾'; font-size: 11px; color: #9aa0a6; }
.top details.dd[open] > summary, .top details.dd > summary:hover, .top .navhome:hover { background: #343a41; color: #fff; }
.top details.dd.on > summary, .top .navhome.on { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.top details.dd { position: relative; }
.top .ddp { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; z-index: 60; display: flex; flex-direction: column; }
.top .ddp a { color: var(--ink) !important; padding: 9px 12px !important; border-radius: 8px; font-size: 15px !important; white-space: nowrap; background: none !important; }
.top .ddp a:hover { background: #f3f3f0 !important; }
.top .ddp a.on { background: #fff1ea !important; color: #b53c00 !important; font-weight: 600; }
.top .ddp a.ddadd { color: #b53c00 !important; font-weight: 600; }
.top .ddp .ddh { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.dotin { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.topfind { position: relative; flex: 1 1 260px; max-width: 420px; margin: 0; }
.topfind input { width: 100%; background: #2c3238; border: 1px solid #3a4048; color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; min-height: 0; }
.topfind input::placeholder { color: #aab0b6; }
.topfind input:focus { background: #fff; color: var(--ink); outline: 2px solid var(--accent); }
.findpop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2); padding: 6px; z-index: 70; max-height: 70vh; overflow-y: auto; }
.findpop .fp-g { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 2px; }
.findpop a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.findpop a span { display: block; font-size: 12.5px; color: var(--muted); }
.findpop a:hover, .findpop a.sel { background: #fff1ea; }
.findpop .fp-all { color: #b53c00; font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; }
.findpop .fp-none { padding: 10px; color: var(--muted); font-size: 14px; }
.findlist { list-style: none; padding: 0; margin: 0 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.findlist li + li { border-top: 1px solid var(--line); }
.findlist a { display: block; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.findlist a:hover { background: #fff7f2; }
h2.findgrp { font-size: 15px; margin: 18px 0 6px; }

/* periods */
.periodbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.periodbar .pb-label { font-weight: 600; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pb-custom summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.pb-custom[open] { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.pb-range { margin-left: auto; color: var(--muted); font-size: 14px; }
.crumbs { margin: -4px 0 10px; font-size: 14px; }

/* report question cards */
.qcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.qcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; border-top: 4px solid #cfd3d7; }
.qcard h2 { font-size: 16px; margin: 0 0 6px; }
.qcard .qa { font-size: 24px; font-weight: 700; margin: 2px 0 4px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.qcard .qn { color: var(--muted); font-size: 14px; margin: 0 0 12px; flex: 1; }
.qcard .qbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.qcard.good { border-top-color: #1e7a3c; } .qcard.good .qa { color: #1e7a3c; }
.qcard.bad { border-top-color: #b3261e; } .qcard.bad .qa { color: #b3261e; }
.qcard.warn { border-top-color: #e3a008; }
.qcard.pack { border-top-color: var(--accent); background: #fffaf6; }
.acctools .linklist { list-style: none; padding: 0; margin: 10px 0 0; columns: 2 260px; }
.acctools .linklist li { padding: 5px 0; break-inside: avoid; }
.sharebar { display: inline-block; height: 8px; background: var(--accent); border-radius: 4px; vertical-align: middle; opacity: .7; }

/* home: what do you want to do? */
.doit { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.doit a { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.25; }
.doit a:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(252,84,8,.12); }
.doit a .ic { flex: 0 0 34px; height: 34px; border-radius: 10px; background: #fff1ea; color: #b53c00; display: flex; align-items: center; justify-content: center; }
.doit a .ic svg { width: 20px; height: 20px; }
.attn { list-style: none; padding: 0; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.attn li { display: flex; gap: 10px; align-items: center; padding: 11px 14px; }
.attn li + li { border-top: 1px solid var(--line); }
.attn .lv { flex: 0 0 10px; height: 10px; border-radius: 50%; background: #e3a008; }
.attn .lv.alert { background: #b3261e; } .attn .lv.todo { background: #2a78d6; }
.attn a.go { margin-left: auto; white-space: nowrap; font-weight: 600; }
.home h2.sec { font-size: 17px; margin: 18px 0 8px; }
details.allareas > summary { cursor: pointer; font-weight: 600; font-size: 17px; margin: 18px 0 8px; }

@media (max-width: 900px) {
  .top { flex-wrap: wrap; }
  .topfind { order: 2; flex: 1 1 0; max-width: none; }
  .menu-btn { order: 3; margin-left: 0; }
  .top nav { order: 4; flex-wrap: nowrap; flex: 1 1 100%; }
  .top nav .navhome, .top details.dd > summary { padding: 13px 10px; font-size: 17px; }
  .top details.dd { border-top: 1px solid #3a4048; }
  .top .ddp { position: static; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 8px 10px; }
  .top .ddp a { color: #e6e8ea !important; padding: 11px 10px !important; font-size: 16px !important; white-space: normal; }
  .top .ddp a:hover, .top .ddp a.on { background: #343a41 !important; color: #fff !important; }
  .top .ddp a.ddadd { color: #ffb38a !important; }
  .top .ddp .ddh { color: #8b9097; border-top-color: #3a4048; }
  .findpop { position: fixed; top: 60px; left: 8px; right: 8px; min-width: 0; }
  .pb-range { margin-left: 0; width: 100%; }
  .qcard .qa { font-size: 22px; }
}
@media print { .topfind, .crumbs, .periodbar, .qbtns { display: none !important; } }
@media (min-width: 901px) { .top nav { order: 2; } .topfind { order: 3; margin-left: auto; } .top .who.only-desktop { order: 4; } }

/* ---- 04-20: bank statements & reconciliation ---- */
.upl { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 10px 16px; align-items: end; }
.upl .actions { grid-column: 1 / -1; margin: 0; }
.recbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recbar div { display: flex; flex-direction: column; gap: 2px; }
.recbar b { font-size: 20px; }
.recbar .good b { color: #1e7a3c; } .recbar .bad b { color: #b3261e; }
.bklines td.in { color: #1e7a3c; font-weight: 600; } .bklines td.out { color: #b3261e; font-weight: 600; }
.bklines tr.st-done td, .bklines tr.st-ignored td { opacity: .75; }
.conf { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: #eef0f2; color: #4a5056; }
.conf.c-high { background: #e3f4e8; color: #1e7a3c; } .conf.c-med { background: #e8f0fb; color: #1f5fae; } .conf.c-low { background: #fff4e0; color: #8a5800; } .conf.c-none { background: #fde8e6; color: #b3261e; } .conf.c-done { background: #e3f4e8; color: #1e7a3c; }
tr.bked > td { background: #fffaf6 !important; border-left: 3px solid var(--accent); padding: 14px 16px !important; }
.bkform fieldset.bkacts { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.bkform fieldset.bkacts legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.bkact { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; }
.bkact:has(input:checked) { border-color: var(--accent); background: #fff1ea; font-weight: 600; }
.bksec { margin: 8px 0; }
.bkdoc { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; font-weight: 400; }
.bkdocs { margin: 6px 0 8px; }
.bkfull { margin: 0 0 10px; }
.bkremember { border-top: 1px dashed var(--line); padding-top: 8px; }
@media (max-width: 900px) {
  .upl, .recbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bkact { font-size: 15px; }
}
.bkact input[type=radio], .bkdoc input[type=radio], .bkdoc input[type=checkbox], .bkremember input[type=checkbox] { width: auto !important; min-height: 0 !important; margin: 0; flex: 0 0 auto; }
.bkact { line-height: 1.2; }
.bklines td:first-child { white-space: nowrap; }
@media (max-width: 900px) {
  tr.bked > td { display: block !important; overflow-wrap: anywhere; min-width: 0; }
  tr.bked .bkform, tr.bked .bkform * { max-width: 100%; box-sizing: border-box; }
  tr.bked .bkform label { display: block; }
  tr.bked .bkform label.bkact, tr.bked .bkform label.bkdoc { display: flex; }
  tr.bked .bkform input:not([type=radio]):not([type=checkbox]), tr.bked .bkform select { width: 100% !important; }
  .bkact { white-space: normal; }
}
@media (max-width: 900px) {
  tr.bked .bkform label > input:not([type=radio]):not([type=checkbox]), tr.bked .bkform label > select { display: block; margin-top: 4px; }
  tr.bked .bkremember span, tr.bked .bksum { display: block; }
  tr.bked .bkdoc .docamt { width: 110px !important; }
}
/* invoice: payments already received */
.ppcard h3{margin:0 0 .25rem}
.ppcard table.pp{width:100%}
.ppcard table.pp input,.ppcard table.pp select{width:100%;min-width:0}
.ppcard table.pp td.num input{text-align:right}
.ppcard [data-ppbal].neg{color:#b42318}
@media (max-width:700px){
  .ppcard table.pp thead{display:none}
  .ppcard table.pp tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.5rem 0;border-bottom:1px solid #e5e7eb}
  .ppcard table.pp tbody td{display:block;border:0;padding:0}
  .ppcard table.pp tbody td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;color:#667085}
  .ppcard table.pp tfoot td{display:table-cell}
}
/* document headers (invoice, quotation, supplier bill, PO, notes): compact fields sized to what they hold */
.form3.hdr{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start}
.hdr>label,.hdr>.fxrow,.hdr>div{flex:0 0 auto;width:min-content;max-width:100%;margin:0;grid-column:auto}
.hdr>label small{font-size:12px;line-height:1.3}
.hdr input{width:190px;font-size:14px;min-height:36px;padding:6px 9px}
.hdr input[type=checkbox],.hdr input[type=radio]{width:20px;min-height:0;padding:0}
.hdr select,.hdr textarea{font-size:14px;min-height:36px;padding:6px 9px}
.hdr select{width:auto;min-width:190px;max-width:340px}
.hdr select[name=party_id]{width:320px}
.hdr input[name=party_name]{width:300px}
.hdr input[name=manual_doc_no]{width:200px}
.hdr input[name=party_uen],.hdr input[name=supplier_gst]{width:170px}
.hdr input[name=party_ref]{width:230px}
.hdr input[name=customer_po_no],.hdr input[name=import_permit_no]{width:170px}
.hdr input[type=date]{width:155px;min-width:0}
.hdr input[type=file]{width:250px}
.hdr>.fxrow{width:auto;display:flex;flex-wrap:nowrap;gap:6px 12px}
.hdr .fxrow>label{width:min-content}
.hdr label>input,.hdr label>select,.hdr label>textarea{display:block}
.hdr .fxrow input[name=currency]{width:80px}
.hdr .fxrow input[name=fx_rate]{width:100px}
.hdr textarea{width:420px}
.hdr textarea[name=party_address]{width:420px;min-height:76px}
@media (max-width:640px){
  .form3.hdr{gap:10px}
  .hdr>label,.hdr>div{width:100%}
  .hdr input[name],.hdr select,.hdr select[name=party_id],.hdr textarea,.hdr textarea[name=party_address]{width:100%;max-width:100%}
  .hdr>.fxrow{width:100%;flex-wrap:wrap}
  .hdr .fxrow input[type=date]{width:155px}
  .hdr .fxrow input[name=currency]{width:80px}.hdr .fxrow input[name=fx_rate]{width:100px}
}

/* generic save bar on every data-entry form */
.savebar .unsaved{color:#b54708;font-size:.85em;font-weight:600;margin-left:8px;white-space:nowrap}
.savebar.isdirty{border-top-color:#f5b971}
.savebar.autobar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* report filters */
.filterbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.filterbar>label{flex:0 0 auto;margin:0}
.filterbar input,.filterbar select{width:auto;min-width:140px;font-size:14px;min-height:36px;padding:6px 9px}
.filterbar .fb-q input{min-width:260px}
.filterbar .fb-btns{display:flex;gap:10px;align-items:center;padding-bottom:2px}
@media (max-width:640px){.filterbar>label{flex:1 1 100%}.filterbar input,.filterbar select,.filterbar .fb-q input{width:100%;min-width:0}}
.filterbar label>input,.filterbar label>select{display:block;margin-top:3px}
.hdr label.check{width:auto;align-self:center;margin-top:18px}
.hdr textarea[name=party_agent],.hdr textarea[name=ship_to]{width:300px}
.ctable input{min-width:110px}
/* attached files */
.attlist td{vertical-align:middle}
.attthumb{width:64px}
.attthumb img{width:56px;height:42px;object-fit:cover;border-radius:4px;border:1px solid #ddd;display:block}
.attext{display:inline-block;width:56px;padding:12px 0;text-align:center;background:#f0f0ee;border-radius:4px;font-size:11px;font-weight:700;color:#555}
.attform{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:10px}
.attform label{margin:0}
.attform input[type=file]{min-width:260px}
.attdrop.drag input[type=file]{outline:2px dashed var(--accent,#fc5408)}
.hdr input[name=party_known_as]{width:230px}
/* delivery order: packing-list columns only when "Packing list" is ticked */
#doform:not(.packing) .pk{display:none}
#doform .pk input{min-width:64px;max-width:90px}

/* printing: no browser header / footer (date, time, title, web address, page count) */
@page { @top-left { content: ""; } @bottom-left { content: ""; } }