/* Mythos screens. Model: docs/design/ui-reference.html. Uses only the names in tokens.css. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pearl); color: var(--emerald); font: var(--text)/1.45 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--emerald); }
h1, h2, h3, h4 { margin: 0; }
.ic { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 2000; background: var(--gold); color: var(--emerald); padding: 10px 16px; border-radius: var(--radius-s); font-weight: 600; }
.grow { flex: 1; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
/* Sidebar: the whole menu on one screen (sizes follow the window height), never a long scrolling list.
   nav only scrolls as a last resort on very short windows. */
.side { background: var(--emerald); color: var(--on-emerald-strong); padding: clamp(8px, 1.4vh, 14px) 10px clamp(6px, 1.2vh, 12px); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden; }
.side > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--on-emerald-line) transparent; }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--on-emerald); padding: 4px 6px 12px; font-size: 17px; text-decoration: none; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: var(--gold); color: var(--emerald); display: grid; place-items: center; font-weight: 800; flex: none; }
.side-head { display: flex; gap: 8px; align-items: center; margin-bottom: clamp(6px, 1.3vh, 14px); }
.side-head .logo { width: 34px; height: 34px; font-size: 17px; text-decoration: none; }
.side-find { position: relative; flex: 1; min-width: 0; display: block; }
.side-find .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--on-emerald-muted); pointer-events: none; }
.side-find input { width: 100%; height: 34px; padding: 0 32px 0 36px; border: 1px solid var(--on-emerald-line); border-radius: var(--radius-s); background: var(--on-emerald-hover);
  color: var(--on-emerald); font: inherit; font-size: var(--text-s); -webkit-appearance: none; appearance: none; }
.side-find input::placeholder { color: var(--on-emerald-muted); }
.side-find input::-webkit-search-cancel-button { display: none; }
.side-find input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-soft); }
.side-find kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 20px; line-height: 20px; text-align: center; font: inherit; font-size: var(--text-s);
  color: var(--on-emerald-muted); border: 1px solid var(--on-emerald-line); border-radius: 5px; pointer-events: none; }
.side-find input:focus + kbd, .side-find input:not(:placeholder-shown) + kbd { display: none; }

/* one plain list; row height and group gaps follow the window height so 17 links fit a 768px laptop */
.ngrp { margin-top: clamp(4px, .8vh, 12px); }
.ngrp.ntop { margin-top: 0; }
/* group titles bold and bright, links lighter, so the groups read first */
.side h6 { margin: 0 10px 2px; font-size: var(--text-s); line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-emerald); font-weight: 700; }
.ngrp.here h6 { color: var(--gold); }
.side a.nav { display: flex; align-items: center; gap: 10px; min-height: clamp(22px, 3.6vh, 36px); padding: 2px 10px; border-radius: var(--radius-s);
  color: var(--on-emerald-soft); text-decoration: none; font-size: var(--text-s); font-weight: 400; line-height: 1.25; }
.side a.nav > span:not(.count) { flex: 1; min-width: 0; }
.side a.nav > .ic { width: 18px; height: 18px; color: var(--on-emerald-muted); }
.side a.nav:hover { background: var(--on-emerald-hover); color: var(--on-emerald); }
.side a.nav:hover > .ic { color: var(--on-emerald); }
.side a.nav.on { background: var(--gold); color: var(--emerald); font-weight: 600; }
.side a.nav.on > .ic { color: var(--emerald); }
.side a.nav.hit { box-shadow: inset 0 0 0 1px var(--gold); }  /* first search match: Enter opens it */
.side a.nav .count { line-height: 20px; }
.side a.nav.soon { opacity: .55; cursor: default; }
.side a.nav.soon:hover { background: none; }
.side a.nav.on.soon { opacity: 1; }
.nfind-none { margin: 12px 10px; color: var(--on-emerald-muted); font-size: var(--text-s); }
/* Help row pinned to the bottom: three equal cells, icon and short name */
.side-foot { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: clamp(4px, .8vh, 10px); padding-top: clamp(4px, .8vh, 10px); border-top: 1px solid var(--on-emerald-line); }
.side .side-foot a.nav { justify-content: center; gap: 5px; min-height: 32px; padding: 0; white-space: nowrap; }
.side .side-foot a.nav > span:not(.count) { flex: none; }
.side .side-foot a.nav > .ic { width: 16px; height: 16px; }
.top-icon.on { box-shadow: inset 0 -3px 0 var(--gold); }  /* the gear while a settings page is open */
.mx-menu a.on { font-weight: 600; }
.count { background: var(--amethyst); color: var(--on-emerald); border-radius: 999px; padding: 0 8px; font-size: var(--text-s); line-height: 22px; min-width: 22px; text-align: center; font-weight: 600; }
.side-close, .side-scrim { display: none; }
/* fold the sidebar to icons (wide screens; owner, 3 Nov 2026). Hover shows each page's name. */
.side-toggle { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; margin-bottom: 2px; border: 0; border-radius: var(--radius-s); font: inherit; font-size: var(--text-s);
  background: none; color: var(--on-emerald-muted); cursor: pointer; }
.side-toggle:hover { color: var(--on-emerald); background: var(--on-emerald-hover); }
.side-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.side-toggle .ic { transition: transform .2s ease; }
@media (min-width: 761px) {
  .app { transition: grid-template-columns .2s ease; }
  .app.side-mini { grid-template-columns: 68px minmax(0, 1fr); }
  .side-mini .side-head { flex-direction: column; }
  .side-mini .side-find, .side-mini .side h6 { display: none; }
  .side-mini .side-toggle .ic { transform: rotate(180deg); }
  .side-mini .ngrp:not(.ntop) { border-top: 1px solid var(--on-emerald-line); padding-top: clamp(4px, .8vh, 10px); }
  .side-mini .side a.nav { position: relative; justify-content: center; padding: 2px 0; }
  .side-mini .side a.nav > span:not(.count) { display: none; }
  .side-mini .side a.nav > .ic { width: 20px; height: 20px; }
  .side-mini .side a.nav .count { position: absolute; top: -2px; right: 2px; min-width: 18px; padding: 0 4px; line-height: 18px; font-size: 11px; }
  .side-mini .side-foot { grid-template-columns: minmax(0, 1fr); }
  .side-mini .side-toggle { justify-content: center; padding: 0; }
  .side-mini .side-toggle span { display: none; }
  .side-mini .ngrp.here { box-shadow: inset 3px 0 0 var(--gold); border-radius: 2px; }
}
@media (prefers-reduced-motion: reduce) { .app, .side-toggle .ic { transition: none; } }

.top { background: var(--emerald); color: var(--on-emerald); display: flex; align-items: center; gap: 10px; padding: 8px 20px; min-height: 60px; border-bottom: 3px solid var(--gold); position: sticky; top: 0; z-index: 30; }
.top .co { flex: 1; min-width: 0; }
.top .co b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .co span { font-size: var(--text-s); color: var(--on-emerald-muted); }
.top .logo { display: none; }
.sel { border: 1px solid var(--on-emerald-line); border-radius: var(--radius-s); padding: 8px 12px; min-height: 42px; font-size: var(--text-s); background: transparent; color: var(--on-emerald-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sel b { color: var(--on-emerald); font-weight: 600; }
.sel:hover { background: var(--on-emerald-hover); }
.top-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-s); color: var(--on-emerald); background: none; border: 0; cursor: pointer; text-decoration: none; }
.top-icon:hover { background: var(--on-emerald-hover); }
.top-icon .count { position: absolute; top: 2px; right: 0; }
.menu-btn { display: none; }

/* app top bar (owner choice A, 2 Nov 2026): company, one Session · Project pill, then the tools on the right */
.app-top .co { flex: 0 1 auto; max-width: 280px; }
.app-top .co b { font-size: 16px; }
.ctx { flex: 0 1 auto; min-width: 0; margin-left: 8px; }
.ctx-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 42px; padding: 0 12px 0 16px; border: 1px solid var(--on-emerald-line); border-radius: 999px;
  background: var(--on-emerald-hover); color: var(--on-emerald-soft); font: inherit; font-size: var(--text-s); cursor: pointer; white-space: nowrap; }
.ctx-pill b { color: var(--on-emerald); font-weight: 600; }
.ctx-pill:hover { border-color: var(--gold); }
.ctx-pill .ctx-p { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; border-left: 1px solid var(--on-emerald-line); }
.ctx-pill .ic { width: 18px; height: 18px; flex: none; }
.ctx-pill.closed { background: var(--amethyst); border-color: var(--amethyst); color: var(--on-emerald); }
.ctx-pill.closed .ctx-p { border-left-color: var(--on-emerald-line); }
.ctx .mx-menu { min-width: 260px; }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.top-new { min-height: 38px; padding: 6px 14px 6px 10px; margin-right: 6px; }
.top-new .ic { width: 18px; height: 18px; }
.avatar { width: 38px; height: 38px; margin-left: 6px; border-radius: 50%; border: 0; background: var(--gold); color: var(--emerald); font: inherit; font-size: var(--text-s); font-weight: 700;
  letter-spacing: .03em; display: grid; place-items: center; cursor: pointer; }
.avatar:hover, .avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--focus-ring); }
.mx-menu .mh-user { padding: 8px 12px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.mx-menu .mh-user b { display: block; color: var(--emerald); }
.mx-menu .mh-user span { font-size: var(--text-s); color: var(--smoky); overflow-wrap: anywhere; }
.idle-chip { margin-left: 4px; padding: 0 10px; line-height: 26px; border-radius: 999px; background: var(--amethyst); color: var(--on-emerald); font-size: var(--text-s); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* calculator */
.mx-menu.calc { width: 272px; max-height: none; padding: 12px; }
.calc-screen { background: var(--emerald-50); border-radius: var(--radius-s); padding: 8px 12px; margin-bottom: 10px; text-align: right; }
.calc-expr { min-height: 18px; font-size: var(--text-s); color: var(--smoky); overflow-wrap: anywhere; }
.calc-out { font-size: 24px; font-weight: 700; color: var(--emerald); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mx-menu .calc-keys button { justify-content: center; min-height: var(--tap); padding: 0; border: 1px solid var(--line); background: var(--white); font-size: 17px; font-variant-numeric: tabular-nums; }
.mx-menu .calc-keys button.op { background: var(--emerald-50); font-weight: 600; }
.mx-menu .calc-keys button.eq { grid-row: span 2; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.mx-menu .calc-keys button:hover { border-color: var(--gold); }
.calc-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
/* slim footer at the end of every page (not sticky); on a short page it still sits at the bottom of the window */
.app > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.app > div:last-child > main { flex: 1 0 auto; width: 100%; }
main:has(+ .app-foot) { padding-bottom: 32px; }
/* emerald gradient band (owner, 2 Nov 2026), gold line on top like the top bar's bottom edge */
.app-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 12px var(--gap) 14px; border-top: 3px solid var(--gold);
  background: linear-gradient(110deg, var(--emerald-900), var(--emerald) 55%, var(--jade)); color: var(--on-emerald-soft); font-size: var(--text-s); }
.app-foot .made-by { display: inline-flex; align-items: center; gap: 8px; color: var(--on-emerald); font-weight: 600; text-decoration: none; }
.app-foot .made-by:hover { color: var(--gold); }
.app-foot .made-by img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
/* the product mark (Mythos) in the sidebar, the client's own logo in the top bar */
.logo:has(img) { background: none; overflow: hidden; }
.logo img { width: 100%; height: 100%; display: block; }
.top .co-logo { width: 40px; height: 40px; flex: none; object-fit: contain; background: var(--white); border-radius: 10px; padding: 3px; }
.app-foot .foot-links { margin-left: auto; display: flex; gap: 14px; }
.linkish { min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--on-emerald); font: inherit; text-decoration: underline; text-decoration-color: var(--on-emerald-line); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--gold); text-decoration-color: var(--gold); }
.net { display: inline-flex; align-items: center; gap: 6px; }
.net i { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 2px var(--on-emerald-soft); }
.net.off { padding: 0 10px; border-radius: 999px; background: var(--ruby); color: var(--on-emerald); font-weight: 600; line-height: 26px; }
.net.off i { background: var(--on-emerald); box-shadow: none; }
dl.keys { margin: 0; }
dl.keys > div { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
dl.keys > div:last-child { border-bottom: 0; }
dl.keys dt { flex: 0 0 150px; }
dl.keys dd { margin: 0; color: var(--emerald); }
dl.keys kbd { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--pearl); font: inherit; font-size: var(--text-s); white-space: nowrap; }
@media (max-width: 1180px) {
  .top-new span { display: none; }
  .top-new { width: 42px; padding: 0; }
  .ctx-pill .ctx-p { max-width: 150px; }
}

main { padding: 20px var(--gap) 96px; }   /* full width of the window (owner, 3 Nov 2026) */

/* one banner area under the top bar */
.notice { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--amethyst); border-radius: var(--radius-m); padding: 10px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: var(--text-s); }
.notice > span { flex: 1; }
.notice.ok { border-left-color: var(--jade); }
.notice.bad { border-left-color: var(--ruby); }

/* ---------- buttons ---------- */
.btn { border: 1px solid var(--line); background: var(--white); color: var(--emerald); border-radius: var(--radius-s); padding: 9px 16px; cursor: pointer; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--emerald-50); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--emerald); font-weight: 600; }
.btn.gold:hover { background: var(--gold-600); border-color: var(--gold-600); }
.btn.danger { background: var(--ruby); border-color: var(--ruby); color: var(--white); font-weight: 600; }
.btn.danger:hover { opacity: .92; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.btn .ic { width: 18px; height: 18px; }
.link { color: var(--emerald); font-size: var(--text-s); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0 2px; min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; }
.link .ic { width: 16px; height: 16px; }

/* ---------- page head, tabs, hero, cards ---------- */
.head { display: flex; align-items: flex-end; gap: 16px; margin: 6px 0 16px; }
.head .t { flex: 1; min-width: 0; }
.eyebrow { font-size: var(--text-s); letter-spacing: .08em; color: var(--gold-600); font-weight: 600; text-transform: uppercase; }
.head h1 { margin: 2px 0; font-size: 24px; font-weight: 600; }
.sub { color: var(--smoky); font-size: var(--text-s); margin: 0; }
.tabs { display: inline-flex; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 16px; gap: 2px; }
.tabs a { padding: 8px 16px; border-radius: 999px; font-size: var(--text-s); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.tabs a.on { background: var(--emerald); color: var(--on-emerald); }

.hero { background: linear-gradient(120deg, var(--emerald), var(--emerald-900)); color: var(--on-emerald); border-radius: var(--radius-l); padding: 26px 28px; margin-bottom: 20px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid var(--focus-ring); pointer-events: none; }
.hero .eyebrow { color: var(--gold); }
.hero h2 { margin: 6px 0; font-size: 28px; }
.hero p { margin: 0 0 14px; color: var(--on-emerald-soft); }
.chip { display: inline-block; border: 1px solid var(--on-emerald-line); border-radius: 999px; padding: 4px 12px; font-size: var(--text-s); margin: 0 6px 6px 0; color: var(--on-emerald); text-decoration: none; }
a.chip:hover { background: var(--on-emerald-hover); }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.card-pad { padding: 18px; }
.card-title { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { padding: 16px; }
.kpi .l { font-size: var(--text-s); color: var(--smoky); }
.kpi .v { font-size: 22px; font-weight: 700; margin: 4px 0; }
.kpi .h { font-size: var(--text-s); color: var(--smoky); }

/* ---------- money, status ---------- */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.money.in { color: var(--jade); }
.money.out { color: var(--ruby); }
.money.zero { color: var(--smoky); font-weight: 500; }
.money.pending { color: var(--amethyst); }
.r { text-align: right; }
.status { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: var(--text-s); font-weight: 600; white-space: nowrap; }
.st-pending { background: var(--amethyst-50); color: var(--amethyst); }
.st-approved { background: var(--jade-50); color: var(--jade); }
.st-returned { background: var(--ruby-50); color: var(--ruby); }
.st-deleted { background: var(--deleted-50); color: var(--smoky); }
.st-neutral { background: var(--emerald-50); color: var(--emerald); }

/* ---------- drop-down menus and popovers ---------- */
.mx-dd { position: relative; }
.mx-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; max-height: 360px; overflow: auto; background: var(--white); color: var(--emerald); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); padding: 6px; display: none; }
.mx-menu.right { left: auto; right: 0; }
.mx-menu.open { display: block; }
.mx-menu button:not(.btn), .mx-menu a:not(.btn), .mx-menu label.mi { display: flex; width: 100%; align-items: center; gap: 10px; min-height: var(--tap); padding: 8px 12px; border: 0; background: none; border-radius: var(--radius-s); text-align: left; cursor: pointer; text-decoration: none; font-size: var(--text); color: var(--emerald); font-weight: 400; margin: 0; }
.mx-menu button:not(.btn):hover, .mx-menu a:not(.btn):hover, .mx-menu label.mi:hover { background: var(--emerald-50); }
.mx-menu .msearch { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; min-height: 40px; margin: 0 0 6px; font-size: var(--text); }
.mx-menu .msearch:focus { outline: none; border-color: var(--gold); }
.mx-menu .on { font-weight: 600; background: var(--gold-50); }
.mx-menu .danger { color: var(--ruby); }
.mx-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.mx-menu .mh6 { font-size: var(--text-s); color: var(--smoky); padding: 6px 12px 2px; }
.mx-pop { padding: 14px; min-width: 360px; }
.mx-pop .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mx-pop .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.mx-pop .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mx-pop .presets button { width: auto; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: var(--text-s); }

/* ---------- table kit ---------- */
.mx-table { position: relative; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); align-items: center; }
.pill { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; font-size: var(--text-s); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; color: var(--emerald); }
.pill small { color: var(--smoky); font-size: var(--text-s); }
.pill.act { background: var(--gold-50); border-color: var(--gold); }
/* clearing an active filter is its own button, sitting on the right end of the pill */
.f-wrap .pill.act { padding-right: 40px; }
.pill-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--smoky); cursor: pointer; display: grid; place-items: center; }
.pill-x:hover { background: var(--white); color: var(--ruby); }
.pill-x .ic { width: 16px; height: 16px; }
.pill .ic { width: 16px; height: 16px; }
.filters-btn { display: none; }
.search { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 40px; width: 220px; background: var(--white); font-size: var(--text-s); }
.search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-soft); }
.icons { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: visible; }
.icons .dt-buttons { display: inline-flex; }
.icons button, .icons .dt-button { border: 0 !important; border-right: 1px solid var(--line) !important; background: var(--white) !important; width: 42px; height: 40px; min-height: 40px; cursor: pointer; display: grid !important; place-items: center; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--emerald) !important; }
.icons .mx-dd:last-child > button { border-right: 0 !important; border-radius: 0 var(--radius-s) var(--radius-s) 0 !important; }
.icons .dt-buttons > :first-child { border-radius: var(--radius-s) 0 0 var(--radius-s) !important; }
.icons button:hover, .icons .dt-button:hover { background: var(--emerald-50) !important; }
.icons .ic { width: 18px; height: 18px; }
.strip { display: flex; gap: 28px; padding: 12px 16px; font-size: var(--text-s); color: var(--smoky); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.strip b { display: block; font-size: 17px; color: var(--emerald); }
.strip b.money.out { color: var(--ruby); }
.strip b.money.in { color: var(--jade); }
.strip b.money.pending { color: var(--amethyst); }
.strip b.money.zero { color: var(--smoky); }

.mx-topscroll { overflow-x: auto; overflow-y: hidden; height: 14px; display: none; }
.mx-topscroll > div { height: 1px; }
.mx-topscroll.on { display: block; }
.wrap { overflow: auto; max-height: 600px; }
.mx-table table { width: 100% !important; border-collapse: separate; border-spacing: 0; margin: 0 !important; }
/* "table.dataTable" in these selectors makes them win over DataTables' own stylesheet */
.mx-table table.dataTable > thead > tr > th,
.mx-table table.dataTable > thead > tr > th.dt-orderable-asc, .mx-table table.dataTable > thead > tr > th.dt-orderable-desc,
.mx-table table.dataTable > thead > tr > th.dt-ordering-asc, .mx-table table.dataTable > thead > tr > th.dt-ordering-desc {
  position: sticky; top: 0; z-index: 2; background: var(--emerald-50); color: var(--emerald); text-align: left; font-size: var(--text-s);
  font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; text-transform: none; outline: 0;
}
.mx-table table.dataTable > thead > tr > th.dt-orderable-asc, .mx-table table.dataTable > thead > tr > th.dt-orderable-desc { padding-right: 30px; }
/* money columns: arrow on the left, so the title stays above the figures */
.mx-table table.dataTable > thead > tr > th.r { text-align: right; padding-right: 14px; padding-left: 30px; }
.mx-table table.dataTable > thead > tr > th.r span.dt-column-order { right: auto; left: 10px; }
.mx-table table.dataTable > tbody > tr > td { padding: 12px 14px; border-bottom: 1px solid var(--line); border-top: 0; vertical-align: top; height: 52px; }
.mx-table table.dataTable > tbody > tr:hover > td { background: var(--row-hover); }
.mx-table table.dataTable > tbody > tr > td.r, .mx-table table.dataTable > tfoot > tr > td.r { text-align: right; }
.mx-table tbody tr.deleted .money { text-decoration: line-through; color: var(--smoky); }
.ref, .desc { display: block; color: var(--smoky); font-size: var(--text-s); font-weight: 400; }
.mx-table table.dataTable > tfoot > tr > td { position: sticky; bottom: 0; z-index: 2; background: var(--white); border-top: 2px solid var(--emerald); padding: 12px 14px; font-weight: 700; white-space: nowrap; }
.mx-loaderr { padding: 14px 16px; }
.mx-loaderr .alert { margin: 0; align-items: center; }
.more { border: 0; background: none; width: 40px; height: 40px; border-radius: var(--radius-s); cursor: pointer; color: var(--smoky); display: inline-grid; place-items: center; }
.more:hover { background: var(--emerald-50); color: var(--emerald); }
.row-acts { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.row-acts .hover-ic { opacity: 0; }
.mx-table tbody tr:hover .hover-ic, .row-acts .hover-ic:focus-visible { opacity: 1; }
/* Edit and Delete: always visible (owner, 4 Nov 2026); Delete in ruby on hover; an approved row's Delete greyed out. */
.more.act-ic { color: var(--emerald); }
.more.act-ic.del { color: var(--ruby); }
.more.act-ic.del:hover { background: var(--ruby-50); color: var(--ruby-700); }
.more.act-ic.locked { color: var(--smoky); opacity: .4; cursor: not-allowed; }
.more.act-ic.locked:hover { background: none; color: var(--smoky); }
.mx-card-w { border-bottom: 1px solid var(--line); background: var(--white); }
.mx-card-w > .mx-card { border-bottom: 0; }
.mx-card-w.has-acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.card-acts { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-left: 1px solid var(--line); }
.card-acts .more { width: var(--tap); height: var(--tap); }
.c-act { width: 1%; white-space: nowrap; }

.foot { display: flex; align-items: center; gap: 14px; padding: 12px 16px; font-size: var(--text-s); color: var(--smoky); flex-wrap: wrap; border-top: 1px solid var(--line); }
.foot .btn[aria-disabled="true"] { opacity: .5; cursor: default; }   /* panel page links: the page shown and the ends */
.foot select { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; min-height: 40px; background: var(--white); font-size: var(--text-s); }
.pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pages button { min-width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: var(--text-s); display: inline-grid; place-items: center; padding: 0 6px; }
.pages button.on { background: var(--emerald); color: var(--on-emerald); border-color: var(--emerald); }
.pages button[disabled] { opacity: .45; cursor: default; }
.pages .gap { min-width: 20px; text-align: center; line-height: 40px; }

.empty { display: none; text-align: center; padding: 56px 16px; }
.empty .eic { width: 56px; height: 56px; border-radius: 50%; background: var(--gold-50); color: var(--gold-600); display: grid; place-items: center; margin: 0 auto 12px; }
.empty .eic .ic { width: 26px; height: 26px; }
.empty p { margin: 0 0 14px; color: var(--smoky); }
.empty .link { display: block; margin: 12px auto 0; }
.is-empty .strip, .is-empty .wrap, .is-empty .foot, .is-empty .mx-topscroll, .is-empty .mx-cards { display: none !important; }
.is-empty .empty { display: block; }
.is-error .strip, .is-error .wrap, .is-error .foot, .is-error .mx-topscroll, .is-error .mx-cards, .is-error .empty, .is-error .mx-skel { display: none !important; }

/* skeleton: shown until the first rows arrive, never a spinner */
.mx-skel { padding: 4px 16px 12px; }
.mx-skel div { height: 18px; border-radius: 6px; background: var(--skeleton); margin: 17px 0; }
.mx-skel div:nth-child(2n) { width: 88%; }
.mx-skel div:nth-child(3n) { width: 72%; }
.is-loading .wrap, .is-loading .foot, .is-loading .strip, .is-loading .mx-cards { display: none; }
.mx-table:not(.is-loading) .mx-skel { display: none; }

/* DataTables: our markup does the toolbar, info and paging */
.mx-table .dt-container { position: static; }
.mx-table table.dataTable > thead > tr > th, .mx-table table.dataTable > tbody > tr > td { box-sizing: border-box; }
.mx-table table.dataTable thead > tr > th.dt-orderable-asc, .mx-table table.dataTable thead > tr > th.dt-orderable-desc { cursor: pointer; }
.mx-table table.dataTable thead > tr > th .dt-column-order { opacity: 0; }
.mx-table table.dataTable thead > tr > th:hover .dt-column-order,
.mx-table table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order,
.mx-table table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order { opacity: 1; }
.mx-table table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
.mx-table table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px solid var(--line); padding: 8px 0; display: flex; gap: 12px; }
.mx-table table.dataTable > tbody > tr.child span.dtr-title { font-weight: 600; min-width: 120px; }
.mx-table table.dataTable.dtr-column > tbody > tr > td.dtr-control::before { background: var(--white); border: 1px solid var(--line); color: var(--emerald); border-radius: 50%; width: 22px; height: 22px; line-height: 22px; content: "+"; box-shadow: none; font-family: var(--font); text-indent: 0; display: inline-block; text-align: center; margin: 0; position: static; }
.mx-table table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.dtr-control::before { content: "\2212"; }
.mx-table td.dtr-control, .mx-table th.dtr-control { width: 34px; padding-right: 0 !important; }

/* phone cards (under 640px the table is replaced by these) */
.mx-cards { display: none; }
.mx-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; background: var(--white); border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font-size: var(--text); }
.mx-card:hover { background: var(--row-hover); }
.mx-card .k-tl { grid-column: 1; }
.mx-card .k-tr { grid-column: 2; text-align: right; }
.mx-card .k-main { grid-column: 1; font-weight: 500; }
.mx-card .k-sub { grid-column: 1; color: var(--smoky); font-size: var(--text-s); }
.mx-card .k-amt { grid-column: 2; grid-row: 2 / span 2; align-self: center; text-align: right; font-size: 17px; }
.mx-card.deleted .money { text-decoration: line-through; color: var(--smoky); }

/* ---------- list pages in the dashboard style (owner choice, 2 Nov 2026: colour stat tiles, soft-colour table) ----------
   Shared kit only (page_head, tabs, table_card, table-kit.js): every list page changes at once. */
.head .t::after { content: ""; display: block; width: 56px; height: 6px; margin-top: 10px; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 6px, var(--emerald) 6px 12px); }
.head h1 { font-weight: 700; }
.main-btn { background: linear-gradient(135deg, var(--gold), var(--gold-600)); border-color: var(--gold-600); box-shadow: 0 4px 14px rgba(184, 149, 42, .30); }
.main-btn:hover { background: linear-gradient(135deg, var(--gold-600), var(--gold)); }
.tabs { box-shadow: var(--shadow-card); }
.tabs a { color: var(--emerald); }
.tabs a:hover { background: var(--emerald-50); }
.tabs a.on { background: linear-gradient(135deg, var(--emerald), var(--emerald-900)); box-shadow: 0 3px 10px rgba(14, 75, 59, .25); }

/* the table card: gradient top edge (menus inside must not be clipped, so no overflow: hidden) */
.card.mx-table { border-top-color: transparent; }
.card.mx-table::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; z-index: 3; pointer-events: none;
  border-radius: var(--radius-l) var(--radius-l) 0 0; background: linear-gradient(90deg, var(--gold), var(--jade), var(--emerald)); }
.mx-table .bar { padding-top: 18px; background: linear-gradient(180deg, var(--emerald-50), var(--white) 70%); border-radius: var(--radius-l) var(--radius-l) 0 0; }
.pill:hover { border-color: var(--emerald-100); background: var(--emerald-50); }
.pill.act { background: linear-gradient(135deg, var(--gold-50), var(--gold-200)); border-color: var(--gold); font-weight: 600; }

/* summary strip as colour stat tiles: jade money in, ruby money out, amethyst pending, emerald counts */
.strip { gap: 10px; padding: 14px 16px; }
.strip > div { --tc: var(--emerald); --tb: var(--emerald-50); position: relative; min-width: 150px; padding: 10px 14px 10px 18px; border-radius: var(--radius-m);
  background: linear-gradient(135deg, var(--tb), var(--white)); border: 1px solid var(--line); color: var(--smoky); font-weight: 600; }
.strip > div::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--tc); }
.strip > div:has(.money.in) { --tc: var(--jade); --tb: var(--jade-50); }
.strip > div:has(.money.out) { --tc: var(--ruby); --tb: var(--ruby-50); }
.strip > div:has(.money.pending) { --tc: var(--amethyst); --tb: var(--amethyst-50); }
.strip > div:has(.money.zero) { --tc: var(--smoky); --tb: var(--pearl); }
.strip b { margin-top: 2px; font-size: 20px; font-weight: 800; }

/* rows: light header, soft zebra, a gold bar on the row under the pointer */
.mx-table table.dataTable > thead > tr > th,
.mx-table table.dataTable > thead > tr > th.dt-orderable-asc, .mx-table table.dataTable > thead > tr > th.dt-orderable-desc,
.mx-table table.dataTable > thead > tr > th.dt-ordering-asc, .mx-table table.dataTable > thead > tr > th.dt-ordering-desc {
  border-bottom: 2px solid var(--emerald-100); font-weight: 700; letter-spacing: .02em; }
.mx-table table.dataTable > tbody > tr:nth-child(even) > td { background: var(--pearl); }
.mx-table table.dataTable > tbody > tr:hover > td { background: var(--gold-50); }
.mx-table table.dataTable > tbody > tr:hover > td:first-child { box-shadow: inset 4px 0 0 var(--gold); }
.mx-table table.dataTable > tfoot > tr > td { background: var(--gold-50); color: var(--emerald); }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.pages button:hover:not([disabled]) { border-color: var(--emerald-100); background: var(--emerald-50); }
.pages button.on { background: linear-gradient(135deg, var(--emerald), var(--emerald-900)); box-shadow: 0 3px 10px rgba(14, 75, 59, .25); }

/* empty list: the icon on a small blueprint square */
.empty .eic { width: 76px; height: 76px; border-radius: 20px; color: var(--gold);
  background: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(135deg, var(--emerald), var(--emerald-900)); box-shadow: 0 6px 18px rgba(14, 75, 59, .25); }
.empty .eic .ic { width: 32px; height: 32px; }
.mx-card:hover { background: var(--gold-50); box-shadow: inset 4px 0 0 var(--gold); }

/* ---------- record pages in the dashboard style (owner choice, 2 Nov 2026) ---------- */
/* status band: jade approved, amethyst pending, ruby returned or deleted; the icon in a solid circle, buttons on the right */
.appr-card > * + * { margin-top: 12px; }
.appr-bar { --bc: var(--amethyst); --bt: var(--amethyst-50); padding: 12px 14px; border-radius: var(--radius-l); border: 1px solid var(--bc);
  background: linear-gradient(110deg, var(--bt), var(--white) 85%); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.appr-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bc); }
.appr-bar.band-ok { --bc: var(--jade); --bt: var(--jade-50); }
.appr-bar.band-error { --bc: var(--ruby); --bt: var(--ruby-50); }
.appr-bar .alert.alert { background: none; border: 0; padding: 0 0 0 6px; align-items: center; font-size: 15px; font-weight: 600; color: var(--bc); }
.appr-bar .alert .ic { width: 34px; height: 34px; padding: 8px; margin: 0; border-radius: 50%; background: var(--bc); color: var(--white); flex: none; }
.appr-card .simple-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); }

/* details: label + value pairs as small tiles (a <div> per pair inside the dl) */
.dl:has(> div) { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dl > div { padding: 10px 14px; border-radius: var(--radius-m); background: linear-gradient(135deg, var(--emerald-50), var(--white)); border: 1px solid var(--line); min-width: 0; }
.dl > div dt { font-size: var(--text-s); color: var(--smoky); }
.dl > div dd { margin: 2px 0 0; font-weight: 600; color: var(--emerald); overflow-wrap: anywhere; }
.dl > div dd .money { font-size: 17px; }

/* section heads on record pages: the small caution stripe before the title */
.card-head h2::before, .card-head-row .card-title::before, .card-pad > .card-title::before { content: ""; display: inline-block; width: 14px; height: 6px; margin-right: 8px;
  border-radius: 3px; vertical-align: 3px; background: repeating-linear-gradient(-45deg, var(--gold) 0 4px, var(--emerald) 4px 8px); }
.dash-grid .card-title::before { display: none; }
.simple th { font-weight: 700; border-bottom: 2px solid var(--emerald-100); }
.simple tbody tr:nth-child(even) td { background: var(--pearl); }
.simple tbody tr:hover td { background: var(--gold-50); }

/* approvals queue: a module chip per row, and the same colour on the row's left edge */
.mod { --mc: var(--emerald); display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: var(--text-s); font-weight: 600; white-space: nowrap;
  color: var(--white); background: var(--mc); }
.mod-vouchers { --mc: var(--emerald); } .mod-accounts { --mc: var(--jade); } .mod-income_expense { --mc: var(--jade); }
.mod-customers { --mc: var(--gold-600); } .mod-vendors { --mc: var(--gold-600); } .mod-contractors { --mc: var(--amethyst-700); }
.mod-investors { --mc: var(--amethyst); } .mod-payroll { --mc: var(--amethyst); } .mod-loans { --mc: var(--ruby); }
.mod-projects { --mc: var(--emerald-900); } .mod-inventory { --mc: var(--smoky); } .mod-settings { --mc: var(--smoky-700); }
.mx-table table.dataTable > tbody > tr:has(.mod) > td:first-child { box-shadow: inset 5px 0 0 var(--mc-row, var(--emerald)); }
:is(.mx-table tbody tr, .mx-card):has(.mod-accounts, .mod-income_expense) { --mc-row: var(--jade); }
:is(.mx-table tbody tr, .mx-card):has(.mod-customers, .mod-vendors) { --mc-row: var(--gold-600); }
:is(.mx-table tbody tr, .mx-card):has(.mod-contractors) { --mc-row: var(--amethyst-700); }
:is(.mx-table tbody tr, .mx-card):has(.mod-investors, .mod-payroll) { --mc-row: var(--amethyst); }
:is(.mx-table tbody tr, .mx-card):has(.mod-loans) { --mc-row: var(--ruby); }
:is(.mx-table tbody tr, .mx-card):has(.mod-projects) { --mc-row: var(--emerald-900); }
:is(.mx-table tbody tr, .mx-card):has(.mod-inventory, .mod-settings) { --mc-row: var(--smoky); }
.mx-card:has(.mod) { box-shadow: inset 5px 0 0 var(--mc-row, var(--emerald)); }

/* reports hub: a card per report, the icon on a gradient square in its group's colour */
.rep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rep-card { --rc: var(--emerald); --rc2: var(--emerald-900); position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); color: var(--emerald); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.rep-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--rc); }
.rc-gold { --rc: var(--gold); --rc2: var(--gold-600); }
.rc-amethyst { --rc: var(--amethyst); --rc2: var(--amethyst-700); }
.rep-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--white); background: linear-gradient(135deg, var(--rc), var(--rc2)); }
.rc-gold .rep-ic { color: var(--emerald); }
.rep-t { flex: 1; min-width: 0; }
.rep-t b { display: block; font-size: 16px; }
.rep-t span { display: block; font-size: var(--text-s); color: var(--smoky); }
.rep-go { flex: none; color: var(--smoky); }
.rep-card:hover .rep-go { color: var(--rc); }
@media (prefers-reduced-motion: reduce) { .rep-card { transition: none; } }

/* record history as a timeline: a line with a coloured dot per step */
.history.timeline { position: relative; padding-left: 26px; }
.history.timeline::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.history.timeline li { position: relative; padding: 6px 0 10px; color: var(--smoky); }
.history.timeline li::before { content: ""; position: absolute; left: -24px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--white);
  border: 3px solid var(--emerald); box-sizing: border-box; }
.history.timeline li.ev-approve::before, .history.timeline li.ev-correction_approve::before, .history.timeline li.ev-restore::before { border-color: var(--jade); background: var(--jade); }
.history.timeline li.ev-return::before, .history.timeline li.ev-correction_return::before, .history.timeline li.ev-delete::before { border-color: var(--ruby); background: var(--ruby); }
.history.timeline li.ev-pending::before, .history.timeline li.ev-correction_request::before { border-color: var(--amethyst); }
.history.timeline li.ev-edit::before, .history.timeline li.ev-resubmit::before { border-color: var(--gold); }
.mx-cards .mx-card-total { display: flex; justify-content: space-between; padding: 12px 14px; font-weight: 700; border-top: 2px solid var(--emerald); }

/* ---------- forms ---------- */
.sec { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; margin-bottom: 14px; background: var(--white); }
.sec-h { margin: 0 0 14px; display: flex; gap: 10px; align-items: flex-start; }
.sec-h h4 { font-size: 16px; font-weight: 600; }
.sec-h p { margin: 2px 0 0; color: var(--smoky); font-size: var(--text-s); }
.num { background: var(--gold-50); color: var(--gold-600); border-radius: var(--radius-s); padding: 2px 8px; font-size: var(--text-s); font-weight: 700; flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.grid2 .wide { grid-column: 1 / -1; }
.f { min-width: 0; }
.f > label, .f > .lbl { display: block; font-size: var(--text-s); font-weight: 600; margin-bottom: 4px; }
.req { color: var(--ruby); font-style: normal; }
.f input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .f select, .f textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; min-height: var(--tap); background: var(--white); font-size: var(--text); }
.f input[type="file"] { width: 100%; min-height: var(--tap); padding: 8px 0; font-size: var(--text-s); }
.f textarea { min-height: 88px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-soft); }
.f .money-in { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.f.has-err input, .f.has-err select, .f.has-err textarea, .f.has-err .select2-selection { border-color: var(--ruby) !important; }
.hint { font-size: var(--text-s); color: var(--smoky); margin-top: 4px; }
.err { font-size: var(--text-s); color: var(--ruby); margin-top: 4px; }
.err:empty { display: none; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice { position: relative; flex: 1 1 140px; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; min-height: var(--tap); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--white); font-weight: 500; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.choice:has(input:checked), .choice.on { border-color: var(--gold); background: var(--gold-50); }
.choice:has(input:checked) .dot, .choice.on .dot { border: 5px solid var(--emerald); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.choice small { display: block; color: var(--smoky); font-size: var(--text-s); font-weight: 400; }

/* date field: shows 21 Sep 2026, keeps YYYY-MM-DD in a hidden native input */
.mx-datef { position: relative; display: flex; }
.mx-datef input.mx-date-text { padding-right: 46px !important; }
.mx-datef .mx-date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; min-height: 0 !important; }
.mx-datef .cal { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 42px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--smoky); border-radius: var(--radius-s); }
.mx-datef .cal:hover { color: var(--emerald); background: var(--emerald-50); }

/* Select2, made to look like our fields */
.select2-container { width: 100% !important; font-size: var(--text); }
.select2-container .select2-selection--single { height: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--white); }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 12px; padding-right: 34px; color: var(--emerald); }
.select2-container .select2-selection--single .select2-selection__arrow { height: 42px; right: 6px; }
.select2-container .select2-selection--single .select2-selection__placeholder { color: var(--smoky); }
.select2-container--open .select2-selection--single, .select2-container--focus .select2-selection--single { border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-soft); outline: none; }
.select2-dropdown { border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); overflow: hidden; z-index: 1100; }
.select2-search--dropdown { padding: 8px; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; min-height: 40px; font-size: var(--text); }
.select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--gold); }
.select2-results__option { padding: 10px 12px; min-height: 40px; font-size: var(--text); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--emerald-50); color: var(--emerald); }
.select2-container--default .select2-results__option--selected { background: var(--gold-50); }
.select2-results__option .opt-hint { display: block; color: var(--smoky); font-size: var(--text-s); }

/* long forms: numbered sections over the full width; the summary (counts, total) and Cancel / Save are one white
   bar that sticks to the bottom of the window (owner choice, 2 Nov 2026). Pop-ups use the same bar (.mf). */
.steps { display: block; }
.sum, .mf-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; color: var(--emerald); }
.steps > .sum { position: sticky; bottom: 0; z-index: 20; margin-top: 18px; padding: 12px 18px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--emerald);
  border-radius: var(--radius-m) var(--radius-m) 0 0; box-shadow: 0 -8px 24px rgba(14, 75, 59, .10); }
.sum .eyebrow, .mf-sum .eyebrow { margin: 0; color: var(--gold-600); }
.sum .row, .mf-sum .row { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; font-size: var(--text-s); color: var(--smoky); }
.sum .row span:last-child, .mf-sum .row span:last-child { color: var(--emerald); font-weight: 600; }
.sum [data-sum-projects] { display: contents; }   /* vendor bill: each project's share sits in the bar */
.sum .tot, .mf-sum .tot { display: inline-flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 700; }
.sum .tot span:first-child, .mf-sum .tot span:first-child { font-size: var(--text-s); font-weight: 600; color: var(--smoky); }
.sum .tot span:last-child, .mf-sum .tot span:last-child { font-variant-numeric: tabular-nums; }
.sum-actions { margin-left: auto; display: flex; gap: 10px; }
.steps > .sum > .btn { margin-left: auto; }   /* settings pages: Save only */
.phone-bar { display: none; }

/* ---------- pop-up ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.scrim.open { display: flex; }
.mx-modal { background: var(--white); border-radius: var(--radius-l); width: min(900px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-pop); }
.mx-modal.small { width: min(460px, 100%); }
.mh { background: var(--emerald); color: var(--on-emerald); padding: 12px 10px 12px 18px; display: flex; align-items: center; gap: 10px; flex: none; }
.mh b { flex: 1; font-size: 17px; }
.mh .x { background: none; border: 0; color: var(--on-emerald); width: var(--tap); height: var(--tap); cursor: pointer; display: grid; place-items: center; border-radius: var(--radius-s); }
.mh .x:hover { background: var(--on-emerald-hover); }
.mb { padding: 18px; overflow: auto; flex: 1; }
.mf { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); justify-content: flex-end; flex: none; background: var(--white); }
.mf b { flex: 1; font-size: 18px; font-variant-numeric: tabular-nums; }
.mx-modal.has-sum .mf { border-top: 3px solid var(--emerald); }
.mf-sum { flex: 1; min-width: 0; }
body.mx-noscroll { overflow: hidden; }

/* confirm box */
.mx-confirm .mb p { margin: 0; }
.mx-confirm .mh.danger { background: var(--ruby); }

/* ---------- messages ---------- */
.mx-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.mx-toast { background: var(--emerald); color: var(--on-emerald); border-radius: var(--radius-m); padding: 12px 14px; box-shadow: var(--shadow-pop); display: flex; gap: 10px; align-items: flex-start; font-size: var(--text); border-left: 4px solid var(--jade); }
.mx-toast.error { border-left-color: var(--ruby); }
.mx-toast.info { border-left-color: var(--gold); }
.mx-toast span { flex: 1; }
.mx-toast button { background: none; border: 0; color: var(--on-emerald); cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; }
.alert { border-radius: var(--radius-m); padding: 10px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-s); margin-bottom: 14px; border: 1px solid; }
.alert .ic { width: 18px; height: 18px; margin-top: 1px; }
.alert span { flex: 1; }
.alert.error { background: var(--ruby-50); border-color: var(--ruby); color: var(--ruby); }
.alert.ok { background: var(--jade-50); border-color: var(--jade); color: var(--jade); }
.alert.info { background: var(--gold-50); border-color: var(--gold); color: var(--emerald); }
.alert.pending { background: var(--amethyst-50); border-color: var(--amethyst); color: var(--amethyst); }

/* ---------- short lists (sessions, roles, support history): same look as the table kit, no paging ---------- */
.simple { width: 100%; border-collapse: separate; border-spacing: 0; }
.simple th { background: var(--emerald-50); color: var(--emerald); text-align: left; font-size: var(--text-s); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.simple td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.simple tr:last-child td { border-bottom: 0; }
.simple th.r, .simple td.r { text-align: right; }
.simple-wrap { overflow-x: auto; }
/* Short lists that become cards on phones: each cell shows its column name (data-label). */
@media (max-width: 640px) {
  .simple.cards thead { display: none; }
  .simple.cards, .simple.cards tbody, .simple.cards tr, .simple.cards td { display: block; width: 100%; }
  .simple.cards tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .simple.cards tr:last-child { border-bottom: 0; }
  .simple.cards td { border: 0; padding: 4px 14px; }
  .simple.cards td[data-label]::before { content: attr(data-label); display: block; color: var(--smoky); font-size: var(--text-s); }
  .simple.cards td.r { text-align: left; }
}
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-head h2 { font-size: 17px; font-weight: 600; flex: 1; }
.card-empty { padding: 28px 18px; color: var(--smoky); text-align: center; }
.card-line { padding: 12px 18px; color: var(--smoky); font-size: var(--text-s); }
/* The Print link inside a list row (portal receipts, My pay): a full-size tap target on phones (S25). */
.ref a[data-pdf] { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; }

/* help text (User manual, Software Guide) and Ask Mythos answers */
.md { line-height: 1.6; }
.md h2 { font-size: 20px; margin: 0 0 12px; }
.md h3 { font-size: 17px; margin: 20px 0 8px; }
.md h4 { font-size: var(--text); margin: 16px 0 6px; }
.md p, .md .md-list { margin: 0 0 10px; }
.md .md-list { padding-left: 22px; }
.md .md-list li { margin: 4px 0; }
.md code { background: var(--pearl); border-radius: 4px; padding: 1px 5px; font-size: var(--text-s); overflow-wrap: anywhere; }
.md .simple-wrap { margin: 0 0 12px; }
.guide-sec + .guide-sec { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.guide-sec h3 { margin-top: 0; }
.ask-answer { white-space: pre-line; }
.manual { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.manual-nav nav { display: flex; flex-direction: column; margin-top: 12px; }
.manual-nav nav a { padding: 10px 12px; border-radius: var(--radius-s); text-decoration: none; min-height: var(--tap); display: flex; align-items: center; }
.manual-nav nav a.on { background: var(--emerald); color: var(--on-emerald); }
.manual-search input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; min-height: var(--tap); font-size: var(--text); }
.manual-lang { display: flex; gap: 8px; margin-bottom: 12px; }
.manual-lang .btn { flex: 1; justify-content: center; }
/* Urdu help pages (docs/help/ur): right to left, a Nastaliq font from the device, more line height for its tall letters. */
.urdu, .urdu-label { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", var(--font); }
.urdu { font-size: 17px; line-height: 2.1; text-align: right; }
.urdu h2, .urdu h3, .urdu h4 { line-height: 2; }
.urdu .md-list { padding-left: 0; padding-right: 22px; }
.urdu code, .urdu b { unicode-bidi: isolate; }
.urdu code { direction: ltr; display: inline-block; }
.urdu .simple th, .urdu .simple td { text-align: right; white-space: normal; }
@media (max-width: 860px) {
  .manual { grid-template-columns: minmax(0, 1fr); }
  .manual-nav nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .manual-nav nav a { padding: 8px 10px; border: 1px solid var(--line); }
}
.card + .steps, .card + .mx-table { margin-top: 18px; }
.check-line .desc { margin-top: 2px; }
.check-line input { flex: 0 0 auto; }
.stack > * + * { margin-top: 18px; }

/* details (definition list) and record history */
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.dl dt { color: var(--smoky); font-size: var(--text-s); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.history { list-style: none; margin: 0; padding: 0; font-size: var(--text-s); color: var(--smoky); }
.history li { padding: 4px 0; }
.history b { color: var(--emerald); font-weight: 600; }
.history .desc { display: block; }
.card-sub { font-size: var(--text-s); font-weight: 600; color: var(--emerald); margin: 14px 0 4px; }

.sec-h .row-remove { margin-left: auto; }
.acts-below { margin-top: 14px; }
.card-head-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.card-head-row .card-title { margin: 0; flex: 1; }

/* approval bar on a record page (pending entry, pending correction) */
.appr-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.appr-bar .alert { flex: 1 1 260px; margin: 0; }
.appr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.chg-table td:nth-child(2) { color: var(--smoky); }
@media (max-width: 640px) { .appr-acts, .appr-acts .btn { width: 100%; } }

/* software access panel */
.access-head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.access-head .sub { margin-top: 4px; }
.access-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.access-sub { font-size: var(--text-s); text-transform: uppercase; letter-spacing: .08em; color: var(--smoky); margin: 16px 0 8px; font-weight: 600; }
.role-list { list-style: none; margin: 0 0 12px; padding: 0; }
.role-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.check-line { display: flex !important; gap: 10px; align-items: center; min-height: var(--tap); cursor: pointer; font-size: var(--text); margin-top: 10px; }
.check-line input { width: 20px; height: 20px; accent-color: var(--emerald); }
.check-line[hidden] { display: none !important; }
.grid2.consult { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ---------- Project vendors balance sheet (modules/reports/project-sheet.php) ---------- */
.ps-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 14px 16px; margin-bottom: 14px; border-top: 3px solid var(--gold); }
.ps-filters .err:empty { display: none; }
.ps-f-err { grid-column: 1 / -1; margin: 0; }
.ps-f-go .btn { min-height: var(--tap); }
.ps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.ps-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); }
.ps-switch a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; text-decoration: none; color: var(--emerald); font-weight: 600; font-size: var(--text-s); }
.ps-switch a.on { background: var(--gold); }
.ps-scope { margin: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ps-scope b { color: var(--emerald); }
.ps-scope span { color: var(--smoky); font-size: var(--text-s); }
.ps-pdf { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ps-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ps-tile { position: relative; padding: 14px 16px 14px 20px; border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.ps-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tc, var(--emerald)); }
.ps-tile span { display: block; font-size: var(--text-s); color: var(--smoky); text-transform: uppercase; letter-spacing: .04em; }
.ps-tile b { display: block; margin-top: 4px; font-size: 24px; font-variant-numeric: tabular-nums; color: var(--tc, var(--emerald)); }
.ps-tile.t-bill { --tc: var(--gold-600); background: var(--gold-50); }
.ps-tile.t-paid { --tc: var(--jade); background: var(--jade-50); }
.ps-tile.t-due { --tc: var(--ruby); background: var(--ruby-50); }
.ps-tile.t-clear { --tc: var(--jade); background: var(--jade-50); }
.ps-tile.t-owed { --tc: var(--amethyst); background: var(--amethyst-50); }
.ps-party { margin-bottom: 14px; overflow: hidden; }
.ps-party-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--emerald); color: var(--white); }
.ps-party-h h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--white); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-no { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--gold); color: var(--emerald); display: grid; place-items: center; font-weight: 700; font-size: var(--text-s); }
.ps-kind { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--text-s); font-weight: 600; background: var(--emerald-50); color: var(--emerald); white-space: nowrap; }
.ps-party-h .ps-kind { background: rgba(255, 255, 255, .12); color: var(--gold); }
.ps-kind.k-contractor { color: var(--amethyst); background: var(--amethyst-50); }
.ps-kind.k-misc { color: var(--smoky-700); background: var(--pearl); }
.ps-bal { white-space: nowrap; font-size: var(--text-s); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.ps-bal b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.ps-bal.b-due { background: var(--ruby); }
.ps-bal.b-clear { background: var(--jade); }
.ps-bal.b-owed { background: var(--amethyst); }
.ps-table .c { text-align: center; width: 52px; }
.ps-table .r { text-align: right; }
.ps-sn { color: var(--smoky); }
.ps-open td { color: var(--smoky); font-style: italic; }
.ps-num { font-variant-numeric: tabular-nums; color: var(--emerald); }
.ps-num.zero { color: var(--smoky); }
.ps-num.due { color: var(--ruby); font-weight: 700; }
.ps-num.owed { color: var(--amethyst); font-weight: 700; }
.ps-num.clear { color: var(--jade); }
.ps-table tfoot td { font-weight: 700; color: var(--smoky); text-transform: uppercase; font-size: var(--text-s); padding: 10px 14px; text-align: right; }
.ps-sub { display: inline-block; min-width: 92px; padding: 5px 10px; border-radius: var(--radius-s); font-variant-numeric: tabular-nums; text-align: right; font-size: var(--text); text-transform: none; }
.ps-sub.s-bill { background: var(--gold-50); color: var(--gold-600); }
.ps-sub.s-paid { background: var(--jade-50); color: var(--jade); }
.ps-sub.s-due { background: var(--ruby); color: var(--white); }
.ps-sub.s-clear { background: var(--jade); color: var(--white); }
.ps-sub.s-owed { background: var(--amethyst); color: var(--white); }
.ps-kind.k-salary { color: var(--gold-600); background: var(--gold-50); }
.cs-summary { padding: 18px 18px 16px; margin-bottom: 14px; border-top: 3px solid var(--gold); }
.cs-summary h2 { margin: 0 0 12px; text-align: center; font-size: 18px; color: var(--emerald); }
.cs-sum { width: 100%; border-collapse: collapse; }
.cs-sum td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--emerald); }
.cs-sum td.r { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-sum .cs-sr { width: 44px; color: var(--smoky); text-align: center; }
.cs-sum tr:nth-child(even) td { background: var(--pearl); }
.cs-sum .cs-total td { background: var(--gold-50); font-weight: 700; }
.cs-sum .cs-total td.r { color: var(--gold-600); }
.cs-sum .cs-paid td.r { color: var(--jade); }
.cs-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 16px; border-radius: var(--radius-m); color: var(--white); font-weight: 600; }
.cs-balance b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cs-balance.b-due { background: var(--ruby); }
.cs-balance.b-clear { background: var(--jade); }
.cs-balance.b-owed { background: var(--amethyst); }
.empty-card { padding: 28px 16px; text-align: center; color: var(--smoky); }
.empty-card p { margin: 0; }
@media (max-width: 760px) {
  .ps-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ps-f-project, .ps-f-go { grid-column: 1 / -1; }
  .ps-f-go .btn { width: 100%; }
  .ps-tiles { grid-template-columns: minmax(0, 1fr); }
  .ps-pdf { margin-left: 0; width: 100%; }
  .ps-pdf .btn { flex: 1; }
  .ps-party-h { flex-wrap: wrap; }
  .ps-party-h .ps-bal { width: 100%; text-align: center; }
  .ps-table tfoot td { display: block; text-align: right; }
  .ps-table tfoot td[colspan] { display: none; }
}
.link-box { display: flex; gap: 8px; margin-top: 10px; }
.link-box input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; min-height: var(--tap); font-size: var(--text-s); background: var(--pearl); }

/* role editor: modules x actions */
.role-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.role-grid th { background: var(--emerald-50); font-size: var(--text-s); font-weight: 600; padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.role-grid th:first-child, .role-grid td:first-child { text-align: left; padding-left: 14px; }
.role-grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.role-grid label { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); cursor: pointer; border-radius: var(--radius-s); }
.role-grid label:hover { background: var(--emerald-50); }
.role-grid input { width: 20px; height: 20px; accent-color: var(--emerald); }
.role-grid .rowall { font-size: var(--text-s); }
.grants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.grants label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); cursor: pointer; min-height: var(--tap); }
.grants label:has(input:checked) { border-color: var(--gold); background: var(--gold-50); }
.grants input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--emerald); flex: none; }
.grants small { display: block; color: var(--smoky); font-size: var(--text-s); }
.grants input:disabled + span { opacity: .7; }

/* Select2, several values */
.select2-container .select2-selection--multiple { min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 4px 6px; }
.select2-container--focus .select2-selection--multiple { border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-soft); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--gold-50); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 10px 2px 24px; font-size: var(--text-s); margin: 3px 4px 3px 0; }
.select2-container--default .select2-search--inline .select2-search__field { font-size: var(--text); min-height: 32px; margin: 0; }

/* ---------- dashboard ---------- */
.attn { list-style: none; margin: 0; padding: 0; }
.attn li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.attn li:last-child { border-bottom: 0; }
.attn .empty-line { color: var(--smoky); padding: 18px 0; }
.chart-box { position: relative; height: 280px; margin-top: 12px; }

/* ---------- dashboard: site command centre (owner choice, 2 Nov 2026) ---------- */
/* hero: emerald blueprint grid, a jade glow, a gold caution stripe along the bottom */
.dash-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px;
  padding: 26px 28px 32px; margin-bottom: 18px; border-radius: var(--radius-l); color: var(--on-emerald); box-shadow: var(--shadow-pop);
  background:
    linear-gradient(var(--grid-fine) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    radial-gradient(110% 140% at 100% 0%, var(--jade) 0%, transparent 55%),
    linear-gradient(135deg, var(--emerald) 0%, var(--emerald-900) 100%); }
.dash-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, var(--emerald-900) 14px 28px); }
.dash-hero .eyebrow { color: var(--gold); }
.dash-hero h1 { margin: 6px 0 6px; font-size: 30px; line-height: 1.15; color: var(--on-emerald); }
.dash-hero .live { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--on-emerald-soft); font-size: var(--text-s); }
.dash-hero .live i { width: 9px; height: 9px; border-radius: 50%; background: var(--jade-300); box-shadow: 0 0 0 0 var(--jade-300); animation: dash-pulse 2.4s ease-out infinite; }
@keyframes dash-pulse { 0% { box-shadow: 0 0 0 0 rgba(127, 209, 181, .7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(127, 209, 181, 0); } }
.dash-hero .chips { margin-top: 10px; }
.dash-hero .chip { background: var(--on-emerald-hover); }
.dash-today { padding: 12px 16px; border: 1px solid var(--on-emerald-line); border-radius: var(--radius-m); background: var(--on-emerald-hover); backdrop-filter: blur(2px); }
.dash-today .dt-l { font-size: var(--text-s); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.dash-today .dt-row { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.dash-today .dt-row span { display: block; font-size: var(--text-s); color: var(--on-emerald-soft); }
.dash-today .money { font-size: 20px; font-weight: 800; }
.dash-today .money.in { color: var(--jade-300); }
.dash-today .money.out { color: var(--ruby-300); }
.dash-today .money.zero { color: var(--on-emerald-soft); }

/* tiles: one colour each, gradient, icon in a glass square */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.tile { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic l" "v v" "h h"; align-items: center; gap: 8px 10px;
  min-height: 128px; padding: 16px 18px; border-radius: var(--radius-l); color: var(--on-emerald); text-decoration: none; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.tile::after { content: ""; position: absolute; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%; border: 16px solid var(--grid-major); pointer-events: none; }
a.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.tile-ic { grid-area: ic; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--grid-major); }
.tile-l { grid-area: l; font-size: var(--text-s); font-weight: 600; }
.tile-v { grid-area: v; font-size: 25px; font-weight: 800; line-height: 1.1; }
.tile-v .money, .tile-v .money.in, .tile-v .money.out, .tile-v .money.zero { color: inherit; font-weight: 800; }
.tile-h { grid-area: h; font-size: var(--text-s); opacity: .85; }
.t-jade { background: linear-gradient(135deg, var(--jade), var(--emerald)); }
.t-emerald { background: linear-gradient(135deg, var(--emerald), var(--emerald-900)); }
.t-ruby { background: linear-gradient(135deg, var(--ruby), var(--ruby-700)); }
.t-amethyst { background: linear-gradient(135deg, var(--amethyst), var(--amethyst-700)); }
.t-smoky { background: linear-gradient(135deg, var(--smoky), var(--smoky-700)); }
.t-gold { background: linear-gradient(135deg, var(--gold), var(--gold-600)); color: var(--emerald); }
.t-gold-deep { background: linear-gradient(135deg, var(--gold-50), var(--gold-200)); color: var(--emerald); border: 1px solid var(--gold-200); }
.t-emerald-soft { background: linear-gradient(135deg, var(--emerald-50), var(--emerald-100)); color: var(--emerald); border: 1px solid var(--emerald-100); }
.t-gold .tile-ic, .t-gold-deep .tile-ic, .t-emerald-soft .tile-ic { background: rgba(14, 75, 59, .10); }
.t-gold::after, .t-gold-deep::after, .t-emerald-soft::after { border-color: rgba(14, 75, 59, .06); }

/* section heads */
.dash-block { margin-bottom: 22px; }
.block-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.block-h h2 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.block-h h2::before { content: ""; width: 18px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--gold) 0 4px, var(--emerald) 4px 8px); }
.block-h a { color: var(--smoky); font-size: var(--text-s); }
.block-h a:hover { color: var(--emerald); }

/* project cards: gradient top edge, two progress rings, money, material on site */
.projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.proj { position: relative; overflow: hidden; display: block; padding: 18px 18px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-card); color: var(--emerald); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.proj::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--gold), var(--jade), var(--emerald)); }
.proj:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.proj-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.proj-h b { flex: 1 1 auto; font-size: 17px; }
.proj .tag { font-size: var(--text-s); padding: 1px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.tag.t-man { background: var(--emerald-50); color: var(--emerald); }
.tag.t-dir { background: var(--gold-50); color: var(--gold-600); }
.tag.t-closed { background: var(--ruby-50); color: var(--ruby); }
.proj-rings { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 14px 0 12px; }
.pr { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pr small { font-size: var(--text-s); font-weight: 400; color: var(--smoky); }
.pr em { font-style: normal; color: var(--ruby); }
.ring { --p: 0; --rc: var(--gold); position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--emerald-50) 0); }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--white); }
.ring b { position: relative; font-size: var(--text-s); font-weight: 800; }
.r-gold { --rc: var(--gold); } .r-jade { --rc: var(--jade); } .r-none { --rc: var(--line); }
.proj-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.proj-m dt { font-size: var(--text-s); color: var(--smoky); }
.proj-m dd { margin: 2px 0 0; font-weight: 700; }
.proj-m .money { font-size: 15px; }
.proj-s { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.proj-s span { padding: 3px 10px; border-radius: 999px; background: var(--pearl); border: 1px solid var(--line); font-size: var(--text-s); color: var(--smoky); }
.proj-s b { color: var(--emerald); }

/* two-column rows: charts, today's entries, needs attention */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.dash-grid > :only-child { grid-column: 1 / -1; }
.dash-grid > .card { position: relative; overflow: hidden; }
.dash-grid > .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--emerald), var(--jade), var(--gold)); }
.dash-grid > .attn-card::before { left: 0; right: auto; top: 0; bottom: 0; width: 8px; height: auto; background: repeating-linear-gradient(-45deg, var(--gold) 0 10px, var(--emerald) 10px 20px); }
.attn-card { padding-left: 28px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li > a, .feed li > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--emerald); text-decoration: none; }
.feed li:last-child > a, .feed li:last-child > div { border-bottom: 0; }
.feed li > a:hover { background: var(--row-hover); }
.feed .grow { flex: 1; min-width: 0; }
.feed .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .grow small { display: block; font-size: var(--text-s); color: var(--smoky); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .k { flex: none; min-width: 74px; text-align: center; padding: 2px 10px; border-radius: 999px; font-size: var(--text-s); font-weight: 600; }
.k-bill { background: var(--amethyst-50); color: var(--amethyst); }
.k-payment { background: var(--ruby-50); color: var(--ruby); }
.k-receipt { background: var(--jade-50); color: var(--jade); }

/* site stock: one card per store, a bar per item against the store's largest */
.stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.store { padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.store-h { display: block; margin-bottom: 8px; color: var(--emerald); text-decoration: none; }
.store-h small { display: block; color: var(--smoky); font-size: var(--text-s); }
.si { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; }
.si-n { font-size: var(--text-s); }
.si-q { font-size: var(--text-s); font-weight: 700; font-variant-numeric: tabular-nums; }
.si-bar { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--emerald-50); overflow: hidden; }
.si-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--jade), var(--emerald)); }
.si.tool .si-bar i { background: linear-gradient(90deg, var(--amethyst), var(--amethyst-700)); }
.si.out .si-q { color: var(--ruby); }
@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-hero .live i { animation: none; }
  .tile, .proj { transition: none; }
}
.row-acts-inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.verify-page { background: var(--pearl); min-height: 100vh; }
.verify-box { max-width: 520px; margin: 0 auto; padding: 40px 16px; }
/* PDF viewer pop-up (S21): the document inside Mythos, full screen on phones. */
.pdf-scrim .mx-modal.pdf { width: min(960px, 100%); height: min(92vh, 1200px); display: flex; flex-direction: column; }
.pdf-scrim .mx-modal.pdf .mb { flex: 1; padding: 0; display: block; }
.pdf-scrim iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--pearl); }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: var(--gap-phone);
  background: linear-gradient(var(--grid-fine) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    radial-gradient(90% 90% at 0% 0%, var(--jade) 0%, transparent 60%), linear-gradient(160deg, var(--emerald), var(--emerald-900)); }
  border-radius: 999px; background: var(--white); color: var(--emerald); text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.login-card .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.login-card .brand img { border-radius: 8px; }
.login-card { width: min(420px, 100%); padding: 28px; }
.login-card .brand { color: var(--emerald); padding: 0 0 18px; }
.login-card h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.login-card .sub { margin-bottom: 20px; }
.login-card .f { margin-bottom: 14px; }
.login-card .btn.gold { width: 100%; margin-top: 6px; }
.pw { position: relative; }
.pw input { padding-right: 52px !important; }
.pw .show { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 46px; border: 0; background: none; cursor: pointer; color: var(--smoky); display: grid; place-items: center; border-radius: var(--radius-s); }
.login-foot { margin: 18px 0 0; text-align: center; color: var(--smoky); font-size: var(--text-s); }

.section-title { margin: 28px 0 10px; font-size: var(--text-s); letter-spacing: .08em; color: var(--smoky); text-transform: uppercase; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phone shell (sidebar becomes a drawer) ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 1001; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .side.open { transform: none; visibility: visible; box-shadow: var(--shadow-pop); }
  .side a.nav, .side .side-foot a.nav, .side-find input { min-height: var(--tap); }
  .side-head .logo, .side-toggle { display: none; }
  .side-head .side-close { position: static; flex: none; }
  .side-find kbd { display: none; }
  .side-close { display: grid; position: absolute; right: 8px; top: 8px; width: var(--tap); height: var(--tap); place-items: center; background: none; border: 0; color: var(--on-emerald); border-radius: var(--radius-s); cursor: pointer; }
  .side-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 1000; display: none; }
  .side-scrim.open { display: block; }
  /* phone top bar: menu, company, bell, help, user; then Session · Project on its own row */
  .top { padding: 8px 10px; gap: 6px; flex-wrap: wrap; row-gap: 6px; }
  .menu-btn { display: grid; }
  .top .co span { display: none; }
  /* phone: menu, company, then the tools; the Session · Project pill takes its own row */
  .app-top .co { flex: 1 1 auto; max-width: none; }
  .ctx { order: 10; flex: 1 1 100%; margin-left: 0; }
  .ctx-pill { width: 100%; justify-content: center; }
  .ctx .mx-menu { left: 0; right: 0; }
  .top-tools { margin-left: 0; }
  .top-new { width: 42px; padding: 0; margin-right: 2px; }
  .top-new span, .calc-dd, .help-dd { display: none; }
  .idle-chip { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 50; }
  .user-name { display: none; }   /* portal and Control Panel top bars */
  /* footer: one item per line, left side (the round main button sits bottom right) */
  main:has(+ .app-foot) { padding-bottom: 24px; }
  .app-foot { flex-direction: column; align-items: flex-start; padding: 12px var(--gap-phone) 84px; }
  .app-foot .foot-links { margin-left: 0; }
  .linkish { min-height: var(--tap); }
  dl.keys > div { flex-direction: column; gap: 4px; }
  dl.keys dt { flex: none; }
  main { padding: 14px var(--gap-phone) 96px; }
  .head .main-btn { position: fixed; right: 16px; bottom: 16px; border-radius: 999px; z-index: 50; box-shadow: var(--shadow-pop); min-height: 52px; padding: 0 20px; }
  .bar .f-wrap { display: none; }
  .filters-btn { display: inline-flex; }
  .search { width: 100%; order: 3; }
  .bar .grow { display: none; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 20px; }
  .hero h2 { font-size: 24px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .grants { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .dl dd { margin-bottom: 10px; }
  /* dashboard on phones */
  .dash-hero { padding: 18px 16px 24px; }
  .dash-hero h1 { font-size: 24px; }
  .dh-side { width: 100%; }
  .tiles { gap: 10px; }
  .tile { min-height: 112px; padding: 14px; }
  .tile-v { font-size: 20px; }
  .projs, .stores { grid-template-columns: minmax(0, 1fr); }
  /* phones: the bar keeps only the total and Save */
  .steps > .sum { display: none; }
  .phone-bar { display: flex; align-items: center; gap: 10px; position: sticky; bottom: 0; background: var(--white); border-top: 3px solid var(--emerald); padding: 12px var(--gap-phone); margin: 0 calc(-1 * var(--gap-phone)); z-index: 20; }
  .phone-bar b { flex: 1; font-size: 18px; font-variant-numeric: tabular-nums; }
  .mf-sum .eyebrow, .mf-sum .row { display: none; }
  .scrim { padding: 0; }
  .scrim:not(.mx-confirm) .mx-modal { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .mx-pop { min-width: 0; width: calc(100vw - 32px); }
  .mx-toasts { left: 16px; right: 16px; bottom: 84px; max-width: none; }
  /* filters fold into one bottom sheet */
  .mx-sheet { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-height: 80vh; border-radius: var(--radius-l) var(--radius-l) 0 0 !important; z-index: 1001 !important; }
}

/* ---------- phone tables: rows become cards ---------- */
@media (max-width: 640px) {
  .mx-table .wrap, .mx-table .mx-topscroll { display: none !important; }
  .mx-table .mx-cards { display: block; }
  .strip { gap: 16px; }
  .foot { justify-content: center; }
  .foot .rows-sel { display: none; }
}

/* ---------- customer portal (portal/*): no sidebar, the same top bar ---------- */
.portal .top .logo { display: grid; text-decoration: none; }
.portal main { margin: 0 auto; }
.portal-nav { display: flex; gap: 8px; }
.portal .top .sel { text-decoration: none; }
@media (max-width: 640px) {
  .portal .top { flex-wrap: wrap; }
  .portal-nav { order: 3; width: 100%; }
  .portal-nav .sel { flex: 1; justify-content: center; }
}
.hint code { display: block; overflow-wrap: anywhere; }

/* ---------- vendor bill form (modules/vendors/bill-form.php): compact, one row per line ---------- */
.bill-form .sec { padding: 14px 16px; margin-bottom: 12px; }
.bill-top { border-top: 3px solid var(--gold); container-type: inline-size; }
.bill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bill-grid > .bill-project, .bill-grid > [data-bill-store-wrap], .bill-grid > .bill-direct, .bill-grid > .bill-pic { grid-column: span 2; }
.bill-grid .err:empty { display: none; }
.bill-project .select2-selection--single { border-color: var(--gold); background: var(--gold-50); }
.bill-project .select2-selection__rendered { font-weight: 600; color: var(--emerald); }
.bill-direct p { margin: 0; min-height: var(--tap); display: flex; align-items: center; padding: 0 12px; border-radius: var(--radius-s); background: var(--emerald-50); color: var(--emerald); font-size: var(--text-s); }
.bill-fixed { margin: 0; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; }
.pic-drop, .f > label.pic-drop { position: relative; display: flex; margin: 0; font-weight: 400; align-items: center; gap: 12px; min-height: var(--tap); padding: 4px 10px; border: 1.5px dashed var(--line); border-radius: var(--radius-s); background: var(--pearl); cursor: pointer; text-decoration: none; color: var(--emerald); }
.pic-drop:hover, .pic-drop:focus-within { border-color: var(--gold); background: var(--gold-50); }
.pic-drop.has-file { border-style: solid; border-color: var(--jade); background: var(--jade-50); }
.f .pic-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; min-height: 0; padding: 0; }
.pic-thumb { width: 34px; height: 34px; flex: none; border-radius: 6px; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--smoky); }
.pic-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pic-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pic-text b { font-size: var(--text-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pic-text small { font-size: var(--text-s); color: var(--smoky); }
.pic-clear { position: relative; z-index: 1; margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--white); color: var(--ruby); display: grid; place-items: center; cursor: pointer; }
@container (max-width: 760px) {
  .bill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 440px) {
  .bill-grid { grid-template-columns: minmax(0, 1fr); }
  .bill-grid > .f, .bill-grid > .bill-direct { grid-column: 1 / -1; }
}

/* the lines: a header row, then one grid row per line; "Several projects" adds the project and store columns */
.bill-items { container-type: inline-size; padding-bottom: 12px; }
.bill-items-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.bill-items-h h4 { font-size: 16px; font-weight: 600; margin: 0; }
.bl-head, .bl-row { display: grid; gap: 8px; align-items: center; grid-template-columns: 30px minmax(0, 2.6fr) 76px 112px 140px 130px 92px; }
.bill-items.multi .bl-head, .bill-items.multi .bl-row { grid-template-columns: 30px minmax(0, 2fr) 70px minmax(0, 1.3fr) minmax(0, 1.2fr) 96px 120px 124px 92px; }
.bl-c-project, .bl-c-store { display: none; }
.bill-items.multi .bl-c-project, .bill-items.multi .bl-c-store { display: block; }
.bl-head { padding: 8px 6px; border-radius: var(--radius-s); background: var(--emerald-50); color: var(--smoky-700); font-size: var(--text-s); font-weight: 600; }
.bl-head .r { text-align: right; }
.bl-row { position: relative; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.bl-row:hover, .bl-row:focus-within { background: var(--row-hover); }
.bl-row .f { margin: 0; }
.bl-row .err:empty { display: none; }
.bl-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-no { width: 26px; height: 26px; border-radius: 50%; background: var(--emerald); color: var(--white); display: grid; place-items: center; font-size: var(--text-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-pick { display: flex; gap: 6px; align-items: center; }
.bl-pick .select2-container { flex: 1; min-width: 0; }
.bl-plus { flex: none; width: var(--tap); height: var(--tap); border-radius: var(--radius-s); border: 1px solid var(--gold); background: var(--gold-50); color: var(--emerald); display: grid; place-items: center; cursor: pointer; }
.bl-plus:hover { background: var(--gold); }
.unit-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 52px; max-width: 100%; padding: 0 10px; border-radius: 999px; background: var(--emerald-50); color: var(--emerald); font-size: var(--text-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-pill.none { background: transparent; color: var(--smoky); font-weight: 400; }
.bl-row .bl-qtyin { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bl-amt b { font-weight: 700; }
.bl-directtxt { display: inline-flex; min-height: var(--tap); align-items: center; color: var(--smoky); font-size: var(--text-s); }
.bl-amt { text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--emerald); white-space: nowrap; }
.bl-amt .zero { color: var(--smoky); font-weight: 400; }
.bl-acts { display: flex; justify-content: flex-end; gap: 2px; }
.bl-icon { width: 40px; height: 40px; border: 0; background: none; border-radius: var(--radius-s); color: var(--smoky); display: grid; place-items: center; cursor: pointer; }
.bl-icon:hover { background: var(--white); color: var(--emerald); }
.bl-icon.del:hover { color: var(--ruby); background: var(--ruby-50); }
.bl-row .bl-note { grid-column: 2 / -2; }
.bl-add { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); margin-top: 10px; border: 1.5px dashed var(--gold); border-radius: var(--radius-s); background: var(--gold-50); color: var(--emerald); font-weight: 600; cursor: pointer; }
.bl-add:hover { background: var(--gold-200); }

/* narrow: each line becomes a small card ("Several projects" has more columns, so it folds earlier) */
@container (max-width: 700px) {
  .bill-items .bl-head { display: none; }
  .bill-items .bl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container (max-width: 1000px) {
  .bill-items.multi .bl-head { display: none; }
  .bill-items.multi .bl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bill-items.multi .bl-acts { grid-column: 2 / -1; }
}
@container (max-width: 700px) {
  .bill-items.multi .bl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bill-items.multi .bl-acts { grid-column: auto; }
}
@container (max-width: 700px) {
  .bill-items .bl-row { gap: 8px 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); }
  .bill-items .bl-row .bl-lbl { position: static; width: auto; height: auto; clip: auto; display: block; font-size: var(--text-s); font-weight: 600; margin-bottom: 4px; color: var(--smoky-700); }
  .bill-items .bl-row .bl-item, .bill-items .bl-row .bl-note { grid-column: 1 / -1; }
  .bill-items .bl-no { order: 0; }
  .bill-items .bl-acts { order: 1; }
  .bill-items .bl-item { order: 2; }
  .bill-items .bl-c-project { order: 3; }
  .bill-items .bl-c-store { order: 4; }
  .bill-items .bl-unit { order: 5; }
  .bill-items .bl-qty { order: 6; }
  .bill-items .bl-rate { order: 7; }
  .bill-items .bl-amt { order: 8; align-self: end; }
  .bill-items .bl-note { order: 9; }
  .bill-items .bl-amt b { font-size: 18px; }
}
@container (min-width: 701px) and (max-width: 1000px) {
  .bill-items.multi .bl-row { gap: 8px 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); }
  .bill-items.multi .bl-row .bl-lbl { position: static; width: auto; height: auto; clip: auto; display: block; font-size: var(--text-s); font-weight: 600; margin-bottom: 4px; color: var(--smoky-700); }
  .bill-items.multi .bl-row .bl-item, .bill-items.multi .bl-row .bl-note { grid-column: 1 / -1; }
  .bill-items.multi .bl-no { order: 0; }
  .bill-items.multi .bl-acts { order: 1; }
  .bill-items.multi .bl-item { order: 2; }
  .bill-items.multi .bl-c-project { order: 3; }
  .bill-items.multi .bl-c-store { order: 4; }
  .bill-items.multi .bl-unit { order: 5; }
  .bill-items.multi .bl-qty { order: 6; }
  .bill-items.multi .bl-rate { order: 7; }
  .bill-items.multi .bl-amt { order: 8; align-self: end; }
  .bill-items.multi .bl-note { order: 9; }
}