/* ============================================================
   DK UNITED ERP — Design System
   Light theme · RTL · Cairo (bundled locally, works offline)
   ============================================================ */


/* ---------- 1) Tokens ---------- */
/* --accent, --navy, --navy-deep and --canvas can be overridden from the settings screen. */
:root {
  --accent: #1264d7;
  --accent-soft: color-mix(in srgb, var(--accent) 8%, #fff);
  --accent-tint: color-mix(in srgb, var(--accent) 3.5%, transparent);

  --canvas: #eef6fb;
  --surface: #ffffff;
  --surface-soft: #f5f9fd;
  --table-head: #eaf2f9;
  --row-alt: #fbfcfe;
  --row-hover: #f1f7ff;
  --line: #dce7f1;
  --line-soft: #edf1f5;
  --input-line: #4e6782;
  --btn-line: #d4e1ee;

  --text: #132b46;
  --muted: #6d8095;

  --navy: #082f4d;
  --navy-deep: #061f36;
  --nav-text: #e4edf4;
  --nav-muted: #91a9bb;

  --green: #15946b;  --green-bg: #dcf7e9;  --green-text: #13845e;
  --amber: #ef9b18;  --amber-bg: #fff0d5;  --amber-text: #b7770b;
  --red: #d92b3c;    --red-bg: #ffe1e5;    --red-text: #c52d3d;

  --shadow-card: 0 3px 14px rgba(25, 69, 110, .06);
  --shadow-soft: 0 2px 10px rgba(22, 57, 92, .06);
  --shadow-menu: 0 12px 30px rgba(9, 47, 74, .18);
  --shadow-modal: 0 30px 100px rgba(0, 0, 0, .3);

  --font: 'Cairo Variable', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  color-scheme: light;
}

/* ---------- 2) Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; min-width: 320px; background: var(--canvas); }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 1.7;
  color: var(--text); background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: 13px; color: inherit; }
button { font-weight: 750; cursor: pointer; }
button:disabled { opacity: .58; cursor: not-allowed; }
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="color"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="image"]) {
  border: 2px solid var(--input-line);
  border-radius: 8px;
  background: #fff;
}
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="color"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="image"]):hover {
  border-color: #2f4d68;
}
h1, h2, h3, h4 { font-weight: 800; line-height: 1.45; margin: 0; }
small { font-size: 12px; line-height: 1.6; }
code { font-family: var(--font); font-size: 13px; font-weight: 750; direction: ltr; unicode-bidi: plaintext; }
svg { flex: 0 0 auto; width: 24px; height: 24px; }
a { color: var(--accent); }
[x-cloak] { display: none !important; }

:where(button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(input, select, textarea):focus-visible {
  outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

.ltr { direction: ltr; unicode-bidi: plaintext; }
.money { unicode-bidi: isolate; white-space: nowrap; }
.text-green { color: var(--green-text); }
.text-red { color: var(--red-text); }
.text-amber { color: var(--amber-text); }
.text-muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline-form { display: contents; }

/* ---------- 3) App shell ---------- */
.app-shell { display: flex; min-height: 100vh; background: var(--canvas); }

.sidebar {
  width: 286px; flex: 0 0 286px; height: 100vh; position: sticky; top: 0; z-index: 20;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff;
}
.brand-block { min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.10); }
.brand-block img, .brand-mark { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; background: #fff; padding: 2px; }
.brand-mark { display: grid; place-items: center; color: var(--navy); font-size: 18px; font-weight: 900; }
.brand-block strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: .5px; line-height: 1.3; }
.brand-block span { display: block; margin-top: 3px; color: #c3d2df; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-block > div { min-width: 0; }
.mobile-close { display: none; margin-inline-start: auto; border: 0; background: transparent; color: #fff; }

.user-card {
  margin: 14px 16px 8px; padding: 10px; display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.06);
  color: #fff; text-align: start; text-decoration: none;
}
.user-card:hover { background: rgba(255,255,255,.09); }
.avatar { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 12px; background: var(--role-color, var(--red)); color: #fff; font-weight: 800; }
.user-card strong { display: block; font-size: 13px; }
.user-card small { display: block; color: #c3d2df; font-size: 13px; }
.switch-hint { margin-inline-start: auto; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.07); font-size: 12px; }

.sidebar nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; overscroll-behavior: contain; }
.nav-section { margin-top: 4px; }
.nav-toggle {
  width: 100%; min-height: 34px; margin: 12px 0 4px; padding: 6px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border: 0; background: transparent; color: var(--nav-muted); font-size: 13px; font-weight: 900; letter-spacing: .2px;
}
.nav-toggle svg { width: 15px; height: 15px; transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
.nav-link {
  width: 100%; min-height: 42px; padding: 9px 14px; margin: 3px 0;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--nav-text);
  font-size: 13px; font-weight: 600; text-align: start; text-decoration: none;
}
.nav-link svg { width: 18px; height: 18px; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.active { background: var(--accent); color: #fff; box-shadow: inset -4px 0 #fff; scroll-margin-block: 48px; }

.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.10); }
.server-status { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #9fe2bd; font-size: 13px; }
.server-status svg { width: 15px; height: 15px; }
.session-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.session-actions form { display: contents; }
.session-actions button, .session-actions a {
  min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.05);
  color: #d8e5ef; font-size: 13px; text-decoration: none;
}
.session-actions button:hover { background: rgba(255,255,255,.1); color: #fff; }
.session-actions svg { width: 16px; height: 16px; }

.workspace { flex: 1; min-width: 0; background: var(--canvas); }

.topbar {
  position: sticky; top: 0; z-index: 10; min-height: 70px; padding: 10px 30px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; box-shadow: 0 1px 0 rgba(20,64,102,.08);
}
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfe; color: var(--text); }
.menu-button svg { width: 20px; height: 20px; }
.page-heading { min-width: 180px; }
.page-heading span { display: block; color: var(--muted); font-size: 13px; }
.page-heading h1 { margin-top: 2px; font-size: 20px; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.presence-switch { position: relative; }
.presence-toggle {
  height: 42px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 7px; background: #f8fbfe; color: var(--text);
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.presence-toggle svg { width: 16px; height: 16px; color: var(--muted); }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #19a85a; box-shadow: 0 0 0 3px rgba(25, 168, 90, .18); }
.presence-count { min-width: 1.2em; }
.presence-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 30;
  width: min(320px, calc(100vw - 24px)); padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; box-shadow: var(--shadow-card);
}
.presence-heading { margin: 8px 0 6px; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .02em; }
.presence-heading:first-child { margin-top: 0; }
.presence-hint { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.presence-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.presence-list li, .presence-list button {
  width: 100%; padding: 6px 8px; display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: start;
}
.presence-list .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; border-radius: 9px; }
.presence-list strong { display: block; font-size: 13px; }
.presence-list small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.presence-list button:hover { background: var(--surface-soft); }
.presence-list .is-empty { color: var(--muted); font-size: 12px; font-weight: 700; }
.online-users { display: flex; align-items: center; gap: 8px; }
.online-users .presence-dot { flex: 0 0 auto; }

.day-lock-banner {
  margin-bottom: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  border: 1px solid #f3c4a8; border-radius: 11px; background: #fff6ef; color: #9a3b12; font-size: 13px; font-weight: 750;
}
.day-lock-banner svg { width: 18px; height: 18px; flex: 0 0 auto; }
.day-lock-banner div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.day-lock-banner span { font-weight: 650; }
.global-search {
  width: min(300px, 28vw); height: 42px; padding: 0 12px;
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 7px; background: #f8fbfe; color: var(--muted);
}
.global-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.global-search svg { width: 18px; height: 18px; }
.global-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.global-search input:focus-visible { box-shadow: none !important; }
.global-search kbd { direction: ltr; padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 11px; font-family: var(--font); }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfe; color: var(--muted); position: relative; }
.icon-button svg { width: 18px; height: 18px; }

.breadcrumb-bar {
  min-height: 42px; padding: 9px 30px; display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.breadcrumb-back { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); text-decoration: none; }
.breadcrumb-back svg { width: 15px; height: 15px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs b { color: var(--accent); font-weight: 800; }
.breadcrumbs .current { color: var(--text); font-weight: 800; }
.breadcrumbs .context { color: var(--accent); }

.page { width: min(100%, 1540px); margin: 0 auto; padding: 28px 30px 44px; }

/* ---------- 4) Page intro + KPIs ---------- */
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.page-intro .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 12px; font-weight: 750; }
.page-intro .eyebrow svg { width: 18px; height: 18px; }
.page-intro h2 { margin: 4px 0 2px; font-size: 25px; font-weight: 850; letter-spacing: -.25px; }
.page-intro p { margin: 0; max-width: 720px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.8; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(128px, 1fr)); gap: 12px; width: min(100%, 760px); }
.kpis.five { grid-template-columns: repeat(5, minmax(110px, 1fr)); width: min(100%, 880px); }
.kpis.three { grid-template-columns: repeat(3, minmax(128px, 1fr)); width: min(100%, 600px); }
.kpis.two { grid-template-columns: repeat(2, minmax(160px, 1fr)); width: min(100%, 420px); }
.kpi { min-height: 82px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow-card); }
.kpi strong { display: block; font-size: 22px; font-weight: 850; }
.kpi span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 650; }
a.kpi-link { color: var(--text); text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.kpi-link:hover { border-color: var(--accent); }
a.kpi-link.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.voucher-default-note { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.voucher-default-note svg { width: 16px; height: 16px; flex: none; }
.kpi.warning strong { color: var(--amber); }
.kpi.money strong { color: var(--accent); }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--accent); }

.period-summary {
  display: grid; grid-template-columns: repeat(2, minmax(180px, 280px));
  gap: 12px; margin: 0 0 16px; width: min(100%, 600px);
}
.period-summary article {
  min-height: 82px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow-card);
}
.period-summary span { display: block; color: var(--muted); font-size: 13px; font-weight: 650; }
.period-summary strong { display: block; margin-top: 6px; font-size: 18px; font-weight: 850; line-height: 1.45; }

.date-field {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13px; font-weight: 750;
}
.date-field-control {
  position: relative; min-width: 150px; min-height: 38px;
  display: inline-flex; align-items: center; cursor: pointer;
  border: 2px solid var(--input-line); border-radius: 8px; background: #fff;
}
.date-field-display {
  flex: 1; padding: 0 10px; color: var(--text); font-weight: 750; font-size: 13px;
  pointer-events: none; white-space: nowrap;
}
.date-field-display:empty::before { content: attr(data-empty); color: var(--muted); font-weight: 650; }
.date-field-control input[type="date"] {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; min-width: 0; min-height: 0;
}
.date-field-control input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: auto; height: auto;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.date-field-control:focus-within { border-color: var(--accent); }
.field .date-field { display: block; width: 100%; color: inherit; font-size: inherit; font-weight: inherit; }
.field .date-field-control { width: 100%; height: 44px; min-height: 44px; }
.field .date-field-control:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field.has-error .date-field-control { border-color: #f4c3ca; background: #fffafb; }
.filter-strip .date-field-control input,
.toolbar .date-field-control input,
.inline-filter.date-field .date-field-control input,
.movement-day .date-field-control input,
.field .date-field-control input[type="date"] {
  min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none !important;
}
.movement-day .date-field-control { min-width: 160px; }

/* ---------- 5) Toolbar / filters / tabs ---------- */
.toolbar, .filter-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow-soft);
  overflow: visible; position: relative; z-index: 4;
}
.toolbar > .actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Report filters: a grid of labelled cells, then a row of actions — nothing squeezes into its neighbour. */
.toolbar.report-filters { display: block; padding: 12px; }
.report-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; align-items: end; }
.report-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.report-filter > span:first-child { white-space: nowrap; }
.report-filter select, .report-filter .date-field-control { width: 100%; min-width: 0; min-height: 40px; height: 40px; }
.report-filter select { padding: 0 10px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; color: var(--text); }
.report-filter-wide { grid-column: span 2; }
.report-filter small { font-weight: 650; }
.report-filter.is-muted select { opacity: .55; cursor: not-allowed; background: var(--surface-soft); }
.report-filter .search-field { width: 100%; min-width: 0; margin: 0; }
.report-filter .party-lookup { width: 100%; min-width: 0; overflow: visible; }
.report-filter .party-lookup .search-field { height: 40px; font-weight: 400; }
.report-filter .party-lookup .search-field input { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; }
/* Multi-select: a field-sized box that reads the picks in plain words (with a count when several); the list opens
   under it with its own search, so the box is never crowded and every filter in a row stays aligned. */
.multi-select { position: relative; width: 100%; min-width: 0; }
.multi-select-box {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 40px; padding: 0 10px;
  border: 2px solid var(--input-line); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer; text-align: start;
  font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.multi-select-box:hover { border-color: #2f4d68; }
.multi-select.is-open .multi-select-box, .multi-select-box:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); outline: 0; }
.multi-select.has-values .multi-select-box { border-color: color-mix(in srgb, var(--accent) 60%, var(--input-line)); background: color-mix(in srgb, var(--accent) 4%, #fff); }
.multi-select-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--text); }
.multi-select-summary.is-empty { color: var(--muted); font-weight: 700; }
.multi-select-count { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.multi-select-clear { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); }
.multi-select-clear:hover { background: var(--accent-soft); color: var(--accent); }
.multi-select-clear svg { width: 13px; height: 13px; }
.multi-select-caret { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.multi-select.is-open .multi-select-caret { transform: rotate(180deg); color: var(--accent); }
.multi-select.is-locked .multi-select-box { opacity: .55; cursor: not-allowed; background: var(--surface-soft); }

.multi-select-list {
  position: fixed; z-index: 1100; display: flex; flex-direction: column; max-height: min(360px, 70vh); overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}
.multi-select-search { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0; padding: 0 10px; height: 36px; border: 1.5px solid var(--input-line); border-radius: 8px; color: var(--muted); }
.multi-select-search:focus-within { border-color: var(--accent); }
.multi-select-search svg { flex: none; width: 15px; height: 15px; }
.multi-select-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; font-weight: 700; box-shadow: none; }
.multi-select-search input:focus-visible { box-shadow: none !important; }
.multi-select-search input::-webkit-search-cancel-button { display: none; }
.multi-select-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.multi-select-actions { display: inline-flex; gap: 2px; }
.multi-select-actions button { padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font-size: 12px; font-weight: 800; cursor: pointer; }
.multi-select-actions button:hover { background: var(--accent-soft); }
.multi-select-options { flex: 1 1 auto; overflow-y: auto; padding: 0 6px 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.multi-select-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: start; cursor: pointer; }
.multi-select-item.active { background: var(--surface-soft, #f4f7fb); }
.multi-select-item.is-picked { background: color-mix(in srgb, var(--accent) 7%, #fff); }
.multi-select-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 750; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.multi-select-item.is-picked .multi-select-label { color: var(--accent); font-weight: 800; }
.multi-select-check { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--input-line); border-radius: 5px; background: #fff; transition: background .12s ease, border-color .12s ease; }
.multi-select-check svg { width: 12px; height: 12px; opacity: 0; stroke-width: 3; }
.multi-select-item.is-picked .multi-select-check { border-color: var(--accent); background: var(--accent); color: #fff; }
.multi-select-item.is-picked .multi-select-check svg { opacity: 1; }
.multi-select-note { margin: 0; padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.multi-select-foot { display: flex; justify-content: flex-end; padding: 8px; border-top: 1px solid var(--line); }
.report-filter.is-muted .party-lookup .search-field { opacity: .55; cursor: not-allowed; background: var(--surface-soft); }
.report-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.report-filter-actions .export-buttons { margin-inline-start: auto; }
@media (max-width: 560px) { .report-filter-wide { grid-column: auto; } }
.search-field {
  margin-inline-start: auto; width: min(390px, 42vw); min-width: 240px; height: 40px; padding: 0 11px;
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--input-line); border-radius: 8px; background: #fff; color: var(--muted);
}
.search-field:hover { border-color: #2f4d68; }
.search-field:focus-within { border-color: var(--accent); }
.search-field svg { width: 16px; height: 16px; }
.search-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); box-shadow: none; border-radius: 0; }
.search-field input:focus-visible { box-shadow: none !important; }
.filter-strip select, .filter-strip input { min-width: 150px; min-height: 38px; padding: 0 10px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; }
.filter-strip label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 750; }
.inline-filter { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 750; }
.inline-filter select { min-height: 40px; padding: 0 10px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; }

.tabs { display: flex; margin: 12px 0 10px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; overflow-x: auto; }
.tabs a, .tabs button {
  min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-inline-start: 1px solid var(--line); border-bottom: 2px solid transparent;
  background: #fff; color: var(--muted); font-size: 13px; font-weight: 750; white-space: nowrap; text-decoration: none;
}
.tabs > :first-child { border-inline-start: 0; }
.tabs svg { width: 16px; height: 16px; }
.tabs b { font-weight: 850; }
.tabs .active { background: #eaf3ff; color: var(--accent); border-bottom-color: var(--accent); }
.tabs.solid .active { background: var(--accent); color: #fff; }

/* ---------- 6) Buttons ---------- */
.btn {
  min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--btn-line); border-radius: 6px; background: #fff; color: var(--text);
  font-size: 13px; font-weight: 750; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--btn-line)); }
.btn svg { width: 16px; height: 16px; }
.btn-soft { background: #eef4fb; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-danger-soft { color: var(--red); border-color: rgba(227,40,62,.2); background: rgba(227,40,62,.06); }
.btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 86%, #000); border-color: color-mix(in srgb, var(--red) 86%, #000); }
.btn-excel { background: #217346; border-color: #217346; color: #fff; font-weight: 800; }
.btn-excel:hover { background: #1a5c38; border-color: #1a5c38; }
.btn-pdf { background: #e02424; border-color: #e02424; color: #fff; font-weight: 800; }
.btn-pdf:hover { background: #c41b1b; border-color: #c41b1b; }
.btn-xs { min-height: 30px; padding: 0 9px; border-radius: 5px; border-color: #d5e3f1; background: var(--accent-soft); color: var(--accent); }
.btn-link { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--accent); font-weight: 800; text-decoration: none; }

/* ---------- 7) Table card ---------- */
.table-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.table-card-head {
  min-height: 48px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-soft); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.table-card-head strong { margin-inline-start: 8px; color: var(--text); }
.table-card-head .hint { display: inline-flex; align-items: center; gap: 6px; }
.table-card-head .hint svg { width: 15px; height: 15px; color: var(--accent); }
.table-wrap { overflow-x: auto; overflow-y: hidden; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
  height: 42px; padding: 0 12px; text-align: start; white-space: nowrap;
  background: var(--table-head); color: var(--text); font-size: 13px; font-weight: 800;
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 9px 12px; text-align: start; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; font-weight: 650;
  max-width: 260px; overflow-wrap: break-word;
}
bdi[dir="ltr"], .date-field-display, .data-table td .ltr, .data-table td .badge, .data-table td .pill { white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: var(--row-alt); }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr.selected-row > td { background: color-mix(in srgb, var(--accent) 8%, #fff); }
.data-table tr.is-archived > td { opacity: .6; }
.data-table tr.clickable { cursor: pointer; }
.data-table .col-index { width: 48px; text-align: center; }
.data-table .col-kind { white-space: nowrap; }
.data-table .col-num { text-align: center; }
.data-table .col-actions { width: 60px; text-align: center; white-space: nowrap; }
.data-table td.col-text { min-width: 200px; max-width: 320px; }
.expandable-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp-lines, 2); line-clamp: var(--clamp-lines, 2);
  overflow: hidden; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1.7;
  text-align: start; white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
.expandable-text:hover { color: var(--accent); }
.expandable-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.expandable-text.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
@media print { .expandable-text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } }
.amount-drill {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.amount-drill:hover { color: var(--accent); text-decoration-style: solid; }
@media print { .amount-drill { text-decoration: none; } }
.breakdown h4 { margin: 0 0 6px; }
.breakdown .hint { margin: 0 0 8px; }
.custody-breakdown { margin-top: 5px; font-size: 12px; }
.custody-breakdown summary { cursor: pointer; color: var(--accent); font-weight: 800; }
.custody-breakdown ul { margin: 6px 0 0; padding: 6px 8px; list-style: none; border-radius: 6px; background: var(--surface-soft); }
.custody-breakdown li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line-soft); }
.custody-breakdown li:last-child { border-bottom: 0; }
.custody-breakdown li small { display: block; color: var(--muted); }
.custody-breakdown li.muted { color: var(--muted); }
.custody-breakdown .money { white-space: nowrap; font-weight: 800; }
/* Summary chips, visible without opening: spent / returned / on the employee / extra. */
.custody-breakdown summary { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; list-style-position: inside; }
.custody-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 750; white-space: nowrap; background: var(--surface-soft); color: var(--text); }
.custody-chip b { font-weight: 850; }
.custody-chip small { color: var(--muted); }
.custody-chip.spent { background: #e8f1fd; color: #1255b3; }
.custody-chip.returned { background: #e6f6ee; color: #187a4a; }
.custody-chip.deducted { background: #fdf0e3; color: #a2530c; }
.custody-chip.extra { background: #f2ebfd; color: #6a3fb5; }
.custody-breakdown li[x-data] { cursor: pointer; }
.custody-breakdown li[x-data] small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.custody-breakdown li.is-open small { display: block; -webkit-line-clamp: unset; }
.custody-breakdown li.is-open { background: #fff; border-radius: 6px; padding-inline: 6px; }
.custody-breakdown .custody-line-text { min-width: 0; }
.custody-breakdown .custody-meta { display: block; color: var(--muted); font-size: 11.5px; }
.data-table td > strong, .data-table td > small { display: block; }
.data-table td > small { margin-top: 2px; color: var(--muted); }
.data-table code { padding: 4px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); white-space: nowrap; }
.data-table a.row-link { color: var(--text); text-decoration: none; }
.data-table a.row-link:hover { color: var(--accent); }
.data-table a.row-link svg { width: 16px; height: 16px; margin-inline-end: 6px; vertical-align: -3px; }
a.party-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.data-table a.party-link { text-decoration: none; }
.print-party a.party-link, .page-intro h2 a.party-link, .doc-meta a.party-link, .split-inv a.party-link { color: inherit; }
a.party-link:hover { color: var(--accent); }
.stock-low-value { color: #e24a4a; }
.qty-plus { color: var(--green-text); font-weight: 800; }
.qty-minus { color: var(--red-text); font-weight: 800; }

/* ---------- 8) Badges ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 26px; min-width: 62px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 750; line-height: 1.45; white-space: nowrap; vertical-align: middle;
  background: #eef3f8; color: var(--text);
}
.badge.square { border-radius: 5px; min-height: 25px; }
.badge.kind-customer, .badge.kind-both, .badge.status-active, .badge.stock-ok { background: var(--green-bg); color: var(--green-text); }
.badge.kind-supplier, .badge.stock-low, .badge.status-pending { background: var(--amber-bg); color: var(--amber-text); }
.badge.status-archived, .badge.stock-out, .badge.status-cancelled { background: var(--red-bg); color: var(--red-text); }
.badge.info { background: var(--accent-soft); color: var(--accent); }
.badge.role { background: color-mix(in srgb, var(--role-color, var(--accent)) 12%, #fff); color: color-mix(in srgb, var(--role-color, var(--accent)) 85%, #000); }

/* ---------- 9) Row menu (three dots) ---------- */
.row-menu-wrap { position: relative; display: inline-flex; }
.row-menu-trigger { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--accent); }
.row-menu-trigger svg { width: 17px; height: 17px; }
.row-menu-trigger[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.row-menu {
  position: fixed; z-index: 5000; min-width: 196px; max-width: min(320px, calc(100vw - 16px));
  padding: 6px; display: grid; gap: 3px; overflow-x: hidden; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-menu);
}
.row-menu form { display: contents; }
.row-menu button, .row-menu a {
  min-height: 34px; padding: 0 9px; display: flex; align-items: center; gap: 6px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text);
  font-size: 13px; font-weight: 750; text-align: start; text-decoration: none; width: 100%;
}
.row-menu svg { width: 15px; height: 15px; color: var(--muted); }
.row-menu button:hover, .row-menu a:hover { background: #eef6fb; }
.row-menu .danger, .row-menu .danger svg { color: var(--red); }
.row-menu button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 10) Pagination & empty ---------- */
.pagination {
  min-height: 50px; padding: 9px 12px; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--line); background: #fff;
}
.pagination .info { margin-inline-end: auto; color: var(--muted); font-size: 13px; }
.pagination.centered { justify-content: center; gap: 12px; }
.pagination.centered .info { margin: 0; }
.pagination a, .pagination span.disabled {
  min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--accent);
  font-weight: 750; text-decoration: none;
}
.pagination.centered a, .pagination.centered span.disabled { border-color: #d5e3f1; border-radius: 5px; background: var(--accent-soft); }
.pagination span.disabled { opacity: .45; cursor: default; }

.empty-state { min-height: 200px; padding: 30px 16px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; color: var(--muted); }
.empty-state svg { width: 45px; height: 45px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--accent); }
.empty-state strong { color: var(--text); font-size: 13px; }
.empty-state span { font-size: 13px; }
.empty-state.compact { min-height: 120px; }

/* ---------- 11) Modal ---------- */
.modal-layer {
  position: fixed; inset: 0; z-index: 1000; padding: 16px;
  display: grid; place-items: center;
  background: rgba(4,16,29,.68); backdrop-filter: blur(5px);
}
.modal {
  width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px;
  border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: var(--shadow-modal);
}
.modal .party-lookup { z-index: 8; overflow: visible; }
.modal.w-940 { width: min(940px, 100%); }
.modal.w-1040 { width: min(1040px, 100%); }
.modal.w-560 { width: min(560px, 100%); }
.modal.w-460 { width: min(460px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.modal-head .eyebrow { color: var(--accent); font-size: 13px; font-weight: 800; }
.modal-head h3 { margin-top: 4px; font-size: 20px; line-height: 1.55; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.modal-close { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.modal-close svg { width: 18px; height: 18px; }
.modal-actions {
  margin-top: 18px; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--line);
}
.modal-actions .btn { min-height: 41px; padding: 0 15px; border-radius: 10px; }
.modal-actions svg { width: 17px; height: 17px; }
.modal-actions .spacer { margin-inline-end: auto; }

/* ---------- 12) Forms ---------- */
.form-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-1 { grid-template-columns: 1fr; }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid > .btn { align-self: end; min-height: 44px; }
.field { display: block; min-width: 0; }
.field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; font-weight: 750; }
.field > span ~ span { margin-bottom: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.field input, .field select {
  width: 100%; height: 44px; padding: 0 11px;
  border: 2px solid var(--input-line); border-radius: 8px; outline: 0; background: #fff; color: var(--text); font-size: 13px;
}
.field .search-select-native, .party-lookup .search-select-native {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none;
}
.party-lookup.is-open { z-index: 12; }
.field input.is-strong { font-size: 15px; font-weight: 800; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field textarea {
  width: 100%; min-height: 82px; padding: 10px 11px; resize: vertical;
  border: 2px solid var(--input-line); border-radius: 8px; outline: 0; background: #fff; color: var(--text); font-size: 13px;
}
.field input[type="file"] { height: auto; padding: 8px; }
.field input[type="color"] { padding: 4px; cursor: pointer; }
.field small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #f4c3ca; background: #fffafb; }
.field-error { display: block; margin-top: 5px; color: #a91f33; font-size: 12px; font-weight: 700; }
.required { color: #dc2845; font-style: normal; font-weight: 950; margin-inline-start: 3px; font-size: 1.15em; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.check input { width: 17px; height: 17px; }

.form-error, .form-info {
  margin-top: 13px; padding: 10px 12px; display: flex; align-items: center; gap: 8px;
  border-radius: 11px; font-size: 12px; font-weight: 700;
}
.form-error { border: 1px solid #f4c3ca; background: #fff1f3; color: #a91f33; }
.form-info { border: 1px solid #cfe0f4; background: #eef5ff; color: #1a4a86; }
.form-error svg, .form-info svg { width: 18px; height: 18px; }
.page-alert { margin: 0 0 12px; }
.page-alert.import-alert { align-items: flex-start; }
.flash-success { margin-bottom: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #bfe9d4; border-radius: 11px; background: #effbf5; color: var(--green-text); font-size: 13px; font-weight: 750; }
.flash-success svg { width: 18px; height: 18px; }

/* Party kind selector */
.kind-selector { margin-top: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kind-selector label { cursor: pointer; position: relative; }
.kind-selector input { position: absolute; opacity: 0; pointer-events: none; }
.kind-selector .kind-option {
  min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 800;
}
.kind-selector .kind-option svg { width: 19px; height: 19px; }
.kind-selector input:checked + .kind-option { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.kind-selector input:focus-visible + .kind-option { outline: 2px solid var(--accent); outline-offset: 2px; }

.fixed-direction { min-height: 62px; display: grid; grid-template-columns: 34px 1fr; align-content: center; gap: 1px 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--accent) 5%, transparent); align-self: end; }
.fixed-direction svg { width: 30px; height: 30px; grid-row: 1 / 3; padding: 6px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.fixed-direction span { color: var(--muted); font-size: 11px; }
.fixed-direction strong { font-size: 13px; }

.accounts-editor { margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--accent-tint); }
.accounts-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.accounts-editor-head > span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.accounts-editor-head svg { width: 17px; height: 17px; color: var(--accent); }
.account-row { margin-top: 9px; display: grid; grid-template-columns: 155px 1fr 1.4fr 34px; align-items: end; gap: 7px; }
.account-row .field input, .account-row .field select { height: 38px; border-radius: 9px; font-size: 12px; }
.account-row .field > span { font-size: 11px; margin-bottom: 5px; }
.account-remove { width: 34px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(227,40,62,.18); border-radius: 9px; background: rgba(227,40,62,.06); color: var(--red); }
.account-remove svg { width: 15px; height: 15px; }
.accounts-editor > p { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* ---------- 13) Detail views ---------- */
.detail-shell { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-soft); }
.detail-shell + .detail-shell { margin-top: 14px; }
.detail-top-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.detail-head .eyebrow { color: var(--accent); font-size: 13px; font-weight: 800; }
.detail-head h3 { margin-top: 2px; font-size: 22px; font-weight: 850; }
.detail-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.detail-actions { margin-top: 18px; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.facts { margin-top: 16px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.facts article, .qty-cards article { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.facts span, .qty-cards span { display: block; color: var(--muted); font-size: 12px; }
.facts strong, .qty-cards strong { display: block; margin-top: 3px; font-size: 13px; }
.qty-cards { margin: 12px 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; }
.qty-cards.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.qty-cards article { background: var(--surface-soft); }
.qty-cards strong { font-size: 18px; font-weight: 800; }

.section-heading { margin-top: 18px; }
.section-heading span { color: var(--accent); font-size: 12px; font-weight: 800; }
.section-heading h4 { margin: 3px 0 10px; font-size: 14px; }

.grid-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.grid-table-scroll { overflow-x: auto; }
.grid-row { min-height: 43px; display: grid; align-items: center; gap: 8px; padding: 7px 11px; border-bottom: 1px solid var(--line); font-size: 12px; }
.grid-row:last-child { border-bottom: 0; }
.grid-row.head { min-height: 34px; color: var(--muted); background: var(--accent-tint); font-size: 11px; font-weight: 800; }
.grid-row.sources { grid-template-columns: 1.3fr 1.2fr .6fr .6fr .8fr; }
.grid-row.sources.no-cost { grid-template-columns: 1.3fr 1.2fr .6fr .6fr; }
.grid-row.statement { grid-template-columns: 88px minmax(210px, 1fr) minmax(190px, 1.4fr) 100px 108px 128px; min-width: 840px; }
.grid-row.statement.is-focus, .grid-row.statement:target { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent, #2f6fed); }
.grid-row.statement .col-us, .print-items .col-us { color: var(--green-text); }
.grid-row.statement .col-them, .print-items .col-them { color: var(--red-text); }
.grid-row.statement.head .col-us, .grid-row.statement.head .col-them { font-weight: 850; }
.grid-row.statement > span:nth-child(3) { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.statement-ref { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; max-width: 100%; }
.statement-ref small { color: var(--muted); font-size: 11px; font-weight: 750; }
.statement-ref .pay-state { font-weight: 800; }
.statement-ref .pay-paid { color: var(--green-text); }
.statement-ref .pay-partial { color: var(--amber-text); }
.statement-ref .pay-unpaid { color: var(--red-text); }
.grid-row.movement { grid-template-columns: 140px 70px 80px 90px 90px 1fr; min-width: 640px; }
.grid-row.movement.with-cost { grid-template-columns: 140px 70px 80px 90px 90px 90px 1fr; min-width: 730px; }
.grid-row.total { background: var(--surface-soft); font-weight: 800; }
.statement-summary { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.statement-summary span { color: var(--muted); font-size: 12px; font-weight: 800; }
.statement-summary strong { font-size: 16px; font-weight: 800; }
.grid-table.statement-scroll { max-height: min(62vh, 640px); overflow: auto; }
.statement-scroll .grid-row.statement.head { position: sticky; top: 0; z-index: 2; }
.statement-scroll .grid-row.statement.total { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 12px -8px rgba(18, 54, 90, .18); }
.grid-row.stock-split { grid-template-columns: 1.5fr 1fr .6fr; }
.grid-empty { padding: 24px; color: var(--muted); text-align: center; font-size: 13px; }

.contact-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contact-grid article { min-height: 76px; display: grid; grid-template-columns: 34px 1fr; align-content: center; gap: 1px 8px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.contact-grid svg { width: 32px; height: 32px; grid-row: 1 / 3; padding: 7px; border-radius: 9px; color: var(--accent); background: var(--accent-soft); }
.contact-grid span { color: var(--muted); font-size: 12px; }
.contact-grid strong { font-size: 13px; overflow-wrap: anywhere; }

.account-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.account-cards article { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.account-cards span { display: block; color: var(--muted); font-size: 11px; font-weight: 750; }
.account-cards strong { display: block; font-size: 13px; }

.financial-hidden { min-height: 120px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px dashed var(--line); border-radius: 12px; background: var(--accent-tint); text-align: center; padding: 16px; }
.financial-hidden svg { width: 28px; height: 28px; color: var(--muted); }
.financial-hidden span { color: var(--muted); font-size: 12px; }

.delete-confirm { margin-top: 11px; display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(227,40,62,.2); border-radius: 11px; background: rgba(227,40,62,.055); }
.delete-confirm > svg { width: 22px; height: 22px; color: var(--red); }
.delete-confirm strong, .delete-confirm span { display: block; }
.delete-confirm span { margin-top: 2px; color: var(--muted); font-size: 11px; }

.selection-panel { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.selection-panel .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.selection-panel .head span { color: var(--accent); font-size: 12px; font-weight: 800; }
.selection-panel .head h4 { font-size: 16px; }
.selection-panel .head small { color: var(--muted); }
.selection-panel .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.selection-panel article { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.selection-panel article span { color: var(--muted); font-size: 12px; font-weight: 700; }
.selection-panel article strong { font-size: 16px; }

/* Category manager, role permissions, settings */
.list-rows { margin-top: 14px; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.list-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.list-row form { display: flex; align-items: center; gap: 6px; }
.list-row input { height: 34px; padding: 0 9px; border: 2px solid var(--input-line); border-radius: 8px; min-width: 0; flex: 1; }
.list-row input[name="code"] { flex: 0 0 88px; text-align: center; letter-spacing: .04em; }
.list-row .grow { flex: 1; display: flex; gap: 6px; }
.list-row.archived { opacity: .6; }


/* Role editor: one group per row, each permission a tile; cards summarise groups as counts. */
.perm-editor { margin-top: 14px; }
.perm-toolbar { position: sticky; top: -22px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; background: #fff; border-bottom: 1px solid var(--line); }
.perm-toolbar .search-field { flex: 1 1 220px; min-width: 0; margin: 0; }
.perm-total { color: var(--muted); font-size: 12px; font-weight: 750; }
.perm-total b { color: var(--accent); font-size: 14px; }
.perm-groups { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.perm-group { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.perm-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.perm-group-head legend { padding: 0; font-size: 14px; font-weight: 850; }
.perm-group-head legend small { margin-inline-start: 6px; color: var(--muted); font-size: 12px; font-weight: 750; }
.perm-group-head .btn-link { font-size: 12px; }
.perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.perm-item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.perm-item:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.perm-item input { margin-top: 3px; flex: 0 0 auto; }
.perm-item > span { display: grid; gap: 2px; min-width: 0; }
.perm-item b { font-size: 13px; font-weight: 800; line-height: 1.4; }
.perm-item small { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.45; }
.perm-summary { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.perm-summary li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--surface-soft); font-size: 12px; font-weight: 700; }
.perm-summary li b { color: var(--muted); font-weight: 800; }
.perm-summary li.is-full b { color: var(--green-text); }
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.role-card { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-card); display: grid; align-content: start; gap: 10px; border-top: 4px solid var(--role-color, var(--accent)); }
.role-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.role-card h4 { font-size: 16px; }
.role-card p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.role-card footer { display: flex; gap: 6px; flex-wrap: wrap; }

.settings-hub { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-nav { position: sticky; top: 90px; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-soft); }
.settings-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 750; text-decoration: none; }
.settings-nav a svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
.settings-nav a:hover { background: var(--surface-soft); }
.settings-nav a.active { background: var(--accent-soft); color: var(--accent); }
.settings-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.settings-card { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.settings-card svg { width: 28px; height: 28px; padding: 6px; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }
.settings-card strong { font-size: 14px; }
.settings-card span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.5; }
.settings-card:hover { border-color: var(--accent); }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.settings-section { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-soft); }
.settings-section + .settings-section { margin-top: 14px; }
.settings-section > header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.settings-section > header svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.settings-section > header h3 { font-size: 16px; }
.settings-section > header p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
#sequences .seq-type {
  width: 1%;
  max-width: none;
  min-width: 9rem;
  white-space: nowrap;
  overflow-wrap: normal;
  font-weight: 800;
}
.settings-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.settings-group:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.settings-group h4 { margin: 0 0 12px; font-size: 15px; }
.logo-box { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.logo-preview { width: 96px; height: 96px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-preview svg { width: 32px; height: 32px; color: var(--muted); }
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field input[type="color"] { width: 52px; flex: 0 0 52px; }
.color-field input[type="text"] { direction: ltr; text-transform: lowercase; }
.preview-card { position: sticky; top: 90px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-card); }
.preview-card > strong { display: block; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.preview-app { display: grid; grid-template-columns: 1fr 96px; height: 230px; }
.preview-side { padding: 10px 8px; display: grid; align-content: start; gap: 6px; }
.preview-side i { display: block; height: 10px; border-radius: 3px; background: rgba(255,255,255,.2); }
.preview-side i.on { height: 18px; border-radius: 0; }
.preview-main { padding: 12px; display: grid; align-content: start; gap: 8px; }
.preview-main .bar { height: 26px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.preview-main .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.preview-main .row i { height: 40px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.preview-main .btn-sample { height: 26px; width: 90px; border-radius: 6px; }
.preview-main .tab-sample { height: 20px; border-radius: 5px; width: 60%; }

.dash-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
.activity-list { display: grid; }
.activity-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.activity-item:last-child { border-bottom: 0; }
.activity-item > svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; color: var(--accent); background: var(--accent-soft); }
.activity-item small { display: block; color: var(--muted); }
.activity-item time { color: var(--muted); font-size: 12px; white-space: nowrap; }

.search-group + .search-group { margin-top: 14px; }

/* ---------- 14) Auth screens ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--canvas); }
.auth-brand {
  position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.auth-brand::after { content: ''; position: absolute; inset: auto -120px -160px auto; width: 420px; height: 420px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 45%, transparent); filter: blur(90px); opacity: .55; }
.auth-brand .brand-block { border: 0; padding: 0; min-height: 0; }
.auth-brand h2 { position: relative; z-index: 1; max-width: 460px; font-size: 32px; font-weight: 850; line-height: 1.5; }
.auth-brand p { position: relative; z-index: 1; max-width: 460px; color: #c3d2df; font-size: 14px; }
.auth-brand footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; color: #c3d2df; font-size: 13px; }
.auth-brand footer span { display: inline-flex; align-items: center; gap: 6px; }
.auth-brand footer svg { width: 15px; height: 15px; }
.auth-panel { display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: min(420px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); }
.auth-card .eyebrow { color: var(--accent); font-size: 13px; font-weight: 800; }
.auth-card h1 { margin: 4px 0 4px; font-size: 24px; font-weight: 850; }
.auth-card > p { margin: 0 0 18px; color: var(--muted); font-size: 13px; font-weight: 700; }
.auth-card .field + .field { margin-top: 13px; }
.auth-card .btn { width: 100%; min-height: 46px; margin-top: 18px; border-radius: 10px; font-size: 14px; }
.password-field { position: relative; }
.password-field input { padding-left: 11px; padding-right: 44px; }
.password-field button { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.password-field button svg { width: 17px; height: 17px; }
.auth-row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.lock-avatar { width: 64px; height: 64px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 18px; color: #fff; font-size: 22px; font-weight: 850; background: var(--role-color, var(--accent)); }
.auth-card.centered { text-align: center; }
.auth-card.centered .field { text-align: start; }

/* ---------- 15) Responsive ---------- */
@media (max-width: 1199px) {
  .page { padding-inline: 18px; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .preview-card { position: static; }
}
@media (max-width: 800px) {
  .settings-hub { grid-template-columns: minmax(0, 1fr); }
  .settings-hub > * { min-width: 0; }
  .settings-nav { position: static; }
}
@media (max-width: 1050px) {
  .page-intro { flex-direction: column; align-items: stretch; }
  .kpis, .kpis.five, .kpis.three, .kpis.two, .period-summary { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .page { padding: 20px 14px 32px; }
  .toolbar, .filter-strip { flex-direction: column; align-items: stretch; }
  .search-field { width: 100%; margin-inline-start: 0; min-width: 0; }
  .qty-cards, .qty-cards.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid, .account-cards { grid-template-columns: 1fr 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-brand { padding: 28px 22px; gap: 18px; }
  .auth-brand h2 { font-size: 22px; }
  .auth-brand p, .auth-brand footer { display: none; }
}
@media (max-width: 1024px) {
  .sidebar { position: fixed; right: 0; transform: translateX(105%); transition: transform .25s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-close, .menu-button { display: grid; place-items: center; }
  .menu-backdrop { position: fixed; inset: 0; z-index: 15; border: 0; background: rgba(0,0,0,.62); }
  .topbar { padding: 10px 16px; }
  .breadcrumb-bar { padding: 7px 14px; }
}
@media (max-width: 820px) {
  .modal { width: calc(100vw - 24px) !important; }
}
@media (max-width: 700px) {
  .form-grid, .form-grid.cols-2, .kind-selector, .contact-grid, .account-cards, .perm-groups { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 1fr 34px; }
  .account-row .field { grid-column: 1 / -1; }
  .delete-confirm { grid-template-columns: 30px 1fr; }
}
@media (max-width: 600px) {
  .kpis, .kpis.five, .kpis.three, .kpis.two, .qty-cards, .qty-cards.four, .facts { grid-template-columns: 1fr; }
}
@media (max-width: 590px) {
  .page-heading span { display: none; }
  .page-heading { min-width: auto; }
  .page-heading h1 { font-size: 16px; }
  .global-search { width: 44px; }
  .global-search input, .global-search kbd { display: none; }
}
@media (max-height: 820px) {
  .brand-block { min-height: 66px; padding: 8px 16px; }
  .sidebar .brand-block img, .sidebar .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .nav-link, .nav-toggle { min-height: 36px; padding-block: 5px; }
}
@media (max-height: 700px) {
  .brand-block span, .user-card small { display: none; }
  .nav-link, .nav-toggle { min-height: 30px; }
}

/* ---------- 16) Print ---------- */
@media print {
  .sidebar, .topbar, .breadcrumb-bar, .toolbar, .filter-strip, .tabs, .pagination, .modal-actions, .row-menu-wrap, .row-menu, .detail-actions, .detail-top-actions, .no-print,
  .internal-only, .pending-banner, .cancelled-banner, .approval-stamp, .approval-note, .info-banner, .internal-meta, .doc-status, .flash-success, .day-lock-banner, .page-intro .actions, .financial-hidden, .delete-confirm { display: none !important; }
  body, .workspace, .page { background: #fff; padding: 0; }
  .table-card, .detail-shell { box-shadow: none; border: 0; }
}

/* ---------- 17) Fast stock entry ---------- */
.entry-search { position: relative; margin-top: 16px; }
.entry-search .search-field { width: 100%; min-width: 0; height: 48px; margin: 0; border-width: 2px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.entry-search .search-field svg { width: 20px; height: 20px; color: var(--accent); }
.entry-search .search-field input { font-size: 14px; font-weight: 700; }
.entry-results {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 50; max-height: 380px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-menu);
}
.entry-results li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; min-height: 38px; padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.entry-results li.active { background: var(--accent-soft); }
.entry-results code { padding: 3px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); }
.entry-results small { color: var(--muted); }
.entry-results b { padding: 1px 8px; border-radius: 99px; background: var(--green-bg); color: var(--green-text); font-size: 11px; }
.entry-noresult { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.cell-input { width: 100%; height: 36px; padding: 0 9px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; font-weight: 700; }
.entry-lines tfoot td { padding: 10px 12px; background: var(--surface-soft); border-top: 1px solid var(--line); }

/* ---------- 18) Language switch & left-to-right (English) ---------- */
.locale-switch { display: inline-flex; margin: 0; }
.locale-switch .icon-button { width: auto; min-width: 42px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 850; color: var(--text); }
.auth-panel { position: relative; }
.auth-locale { position: absolute; top: 16px; inset-inline-end: 16px; }

[dir="ltr"] .nav-link.active { box-shadow: inset 4px 0 #fff; }
[dir="ltr"] .nav-toggle svg { transform: scaleX(-1); }
[dir="ltr"] .nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
[dir="ltr"] .breadcrumb-back svg { transform: none; }
@media (max-width: 1024px) {
  [dir="ltr"] .sidebar { right: auto; left: 0; transform: translateX(-105%); }
  [dir="ltr"] .sidebar.is-open { transform: translateX(0); }
}

/* ---------- 19) Product images ---------- */
.detail-head .detail-title { flex: 1; min-width: 0; }
.product-photo { flex: 0 0 140px; width: 140px; height: 140px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; }
.product-photo:hover { border-color: var(--accent); }
.name-with-thumb { display: flex; align-items: center; gap: 8px; }
.name-with-thumb img { flex: 0 0 36px; width: 36px; height: 36px; object-fit: cover; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.selection-thumb { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.product-image-picker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.product-image-preview { flex: 0 0 96px; width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-soft); }
.product-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.product-image-preview svg { width: 30px; height: 30px; color: var(--muted); }
.product-image-actions { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.product-image-actions input[type="file"] { width: 100%; height: auto; padding: 8px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; }
@media (max-width: 600px) {
  .product-photo { flex-basis: 96px; width: 96px; height: 96px; }
  .detail-head { flex-wrap: wrap; }
}

/* ---------- 20) Clearer product details ---------- */
.detail-head { align-items: center; gap: 18px; }
.detail-head .eyebrow { font-size: 14px; }
.detail-head h3 { font-size: 26px; line-height: 1.4; }
.detail-head p { margin-top: 6px; color: #3d5470; font-size: 15px; font-weight: 750; }
.product-photo { flex-basis: 220px; width: 220px; height: 220px; border-radius: 14px; }
.facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.facts article, .qty-cards article { padding: 13px 14px; }
.facts span, .qty-cards span { color: #4f6378; font-size: 13px; font-weight: 750; }
.facts strong { margin-top: 5px; color: var(--text); font-size: 16px; font-weight: 850; line-height: 1.5; overflow-wrap: anywhere; }
.qty-cards strong { margin-top: 5px; font-size: 20px; }
@media (max-width: 600px) {
  .product-photo { flex-basis: 140px; width: 140px; height: 140px; }
  .detail-head h3 { font-size: 21px; }
}

/* ---------- 21) Product quick-view popup ---------- */
.product-preview .preview-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.product-preview .preview-head h3 { margin: 2px 0 6px; font-size: 22px; }
.product-preview .preview-image { flex: 0 0 120px; width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.product-preview .facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.grid-row.preview-stock { grid-template-columns: 1fr auto; font-size: 14px; }
.grid-row.preview-stock strong { font-size: 15px; }
tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 600px) {
  .product-preview .preview-image { flex-basis: 80px; width: 80px; height: 80px; }
}

/* ---------- 22) Invoice editors ---------- */
.modal.w-720 { width: min(720px, 100%); }
.invoice-editor .detail-head { margin-bottom: 4px; }
.customer-row { margin-top: 13px; display: grid; grid-template-columns: minmax(210px,1.25fr) auto minmax(170px,.8fr) minmax(130px,.6fr); gap: 8px; align-items: end; }
.customer-row > .btn { height: 44px; color: var(--accent); }
.field-error-inline { color: #a91f33; font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.purchase-header { margin-top: 15px; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 9px; align-items: start; }
.purchase-header select, .purchase-header input { width: 100%; height: 44px; padding: 0 11px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; }
.field input[readonly] { background: var(--surface-soft); color: var(--muted); cursor: not-allowed; }
.field input.party-detail[readonly] { color: var(--text); cursor: default; }
.supplier-details { margin-top: 12px; }
.inline-add { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.field-head { height: 19px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-head > span { color: var(--muted); font-size: 13px; font-weight: 750; white-space: nowrap; }
.segmented.pill { flex-wrap: nowrap; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.segmented.pill span { min-width: 0; min-height: 18px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 800; transition: background .15s, color .15s; }
.segmented.pill input:checked + span { background: var(--accent); color: #fff; box-shadow: var(--shadow-soft); }

.picker-button {
  width: 100%; min-height: 43px; display: grid; grid-template-columns: minmax(0,1fr) 18px; align-items: center; gap: 6px;
  padding: 3px 9px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; text-align: start; cursor: pointer;
}
.picker-button:hover { border-color: var(--accent); }
.picker-button strong, .picker-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-button small { color: var(--muted); font-size: 11px; font-weight: 650; }
.picker-button svg { width: 16px; height: 16px; color: var(--accent); }

.lines-grid { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.line-row { min-height: 60px; display: grid; align-items: center; gap: 7px; padding: 8px 9px; border-bottom: 1px solid var(--line); font-size: 13px; }
.line-row.head { min-height: 38px; color: var(--muted); background: color-mix(in srgb, var(--accent) 4.5%, transparent); font-size: 11px; font-weight: 800; }
.line-row input, .line-row select { width: 100%; height: 39px; padding: 0 8px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; font-weight: 700; }
.line-row input.over-limit { border-color: var(--red); background: var(--red-bg); }
.lines-grid.sale .line-row { min-width: 900px; grid-template-columns: 30px minmax(280px,1.5fr) 120px 100px 120px 125px 38px; }
.lines-grid.sale .line-row.is-manual { align-items: start; }
.manual-line { display: grid; gap: 6px; }
.manual-line .badge { justify-self: start; }
.manual-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lines-grid.purchase .line-row { min-width: 980px; grid-template-columns: 32px 130px minmax(270px,1.5fr) 105px 100px 120px 115px 38px; }
.lines-grid.purchase .line-row.is-manual { align-items: start; }
.line-remove { width: 36px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--red); cursor: pointer; }
.line-remove svg { width: 15px; height: 15px; }
.lines-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; }
.add-line {
  height: 38px; margin: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: var(--accent); font-weight: 800; white-space: nowrap; cursor: pointer;
}
.add-line:hover { border-color: var(--accent); }
.add-line svg { width: 16px; height: 16px; }

/* Purchase owners (partners + percentages) */
.partner-shares { margin-top: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.partner-shares h4 { margin: 0 0 8px; }
.partner-share-row { display: grid; grid-template-columns: minmax(0,1fr) 110px 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.partner-share-row select, .partner-share-row input { width: 100%; }
.partner-share-row .share-input { display: flex; align-items: center; gap: 4px; }
.partner-share-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.partner-share-foot .ok { color: var(--green-text); }
.partner-share-foot .bad { color: var(--red-text); }
.partner-share-foot small { margin-inline-start: 6px; }
.line-partners { margin-top: 6px; }
.line-partners-toggle { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border: 1px dashed var(--line); border-radius: 7px; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; text-align: start; }
.line-partners-toggle svg { width: 13px; height: 13px; flex: 0 0 auto; }
.line-partners-toggle.bad { border-color: var(--red); color: var(--red-text); }
.line-partners-panel { margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--accent) 3%, transparent); }
.line-partners-panel .partner-share-row { grid-template-columns: minmax(0,1fr) 92px 36px; }
.line-partners-panel .partner-share-foot { font-size: 12px; }
.purchase-owners { display: grid; gap: 6px; }
.purchase-owners .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.purchase-owners small { color: var(--muted); }

.totals-editor { margin-top: 13px; display: grid; grid-template-columns: minmax(300px,1fr) minmax(280px,.75fr); gap: 11px; }
.totals-editor > section, .totals-editor > aside, .payment-box { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.totals-editor h4, .payment-box h4, .purchase-payment h4 { margin: 0 0 9px; font-size: 14px; }
.discount-row { display: grid; grid-template-columns: 150px 1fr; gap: 7px; }
.discount-row select, .discount-row input { height: 40px; padding: 0 9px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; }
.switch-line { margin-top: 9px; display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.totals-list > div { min-height: 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.totals-list > div:last-child { border: 0; }
.totals-list span { color: var(--muted); font-size: 13px; font-weight: 700; }
.totals-list strong { font-size: 15px; }
.totals-list .grand-total strong { color: var(--accent); font-size: 18px; font-weight: 850; }
.totals-list .remaining b { color: var(--red); font-size: 17px; }
.return-totals { max-width: 360px; margin-top: 16px; }
.return-totals input[type="number"] { width: 130px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 800; text-align: end; }

.segmented { display: flex; flex-wrap: wrap; gap: 7px; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-width: 96px; min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-weight: 800; }
.segmented input:checked + span { border-color: transparent; background: var(--accent); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented label[data-pay="cash"] span { background: var(--green-bg); color: var(--green-text); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
.segmented label[data-pay="cash"] input:checked + span { background: var(--green); color: #fff; border-color: transparent; }
.segmented label[data-pay="credit"] span,
.segmented label[data-pay="credit_due"] span,
.segmented label[data-pay="credit_saturday"] span { background: var(--amber-bg); color: var(--amber-text); border-color: color-mix(in srgb, var(--amber) 32%, var(--line)); }
.segmented label[data-pay="credit"] input:checked + span,
.segmented label[data-pay="credit_due"] input:checked + span,
.segmented label[data-pay="credit_saturday"] input:checked + span { background: var(--amber); color: #fff; border-color: transparent; }

.payment-box { margin-top: 12px; }
.payment-split { display: grid; gap: 10px; max-width: 760px; margin-top: 12px; }
.payment-split-row { display: grid; grid-template-columns: minmax(200px,1.5fr) minmax(130px,1fr) auto; gap: 10px; align-items: end; }
.payment-split-row > .btn { height: 44px; color: var(--red); }
.payment-split-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.purchase-payment { margin-top: 14px; display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
.purchase-payment > section, .purchase-payment > aside { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.credit-fields { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.remaining-debt {
  margin-top: 10px; padding: 12px; display: grid; gap: 8px;
  border: 2px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 12px; background: var(--amber-bg);
}
.remaining-debt.has-error { border-color: #f4c3ca; background: #fffafb; }
.remaining-debt .rule-note { margin: 0; }
.remaining-debt input[type="date"] { direction: ltr; min-width: 12rem; background: #fff; }
.rule-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.8; }

.approval-note, .pending-banner, .cancelled-banner, .info-banner { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.approval-note { border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--muted); line-height: 1.8; }
.pending-banner { border: 1px solid rgba(219,139,32,.28); background: rgba(219,139,32,.07); color: var(--amber-text); }
.cancelled-banner { border: 1px solid rgba(227,40,62,.2); background: rgba(227,40,62,.06); color: var(--red); }
.info-banner { border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent-soft); color: var(--accent); }
.approval-note svg, .pending-banner svg, .cancelled-banner svg, .info-banner svg { width: 21px; height: 21px; flex: 0 0 auto; }
.cancel-box { margin-top: 12px; display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 8px; padding: 10px; border: 1px solid rgba(227,40,62,.2); border-radius: 10px; background: rgba(227,40,62,.05); }
.cancel-box.approve-box { border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent-soft); }
.cancel-box textarea { min-height: 55px; }

/* Product picker window */
.picker-bar { margin-top: 12px; display: grid; grid-template-columns: 1fr 200px; gap: 8px; }
.picker-bar .search-field { width: 100%; min-width: 0; margin: 0; height: 44px; }
.picker-bar select { height: 44px; padding: 0 10px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; }
.picker-results { margin-top: 10px; max-height: 420px; overflow-y: auto; display: grid; gap: 5px; }
.picker-result { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: start; cursor: pointer; }
.picker-result.active, .picker-result:hover { border-color: var(--accent); background: var(--accent-soft); }
.picker-result small { display: block; color: var(--accent); font-size: 11px; font-weight: 800; }
.picker-result strong { display: block; font-size: 14px; }
.picker-result em { display: block; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 700; }
.picker-result em .picker-price { color: var(--accent); font-weight: 800; margin-inline-start: 10px; }
.picker-result > svg { width: 16px; height: 16px; color: var(--muted); }
[dir="ltr"] .picker-result > svg { transform: scaleX(-1); }

/* Source split */
.allocation-lines { margin-top: 12px; display: grid; gap: 10px; }
.allocation-lines section { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.allocation-lines header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.allocation-lines header span { display: block; color: var(--muted); font-size: 12px; }
.allocation-source { min-height: 56px; display: grid; grid-template-columns: 1.3fr 110px 130px 120px; align-items: center; gap: 8px; padding: 8px 11px; border-top: 1px solid var(--line); font-size: 13px; }
.allocation-source small { display: block; color: var(--muted); font-size: 11px; }
.allocation-source input { width: 100%; height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; }

.split-app { display: flex; flex-direction: column; gap: 12px; padding-bottom: 88px; }
.split-inv { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.split-inv b { font-weight: 800; }
.split-inv .sm, .split-app .sm, .invoice-split .sm { font-size: 12.5px; color: var(--muted); }
.split-req { margin: 0; flex-basis: 100%; font-size: 14px; font-weight: 700; color: var(--red-text); }
.split-req b { font-weight: 800; }
.split-intro { margin: 0; color: var(--muted); font-size: 14px; }
.split-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (min-width: 880px) {
  .split-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .split-side { position: sticky; top: 16px; }
}
.split-stack { display: flex; flex-direction: column; gap: 12px; }
.split-line { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.split-lh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.split-lh h3 { font-size: 15.5px; }
.st { flex: none; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 2px 10px; }
.st.bad { background: var(--red-bg); color: var(--red-text); }
.st.ok { background: var(--green-bg); color: var(--green-text); }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 800; }
.pill.wait { background: var(--amber-bg); color: var(--amber-text); }
.pill.done { background: var(--green-bg); color: var(--green-text); }
.split-lots { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.lotw { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; overflow: hidden; }
.lotw.sel { border-color: var(--accent); background: var(--accent-soft); }
.lotw.sel .mark { border-color: var(--accent); }
.lotw.sel .mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; border: 0; background: transparent; padding: 10px 12px; min-height: 56px; }
button.pick { cursor: pointer; font: inherit; color: inherit; }
button.pick:hover { background: var(--accent-tint); }
.mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.lt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.lt b { font-weight: 800; }
.lt small { line-height: 1.5; color: var(--muted); }
.step { flex: none; display: flex; align-items: center; gap: 6px; }
.step button { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font-size: 20px; font-weight: 800; line-height: 1; }
.step button:disabled { opacity: .35; cursor: default; }
.step output { min-width: 24px; text-align: center; font-weight: 800; font-size: 17px; }
.step input { width: 72px; height: 44px; padding: 0 6px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); text-align: center; font-weight: 800; font-size: 17px; -moz-appearance: textfield; }
.step input::-webkit-outer-spin-button, .step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.costrow { padding: 0 12px 10px; }
.costrow-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.costrow label { font-size: 12.5px; color: var(--muted); }
.costrow input { width: 120px; height: 40px; border: 1.5px solid var(--accent); border-radius: 8px; background: var(--surface); padding: 0 10px; font-weight: 800; }
.link { border: 0; background: transparent; color: var(--accent); font-weight: 800; font-size: 13px; padding: 8px 4px; min-height: 36px; text-decoration: underline; cursor: pointer; }
.chg { display: inline-block; background: var(--amber-bg); color: var(--amber-text); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 800; }
.split-lf { padding: 10px 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 13.5px; }
.split-lf-inner { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.split-lf b { font-weight: 800; }
.split-sum { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.split-sum h2 { margin-bottom: 8px; font-size: 17px; }
.split-sum .row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.split-sum .row:last-child { border-bottom: 0; }
.split-sum .row.strong { font-weight: 800; }
.split-sum .row.profit { font-weight: 800; color: var(--green-text); font-size: 17px; }
.split-sum .row.profit.neg { color: var(--red-text); }
.split-sum .row .brk { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.split-sum .sep { height: 2px; background: var(--navy); opacity: .25; margin-block: 4px; }
.split-sum .split-details-toggle { width: 100%; justify-content: center; margin-top: 10px; }
.split-sum .split-details { margin-top: 6px; }
.split-sum .row.neg > span:last-child { color: var(--red-text); }
.split-sum .gh { margin-top: 6px; font-weight: 800; color: var(--navy); font-size: 14px; padding-top: 8px; border-top: 2px solid var(--line); }
.split-bar { position: sticky; bottom: 0; margin-top: 12px; padding: 10px 0 12px; background: var(--canvas); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border-top: 1px solid var(--line); z-index: 4; }
.split-bar .btn-primary { flex: 1; min-width: 200px; }
.num { font-variant-numeric: tabular-nums; }
.allocation-summary { margin-top: 13px; padding: 12px; border: 1px solid rgba(24,139,135,.25); border-radius: 11px; background: rgba(24,139,135,.06); }
.allocation-summary > span { color: var(--green-text); font-size: 12px; font-weight: 800; }
.allocation-summary h4 { margin: 2px 0 6px; font-size: 14px; }
.allocation-summary p { margin: 0; min-height: 36px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 13px; }
.allocation-summary p:last-child { border: 0; }
.allocation-summary .profit b { color: var(--green-text); font-size: 15px; }

/* Returns */
.return-line { min-height: 56px; display: grid; grid-template-columns: minmax(0,2fr) 0.7fr 0.85fr 0.95fr 1.05fr 0.9fr; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 800; }
.return-line.head { min-height: 38px; color: var(--text); background: color-mix(in srgb, var(--accent) 4.5%, transparent); font-size: 12px; }
.return-line > span, .return-line > strong { font-weight: 800; }
.return-line small { display: block; margin-top: 3px; color: var(--text); font-size: 13px; font-weight: 800; text-align: start; }
.return-line input { width: 100%; height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 800; }
.return-doc-fields .field input { color: var(--text); font-size: 15px; font-weight: 800; }
.return-settlement { margin-top: 12px; display: grid; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-tint); }
.return-settlement > strong { font-size: 15px; }
.settlement-choices { display: grid; gap: 8px; }
.settlement-choices label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 800; }
.settlement-choices input { margin-top: 3px; accent-color: var(--accent); }
.settlement-choices label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.settlement-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.return-doc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }

/* ---------- 23) Printable commercial documents ---------- */
.doc { color: #12253a; }
/* Document header, letterhead style: logo + company name | document type card, then a full-width contact strip
   between two rules (thick ink above, thin accent below). */
.doc-brand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 2px 2px 12px; }
.doc-brand img, .doc-brand .doc-mark { width: 78px; height: 78px; object-fit: contain; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-brand .doc-mark { display: grid; place-items: center; background: var(--print-fill, #12365a); color: var(--print-on-fill, #fff); font-weight: 900; border: 2px solid var(--print-ink, #12365a); box-sizing: border-box; }
.doc-brand .doc-brand-info { min-width: 0; }
.doc-brand strong { display: block; color: var(--print-ink, #12365a); font-size: 26px; font-weight: 900; letter-spacing: .5px; line-height: 1.15; }
.doc-brand .doc-brand-tagline { display: block; margin-top: 4px; color: var(--accent, #49748e); font-size: 13px; font-weight: 800; letter-spacing: .3px; }
.doc-brand aside {
  min-width: 170px; overflow: hidden; border: 1.5px solid var(--print-ink, #12365a); border-radius: 8px; background: #fff;
  text-align: center; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc-brand aside span {
  display: block; padding: 7px 16px; background: var(--print-fill, #12365a); color: var(--print-on-fill, #fff);
  font-size: 15px; font-weight: 900; letter-spacing: .5px; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc-brand aside b { display: block; padding: 9px 16px 10px; color: var(--print-ink, #12365a); font-size: 20px; font-weight: 900; letter-spacing: 1px; }
.doc-contact-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 0; margin-bottom: 14px; padding: 7px 4px;
  border-top: 2.5px solid var(--print-ink, #12365a); border-bottom: 1px solid var(--accent, var(--print-ink, #12365a));
  color: var(--print-ink, #12365a); font-size: 11.5px; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc-contact-item { display: inline-flex; align-items: baseline; gap: 5px; padding: 0 12px; white-space: nowrap; }
.doc-contact-item + .doc-contact-item { border-inline-start: 1px solid color-mix(in srgb, var(--print-ink, #12365a) 25%, transparent); }
.doc-contact-item:first-child { padding-inline-start: 0; }
.doc-contact-item:last-child { padding-inline-end: 0; }
.doc-contact-item small { color: var(--accent, #49748e); font-size: 10.5px; font-weight: 800; }
.doc-title { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.doc-title h3 { font-size: 20px; }
.doc-title p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.doc-status { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 700; }
.print-meta { margin-top: 10px; display: flex; flex-wrap: wrap; border: 1px solid var(--print-ink, #12365a); color: var(--print-ink, #12365a); font-size: 13px; font-weight: 700; }
.print-meta span { flex: 1; min-width: 180px; padding: 8px 11px; border-inline-end: 1px solid var(--print-ink, #12365a); }
.print-meta span:last-child { border-inline-end: 0; }
.print-party { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--print-ink, #12365a); }
.print-party > span { display: block; color: #35566b; font-size: 12px; font-weight: 700; }
.print-party strong { display: block; margin: 4px 0 2px; color: var(--print-ink, #12365a); font-size: 16px; font-weight: 800; }
.print-party small { display: block; color: var(--print-ink, #12365a); font-size: 14px; font-weight: 800; }
.print-items { width: 100%; margin-top: 12px; border-collapse: collapse; }
.print-items:not(.statement-print) { table-layout: auto; }
.print-items th, .print-items td { border: 1px solid var(--print-ink, #12365a); padding: 7px 8px; text-align: start; font-size: 13px; font-weight: 800; vertical-align: top; }
.print-items th { background: var(--print-fill, #12365a); color: var(--print-on-fill, #fff); font-size: 12px; font-weight: 800; }
.print-items td small { display: block; margin-top: 3px; color: var(--print-ink, #12365a); font-size: 11px; font-weight: 700; text-align: start; overflow-wrap: anywhere; }
.print-items col.col-num { width: 32px; }
.print-items col.col-item { width: auto; }
.print-items col.col-size { width: 12%; }
.print-items col.col-qty { width: 10%; }
.print-items col.col-price, .print-items col.col-total { width: 14%; }
.print-items:not(.statement-print) td:nth-child(1), .print-items:not(.statement-print) th:nth-child(1) { text-align: center; width: 32px; }
.print-items:not(.statement-print) td:nth-child(2) { overflow-wrap: anywhere; word-break: break-word; }
.print-items:not(.statement-print) td:nth-child(3), .print-items:not(.statement-print) td:nth-child(4) { overflow-wrap: anywhere; }
.print-items:not(.statement-print) td.money { white-space: nowrap; }
.return-line-note { color: #b45309 !important; font-weight: 800; }
.print-totals { width: min(360px, 100%); margin-top: 12px; margin-inline-start: auto; border: 1px solid var(--print-ink, #12365a); }
.print-totals > div { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--print-ink, #12365a); font-size: 13px; }
.print-totals > div:last-child { border: 0; }
.print-totals .grand-total strong { color: var(--print-ink, #12365a); font-size: 16px; }
.print-totals .paid-in-full { font-weight: 850; }
.print-totals .paid-in-full span { width: 100%; text-align: center; }
.print-foot { margin-top: 12px; display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--print-ink, #12365a); color: var(--print-ink, #12365a); font-size: 12px; font-weight: 700; }
.print-note { margin: 12px 0 0; font-size: 13px; line-height: 1.8; }
.print-items .money { text-align: end; }
.print-items thead { display: table-header-group; }
.print-items.statement-print { table-layout: fixed; }
.print-items.statement-print th, .print-items.statement-print td { font-size: 12px; }
.supplier-price-print { table-layout: fixed !important; }
.supplier-price-print col.sp-num { width: 28px; }
.supplier-price-print col.sp-item { width: auto; }
.supplier-price-print col.sp-size { width: 9%; }
.supplier-price-print col.sp-brand { width: 11%; }
.supplier-price-print col.sp-qty { width: 11%; }
.supplier-price-print col.sp-state { width: 9%; }
.supplier-price-print col.sp-price { width: 13%; }
.supplier-price-print col.sp-date { width: 11%; }
.supplier-price-print th, .supplier-price-print td { font-size: 12px; padding: 6px; overflow-wrap: anywhere; }
.supplier-price-print td:nth-child(3), .supplier-price-print td:nth-child(4) { overflow-wrap: anywhere; }
.supplier-price-print tr.sp-supplier td { background: color-mix(in srgb, var(--print-fill, #12365a) 10%, #fff); font-size: 13px; font-weight: 850; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.supplier-price-print tr.sp-supplier bdi { margin-inline-start: 8px; font-weight: 700; }
.supplier-price-print tr.sp-supplier small { display: inline; margin-inline-start: 8px; font-weight: 700; }
.supplier-price-print tbody { break-inside: auto; }
.supplier-price-print tr { break-inside: avoid; }
.print-items.statement-print th:nth-child(1), .print-items.statement-print td:nth-child(1) { width: 12%; white-space: nowrap; }
.print-items.statement-print th:nth-child(2), .print-items.statement-print td:nth-child(2) { width: 20%; }
.print-items.statement-print td:nth-child(3) { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.print-items.statement-print th:nth-child(4), .print-items.statement-print td:nth-child(4),
.print-items.statement-print th:nth-child(5), .print-items.statement-print td:nth-child(5),
.print-items.statement-print th:nth-child(6), .print-items.statement-print td:nth-child(6) { width: 13%; }
.print-items.statement-print td.money { white-space: nowrap; }
.print-items.statement-print .statement-ref small { color: var(--print-ink, #12365a); font-size: 11px; font-weight: 800; }
.print-items.statement-print .statement-ref .pay-paid { color: var(--green-text); }
.print-items.statement-print .statement-ref .pay-partial { color: var(--amber-text); }
.print-items.statement-print .statement-ref .pay-unpaid { color: var(--red-text); }
.print-items.statement-print .statement-ref .pay-state { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-items.statement-print th.col-us { color: #b6f5d0; }
.print-items.statement-print th.col-them { color: #ffc9ce; }
.print-items.statement-print .col-us, .print-items.statement-print .col-them { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-items.statement-print tr.statement-lines > td { width: auto; padding: 4px 8px 8px; white-space: normal; break-inside: avoid; }
.print-items.statement-print .statement-lines table { width: 100%; border-collapse: collapse; table-layout: auto; }
.print-items.statement-print .statement-lines table th,
.print-items.statement-print .statement-lines table td { width: auto; padding: 3px 6px; border: 1px solid #c9d3df; font-size: 11px; font-weight: 700; white-space: normal; }
.print-items.statement-print .statement-lines table th { background: #eef2f7; color: var(--print-ink, #12365a); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-items.statement-print .statement-lines table td.money { white-space: nowrap; }
.doc-meta { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 8px 11px; background: #edf7fb; color: var(--print-ink, #12365a); font-size: 14px; font-weight: 800; }
.doc-lines { margin-top: 14px; border: 1px solid #d7e4ec; overflow: hidden; overflow-x: auto; }
.doc-line { min-height: 45px; display: grid; grid-template-columns: 1.7fr 110px 75px 110px 120px; align-items: center; gap: 6px; padding: 8px 11px; border-bottom: 1px solid #d7e4ec; font-size: 13px; font-weight: 800; min-width: 600px; }
.doc-line.return-doc { grid-template-columns: 1.7fr 110px 110px 120px; }
.doc-line:last-child { border-bottom: 0; }
.doc-line.head { min-height: 37px; color: var(--print-on-fill, #fff); background: var(--print-fill, #12365a); font-size: 12px; }
.doc-line small { display: block; margin-top: 4px; color: var(--print-ink, #12365a); font-size: 13px; font-weight: 800; text-align: start; }
.doc-totals { width: min(380px, 100%); margin-top: 12px; margin-inline-start: auto; padding: 8px 12px; border: 1px solid #d7e4ec; background: #f7fbfd; }
.doc-totals > div { min-height: 36px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d7e4ec; font-size: 13px; }
.doc-totals > div:last-child { border: 0; }
.doc-totals .grand-total strong { color: var(--accent); font-size: 17px; }
.doc-note { margin: 12px 0 0; font-size: 13px; line-height: 1.8; }
.print-signs { display: none; margin-top: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; page-break-inside: avoid; }
.print-sign { min-height: 108px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px; border: 1px solid var(--print-ink, #12365a); }
.print-sign strong { color: var(--print-ink, #12365a); font-size: 13px; font-weight: 850; }
.print-sign span { width: 86%; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--print-ink, #12365a); color: #5b7386; font-size: 11px; font-weight: 700; }
.print-sign-img { max-height: 52px; max-width: 90%; object-fit: contain; margin: 10px auto auto; }
.print-with-sign { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.signature-preview { display: block; height: 56px; width: auto; max-width: 180px; object-fit: contain; margin-top: 8px; background: #f3f6f9; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.table-wrap .signature-preview { margin-top: 0; height: 48px; }
.approval-stamp { width: max-content; max-width: 100%; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #b9d0df; border-radius: 7px; color: #567085; font-size: 12px; font-weight: 700; }
.internal-meta { margin: 10px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.grid-row.payment-log { grid-template-columns: 100px 1fr 120px 160px; font-size: 13px; }
.print-page { background: #d9e2ea; padding: 16px; overflow-x: auto; }
.print-page .print-sheet, .print-page .doc { width: 210mm; max-width: 100%; min-height: 277mm; margin: auto; padding: 12mm 14mm; background: #fff; box-sizing: border-box; overflow: visible; }
.print-page .print-signs { display: grid; }
.print-hint { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.invoice-split { margin-top: 16px; }
.print-qr { margin-top: 16px; text-align: center; }
.print-qr img { border: 1px solid var(--print-ink, #12365a); }

@media (max-width: 1050px) {
  .purchase-header, .customer-row { grid-template-columns: 1fr 1fr; }
  .purchase-payment, .totals-editor { grid-template-columns: 1fr; }
  .settlement-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .customer-row, .purchase-header, .credit-fields, .payment-split-row, .settlement-fields, .return-doc-fields, .cancel-box, .picker-bar { grid-template-columns: 1fr; }
  .doc-brand { grid-template-columns: 58px 1fr; gap: 10px; }
  .doc-brand img, .doc-brand .doc-mark { width: 56px; height: 56px; }
  .doc-brand .doc-brand-info { padding-inline-start: 10px; }
  .doc-brand .doc-brand-contact b { min-width: 0; margin-inline-end: 4px; }
  .doc-brand aside { grid-column: 1 / -1; }
  .print-page .print-signs { grid-template-columns: 1fr 1fr; }
  .print-meta span { border-inline-end: 0; border-bottom: 1px solid var(--print-ink, #12365a); }
  .print-meta span:last-child { border-bottom: 0; }
  .allocation-source { grid-template-columns: 1fr 1fr; }
}
@media print {
  @page { size: A4; margin: 8mm; }
  .internal-only, .no-print, .detail-actions, .modal-close,
  .pending-banner, .cancelled-banner, .approval-stamp, .approval-note, .info-banner, .internal-meta, .doc-status, .flash-success, .page-intro .actions { display: none !important; }
  .detail-shell.doc { padding: 0; border: 0; box-shadow: none; }
  .print-page { background: #fff; padding: 0; }
  .print-page .print-sheet, .print-page .doc { width: auto; max-width: none; min-height: 0; padding: 0; overflow: visible; }
  .print-items tr { break-inside: avoid; page-break-inside: avoid; }
  .print-items th, .doc-line.head, .doc-brand aside, .doc-brand .doc-mark, .doc-brand img,
  .badge.pay-cash, .badge.pay-credit, .badge.pay-saturday, .badge.pay-partial { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-signs { display: grid !important; }
  .print-qr { margin-top: 12px; }
  .print-qr img { width: 72px; height: 72px; }
}

/* 23b. Handover documents: goods delivery notes and cash / cheque delivery vouchers */
.handover-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.handover-fields h4 { margin: 0 0 9px; font-size: 14px; }
.handover-fields .field { margin-top: 10px; }
.handover-fields small { display: block; margin-top: 8px; font-size: 12px; }
.handover-ack { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--surface-soft); font-size: 13px; font-weight: 700; line-height: 1.9; }
.lines-grid.delivery .line-row { min-width: 760px; grid-template-columns: 30px minmax(280px, 1.6fr) 190px minmax(180px, 1fr) 38px; }
.lines-grid.delivery .line-row.is-manual { align-items: start; }
.qty-unit { display: flex; align-items: center; gap: 6px; }
.qty-unit input { flex: 1 1 90px; min-width: 0; }
.qty-unit select { flex: 0 0 86px; }
.qty-unit small { flex: 0 0 auto; color: var(--muted); font-weight: 800; }
.segmented.compact { margin-bottom: 7px; }
.segmented.compact span { min-width: 74px; min-height: 32px; }
.voucher-amount { color: var(--red-text); font-size: 18px !important; font-weight: 850 !important; }
.voucher-effect { margin: 0 0 0 auto; color: var(--text); font-size: 13px; font-weight: 750; }

.print-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.print-parties .print-party { border-width: 0; border-inline-start: 4px solid var(--print-ink, #12365a); }
.print-meta b { font-weight: 850; }
.print-items.handover-items col.col-num { width: 34px; }
.print-items.handover-items col.col-qty-wide { width: 18%; }
.print-items.handover-items col.col-notes { width: 30%; }
.print-items.handover-items tr.is-blank td { height: 30px; }
.print-ack { margin-top: 14px; padding: 10px 13px; border-radius: 8px; background: #f2f5f9; color: var(--print-ink, #12365a); page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-ack.is-boxed { min-height: 80px; background: #fff; border: 1px solid #d4dce6; }
.print-ack h4 { margin: 0 0 5px; font-size: 13px; font-weight: 850; }
.print-ack p { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.9; }
.print-items.print-cheque { table-layout: fixed; }
.print-cheque th { text-align: start; }
.print-items.print-cheque td:nth-child(n) { width: 33.33%; text-align: start; }
.print-cheque td span { display: block; color: #5b7386; font-size: 11px; font-weight: 700; }
.print-cheque td b { display: block; font-size: 15px; }
.print-amount { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 8px; background: #f2f5f9; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-amount > div span { display: block; color: #5b7386; font-size: 12px; font-weight: 700; }
.print-amount > div strong { color: var(--print-ink, #12365a); font-size: 15px; font-weight: 850; }
.print-amount aside { min-width: 190px; padding: 10px 16px; border-radius: 8px; background: var(--print-fill, #12365a); color: var(--print-on-fill, #fff); text-align: center; border: 2px solid var(--print-ink, #12365a); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-amount aside span { display: block; color: var(--print-on-muted, #d9ecf7); font-size: 12px; }
.print-amount aside b { display: block; font-size: 24px; font-weight: 900; }
.handover-signs { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; page-break-inside: avoid; }
.handover-card { display: flex; flex-direction: column; padding: 4px 2px; }
.handover-card h4 { margin: 0 0 6px; color: var(--print-ink, #12365a); font-size: 14px; font-weight: 850; }
.handover-line { margin: 6px 0 0; display: flex; align-items: baseline; gap: 6px; color: var(--print-ink, #12365a); font-size: 13px; font-weight: 850; }
.handover-line b { flex: 1; min-height: 20px; font-size: 14px; }
.handover-line .handover-blank { color: var(--print-ink, #12365a); font-weight: 700; letter-spacing: 2px; }
.handover-line .print-sign-img { max-height: 56px; margin: 0; }
.handover-box { position: relative; min-height: 150px; margin-top: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 8px; border: 1px dashed #a6b6c6; border-radius: 8px; }
.handover-box.is-solid { border-style: solid; }
.handover-box .print-sign-img { max-height: 80px; margin: auto; }
.handover-box small { align-self: flex-start; color: #6d8095; font-size: 11px; font-weight: 700; }
.handover-box small.is-top { position: absolute; top: 8px; inset-inline-start: 10px; }
.handover-foot { margin-top: 16px; }
@media (max-width: 700px) {
  .handover-fields, .print-parties { grid-template-columns: 1fr; }
  .print-amount { flex-direction: column; align-items: stretch; }
}

/* 24. Party lookup (server-side customer / supplier search) */
.party-lookup { position: relative; width: 100%; min-width: 0; z-index: 6; overflow: visible; }
.party-lookup .search-field { width: 100%; min-width: 0; margin: 0; height: 44px; }
.party-lookup .search-field input { font-size: 15px; font-weight: 800; }
.data-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.data-table select,
.data-table textarea {
  width: 100%; min-height: 38px; padding: 0 8px;
  border: 2px solid var(--input-line); border-radius: 8px; background: #fff;
}
.party-lookup .search-field input[type="search"]::-webkit-search-cancel-button { display: none; }
.party-lookup-clear { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.party-lookup-clear:hover { background: var(--accent-soft); color: var(--accent); }
.party-lookup-list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 60; max-height: 300px; overflow-y: auto;
  padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.party-lookup-list.search-select-list {
  position: fixed; inset: auto; z-index: 1100; max-height: 240px;
}
.party-lookup-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; text-align: start; cursor: pointer; }
.party-lookup-item.active, .party-lookup-item:hover { background: var(--accent-soft); }
.search-select-list .party-lookup-item strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.party-lookup-item .badge { flex: none; }
.party-lookup-item strong { margin-inline-end: auto; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-lookup-item small { color: var(--text); font-size: 13px; font-weight: 800; }
.party-lookup-note { margin: 0; padding: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.filter-strip { z-index: 8; }
.filter-strip .filter-lookup { width: 230px; overflow: visible; z-index: 8; }
.toolbar .filter-lookup { width: min(260px, 100%); overflow: visible; z-index: 5; }
.filter-strip .filter-lookup .search-field { height: 38px; font-weight: 400; }
.filter-strip .filter-lookup .search-field input { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; }

/* 25. Branches */
.branch-switch, .branch-badge { height: 42px; margin: 0; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbfe; color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; }
.branch-switch:focus-within { border-color: var(--accent); }
.branch-switch svg, .branch-badge svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.branch-switch select { max-width: 190px; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.branch-badge { color: var(--text); }
.branch-actions { display: inline-flex; align-items: center; gap: 6px; }
.branch-actions form { margin: 0; }
.branch-admin-fields { margin: 16px 0 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
.branch-admin-fields legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-weight: 800; }
.branch-admin-fields legend svg { width: 16px; height: 16px; color: var(--accent); }
.branch-admin-fields > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
@media (max-width: 1024px) { .branch-switch select { max-width: 110px; } .branch-badge { display: none; } .presence-label { display: none; } }

/* 26. Export, import, and the daily treasury report */
.head-tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.export-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.export-buttons .btn { min-height: 32px; padding: 0 11px; }
.export-buttons .btn svg { width: 16px; height: 16px; }
.import-help { margin: 4px 0 14px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.7; }
.report-catalog { display: grid; gap: 22px; }
.report-group h3 { margin: 0 0 10px; font-size: 16px; font-weight: 850; }
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.report-card {
  display: flex; flex-direction: column; gap: 6px; min-height: 108px; padding: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none; cursor: pointer;
}
.report-card:hover { border-color: var(--accent); }
.report-card strong { font-size: 15px; font-weight: 850; }
.report-card span { color: var(--muted); font-size: 13px; font-weight: 650; line-height: 1.6; }
.import-errors { margin: 6px 0 0; padding-inline-start: 18px; }
.import-errors li { margin-top: 4px; }
.movement-day {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.movement-day label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; }
.movement-day label span { color: var(--muted); font-size: 12px; font-weight: 750; }
.movement-day input[type="date"] { min-width: 160px; }
.movement-day p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.movement-day .movement-day-title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 850; }
.movement-day .movement-day-title svg, .movement-day .btn svg { width: 16px; height: 16px; }
.movement-day .date-field { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 750; }
.treasury-picker {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 14px; margin: 0 0 16px;
  scrollbar-width: thin;
}
.treasury-card {
  flex: 0 0 168px; min-height: 118px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  color: inherit; text-decoration: none; box-shadow: var(--shadow-card);
}
.treasury-card:hover { border-color: var(--accent); }
.treasury-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.treasury-card svg { width: 22px; height: 22px; color: var(--muted); margin-bottom: 6px; flex: none; }
.treasury-card.is-active svg { color: var(--accent); }
.treasury-card strong { font-size: 14px; font-weight: 850; line-height: 1.3; }
.treasury-card span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }
.treasury-card b { margin-top: auto; padding-top: 8px; color: var(--accent); font-size: 18px; font-weight: 850; }
.movement-board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.movement-panel { --tone: var(--green); --tone-text: var(--green-text); --tone-bg: var(--green-bg); min-width: 0; padding: 14px; border: 1px solid var(--line); border-top: 4px solid var(--tone); border-radius: 12px; background: color-mix(in srgb, var(--tone-bg) 22%, var(--surface)); }
.movement-panel.tone-out { --tone: var(--red); --tone-text: var(--red-text); --tone-bg: var(--red-bg); }
.movement-panel .panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.movement-panel .panel-title > div:not(.panel-total) { flex: 1; min-width: 0; }
.movement-panel .panel-title h3 { color: var(--tone-text); }
.movement-panel .panel-total { flex: none; display: grid; justify-items: end; padding: 8px 14px; border-radius: 10px; background: var(--tone-bg); color: var(--tone-text); }
.movement-panel .panel-total span { font-size: 11px; font-weight: 750; }
.movement-panel .panel-total strong { font-size: 20px; font-weight: 850; line-height: 1.3; }
.movement-panel .table-card { margin-top: 10px; }
.movement-panel .data-table thead th { background: var(--tone-bg); color: var(--tone-text); }
.movement-panel .data-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.movement-panel .entry-description { display: block; font-weight: 800; line-height: 1.6; }
.movement-panel .entry-item { color: var(--tone-text); font-weight: 800; }
.movement-panel .col-amount { text-align: end; white-space: nowrap; color: var(--tone-text); font-weight: 850; }
.movement-panel .amount-link { color: var(--tone-text); font-weight: 850; text-decoration: underline dotted; text-underline-offset: 3px; }
.movement-panel .amount-link:hover { text-decoration-style: solid; }
.movement-panel .data-table tfoot td { background: var(--tone-bg); color: var(--tone-text); font-weight: 850; border-top: 2px solid var(--tone); }
.movement-panel .data-table tfoot small { display: inline; color: inherit; opacity: .8; }
.movement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.movement-actions .btn svg { width: 16px; height: 16px; }
.movement-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.movement-summary article { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: 10px; background: var(--surface); }
.movement-summary span { color: var(--muted); font-size: 12px; font-weight: 750; }
.movement-summary strong { font-size: 22px; font-weight: 850; line-height: 1.3; }
.movement-summary .in { border-inline-start-color: var(--green); }
.movement-summary .in strong { color: var(--green-text); }
.movement-summary .out { border-inline-start-color: var(--red); }
.movement-summary .out strong { color: var(--red-text); }
.movement-summary .net.neg strong { color: var(--red-text); }
.movement-summary .balance { background: var(--accent-soft); }
.movement-summary .balance strong { color: var(--accent); }
.print-only { display: none; }
@media (max-width: 900px) { .movement-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
  .print-only { display: block; }
  .movement-board { grid-template-columns: 1fr; }
  .movement-panel { break-inside: auto; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .movement-panel .data-table tr { break-inside: avoid; }
  .movement-panel .data-table thead { display: table-header-group; }
  .movement-summary article { break-inside: avoid; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .movement-panel .data-table thead th, .movement-panel .data-table tfoot td, .movement-panel .panel-total { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .movement-panel .panel-title p, .period-summary { display: none; }
  .movement-summary { grid-template-columns: repeat(4, 1fr); }
}
.movement-panel .panel-title h3 { margin: 0; font-size: 18px; font-weight: 850; }
.movement-panel .panel-title p { margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.6; }
.panel-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.panel-icon svg { width: 20px; height: 20px; }
.panel-icon.in { background: #e7f6ee; color: var(--green-text); }
.panel-icon.out { background: #fdecee; color: var(--red-text); }
.movement-panel .kpis { width: 100%; margin-bottom: 12px; }
.movement-panel .filter-strip { flex-wrap: wrap; }
.movement-panel .filter-strip select,
.movement-panel .filter-strip input[type="date"] { min-width: 0; flex: 1 1 130px; }
.movement-panel .search-field { width: auto; min-width: 0; margin: 0; flex: 1 1 180px; }
@media (max-width: 1100px) { .movement-board { grid-template-columns: 1fr; } }

.badge.pay-cash, .badge.voucher-paid { background: var(--green-bg); color: var(--green-text); }
.badge.pay-credit, .badge.pay-saturday { background: var(--amber-bg); color: var(--amber-text); }
.badge.pay-partial, .badge.voucher-partial { background: #ffedd5; color: #9a3412; }
.badge.voucher-open { background: var(--red-bg); color: var(--red-text); }
.print-meta .badge { min-width: 0; }
.is-strong { font-weight: 800; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.kpi-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: inherit; }
a.kpi-card { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
a.kpi-card:hover { border-color: var(--accent); box-shadow: 0 8px 18px rgba(15, 61, 110, .08); }
.kpi-card svg { width: 20px; height: 20px; color: var(--accent); }
.kpi-card.warning { border-color: #f59e0b; background: #fffbeb; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.online-users { margin: 0 16px 10px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; line-height: 1.5; }
.attachment-box { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-soft); }
.attachment-box h4 { font-size: 14px; }
.attachment-box > .hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.attachment-grid figure { margin: 0; }
.attachment-grid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.attachment-grid img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); }
.attachment-upload { display: flex; gap: 10px; align-items: end; margin-top: 10px; }
.attachment-upload .field { flex: 1; max-width: 520px; }
.attachment-upload .btn { min-height: 44px; }

.file-input, .field > .file-input {
  position: relative; width: 100%; min-height: 44px; padding: 5px; display: flex; align-items: center; gap: 10px;
  border: 2px dashed var(--input-line); border-radius: 8px; background: #fff; cursor: pointer;
}
.file-input:hover, .file-input:focus-within { border-color: var(--accent); }
.file-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.file-input input[type="file"] {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.file-input-button {
  flex: 0 0 auto; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 800; white-space: nowrap;
}
.file-input-button svg { width: 16px; height: 16px; }
.file-input-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 650; }
.file-input.has-file { border-style: solid; }
.file-input.has-file .file-input-name { color: var(--text); font-weight: 750; }
.field.has-error .file-input { border-color: #f4c3ca; background: #fffafb; }
.print-page .print-sheet[data-watermark], .print-page .doc[data-watermark] { position: relative; }
.print-page .print-sheet[data-watermark]::before, .print-page .doc[data-watermark]::before {
  content: attr(data-watermark); position: absolute; inset: 22% 0 auto; text-align: center;
  font-size: 64px; font-weight: 900; letter-spacing: .12em; color: var(--print-label, #c5d4e8);
  opacity: var(--print-watermark-opacity, .12); pointer-events: none; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.voucher-paid { color: #166534; font-weight: 800; }
.voucher-partial { color: #854d0e; font-weight: 800; }
.voucher-open { color: #b91c1c; font-weight: 800; }
.voucher-card { margin-bottom: 16px; }
.voucher-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: inherit; text-decoration: none; min-width: 0; }
.voucher-card-title:hover { color: var(--accent); }
.voucher-card-title small { color: var(--muted); font-weight: 700; }
.voucher-invoice { margin-bottom: 16px; }
.voucher-invoice-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-weight: 800; }
.voucher-photos { margin: 0; border: 0; border-top: 1px dashed var(--line); border-radius: 0; }
.print-stamp { margin-top: 28px; min-height: 72px; padding: 12px; border: 1px dashed var(--print-ink, #12365a); color: var(--print-ink, #12365a); font-weight: 800; text-align: center; }
@media print {
  a[href]::after { content: none !important; }
}

.supplier-prices-page .supplier-view-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.supplier-prices-page .supplier-price-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 16px; }
.supplier-prices-page .supplier-price-table-head .head-tools,
.supplier-prices-page .supplier-catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.supplier-prices-page .supplier-cart-send { display: grid; gap: 8px; margin: 10px 0; }
.supplier-prices-page .supplier-new-product { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.supplier-prices-page .supplier-price-kpis article { min-height: 92px; display: grid; align-content: center; gap: 2px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-soft); }
.supplier-prices-page .supplier-price-kpis span, .supplier-prices-page .supplier-price-kpis small { color: var(--muted); font-size: 13px; font-weight: 700; }
.supplier-prices-page .supplier-price-kpis strong { color: var(--text); font-size: 22px; font-weight: 850; line-height: 1.35; }
.supplier-prices-page .supplier-price-toolbar { display: grid; grid-template-columns: minmax(210px, 1.55fr) auto minmax(180px, 1.1fr) repeat(3, minmax(125px, 1fr)) auto auto auto; align-items: center; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-soft); overflow: visible; }
.supplier-prices-page .supplier-price-toolbar .filter-lookup { min-width: 0; z-index: 6; }
.supplier-prices-page .supplier-price-toolbar svg { width: 16px; height: 16px; }
.supplier-prices-page .supplier-price-toolbar > label:has(input[type="search"]) { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.supplier-prices-page .supplier-price-toolbar > label:has(input[type="search"]) svg { color: var(--accent); }
.supplier-prices-page .supplier-price-toolbar > label:has(input[type="search"]) input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.supplier-prices-page .supplier-price-toolbar select { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-weight: 700; }
.supplier-prices-page .supplier-price-toolbar .supplier-price-search { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 800; }
.supplier-prices-page .supplier-price-toolbar .supplier-price-search svg { width: 16px; }
.supplier-prices-page .supplier-price-toolbar .inline-check { white-space: nowrap; color: var(--muted); font-size: 13px; }
.supplier-price-reset { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--accent); font-weight: 800; text-decoration: none; }
.supplier-price-reset svg, .supplier-prices-page .supplier-price-toolbar a svg { width: 16px; height: 16px; }
.supplier-price-table-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-soft); }
.supplier-price-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px 12px; border-bottom: 1px solid var(--line); }
.supplier-price-table-head h3 { margin: 0; font-size: 17px; }
.supplier-price-table-head span { color: var(--muted); font-size: 13px; font-weight: 700; }
.supplier-price-table-wrap { overflow-x: auto; }
.supplier-price-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.supplier-price-table th { padding: 10px 9px; border-bottom: 1px solid var(--line); background: var(--table-head); font-size: 13px; font-weight: 900; white-space: nowrap; }
.supplier-price-table td { padding: 10px 9px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
.supplier-price-table tbody tr:hover { background: var(--row-hover); }
.supplier-price-table tbody tr.is-archived { opacity: .58; }
.supplier-price-table td:nth-child(2) strong, .supplier-price-table td:nth-child(2) small { display: block; }
.supplier-price-table td:nth-child(2) small { margin-top: 2px; color: var(--muted); }
.supplier-price-status, .availability { display: inline-block; margin-inline-end: 6px; padding: 2px 7px; border-radius: 999px; background: var(--green-bg); color: var(--green-text); font-size: 12px; font-weight: 850; }
.supplier-price-status.uncertain, .availability.uncertain { background: var(--amber-bg); color: var(--amber-text); }
.supplier-price-status.unavailable, .availability.unavailable { background: var(--red-bg); color: var(--red-text); }
.page18-supplier-catalog .supplier-prices-content { direction: ltr; grid-template-areas: "tools tools" "cart products"; grid-template-columns: minmax(275px, 300px) minmax(0, 1fr); }
.page18-supplier-catalog .supplier-catalog-tools { grid-area: tools; direction: rtl; justify-content: flex-end; }
.page18-supplier-catalog .supplier-cart-panel { grid-area: cart; direction: rtl; }
.page18-supplier-catalog .supplier-price-grid { grid-area: products; direction: rtl; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.supplier-prices-content { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.supplier-cart-panel { position: sticky; top: 18px; min-height: 320px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-soft); }
.supplier-cart-head { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.supplier-cart-head > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.supplier-cart-head span { display: inline-flex; align-items: center; gap: 7px; font-weight: 850; }
.supplier-cart-head svg { width: 18px; color: var(--accent); }
.supplier-cart-head strong { min-width: 28px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: #fff; text-align: center; }
.supplier-cart-head small { color: var(--muted); font-weight: 700; }
.supplier-cart-empty { margin-top: 16px; padding: 16px 12px; border-radius: 12px; background: var(--surface-soft); color: var(--muted); line-height: 1.8; font-size: 12px; }
.supplier-cart-lines { display: grid; gap: 8px; margin: 14px 0; max-height: 48vh; overflow: auto; }
.supplier-cart-line { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.supplier-cart-line-main { min-width: 0; display: grid; gap: 3px; }
.supplier-cart-line-main strong { font-size: 12px; overflow-wrap: anywhere; }
.supplier-cart-line-main small { color: var(--muted); }
.supplier-cart-line > input { grid-column: 2; width: 100%; min-height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); padding: 0 7px; font-weight: 750; }
.supplier-cart-line > b { grid-column: 2; color: var(--accent); font-size: 12px; }
.supplier-cart-line .cart-remove { width: 20px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--red); }
.supplier-cart-line .cart-remove svg { width: 15px; }
.supplier-cart-totals { display: grid; gap: 7px; margin-top: 10px; }
.supplier-cart-totals > div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.supplier-cart-totals b { color: var(--text); }
.supplier-cart-totals .supplier-cart-total { padding-top: 9px; border-top: 1px solid var(--line); color: var(--text); font-weight: 850; }
.supplier-cart-total strong { color: var(--accent); font-size: 17px; }
.supplier-cart-purchase { width: 100%; justify-content: center; margin-top: 14px; }
.supplier-cart-clear { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; min-height: 38px; border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line)); border-radius: 10px; background: transparent; color: var(--red); font-weight: 800; }
.supplier-cart-clear svg { width: 18px; height: 18px; }
.supplier-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; min-width: 0; }
.supplier-price-grid > article { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-soft); }
.supplier-price-grid > article.is-archived { opacity: .62; }
.supplier-price-grid article header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.supplier-price-grid h3 { margin: 8px 0 3px; font-size: 17px; }
.supplier-price-grid header small, .supplier-price-grid article > p { color: var(--muted); line-height: 1.7; }
.supplier-price-grid header > strong { color: var(--accent); font-size: 16px; white-space: nowrap; }
.supplier-product-image { width: 100%; height: 150px; object-fit: contain; border-radius: 8px; background: var(--surface-soft); }
.supplier-price-grid dl { margin: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.supplier-price-grid dl div { min-width: 0; padding: 9px; border-radius: 10px; background: var(--surface-soft); }
.supplier-price-grid dt { color: var(--muted); font-size: 12px; }
.supplier-price-grid dd { margin: 4px 0 0; font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
.supplier-price-grid footer { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.supplier-price-grid footer button, .supplier-price-grid footer a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: transparent; text-decoration: none; font-weight: 800; }
.supplier-price-grid footer button:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }
.supplier-price-grid footer svg { width: 15px; }
.dues-category-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px;
}
.dues-category-cards a {
  min-height: 92px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: inherit;
  text-decoration: none; box-shadow: var(--shadow-card);
}
.dues-category-cards a:hover { border-color: var(--accent); }
.dues-category-cards a.active { border-color: var(--accent); background: #eaf3ff; box-shadow: 0 0 0 1px var(--accent); }
.dues-category-cards span { color: var(--muted); font-size: 13px; font-weight: 750; }
.dues-category-cards b { font-size: 22px; font-weight: 850; line-height: 1.1; }
.dues-category-cards small { color: var(--accent); font-size: 13px; font-weight: 800; }
.dues-toolbar .search-field { margin-inline-start: 0; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.7; }
.dues-toolbar select { min-height: 40px; padding: 0 10px; border: 2px solid var(--input-line); border-radius: 8px; background: #fff; }
.data-table .payable { font-weight: 850; color: var(--accent); }
.data-table tr.selected-row { background: #eaf3ff; }
.dues-preview {
  margin-top: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #f8fbfe; font-size: 13px; font-weight: 750;
}
.dues-preview strong { font-size: 16px; font-weight: 850; }
.receipt-history { margin-top: 16px; display: grid; gap: 8px; }
.receipt-history > strong { font-size: 13px; }
.receipt-history label, .receipt-history > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700;
}
.receipt-history input { width: min(140px, 32vw); height: 38px; padding: 0 10px; border: 2px solid var(--input-line); border-radius: 8px; }
.settlement-log { margin: 10px 0 14px; display: grid; gap: 8px; }
.settlement-line {
  margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfe;
  font-size: 13px; font-weight: 750; line-height: 1.7;
}
@media (max-width: 760px) {
  .dues-category-cards { grid-template-columns: 1fr; }
}

.empty-state-card { grid-column: 1 / -1; padding: 28px 18px; display: grid; justify-items: center; text-align: center; color: var(--muted); }
.empty-state-card svg { width: 42px; height: 42px; color: var(--muted); }
.empty-state-card h3 { margin: 8px 0 4px; color: var(--text); }
@media (max-width: 1400px) {
  .page18-supplier-catalog .supplier-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .supplier-prices-page .supplier-price-toolbar { grid-template-columns: minmax(190px, 1fr) auto repeat(2, minmax(125px, 1fr)); }
}
@media (max-width: 1180px) {
  .supplier-price-grid, .page18-supplier-catalog .supplier-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .supplier-prices-content, .page18-supplier-catalog .supplier-prices-content { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); direction: inherit; }
  .page18-supplier-catalog :is(.supplier-catalog-tools, .supplier-cart-panel, .supplier-price-grid) { grid-area: auto; direction: inherit; }
  .supplier-prices-page .supplier-price-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-prices-page .supplier-price-toolbar > label:has(input[type="search"]) { grid-column: 1 / -1; min-height: 42px; }
  .supplier-cart-panel { position: static; order: -1; min-height: 0; }
  .page18-supplier-catalog .supplier-catalog-tools { order: -2; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .supplier-prices-page .supplier-price-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-prices-page .supplier-price-toolbar { grid-template-columns: 1fr; }
  .supplier-price-grid, .page18-supplier-catalog .supplier-price-grid { grid-template-columns: 1fr; }
}


/* ---------- 30) Employees: attendance day sheet, payroll sheet, advances & custody ---------- */
.employees-page .page-intro { align-items: center; flex-wrap: wrap; }
.employees-page .page-intro > .kpis { flex: 0 1 auto; width: min(100%, 880px); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.employees-page .page-intro .kpi { min-height: 74px; padding: 12px 14px; }
.employees-page .tabs a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.employees-page .table-card + .table-card,
.employees-page .table-card + .toolbar,
.employees-page .toolbar + .table-card { margin-top: 14px; }
.employees-page .table-card-head .inline-filter { margin: 0; }
.employees-page .table-card-head strong { font-weight: 850; }

/* Time field: whole control opens the native picker, "now" fills the current time */
.time-field { display: inline-flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 750; }
.time-field-control {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 150px; padding: 0 4px 0 10px;
  border: 2px solid var(--input-line); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer;
}
.time-field-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.time-field-control > svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.time-field-control input[type="time"] {
  flex: 1; min-width: 0; height: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; outline: 0;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--text); font: inherit; font-weight: 800; cursor: text; text-align: left;
}
.time-field-control > svg { cursor: pointer; }
.time-field-control input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.time-field-now {
  flex: none; height: 28px; padding: 0 9px; border: 0; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; cursor: pointer;
}
.time-field-now:hover { background: color-mix(in srgb, var(--accent) 16%, #fff); }
.time-field-control:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.time-field-control:has(input:disabled) .time-field-now { display: none; }

.attendance-table td { vertical-align: middle; }
.attendance-table .col-name strong { white-space: nowrap; }
.attendance-table tr.is-present > td { background: color-mix(in srgb, var(--green) 6%, #fff); }
.time-locked { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green-text); font-weight: 800; white-space: nowrap; }
.time-locked svg { width: 12px; height: 12px; opacity: .7; }
.attendance-delete { display: flex; justify-content: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.attendance-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--amber-bg); color: var(--amber-text); }
.attendance-note svg { width: 16px; height: 16px; }
.attendance-filter { margin-top: 14px; }

/* Payroll sheet and salary statement */
.payroll-table th { white-space: normal; min-width: 78px; line-height: 1.35; vertical-align: bottom; }
.payroll-table td, .payroll-table tfoot th { white-space: nowrap; }
.payroll-table .col-name { min-width: 130px; font-weight: 800; }
.payroll-row-actions { display: flex; gap: 6px; justify-content: center; }
.payroll-row-actions .btn svg { width: 14px; height: 14px; }
.payroll-table .col-net { background: color-mix(in srgb, var(--accent) 7%, #fff) !important; color: var(--accent); font-weight: 850; }
.payroll-table tfoot th { padding: 11px 12px; border-top: 2px solid var(--line); background: var(--table-head); font-weight: 850; text-align: start; }
.payroll-print-head { text-align: center; margin-bottom: 10px; }
.payroll-print-head h2 { margin: 0; font-size: 18px; }
.payroll-print-head p { margin: 4px 0 0; font-size: 13px; }

.statement-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card);
}
.statement-head .eyebrow { color: var(--accent); font-size: 12px; font-weight: 750; }
.statement-head h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 20px; font-weight: 850; }
.statement-head h3 code { font-size: 12px; padding: 3px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.statement-head p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.statement-period { padding: 6px 12px; border-radius: 7px; background: var(--surface-soft); }
.statement-kpis { width: 100%; margin-bottom: 12px; }
.statement-balances { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.statement-balances > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; font-size: 13px; }
.statement-balances span { color: var(--muted); font-weight: 700; }
.statement-balances b { font-weight: 850; }

/* Advances, loans and custody */
.employees-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.employees-split .table-card { margin: 0 !important; }
/* Custody settlement: one card per spent line, fields stacked. */
.custody-lines { display: grid; gap: 10px; }
.custody-line { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.custody-line-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; color: var(--muted); font-size: 13px; }
.custody-line .field select, .custody-line .field input { width: 100%; }
.custody-add { margin: 10px 0 0; }
/* Salary pay window: amount and treasury each on a full row, larger text, so the treasury name and balance read on small screens. */
.salary-pay-fields .field > span:first-child { font-size: 14px; }
.salary-pay-fields input[type="number"], .salary-pay-fields .party-lookup .search-field { min-height: 50px; height: 50px; font-size: 17px; }
.salary-pay-fields .party-lookup .search-field input { font-size: 17px; font-weight: 800; }
.input-with-action { display: flex; gap: 6px; align-items: center; }
.input-with-action input { flex: 1; }
.custody-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.custody-summary > div { padding: 10px 12px; border-radius: 8px; background: var(--surface-soft); text-align: center; }
.custody-summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.custody-summary b { display: block; margin-top: 3px; font-size: 16px; font-weight: 850; }
.custody-summary .is-off { background: var(--red-bg); color: var(--red-text); }

@media (max-width: 1100px) {
  .employees-split, .statement-balances { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .custody-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employees-page .kpis, .employees-page .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@page payroll { size: A4 landscape; margin: 8mm; }
@media print {
  .employees-page { page: payroll; }
  .employees-page .page-intro, .employees-page .statement-kpis { display: none !important; }
  .payroll-table { font-size: 11px; }
  .payroll-table th, .payroll-table td, .payroll-table tfoot th { padding: 5px 6px; border: 1px solid #9fb3c4; }
  .payroll-table .col-net, .payroll-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .statement-head, .statement-balances > div { box-shadow: none; }
}
.attendance-table .col-punch { width: 1%; white-space: nowrap; text-align: center; }
.attendance-table .punch-in { background: var(--green-bg); border-color: transparent; color: var(--green-text); }
.attendance-table .punch-out { background: var(--amber-bg); border-color: transparent; color: var(--amber-text); }
.attendance-table .col-punch .btn svg { width: 14px; height: 14px; }
.treasury-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; max-height: 220px; overflow: auto; }
.created-by { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.created-by svg { width: 14px; height: 14px; flex: none; }
.line-image { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 4px 8px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 750; cursor: pointer; }
.line-image:hover { border-color: var(--accent); color: var(--accent); }
.line-image input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.line-image img { max-width: 100%; max-height: 90px; object-fit: contain; border-radius: 6px; }
.line-image svg { width: 16px; height: 16px; }
.line-thumb { float: inline-start; width: 64px; height: 64px; margin-inline-end: 8px; object-fit: contain; border: 1px solid #d4dce6; border-radius: 6px; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.print-top .print-qr { margin: 10px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 8px; border: 1px solid var(--print-ink, #12365a); }
.print-top .print-qr small { font-size: 10px; }
.print-end { margin-top: 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; page-break-inside: avoid; }
.print-sign-here { display: flex; align-items: flex-end; gap: 8px; color: var(--print-ink, #12365a); font-size: 14px; }
.print-sign-here .print-sign-blank { color: var(--print-ink, #12365a); letter-spacing: 2px; }
.print-sign-here .print-sign-img { margin: 0; max-height: 56px; }
.print-contact { color: var(--print-ink, #12365a); font-size: 13px; font-weight: 800; line-height: 1.8; text-align: end; }
/* Contact blocks side by side as a borderless table (also holds in the PDF). */
.print-contact-blocks { margin-inline-start: auto; border-collapse: collapse; }
.print-contact-blocks td.print-contact-block { padding: 0 0 0 28px; border: 0; vertical-align: top; text-align: start; background: none; }
.print-contact-blocks td.print-contact-block:last-child { padding-left: 0; }
.print-phone { unicode-bidi: isolate; white-space: nowrap; }
/* Numbers typed on the same line keep a clear gap between them. */
.print-phone + .print-phone { margin-inline-start: 14px; }
/* Typing Arabic text and phone numbers in the same box: each line takes its own direction. */
textarea[name="print_contact_note"] { unicode-bidi: plaintext; }

/* ---------- 31) Mobile & small screens ---------- */
/* Search boxes wrap a bare input: keep it borderless even inside .field / .filter-strip, which style inputs. */
.search-field input:not([type="checkbox"]):not([type="radio"]) {
  width: auto; height: 100%; min-height: 0; padding: 0; flex: 1; min-width: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}

/* Checkboxes inside a .field keep their natural size and sit beside their label. */
.field input:is([type="checkbox"], [type="radio"]) { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; padding: 0; }
.field > .switch-line { display: flex; margin-bottom: 0; color: var(--text); font-size: 14px; font-weight: 800; }
.field > .switch-line + small { margin-inline-start: 25px; }

@media (max-width: 1050px) {
  .form-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .settings-nav { display: flex; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .settings-nav a { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 900px) {
  .toolbar > *, .filter-strip > * { flex: none !important; width: 100%; min-width: 0 !important; max-width: 100%; margin-inline-start: 0; }
  .toolbar > .btn-link, .filter-strip > .btn-link { width: auto; align-self: flex-start; }
  .toolbar > .actions > .btn { flex: 1 1 auto; }
  .filter-strip label > :is(input, select, .date-field-control, .search-field),
  .toolbar label > :is(input, select, .date-field-control),
  .inline-filter > select, .date-field > .date-field-control { flex: 1; min-width: 0; }
  .filter-strip .filter-lookup, .toolbar .filter-lookup { width: 100%; }
  .movement-panel .filter-strip select, .movement-panel .filter-strip input[type="date"], .movement-panel .search-field { flex: none; }
}

@media (max-width: 1024px) {
  .sidebar { width: min(286px, 86vw); flex-basis: auto; height: 100dvh; }
  .topbar { min-height: 58px; padding: 8px 12px; gap: 8px; }
  .page-heading { flex: 1 1 auto; min-width: 0; }
  .page-heading h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  .menu-button, .icon-button { width: 38px; height: 38px; border-radius: 10px; }
  .global-search, .presence-toggle, .branch-switch, .branch-badge { height: 38px; }
  .locale-switch .icon-button { width: auto; min-width: 38px; padding: 0 8px; }
  .breadcrumb-bar { min-height: 38px; padding: 6px 12px; gap: 10px; font-size: 12px; }

  .data-table th, .data-table td { padding-inline: 10px; }
  .table-wrap > .data-table { width: max-content; min-width: 100%; }
  .table-wrap > .data-table td { max-width: 280px; white-space: normal; }
  .data-table td { min-width: 104px; }
  .data-table td:not(.col-index, .col-num, .col-actions):has(> strong, > a.row-link, > .name-with-thumb, > a > strong) { min-width: 170px; }
  .data-table td:not(.col-index, .col-num, .col-actions, [colspan]):not(:has(*)) { min-width: 150px; }
  .data-table td:is(.col-index, .col-actions, .col-punch, [colspan]), .data-table td:has(> .row-menu-wrap, > input[type="checkbox"]) { min-width: 0; }
  .table-wrap .empty-state { position: sticky; inset-inline-start: 0; max-width: calc(100vw - 28px); }
  .tabs { scrollbar-width: none; }
}
@media (max-width: 1024px) and (pointer: coarse) {
  /* 16px stops iOS from zooming the page when a field gets focus. */
  :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"], [type="color"]) { font-size: 16px !important; }
}

@media (max-width: 600px) {
  .page { padding: 14px 12px 28px; }
  .page-intro { gap: 12px; margin-bottom: 14px; }
  .page-intro h2 { font-size: 21px; }
  .page-intro .actions, .page-intro > div:has(> .btn) { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-intro .actions .btn { flex: 1 1 auto; }

  .kpis, .kpis.five, .kpis.three, .kpis.two, .period-summary, .dash-kpis, .movement-summary,
  .qty-cards, .qty-cards.four, .facts, .supplier-prices-page .supplier-price-kpis, .employees-page .page-intro > .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; gap: 8px;
  }
  :is(.kpis, .period-summary, .dash-kpis, .movement-summary, .qty-cards, .supplier-price-kpis) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi, .period-summary article, .supplier-prices-page .supplier-price-kpis article { min-height: 0; padding: 10px 12px; }
  .kpi strong, .movement-summary strong, .supplier-prices-page .supplier-price-kpis strong { font-size: 18px; }
  .kpi span, .period-summary span { font-size: 12px; }
  .period-summary strong { font-size: 14px; }
  .dash-kpis { margin: 12px 0 16px; }
  .kpi-card { padding: 12px; border-radius: 10px; }
  .kpi-card small { font-size: 11px; }
  .qty-cards strong { font-size: 16px; }
  .facts strong { font-size: 14px; }

  .table-card-head { flex-wrap: wrap; padding: 10px 12px; }
  .table-card-head .hint { display: none; }
  .head-tools { justify-content: flex-start; }
  .pagination { flex-wrap: wrap; justify-content: center; }
  .pagination:not(.centered) .info { width: 100%; margin: 0; text-align: center; }

  .activity-item { grid-template-columns: 30px minmax(0, 1fr); padding: 10px 12px; }
  .activity-item time { grid-column: 2; }

  .detail-shell, .settings-section { padding: 14px 12px; }
  .detail-head h3 { font-size: 20px; }
  .detail-actions .btn, .modal-actions .btn { flex: 1 1 auto; }
  .statement-summary, .dues-preview, .payment-split-foot, .voucher-invoice-foot { flex-wrap: wrap; }
  .movement-panel { padding: 10px; }
  .movement-panel .panel-title { flex-wrap: wrap; }
  .movement-day { padding: 10px 12px; }
  .form-grid { gap: 11px; }

  .modal-layer { padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); padding: 16px 14px; border-radius: 16px; }
  .modal-head h3 { font-size: 18px; }
  .auth-card { padding: 22px 18px; }
}

@media (max-width: 590px) {
  /* The page title is repeated in the breadcrumb and page intro, so the actions get the room. */
  .page-heading { visibility: hidden; }
  .global-search { position: relative; width: 38px; padding: 0; justify-content: center; }
  .global-search input { display: block; position: absolute; inset: 0; opacity: 0; }
  .global-search:focus-within { position: fixed; top: 9px; inset-inline: 12px; z-index: 30; width: auto; padding: 0 12px; justify-content: flex-start; background: #fff; }
  .global-search:focus-within input { position: static; opacity: 1; }
  .locale-switch .icon-button svg, .branch-switch > svg, .presence-toggle > svg { display: none; }
  .presence-toggle, .branch-switch { padding: 0 8px; gap: 5px; }
  .branch-switch select { max-width: 120px; }
}

@media (max-width: 480px) {
  .form-grid.cols-4 { grid-template-columns: 1fr; }
}

/* Supplier catalog cards: as many columns as fit, never narrower than 240px. */
.page18-supplier-catalog .supplier-price-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Grid tracks may shrink below their content's natural width, so long words or dotted signature lines never widen the page. */
.totals-editor, .purchase-payment, .handover-signs, .handover-fields, .print-parties { min-width: 0; }
.totals-editor > *, .purchase-payment > *, .handover-signs > *, .handover-fields > *, .print-parties > * { min-width: 0; }
.handover-line b { min-width: 0; overflow: hidden; white-space: nowrap; }
@media (max-width: 1050px) {
  .totals-editor, .purchase-payment { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .handover-signs { grid-template-columns: minmax(0, 1fr); }
  .discount-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Invoice / order line editors. app.js wraps each value cell in .line-cell with its column title;
   wide screens ignore the wrapper (display: contents), phones turn every line into a card:
   item + remove on top, the typed fields (quantity, price) side by side, then size and line total. */
.line-cell { display: contents; }
.line-cell-label { display: none; }
@media (max-width: 700px) {
  .lines-grid { overflow: visible; }
  .lines-grid .line-row.head { display: none; }
  .lines-grid .line-row:not(.head) {
    min-width: 0 !important; grid-template-columns: 22px repeat(2, minmax(0, 1fr)) 38px; align-items: start; gap: 10px 8px; padding: 12px 10px;
  }
  .lines-grid .line-row:not(.head):nth-of-type(even) { background: var(--surface-soft); }
  .lines-grid .line-row:not(.head) > :first-child { grid-column: 1; grid-row: 1; align-self: center; color: var(--muted); font-weight: 800; }
  .lines-grid .line-row:not(.head) > :has(.picker-button, .manual-line) { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
  .lines-grid .line-row:not(.head) > .line-remove { grid-column: 4; grid-row: 1; align-self: center; }
  .lines-grid .line-cell { display: flex; flex-direction: column; gap: 4px; grid-column: span 2; min-width: 0; order: 2; }
  .lines-grid .line-cell:has(> input, > select, > .qty-unit) { order: 1; }
  .lines-grid .line-cell-label { display: block; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.3; }
  .lines-grid .line-cell > :not(.line-cell-label) { width: 100%; min-width: 0; }
  .lines-grid .line-cell:not(:has(> input, > select, > .qty-unit)) { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
  .lines-grid .line-cell:not(:has(> input, > select, > .qty-unit)) > :not(.line-cell-label) { width: auto; font-weight: 800; }
  .lines-grid .line-cell > strong.money { color: var(--accent); font-size: 16px; }
  .lines-grid input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  .lines-grid input[type="number"]::-webkit-inner-spin-button, .lines-grid input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
}
.contact-grid strong > small { display: block; margin-top: 2px; }

/* Print preview on a phone screen: stack the header blocks and tighten the sheet (paper output is unchanged). */
@media screen and (max-width: 600px) {
  .print-page { padding: 8px; }
  .print-page .print-sheet, .print-page .doc { min-height: 0; padding: 14px 12px; }
  .print-top { grid-template-columns: 1fr; }
  .print-top .print-qr { margin-top: 0; }
  .print-items th, .print-items td { padding: 5px 4px; font-size: 12px; }
  .print-items:not(.statement-print) td:nth-child(2) { min-width: 96px; word-break: normal; }
  .print-signs, .print-page .print-signs { grid-template-columns: 1fr 1fr; }
  .print-end { flex-direction: column; align-items: stretch; }
  .print-contact { text-align: start; }
  .print-contact-blocks { margin-inline-start: 0; }
}

/* Phones / tablets: tables take their natural width and scroll inside their card instead of crushing text columns. */
@media (max-width: 1024px) {
  .table-wrap > .data-table { width: max-content; min-width: 100%; }
}
@media (max-width: 760px) {
  .dues-category-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dues-category-cards a { min-height: 0; padding: 10px; }
  .dues-category-cards span { font-size: 12px; line-height: 1.5; }
  .dues-category-cards b { font-size: 18px; }
  .dues-category-cards small { font-size: 12px; }
}
@media screen and (max-width: 600px) {
  .print-items.statement-print { table-layout: auto; }
  .print-items.statement-print th, .print-items.statement-print td { width: auto !important; font-size: 11px; }
}
.field > .color-field { display: flex; margin-bottom: 0; }
@media (max-width: 600px) {
  .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .report-card { min-height: 0; padding: 12px; }
  .report-card strong { font-size: 14px; }
  .report-card span { font-size: 12px; }
}

/* Public (QR) page of a document that is not final yet or was cancelled. */
.public-status-mark { margin: 0 0 10px; padding: 8px 12px; border: 2px solid var(--red); border-radius: 8px; background: var(--red-bg); color: var(--red-text); font-size: 16px; font-weight: 850; text-align: center; }

/* ---------- Print: tables fit the paper ----------
   Printing from a phone uses the narrow layout, where tables are wider than the screen and scroll sideways;
   on paper that cut off the amount columns. In print every table fits the page width instead. Kept last so it
   wins over the small-screen table rules. */
@media print {
  .table-wrap { overflow: visible !important; }
  .data-table, .table-wrap > .data-table { width: 100% !important; min-width: 0 !important; }
  .data-table thead { display: table-header-group; }
  .data-table tr { break-inside: avoid; }
  .data-table th, .data-table td { min-width: 0 !important; max-width: none !important; height: auto; padding: 5px 6px !important; font-size: 10.5px !important; white-space: normal !important; }
  .data-table td small { font-size: 9px !important; }
  .data-table .money, .data-table .col-amount, .data-table .col-num, .data-table bdi { white-space: nowrap !important; }
  .movement-board { grid-template-columns: 1fr !important; gap: 10px; }
  .movement-panel { break-inside: auto; padding: 8px; }
  .movement-panel .panel-title { flex-wrap: nowrap; margin-bottom: 6px; }
  .movement-panel .panel-total strong { font-size: 15px; }
  .movement-summary { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
  .movement-summary strong { font-size: 14px !important; }
}

/* Sale discount window: the invoice figures it starts from. */
.discount-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.discount-facts > div { padding: 10px 12px; border-radius: 8px; background: var(--surface-soft); text-align: center; }
.discount-facts span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.discount-facts b { display: block; margin-top: 3px; font-size: 16px; font-weight: 850; }
@media (max-width: 560px) { .discount-facts { grid-template-columns: 1fr; } }