/* Altekore Flow app: what the sample doesn't have (sign-in, upload, editing a draft). Tokens come from flow.css. */
.loading-screen { min-height: 100vh; display: grid; place-items: center; color: var(--ink-3); }
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.signin-card { width: min(420px, 100%); padding: 28px; display: grid; gap: 12px; }
.signin-card h1 { font: 600 26px/1.2 var(--f-display); margin: 4px 0 0; }
.signin-card p { margin: 0; color: var(--ink-2); }
.signin-brand { display: flex; align-items: center; gap: 10px; background: var(--rail); border-radius: var(--r); padding: 12px 14px; color: var(--rail-ink-2); font-weight: 600; }
.signin-brand span { padding-left: 10px; border-left: 1px solid var(--rail-line); display: inline-flex; align-items: center; gap: 7px; }
.signin-brand .pmark { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.field input, .field select, .field textarea, .in { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 8px 10px; font-size: 14px; color: var(--ink); min-width: 0; width: 100%; }
.field input:focus, .in:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.msg { font-size: 13.5px; padding: 9px 12px; border-radius: var(--r-s); }
.msg.err { background: var(--brick-soft); color: var(--brick); } .msg.ok { background: var(--green-soft); color: var(--green); } .msg.info { background: var(--brand-soft); color: var(--brand); }
.rail .who { display: grid; gap: 2px; }
.rail .who .signout { justify-self: start; color: var(--rail-ink-2); padding-left: 0; margin-top: 6px; }
nav.side a.soon { opacity: .7; }

/* upload */
.drop { border: 1.5px dashed var(--line); border-radius: var(--r-l); padding: 18px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; background: var(--surface); margin-bottom: 16px; }
.drop.over { border-color: var(--brand); background: var(--brand-soft); }
.drop .t { font-weight: 600; } .drop .s { color: var(--ink-3); font-size: 13px; }
.drop .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.uploads { display: grid; gap: 6px; margin: -6px 0 16px; }
.uploads .u { display: flex; gap: 10px; align-items: center; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 12px; }
.uploads .u .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }

/* the document beside the draft */
.docview { width: 100%; height: min(78vh, 900px); border: 1px solid var(--doc-line); border-radius: 6px; background: var(--doc); display: block; }
img.docview { height: auto; max-height: 78vh; object-fit: contain; }
.docmeta { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }

/* editing a draft */
.draft .fields .field { font-size: 12px; }
table.lines input.in { padding: 5px 7px; font-size: 13px; }
table.lines input.amt { text-align: right; font-variant-numeric: tabular-nums; width: 100%; min-width: 90px; }
table.lines td.x { width: 32px; }
table.lines .del { border: 0; background: none; color: var(--ink-3); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: var(--r-s); }
table.lines .del:hover { color: var(--brick); background: var(--brick-soft); }
.tablewrap.lines-wrap { overflow-x: auto; margin-bottom: 6px; }
.addline { margin-bottom: 14px; }
.diff { font-size: 12.5px; color: var(--ink-3); }
.checks .block { color: var(--ink); }
.draft .bar .msg { flex-basis: 100%; }
.rejected-note { border: 1px solid var(--brick); background: var(--brick-soft); color: var(--brick); border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.empty-state h2 { font: 600 20px/1.3 var(--f-display); color: var(--ink); margin: 0 0 6px; }
.toast { pointer-events: none; }
@media (max-width: 900px) { .drop .acts { margin-left: 0; } .docview { height: 60vh; } }
/* beside the queue there's room for the bill or the draft, not both side by side, until the screen is very wide */
@media (max-width: 1700px) { .inbox .detail { grid-template-columns: minmax(0, 1fr); } .inbox .docview { height: min(56vh, 640px); } }
.inbox { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
@media (max-width: 900px) { .inbox { grid-template-columns: 1fr; } #detail:has(.empty-state) { display: none; } }
table.lines td:first-child { min-width: 160px; }
table.lines td:nth-child(2) { min-width: 200px; }
.docmeta a { color: var(--brand); }
nav.side a .n:empty { display: none; }
/* bank */
.bank-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 260px; }
.bank-act .in { flex: 1 1 160px; padding: 5px 8px; font-size: 13px; }
.bank-act .rem { font-size: 12px; color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
header.page .actions .field { min-width: 240px; }
/* bank reconciliation */
.recon { padding: 16px; display: grid; gap: 14px; }
.recon-ask { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.recon-ask .field { min-width: 200px; } .recon-ask .sub { flex: 1 1 280px; color: var(--ink-3); font-size: 13px; align-self: center; }
.recon-list { display: flex; gap: 8px; flex-wrap: wrap; }
.recon-pick { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 6px 10px; font-size: 13px; color: var(--ink); }
.recon-pick.on { border-color: var(--brand); background: var(--brand-soft); }
.recon-pick .sub { color: var(--ink-3); }
.brs { padding: 18px; }
.brs-head { display: flex; gap: 12px; justify-content: space-between; align-items: start; margin-bottom: 12px; }
.brs-head h2 { font: 600 18px/1.3 var(--f-display); margin: 0; } .brs-head p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; } .brs-head .sub { color: var(--ink-3); font-size: 12.5px; }
.brs-t tr.t td { font-weight: 600; background: var(--surface-2); }
.brs-t tr.h td { font-weight: 600; padding-top: 14px; }
.brs-t tr.d td { color: var(--ink-2); font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.brs-t tr.d td:first-child { padding-left: 24px; white-space: nowrap; }
.brs-t .sub { display: block; color: var(--ink-3); font-size: 12px; }
.brs-t tr.okrow td { color: var(--green); } .brs-t tr.badrow td { color: var(--brick); }
.brs-note { color: var(--ink-3); font-size: 12.5px; margin: 10px 0 0; }
@media print {
  .rail, header.page, .drop, .uploads, #bstats, #btabs, .noprint, .toast { display: none !important; }
  body, .shell, main { display: block !important; background: #fff !important; padding: 0 !important; }
  #btable, .brs { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .brs-t tr.t td { background: #f3f3f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.recon > * { min-width: 0; }
.recon-pick { max-width: 100%; flex-wrap: wrap; }
@media (max-width: 600px) {
  .recon { padding: 12px; } .brs { padding: 12px; } .recon-ask .sub { flex-basis: 100%; }
  .brs-head { flex-direction: column; }
  .brs-t, .brs-t tbody, .brs-t tr { display: block; width: 100%; }
  .brs-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; border-bottom: 1px solid var(--line-2); }
  .brs-t td { border: 0 !important; padding: 8px 10px; min-width: 0; overflow-wrap: anywhere; }
  .brs-t tr.d { grid-template-columns: minmax(0, 1fr) auto; }
  .brs-t tr.d td { padding: 3px 10px 3px 18px; }
  .brs-t tr.d td:first-child { padding-left: 18px; grid-column: 1 / -1; padding-top: 8px; color: var(--ink-3); font-size: 12px; }
  .brs-t tr.d td:not(.r):not(:first-child) { grid-column: 1; }
  .brs-t tr.d td.r { grid-column: 2; grid-row: 2; align-self: start; }
}
/* close */
.close-cols { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 1000px) { .close-cols { grid-template-columns: minmax(0, 1fr); } }
.cl-side { display: grid; gap: 16px; }
.cl-side .panel p { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; } .cl-side .sub { color: var(--ink-3); font-size: 13px; }
.close-list .cl-auto { width: 18px; height: 18px; border-radius: 4px; border: 1.5px dashed var(--line); display: grid; place-items: center; font-size: 12px; margin-top: 2px; color: #fff; }
.close-list .cl-auto.on { background: var(--green); border: 0; }
.close-list .d a { color: var(--brand); }
.close-list .d.note { font-style: italic; margin-top: 4px; }
.close-list .o .btn { margin-top: 6px; }
.cl-explain { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cl-explain .in { flex: 1 1 220px; padding: 6px 9px; font-size: 13px; }
.cl-hist { list-style: none; margin: 0; padding: 0; font-size: 13.5px; } .cl-hist li { padding: 6px 0; border-bottom: 1px dashed var(--line); } .cl-hist li:last-child { border-bottom: 0; }
.cl-hist .sub { display: block; }
.cl-edit { margin-top: 16px; } .cl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 32px; gap: 8px; margin-bottom: 8px; }
.cl-row .del { border: 0; background: none; color: var(--ink-3); font-size: 18px; } .cl-row .del:hover { color: var(--brick); }
.cl-edit-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
header.page h1 .chip { vertical-align: middle; margin-left: 6px; }
@media (max-width: 600px) { .cl-row { grid-template-columns: minmax(0, 1fr) 32px; } .cl-row [data-d] { grid-column: 1; } .close-list li { grid-template-columns: 26px 1fr; } .close-list .o { grid-column: 2; text-align: left; } }
.panel h2 .btn { font: 500 13px/1.2 var(--f-ui); }
/* trial balance review */
.tb { margin-top: 16px; }
.tb-list { display: grid; }
.tb-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 160px 90px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; font-size: 14px; }
.tb-row.head { font-size: 12px; color: var(--ink-3); font-weight: 600; padding-top: 0; }
.tb-row .n { text-align: right; font-variant-numeric: tabular-nums; } .tb-row .n .lbl { display: none; }
.tb-row .a { text-align: right; }
.tb-row .nm .sub { display: block; color: var(--ink-3); font-size: 12px; }
.tb-flag { display: block; margin-top: 4px; color: var(--amber); font-size: 13px; } .tb-flag::before { content: "! "; font-weight: 700; }
.tb-note { display: block; margin-top: 4px; font-style: italic; color: var(--ink-2); font-size: 13px; } .tb-note .sub { font-style: normal; display: inline; }
@media (max-width: 700px) {
  .tb-row { grid-template-columns: 1fr 1fr; } .tb-row.head { display: none; }
  .tb-row .nm, .tb-row .a { grid-column: 1 / -1; } .tb-row .a { text-align: left; }
  .tb-row .n { text-align: left; } .tb-row .n .lbl { display: block; font-size: 11.5px; color: var(--ink-3); }
}
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; font: 500 12.5px/1 var(--f-ui); }
.seg button { border: 0; background: var(--surface); color: var(--ink-2); padding: 6px 10px; }
.seg button[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); }
/* journals */
.jfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px; margin: 12px 0 14px; }
.jfields .jnarr { grid-column: 1 / -1; }
table.jlines td:first-child { min-width: 200px; } table.jlines td:nth-child(2) { min-width: 140px; }
table.jlines tfoot td { font-weight: 600; padding-top: 8px; }
.jdiff { font-size: 13px; min-height: 18px; margin-bottom: 8px; } .jdiff .ok { color: var(--green); } .jdiff .bad { color: var(--brick); font-weight: 600; }
.jrev { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 12px; } .jrev .in { width: auto; padding: 5px 8px; }
#jform .sub { color: var(--ink-3); font-size: 13px; margin: 0 0 4px; }
#jdetail .empty-state p { margin: 0; }
.inbox > * { min-width: 0; }
@media (max-width: 900px) { nav.side a { padding: 8px 9px; gap: 7px; font-size: 13.5px; } nav.side a svg { width: 16px; height: 16px; } }
@media (max-width: 600px) {
  table.jlines thead { display: none; }
  table.jlines, table.jlines tbody, table.jlines tfoot { display: block; }
  table.jlines tr { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
  table.jlines td { padding: 0 !important; border: 0 !important; min-width: 0 !important; }
  table.jlines td:nth-child(1) { grid-column: 1 / 3; } table.jlines td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
  table.jlines td:nth-child(3) { grid-row: 3; grid-column: 1; } table.jlines td:nth-child(4) { grid-row: 3; grid-column: 2; }
  table.jlines td.x { grid-row: 1; grid-column: 3; }
  table.jlines [data-k="dr"]::placeholder, table.jlines [data-k="cr"]::placeholder { color: var(--ink-3); }
  table.jlines tfoot tr { grid-template-columns: 1fr 1fr; } table.jlines tfoot td:first-child { grid-column: 1 / -1; }
  table.jlines tfoot td:nth-child(2) { grid-row: 2; grid-column: 1; } table.jlines tfoot td:nth-child(3) { grid-row: 2; grid-column: 2; }
}
/* sales */
.smap { margin-bottom: 16px; } .smap-t td { vertical-align: top; } .smap-t td:first-child { min-width: 180px; } .smap-t td:first-child .diff { display: block; }
.smap-t td:nth-child(2) { min-width: 220px; } .smap-t td:nth-child(2) .in + .in { margin-top: 6px; } .smap-t td:nth-child(3) { min-width: 200px; }
.smap .field { margin: 12px 0; }
.uploads .u .chip + .chip { margin-left: 4px; }
table.slines td .diff { display: block; }
/* card and UPI from the bank */
.bm { margin-bottom: 16px; } .bm .msg { margin-top: 10px; }
.bm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.bm-row > div { flex: 1 1 260px; min-width: 0; } .bm-row .sub { display: block; color: var(--ink-3); font-size: 12.5px; }
.bm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 12px; margin-top: 8px; } .bm-form .bar { grid-column: 1 / -1; }
/* bills by email */
.drop .mailin { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .drop .mailin b { color: var(--ink); font-weight: 600; word-break: break-all; }
.heldp { margin-bottom: 16px; } .heldp > p { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; }
.held-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-2); }
.held-row > div { flex: 1 1 260px; min-width: 0; } .held-row .sub { display: block; color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
/* invoices */
.ivs { margin-bottom: 16px; } .ivs h3 { font: 600 15px/1.3 var(--f-display); margin: 16px 0 6px; } .ivs > p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.ivs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; } .ivs-grid .wide { grid-column: 1 / -1; }
.ivs-num { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; } .ivs-num label { display: flex; gap: 8px; align-items: flex-start; } .ivs-num input { margin-top: 3px; }
table.ivlines td:first-child { min-width: 180px; } table.ivlines td:nth-child(2) { min-width: 150px; } table.ivlines select.in { padding: 5px 6px; font-size: 13px; min-width: 70px; }
.ivtot { display: flex; justify-content: flex-end; margin: 6px 0 12px; } .ivtot table { min-width: 280px; font-size: 13.5px; } .ivtot td { padding: 3px 0 3px 16px; } .ivtot .tot td { font-weight: 700; border-top: 1px solid var(--line); padding-top: 6px; }
.ivtaxled { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; align-items: end; margin-bottom: 12px; font-size: 13px; } .ivtaxled > b { grid-column: 1 / -1; }
.irn { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 4px; font-size: 13px; }
.irn > div:first-child { display: flex; gap: 8px; align-items: center; } .irn .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; } .irn .sub { color: var(--ink-3); }
.irn.waiting { border-color: var(--amber); background: var(--amber-soft); } .irn.cancelled { opacity: .8; } .irn .btn { justify-self: start; }
.irn-cancel summary { cursor: pointer; color: var(--brick); font-size: 12.5px; margin-top: 4px; }
.q-item .src.cn { background: var(--amber-soft); color: var(--amber); font-size: 10.5px; font-weight: 700; }
.credits { display: grid; gap: 4px; font-size: 13px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.credits a { color: var(--brand, inherit); }
.cmd { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; padding: 12px 14px; margin: 0 0 14px; }
.cmd label { font-weight: 600; font-size: 13.5px; } .cmd .cmd-hint { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.cmd-out { grid-column: 1 / -1; font-size: 13px; padding: 8px 10px; border-radius: var(--r); background: var(--brand-soft); color: var(--ink); }
.cmd-out.ok { background: var(--green-soft); } .cmd-out.err { background: var(--brick-soft); color: var(--brick); } .cmd-out a { font-weight: 600; margin-left: 6px; }
@media (max-width: 640px) { .cmd { grid-template-columns: 1fr; } }
.said { font-size: 13px; color: var(--ink-2); background: var(--surface-2, #f5f6f8); border-left: 3px solid #25d366; padding: 6px 10px; margin: -4px 0 12px; border-radius: 4px; }
.said-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 2px; }
.bills-row td { background: var(--surface-2, #f7f8fa); }
.billpick { display: grid; gap: 8px; font-size: 13px; padding: 4px 0; } .billpick table.bp { margin: 0; } .billpick .bp-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.billpick .bp-foot .btn { margin-left: auto; }
.mailbox { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: 0 0 12px; background: var(--surface-2, #f7f8fa); }
.mailbox .bar { margin: 0; } .sent-list { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; display: grid; gap: 2px; }
.also .also-list { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; padding-top: 4px; } .also .also-list label { display: inline-flex; gap: 6px; align-items: center; }
.ivlines .stk { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 1px 7px; margin-top: 4px; }
.ivlines select.gd { margin-top: 4px; font-size: 12.5px; padding: 4px 6px; }
.feed { margin-top: 18px; display: grid; gap: 10px; } .feed .feed-new { display: flex; gap: 8px; flex-wrap: wrap; } .feed .feed-new .in { max-width: 320px; }
.bookslink { margin: 24px 0 18px; display: grid; gap: 10px; } .bookslink .feed-new { display: flex; gap: 8px; flex-wrap: wrap; } .bookslink .feed-new .in { flex: 1 1 260px; max-width: 520px; min-width: 0; }
.feed .feed-how summary { cursor: pointer; font-size: 13px; } .feed pre { white-space: pre-wrap; word-break: break-all; font-size: 11.5px; background: var(--surface-2, #f5f6f8); padding: 10px; border-radius: 6px; }
.keyshow { border: 1px solid var(--amber); background: var(--amber-soft); border-radius: var(--r); padding: 10px 12px; font-size: 13px; } .keyshow .keyval { margin-top: 6px; font-size: 13px; word-break: break-all; user-select: all; }
.feed { min-width: 0; } .feed .tablewrap { overflow-x: auto; } .feed pre { max-width: 100%; overflow-x: auto; }