/* Repairs app: dashboard, repair list + board, repair page (banners, parts and labour tables, side column), settings. Tokens from admin.css only, logical properties,
   light + dark through the tokens, phone first at 375 px. The kanban engine (kb-*) lives in erp.css, the lines editor (le-*) in erp.css, the how/kpi/attn cards (bk-*) in orders.css. */

/* ------------------------------------------------------------ shared bits */
.rep-prod { overflow-wrap: anywhere; }
.rep-tel { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-d); font-weight: 650; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.rep-tel:hover { text-decoration: underline; }
.rep-who { display: inline-flex; align-items: center; gap: 6px; }
.rep-late-txt { color: var(--danger-ink); font-weight: 650; }
.rep-seg .seg { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.rep-view { min-width: 0; }
.rep-view .error-box .btn { margin-top: 8px; }

/* ------------------------------------------------------------ dashboard */
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.rep-list li { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--line); }
.rep-list li:last-child { border-bottom: 0; }
.rep-list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.rep-state-tile { display: grid; gap: 2px; justify-items: center; align-content: center; min-height: 72px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); text-decoration: none; }
.rep-state-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.rep-state-tile b { font-size: 22px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ list */
.rep-c-main { min-width: 160px; }
.rpr-cell { display: grid; gap: 2px; min-width: 0; }
.rep-sub { display: none; gap: 2px; min-width: 0; }   /* only where the Customer / Product columns are hidden (phone) */
.rep-phone-meta { display: none; }
tr.rep-late > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
[dir="rtl"] tr.rep-late > td:first-child { box-shadow: inset -3px 0 0 var(--danger); }

/* ------------------------------------------------------------ board */
.rep-kb .kb-col { flex: 1 0 260px; min-width: 240px; max-width: 330px; }
.rep-kb .kb-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpr-kcard { display: grid; gap: 6px; min-width: 0; }
.rpr-kcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rpr-kcard-cust { font-weight: 650; overflow-wrap: anywhere; }
.rpr-kcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rep-kb .kb-card:has(.rpr-kcard.is-late) { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
[dir="rtl"] .rep-kb .kb-card:has(.rpr-kcard.is-late) { box-shadow: inset -3px 0 0 var(--danger), var(--shadow); }

/* ------------------------------------------------------------ repair page */
.rep-banners { display: grid; gap: 8px; }
.rep-banners:not(:empty) { margin-bottom: 12px; }
.rep-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); font-size: 13.5px; }
.rep-banner > .ico { color: var(--info-ink); margin-top: 2px; }
.rep-banner > div { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.rep-banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.rep-banner.ok > .ico { color: var(--ok-ink); }
.rep-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.rep-banner.warn > .ico { color: var(--warn-ink); }
.rep-banner.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.rep-banner.danger > .ico { color: var(--danger-ink); }
:root:root .rep-banner > .btn { flex: 0 0 auto; margin-inline-start: auto; min-height: 44px; }
.rep-free-note { margin-top: 8px; }
.rpr-doc .le { margin-bottom: 8px; }
.rpr-doc .le-static.num, .rpr-doc .le-calc.static { font-variant-numeric: tabular-nums; }
.rep-side { display: grid; gap: 12px; }
.rep-settings { max-width: 640px; }
.rep-settings .input-suffix { max-width: 220px; }

/* bottom action bar of the repair page on phones */
.rep-mbar { display: none; }

/* ------------------------------------------------------------ phone */
@media (max-width: 720px) {
  .rep-sub { display: grid; }
  .rep-phone-meta { display: block; }
  .rep-seg .seg > span:not(.ico) { display: none; }
  .rep-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-kb .kb-board { scroll-snap-type: x mandatory; scroll-padding-inline: 4px; }
  .rep-kb .kb-col { flex-basis: 86%; max-width: 86%; }
  .rep-list-card .list-body .data-table tr.row { gap: 6px; padding: 14px; }
  .rep-list-card .list-body .data-table td.rep-c-main { display: block; text-align: start; }
  .rep-list-card .list-body .data-table td.rep-c-main[data-label]::before { content: none; }
  .rep-list-card .list-body .data-table tr.rep-late > td:first-child { box-shadow: none; }
  .rep-list-card .list-body .data-table tr.rep-late { box-shadow: inset 3px 0 0 var(--danger); }
  [dir="rtl"] .rep-list-card .list-body .data-table tr.rep-late { box-shadow: inset -3px 0 0 var(--danger); }
  .rep-banner { flex-wrap: wrap; }
  :root:root .rep-banner > .btn { flex: 1 1 100%; margin-inline-start: 0; }
  .rpr-doc { padding-bottom: 76px; }
  .rpr-doc .dh-actions { display: none; }
  .rep-mbar { display: flex; gap: 8px; position: fixed; inset-inline: 0; bottom: var(--bn-h); z-index: 30; padding: 10px max(14px, env(safe-area-inset-left)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  :root:root .rep-mbar .btn { flex: 1 1 0; min-height: 48px; font-size: 15px; min-width: 0; padding-inline: 8px; }
  :root:root .rep-mbar .btn.btn-danger-ghost { flex: 0 0 52px; }
  .rep-mbar .btn.btn-danger-ghost > span:not(.ico) { display: none; }
}
@media (max-width: 900px) and (max-height: 520px) { .rep-mbar { bottom: 0; } }