/* Parcel Construction - brand colours taken from the company letterhead */
:root {
  --navy: #033F63; --navy-2: #0B5480; --navy-soft: #E7EEF3;
  --clay: #CF7A6A; --clay-dark: #B05E4F; --clay-soft: #F7E7E3;
  --teal: #7AA0A1; --teal-soft: #E9F0F0;
  --bg: #F4F6F7; --card: #fff; --text: #1D2B36; --muted: #6B7C88; --line: #E2E8EC;
  --ok: #2E7D5B; --bad: #B4483A; --warn-bg: #FFF6E0; --warn: #7A5B00;
  --radius: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Cairo, Tahoma, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; }
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 21px; margin: 0; color: var(--navy); font-weight: 700; }
h2 { font-size: 16px; margin: 0; color: var(--navy); font-weight: 600; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { width: 100%; border: 1px solid #CBD5DC; border-radius: 6px; padding: 6px 10px; background: #fff; min-height: 36px; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(11, 84, 128, .25); border-color: var(--navy-2); }
input[disabled] { background: var(--bg); color: var(--muted); }
code { background: var(--navy-soft); padding: 1px 6px; border-radius: 4px; }

/* layout */
.app { display: flex; min-height: 100vh; }
.side { width: 240px; flex-shrink: 0; background: var(--navy); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.side .brand img { width: 150px; filter: brightness(0) invert(1); display: block; }
.side .brand small { display: block; color: #A9C3C4; margin-top: 6px; font-size: 11px; }
.side nav { padding: 10px 0; flex: 1; }
.side nav a { display: flex; gap: 12px; align-items: center; padding: 10px 20px; color: #D5E2EA; border-right: 3px solid transparent; }
.side nav a svg { width: 18px; height: 18px; fill: currentColor; opacity: .8; flex-shrink: 0; }
.side nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.side nav a.on { background: rgba(255,255,255,.10); color: #fff; border-right-color: var(--clay); }
.side .me { padding: 14px 20px; font-size: 12px; color: #A9C3C4; border-top: 1px solid rgba(255,255,255,.12); }
.side .me a { color: #fff; }
.main { flex: 1; min-width: 0; padding: 24px 28px 60px; }


.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.head .sub, .sub { color: var(--muted); margin: 2px 0 0; }
.code { font-size: 14px; color: var(--muted); font-weight: 400; margin-inline-start: 6px; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--navy); background: var(--navy); color: #fff;
  border-radius: 6px; padding: 6px 14px; cursor: pointer; min-height: 36px; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--navy-2); text-decoration: none; }
.btn.o { background: #fff; color: var(--navy); }
.btn.o:hover { background: var(--navy-soft); }
.btn.clay { background: var(--clay); border-color: var(--clay); }
.btn.clay:hover { background: var(--clay-dark); }
.btn.danger { background: #fff; color: var(--bad); border-color: #E3B9B2; }
.btn.danger:hover { background: #FBEDEA; }
.btn.sm { padding: 2px 10px; min-height: 28px; font-size: 13px; }
.btn.wide { width: 100%; }
.linkbtn { background: none; border: 0; color: var(--bad); cursor: pointer; padding: 0; font-size: 12px; }
form.inline { display: inline; }

/* cards + kpis */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 18px; min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: 10px; padding: 12px 16px; }
.kpi.navy { border-top-color: var(--navy); } .kpi.clay { border-top-color: var(--clay); }
.kpi label { color: var(--muted); font-size: 12px; display: block; }
.kpi b { display: block; font-size: 20px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 11px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.note-box { padding: 12px 16px; background: var(--warn-bg); border-color: #F0DFA8; }
.pad { padding: 14px 16px; margin: 0; }
.muted { color: var(--muted); } .small { font-size: 12px; } .nowrap { white-space: nowrap; }
.pos { color: var(--ok); } .neg { color: var(--bad); }
.tag { display: inline-block; background: var(--clay-soft); color: #8A3F31; border-radius: 20px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.note { color: #7A5B00; }
.dim { opacity: .55; }

/* flash */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; border: 1px solid; }
.flash.ok { background: #E8F4EE; border-color: #B9DCC9; color: #1F5E43; }
.flash.err { background: #FBEDEA; border-color: #E3B9B2; color: #8A3125; }
.flash.warn { background: var(--warn-bg); border-color: #F0DFA8; color: var(--warn); }

/* tables */
.scroll { overflow-x: auto; }
.scroll.short { max-height: 360px; overflow-y: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { background: var(--teal-soft); color: var(--navy); font-weight: 600; text-align: right; padding: 8px 12px; font-size: 13px; white-space: nowrap; position: sticky; top: 0; }
.tbl td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:hover td { background: #FAFCFD; }
.tbl tfoot td { background: var(--navy-soft); font-weight: 700; border-top: 2px solid var(--navy); white-space: nowrap; }
.tbl .n, .doc-tbl .n { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; }
.tbl .c { text-align: center; }
.tbl .clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl.compact td { padding: 4px 8px; }
.tbl.compact input { min-height: 30px; padding: 3px 8px; }
.tbl.entry td { padding: 4px; }
.tbl.entry input, .tbl.entry select { min-height: 32px; padding: 3px 6px; }
.tbl.entry .x { background: none; border: 0; color: var(--bad); font-size: 20px; cursor: pointer; line-height: 1; }
.new-row td { background: #FAFCFD; }
.sumline { padding: 8px 16px; background: var(--navy-soft); color: var(--navy); font-size: 13px; }
.bar { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bar input, .bar select { width: auto; min-width: 150px; flex: 0 1 220px; }
.bar input[type=date] { min-width: 0; flex: 0 0 auto; }
.inline-l { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
.pager { display: flex; gap: 4px; padding: 12px 16px; flex-wrap: wrap; }
.pager a, .pager b, .pager span { min-width: 32px; text-align: center; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); }
.pager b { background: var(--navy); color: #fff; border-color: var(--navy); }

/* forms */
.form { padding-bottom: 4px; }
.form .card-h { margin-bottom: 4px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; padding: 16px; }
.fields.one { grid-template-columns: 1fr; }
.fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.fields label.full { grid-column: 1 / -1; }
.fields label.wide { grid-column: span 2; }
.fields label small { font-size: 11px; }
.fields output { font-size: 18px; font-weight: 700; color: var(--navy); padding-top: 4px; }
label.check { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--text) !important; }
label.check input { width: auto; min-height: 0; }
.actions { display: flex; gap: 8px; align-items: center; padding: 0 16px 16px; flex-wrap: wrap; }
.issue-box { border-color: var(--clay); background: #FFFBFA; }
.share { padding: 12px 16px; }
.share label { font-size: 13px; color: var(--muted); }
.share-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.share-row input { flex: 1; min-width: 220px; }

/* dashboard bars */
.bars { display: flex; align-items: flex-end; gap: 10px; padding: 20px 16px 12px; min-height: 220px; overflow-x: auto; }
.bar-col { flex: 1; min-width: 38px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar-col .b { width: 100%; max-width: 46px; background: var(--teal); border-radius: 4px 4px 0 0; }
.bar-col:hover .b { background: var(--navy); }
.bar-col .v { font-size: 11px; color: var(--muted); }
.bar-col .l { font-size: 11px; color: var(--muted); direction: ltr; }

/* login / installer */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--navy); }
.login-box { background: #fff; border-radius: 14px; padding: 32px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.login-box.wide-box { max-width: 520px; }
.login-box img { width: 180px; margin: 0 auto 4px; display: block; }
.login-box h1 { text-align: center; font-size: 17px; margin-bottom: 8px; }
.login-box h2 { margin-top: 10px; }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.login-box form { display: flex; flex-direction: column; }

/* ---------- extract document ---------- */
.doc { background: #fff; max-width: 1000px; margin: 0 auto 30px; border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(3,63,99,.06); padding-bottom: 0; position: relative; }
.doc.draft::before { content: 'مسودة'; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 110px; color: rgba(207,122,106,.10); font-weight: 700; pointer-events: none; }
.doc-head { display: flex; align-items: center; gap: 18px; padding: 26px 32px 0; }
.doc-head img { width: 170px; }
.doc-bar { flex: 1; height: 12px; background: var(--clay); border-radius: 0 8px 8px 0; }
.doc-title { text-align: center; font-size: 22px; margin: 20px 0 10px; }
.draft-tag { font-size: 13px; background: var(--clay-soft); color: #8A3F31; border-radius: 20px; padding: 2px 10px; vertical-align: middle; }
.doc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; padding: 8px 32px; font-size: 13px; }
.doc-meta div { display: flex; gap: 10px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.doc-meta span { color: var(--muted); min-width: 92px; }
.doc-sum { display: grid; grid-template-columns: repeat(5, 1fr); margin: 14px 32px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.doc-sum div { padding: 10px 8px; text-align: center; border-left: 1px solid var(--line); }
.doc-sum div:last-child { border-left: 0; }
.doc-sum label { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; min-height: 30px; }
.doc-sum b { font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; }
.doc-sum .due { background: var(--clay-soft); }
.doc-sum .due b { color: var(--clay-dark); }
.doc-note { margin: 4px 32px 10px; font-size: 13px; color: var(--muted); }
.doc-h2 { margin: 22px 32px 8px; font-size: 15px; }
.doc-tbl { width: calc(100% - 64px); margin: 0 32px; border-collapse: collapse; font-size: 12px; }
.doc-tbl th { background: var(--navy); color: #fff; padding: 7px 8px; text-align: right; font-weight: 600; }
.doc-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-tbl .c { text-align: center; color: var(--muted); }
.doc-tbl .grp td { background: var(--teal-soft); color: var(--navy); font-weight: 700; padding-top: 7px; }
.doc-tbl .gtot td { background: #F6F8F9; font-weight: 700; border-bottom: 2px solid #CBD5DC; }
.doc-tbl tfoot td { background: var(--navy); color: #fff; font-weight: 700; }
.doc-tbl tbody { page-break-inside: auto; }
.doc-tbl tr { page-break-inside: avoid; }
.doc-bank { margin: 20px 32px 0; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: inline-block; }
.doc-foot { background: var(--teal); color: #fff; font-size: 11px; display: flex; justify-content: space-between; gap: 16px; padding: 10px 32px; margin-top: 24px; line-height: 1.5; }
/* layout table used only to repeat the letterhead space in print; transparent on screen */
.doc-page { width: 100%; border-collapse: collapse; table-layout: fixed; }
.doc-page > thead, .doc-page > tfoot { display: none; }
.doc-page > tbody > tr > td.doc-body { padding: 0; vertical-align: top; }
.share-page { background: var(--bg); padding: 20px 10px; }
.share-tools { max-width: 1000px; margin: 0 auto 12px; display: flex; justify-content: flex-end; }


/* ---------- print (A4) ---------- */
@media print {
  /*
   * A4 extract layout. Every page gets the same letterhead:
   *   header  (logo + clay bar)  fixed at the top,    20mm tall, then a 6mm safe gap
   *   footer  (company details)  fixed at the bottom, 15mm tall, with a 6mm safe gap above it
   * The repeating thead/tfoot of .doc-page reserve exactly that room on every page,
   * so table rows always stop before the footer and start after the header.
   */
  @page { size: A4; margin: 8mm; }
  body { background: #fff; font-size: 12px; }
  .side, .topbar, .backdrop, .filter-toggle, .no-print, .flash, .head .tools { display: none !important; }
  body.has-topbar { padding-top: 0 !important; }
  .main { padding: 0; }
  .card { border: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc { border: 0; box-shadow: none; margin: 0; max-width: none; }
  .doc.draft::before { position: fixed; }
  .doc-head { position: fixed; top: 0; left: 0; right: 0; height: 20mm; padding: 0; margin: 0; background: #fff; display: flex; align-items: center; gap: 6mm; z-index: 2; }
  .doc-head img { width: 44mm; }
  .doc-bar { height: 3.2mm; }
  .doc-foot { position: fixed; bottom: 0; left: 0; right: 0; height: 15mm; margin: 0; padding: 2.5mm 5mm; font-size: 8pt; line-height: 1.35;
              overflow: hidden; align-items: center; z-index: 2; }
  .doc-page > thead { display: table-header-group; }
  .doc-page > tfoot { display: table-footer-group; }
  .doc-head-space { height: 26mm; }   /* 20mm header + 6mm gap */
  .doc-foot-space { height: 21mm; }   /* 15mm footer + 6mm gap */
  .doc-title { margin-top: 0; }
  .doc-meta, .doc-note, .doc-h2 { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  .doc-sum { margin: 10px 0; break-inside: avoid; }
  .doc-tbl { width: 100%; margin: 0; font-size: 10.5px; }
  .doc-tbl thead { display: table-header-group; }
  .doc-tbl tr, .doc-bank, .doc-meta { break-inside: avoid; }
  .doc-h2 { break-after: avoid; }
  .doc-bank { margin: 14px 0 0; }
  body, .share-page { background: #fff !important; padding: 0; }
  .app { display: block; }   /* plain block flow so long extracts break across pages cleanly */
  a { color: inherit; text-decoration: none; }
}

/* ---------- v1.1: users, system ---------- */
.side .me .ver { margin-top: 4px; font-size: 11px; opacity: .7; }
.tag.navy { background: var(--navy-soft); color: var(--navy); }
.perm-tbl th { width: 160px; background: var(--teal-soft); vertical-align: middle; }
.perm-tbl td { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.perm-tbl label.perm { font-size: 13px; }
.form.narrow { max-width: 520px; }
.steps { margin: 0 16px 14px; padding-inline-start: 18px; line-height: 1.9; }
.card.pad { padding: 20px; }
.card.pad h1 { margin-bottom: 6px; }
.linkbtn.light { color: #fff; font-size: inherit; text-decoration: underline; }

/* ---------- v1.1.3: notifications, user log ---------- */
.side nav a .badge { margin-inline-start: auto; background: var(--clay); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; line-height: 18px; }
a.flash.important { display: block; background: var(--clay-soft); border-color: var(--clay); color: #7A3326; text-decoration: none; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs a { padding: 7px 14px; border-radius: 8px 8px 0 0; background: #fff; border: 1px solid var(--line); border-bottom: 0; color: var(--muted); }
.tabs a.on { background: var(--navy); color: #fff; border-color: var(--navy); text-decoration: none; }
.pad-sm { padding: 10px 16px; }
.tag.pos-tag { background: #E3F2EA; color: var(--ok); }
.tag.pos { background: #E3F2EA; color: var(--ok); }
.tag.neg { background: #FBEDEA; color: var(--bad); }
.audit-entry { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
.audit-h { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.audit-time { margin-inline-start: auto; }
.audit-diff { margin-top: 6px; }
.audit-diff td { border-top: 1px dashed var(--line); font-size: 13px; }
.audit-diff td:first-child { width: 160px; }
.audit-diff .old { color: var(--bad); text-decoration: line-through; }
.audit-diff .new { color: var(--ok); font-weight: 600; }
.audit-diff .arrow { width: 20px; color: var(--muted); }
.session-kpis .kpi b { font-size: 15px; }
.notif-list { padding: 8px 16px; }
.notif { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.notif.unread { border-color: var(--navy-2); background: #F4F9FC; }
.notif.important { border-inline-start: 4px solid var(--clay); }
.notif.open { box-shadow: 0 0 0 2px var(--clay); }
.notif-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.notif-h .muted { margin-inline-start: auto; }
.notif-body { margin-top: 6px; white-space: normal; line-height: 1.8; }
#notif-users { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.gps-box p { margin: 4px 0 0; }
.login-note { text-align: center; margin: 4px 0 0; line-height: 1.6; }

/* =====================================================================
   Phones and tablets (screens only; print keeps the A4 layout above)
   <= 900px: top bar + slide-in menu      <= 760px: phone layout (cards, stacked forms)
   ===================================================================== */
.topbar, .backdrop, .filter-toggle { display: none; }

@media screen and (max-width: 900px) {
  body.has-topbar { padding-top: calc(56px + env(safe-area-inset-top)); }
  .topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: calc(56px + env(safe-area-inset-top));
            padding: env(safe-area-inset-top) 6px 0; background: var(--navy); align-items: center; justify-content: space-between;
            box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  .topbar-logo img { height: 28px; display: block; filter: brightness(0) invert(1); }
  .topbar-btn { position: relative; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
                color: #fff; background: none; border: 0; border-radius: 10px; cursor: pointer; }
  .topbar-btn svg { width: 25px; height: 25px; fill: currentColor; }
  .topbar-btn:active { background: rgba(255,255,255,.14); }
  .topbar-btn .badge { position: absolute; top: 5px; left: 5px; background: var(--clay); color: #fff; border-radius: 10px;
                       font-size: 11px; min-width: 18px; line-height: 18px; text-align: center; padding: 0 4px; }

  .side { position: fixed; top: 0; right: 0; bottom: 0; height: 100%; width: min(84vw, 300px); z-index: 80; transform: translateX(105%);
          transition: transform .22s ease; box-shadow: -8px 0 28px rgba(0,0,0,.28); padding-top: env(safe-area-inset-top); }
  .side.open { transform: none; }
  .side nav a { padding: 13px 20px; font-size: 15px; }
  .side .me { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(2, 25, 40, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .backdrop.show { opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; }

  .main { padding: 14px 12px calc(40px + env(safe-area-inset-bottom)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .doc-meta { grid-template-columns: 1fr; padding: 8px 16px; }
  .doc-sum { grid-template-columns: 1fr 1fr; margin: 14px 16px; }
  .doc-sum div { border-bottom: 1px solid var(--line); }
  .doc-sum label { min-height: 0; }
  .doc-head, .doc-foot { padding-left: 16px; padding-right: 16px; }
  .doc-head img { width: 130px; }
  .doc-foot { flex-direction: column; }
  .doc-tbl { width: calc(100% - 32px); margin: 0 16px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .doc-note, .doc-h2 { margin-left: 16px; margin-right: 16px; }
  .doc-bank { margin: 16px; display: block; }
}

@media screen and (max-width: 760px) {
  input, select, textarea { font-size: 16px; min-height: 44px; }   /* 16px stops iPhone auto-zoom on focus */
  textarea { min-height: 80px; }
  h1 { font-size: 19px; }
  h2 { font-size: 15px; }
  .head { gap: 10px; margin-bottom: 12px; }
  .head > div:first-child, .head > h1 { flex: 1 1 100%; }
  .tools { width: 100%; gap: 6px; }
  .tools > .btn, .tools > form.inline { flex: 1 1 auto; }
  .tools form.inline .btn { width: 100%; }
  .btn { min-height: 44px; padding: 8px 14px; }
  .btn.sm { min-height: 38px; padding: 6px 12px; }
  .card { border-radius: 12px; margin-bottom: 12px; }
  .card-h { padding: 10px 12px; }
  .pad { padding: 12px; }
  .flash { margin-bottom: 10px; }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 10px 12px; border-radius: 12px; }
  .kpi b { font-size: 16px; overflow-wrap: anywhere; }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .fields { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .fields label.wide { grid-column: auto; }
  .actions { padding: 0 12px 12px; }
  /* save buttons stay reachable at the bottom of long forms */
  form.form > .actions { position: sticky; bottom: 0; z-index: 5; margin: 0; background: #fff; border-top: 1px solid var(--line);
                         padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 14px rgba(0,0,0,.06); border-radius: 0 0 12px 12px; }
  form.form > .actions .btn { flex: 1 1 auto; }
  form.form > .actions .muted { flex-basis: 100%; }

  .sumline { font-size: 12.5px; padding: 8px 12px; line-height: 1.9; }
  .pager { justify-content: center; }
  .pager a, .pager b, .pager span { min-width: 42px; padding: 8px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs a { white-space: nowrap; }

  /* filter bars fold behind a button (app.js adds it) */
  .filter-toggle { display: flex; justify-content: space-between; width: calc(100% - 24px); margin: 10px 12px; }
  .bar { padding: 10px 12px; }
  .bar.collapsible:not(.open) { display: none; }
  .bar input, .bar select, .bar .inline-l { flex: 1 1 100%; width: 100%; min-width: 0; }
  .bar .inline-l input { flex: 1; }
  .bar > .btn { flex: 1 1 auto; }

  /* data tables turn into cards; app.js copies each column title into data-label */
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack > tbody, .tbl.stack > tfoot, .tbl.stack > tbody > tr, .tbl.stack > tfoot > tr { display: block; width: 100%; }
  .tbl.stack > tbody > tr, .tbl.stack > tfoot > tr { padding: 8px 12px; border-bottom: 8px solid var(--bg); background: #fff; }
  .tbl.stack > tbody > tr:last-child { border-bottom: 0; }
  .tbl.stack > tbody > tr:hover > td { background: transparent; }
  .tbl.stack > * > tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%;
                             border: 0; padding: 4px 0; text-align: end; white-space: normal; }
  .tbl.stack > * > tr > td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; font-weight: 400;
                                     text-align: start; flex-shrink: 0; max-width: 42%; }
  .tbl.stack > * > tr > td[data-label=""]::before { display: none; }
  .tbl.stack > * > tr > td[data-label=""] { justify-content: flex-start; text-align: start; }
  .tbl.stack > * > tr > td.empty { display: none; }
  .tbl.stack > * > tr > td.n { direction: rtl; text-align: end; }
  .tbl.stack > * > tr > td:first-child { font-weight: 600; }
  .tbl.stack td.clip { max-width: none; white-space: normal; }
  .tbl.stack td .note { text-align: start; }
  .tbl.stack > tfoot > tr { background: var(--navy-soft); }
  .tbl.stack > tfoot > tr > td { border: 0; }
  .tbl.stack td input, .tbl.stack td select { width: auto; flex: 1; min-width: 0; }
  .tbl.stack .nowrap { white-space: normal; }
  .scroll { overflow-x: visible; }
  .scroll.short { max-height: none; }

  /* short lists without column titles (recent items, archives): each row wraps its cells */
  .tbl.simple, .tbl.simple > tbody { display: block; width: 100%; }
  .tbl.simple > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 9px 12px; border-top: 1px solid var(--line); }
  .tbl.simple > tbody > tr:first-child { border-top: 0; }
  .tbl.simple > tbody > tr > td { display: block; border: 0; padding: 0; width: auto; }
  .tbl.simple > tbody > tr > td.clip { flex-basis: 100%; max-width: 100%; white-space: normal; order: 5; }
  .tbl.simple > tbody > tr > td.n { margin-inline-start: auto; }
  .doc { overflow: hidden; }   /* the big draft watermark must not widen the page */

  /* expense entry: each line is a card of large inputs */
  .tbl.entry.stack > tbody > tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; margin: 0 0 10px;
                                  border: 1px solid var(--line); border-radius: 12px; background: #FAFCFD; }
  .tbl.entry.stack > tbody > tr > td { display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 4px; text-align: start; font-weight: 400; }
  .tbl.entry.stack > tbody > tr > td::before { max-width: none; }
  .tbl.entry.stack > tbody > tr > td:nth-child(1), .tbl.entry.stack > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; }
  .tbl.entry.stack > tbody > tr > td.line-total { justify-content: center; font-size: 17px; font-weight: 700; color: var(--navy); }
  .tbl.entry.stack > tbody > tr > td:last-child { align-items: flex-end; justify-content: center; }
  .tbl.entry.stack .x { font-size: 30px; width: 44px; height: 44px; }
  .tbl.entry.stack td input, .tbl.entry.stack td select { width: 100%; flex: none; }
  .tbl.entry.stack > tfoot > tr { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border: 0; background: transparent; }
  .tbl.entry.stack > tfoot > tr > td { width: auto; padding: 0; }
  .tbl.entry.stack > tfoot > tr > td:empty { display: none; }
  .tbl.entry.stack #add-line { min-height: 44px; padding: 8px 18px; }

  /* misc pages */
  .perm-tbl, .perm-tbl tbody, .perm-tbl tr, .perm-tbl th, .perm-tbl td { display: block; width: 100%; }
  .perm-tbl th { padding: 8px 12px; }
  .perm-tbl td { padding: 8px 12px 12px; }
  .audit-diff td:first-child { width: auto; }
  .audit-time, .notif-h .muted { margin-inline-start: 0; flex-basis: 100%; }
  .share-row input { min-width: 0; flex-basis: 100%; }
  .bars { min-height: 180px; padding: 16px 12px 10px; }
  .login-box { padding: 24px 18px; }
  .login-page { padding: 14px; }
}