/* CEC Tech UI components.
   Scoped under .ui so pages that have not moved to these components are untouched.
   Colours come from style.css (:root), so the look stays the application's own.

   Proportions are fluid: every size is clamp(min, preferred, max), and the preferred value follows the width of
   the content area (container query units, cqi), not the whole screen. A phone gets the small end, a wide monitor
   the large end, and nothing jumps at a breakpoint. The sidebar on a laptop is accounted for because the
   container is the page area beside it. */

.ui-root { container-type: inline-size; container-name: page; }

.ui {
  --ui-primary: var(--primary, #3b4cb4);
  --ui-primary-hover: var(--primary-hover, #2e3b8f);
  --ui-primary-soft: #eef0fa;
  --ui-ink: #1e293b;
  --ui-text: var(--text-main, #334155);
  --ui-muted: var(--text-muted, #64748b);
  --ui-line: var(--border, #e2e8f0);
  --ui-bg: var(--bg-light, #f8fafc);
  --ui-card: #ffffff;
  --ui-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  --ui-ok: #15803d;      --ui-ok-soft: #dcfce7;
  --ui-warn: #b45309;    --ui-warn-soft: #fef3c7;
  --ui-bad: #b91c1c;     --ui-bad-soft: #fee2e2;
  --ui-info: #1d4ed8;    --ui-info-soft: #dbeafe;

  /* Fluid type scale: 320 px wide area -> 1400 px wide area */
  --fs-xs:    clamp(11.5px, 0.20cqi + 11px, 13px);
  --fs-sm:    clamp(12.5px, 0.25cqi + 11.7px, 14.5px);
  --fs-base:  clamp(14.5px, 0.25cqi + 13.7px, 16.5px);
  --fs-lg:    clamp(15.5px, 0.40cqi + 14.2px, 19px);
  --fs-xl:    clamp(21px, 1.00cqi + 17.8px, 30px);
  --fs-2xl:   clamp(24px, 1.60cqi + 18.9px, 38px);

  /* Fluid spacing */
  --sp-2xs: clamp(4px, 0.25cqi + 3.2px, 6px);
  --sp-xs:  clamp(6px, 0.40cqi + 4.7px, 10px);
  --sp-sm:  clamp(10px, 0.55cqi + 8.2px, 14px);
  --sp-md:  clamp(12px, 0.90cqi + 9.1px, 20px);
  --sp-lg:  clamp(16px, 1.30cqi + 11.8px, 28px);
  --sp-xl:  clamp(20px, 2.00cqi + 13.6px, 40px);

  /* Radius, controls and icons scale too, gently */
  --ui-radius: clamp(10px, 0.40cqi + 8.7px, 14px);
  --tap: clamp(44px, 0.70cqi + 41.8px, 50px);            /* never below a thumb-sized 44 px */
  --icon: clamp(18px, 0.35cqi + 16.9px, 22px);

  color: var(--ui-text);
  width: 100%;
  max-width: 1320px;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui a { color: inherit; text-decoration: none; }
.ui svg { width: var(--icon); height: var(--icon); flex: 0 0 auto; }

/* Page head */
.ui-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-sm); flex-wrap: wrap; margin: 0 0 var(--sp-lg); }
.ui-eyebrow { margin: 0 0 var(--sp-2xs); font-size: max(12px, var(--fs-xs)); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-muted); }
.ui h1.ui-title { margin: 0; font-size: var(--fs-2xl); line-height: 1.15; font-weight: 700; color: var(--ui-ink); }
.ui-sub { margin: var(--sp-2xs) 0 0; color: var(--ui-muted); font-size: var(--fs-sm); }

/* Buttons: sized to their label, at least a thumb tall, never a full-width slab unless asked */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  min-height: var(--tap); padding: 0 var(--sp-md); border-radius: calc(var(--ui-radius) - 2px); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: var(--fs-base); cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ui-btn-primary { background: var(--ui-primary); color: #fff !important; }
.ui-btn-primary:hover { background: var(--ui-primary-hover); }
.ui-btn-secondary { background: var(--ui-card); color: var(--ui-ink) !important; border-color: var(--ui-line); }
.ui-btn-secondary:hover { border-color: #cbd5e1; background: var(--ui-bg); }
.ui-btn-ghost { background: transparent; color: var(--ui-primary) !important; padding: 0 var(--sp-sm); }
.ui-btn-ghost:hover { background: var(--ui-primary-soft); }
.ui-btn-sm { min-height: calc(var(--tap) - 8px); padding: 0 var(--sp-sm); font-size: var(--fs-sm); }
.ui-btn-block { width: 100%; }
.ui-btn:focus-visible, .ui-tile:focus-visible, .ui-row:focus-visible, .ui-hero:focus-visible, .ui-strip:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

/* Cards */
.ui-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.ui-card-pad { padding: var(--sp-md); }
.ui-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--ui-line); }
.ui h2.ui-card-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--ui-ink); }

/* Status strip */
.ui-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); flex-wrap: wrap; padding: var(--sp-sm) var(--sp-md); margin-bottom: var(--sp-md); }
.ui-strip-main { display: flex; align-items: center; gap: var(--sp-xs); min-width: 0; }
.ui-dot { width: 10px; height: 10px; border-radius: 999px; background: #cbd5e1; flex: 0 0 auto; }
.ui-dot-on { background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.ui-strip-text { font-weight: 600; color: var(--ui-ink); }
.ui-strip-text span { font-weight: 400; color: var(--ui-muted); }

/* Primary action */
.ui-hero {
  display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); margin-bottom: var(--sp-md);
  background: var(--ui-primary); color: #fff !important; border-radius: var(--ui-radius);
  box-shadow: 0 6px 16px rgba(59, 76, 180, 0.22); transition: background-color .15s, transform .15s;
}
.ui-hero:hover { background: var(--ui-primary-hover); }
.ui-hero:active { transform: scale(0.99); }
.ui-hero-icon { width: calc(var(--tap) + 2px); height: calc(var(--tap) + 2px); border-radius: var(--ui-radius); background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ui-hero-icon svg { width: calc(var(--icon) + 4px); height: calc(var(--icon) + 4px); }
.ui-hero-text { flex: 1 1 auto; min-width: 0; }
.ui-hero-title { display: block; font-size: var(--fs-lg); font-weight: 700; }
.ui-hero-hint { display: block; font-size: var(--fs-sm); opacity: 0.85; }
.ui-hero-go { opacity: 0.85; }

/* Stats: as many per row as fit, at least 3 on a phone */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(90px, 30%)), 1fr)); gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.ui-stat { display: block; padding: var(--sp-sm) var(--sp-md); min-width: 0; }
.ui-stat-value { display: block; font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; color: var(--ui-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a long amount shrinks to fit its tile instead of breaking mid-number */
.ui-stat { container-type: inline-size; }
@container (max-width: 150px) { .ui-stat-value { font-size: clamp(0.95rem, 13cqw, var(--fs-xl)); } }
.ui-stat-label { display: block; margin-top: var(--sp-2xs); font-size: var(--fs-sm); color: var(--ui-muted); line-height: 1.3; }
.ui-stat-bad .ui-stat-value { color: var(--ui-bad); }
.ui-stat-ok .ui-stat-value { color: var(--ui-ok); }
a.ui-stat:hover { border-color: #cbd5e1; }

/* Tiles: as many per row as fit at a comfortable width */
.ui-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(140px, 22cqi, 220px)), 1fr)); gap: var(--sp-sm); align-content: start; }
.ui-tile { position: relative; display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-md); min-height: clamp(104px, 6cqi + 86px, 150px); transition: border-color .15s, box-shadow .15s; }
.ui-tile:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
.ui-tile-icon { width: calc(var(--tap) - 6px); height: calc(var(--tap) - 6px); border-radius: calc(var(--ui-radius) - 2px); background: var(--ui-primary-soft); color: var(--ui-primary); display: flex; align-items: center; justify-content: center; }
.ui-tile-title { font-weight: 700; color: var(--ui-ink); font-size: var(--fs-base); line-height: 1.25; }
.ui-tile-hint { font-size: var(--fs-sm); color: var(--ui-muted); line-height: 1.3; }
.ui-tile .ui-badge { position: absolute; top: var(--sp-sm); right: var(--sp-sm); }

/* Badges */
.ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 0.2em 0.7em; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; background: #f1f5f9; color: #475569; }
.ui-badge-pending { background: var(--ui-warn-soft); color: var(--ui-warn); }
.ui-badge-approved { background: var(--ui-ok-soft); color: var(--ui-ok); }
.ui-badge-rejected { background: var(--ui-bad-soft); color: var(--ui-bad); }
.ui-badge-reopened { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-badge-count { background: var(--ui-bad); color: #fff; min-width: 1.9em; justify-content: center; }

/* Lists of records */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-row { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border-top: 1px solid var(--ui-line); min-height: calc(var(--tap) + 16px); }
.ui-list li:first-child .ui-row { border-top: 0; }
a.ui-row:hover { background: var(--ui-bg); }
.ui-row-main { flex: 1 1 auto; min-width: 0; }
.ui-row-title { display: block; font-weight: 600; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-sub { display: block; font-size: var(--fs-sm); color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-note { display: block; font-size: var(--fs-sm); color: var(--ui-bad); margin-top: 2px; }
.ui-row-side { display: flex; align-items: center; gap: var(--sp-xs); flex: 0 0 auto; }
.ui-row-side > svg { color: #94a3b8; }
.ui-attention { border-color: #fecaca; }
.ui-attention .ui-card-head { background: #fff7f7; border-bottom-color: #fecaca; border-radius: var(--ui-radius) var(--ui-radius) 0 0; }

.ui-empty { padding: var(--sp-lg) var(--sp-md); text-align: center; color: var(--ui-muted); font-size: var(--fs-sm); }
.ui-stack > * + * { margin-top: var(--sp-md); }

/* Flash messages, shared by every shell */
.ui-flash { display: flex; gap: var(--sp-xs); align-items: flex-start; padding: var(--sp-sm) var(--sp-md); border-radius: calc(var(--ui-radius) - 2px); margin-bottom: var(--sp-xs); font-size: var(--fs-sm); border: 1px solid; }
.ui-flash svg { margin-top: 1px; }
.ui-flash-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ui-flash-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ui-flash-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.ui-flash-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.ui-flashes:empty { display: none; }
.ui.ui-flashes { max-width: none; }

/* Layout: one column until the content area can hold two comfortable columns */
.ui-grid-main { display: grid; gap: var(--sp-md); }
@container page (min-width: 820px) {
  .ui-grid-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .ui-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container page (min-width: 1200px) {
  .ui-grid-main { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
}

/* On touch screens every control stays at least a thumb tall, small buttons included */
@media (pointer: coarse) { .ui-btn-sm, .content .ui a.ui-btn-sm, .content .ui button.ui-btn-sm { min-height: 44px; } }


/* Four stats in a row where there is room, two by two on a phone */
.ui-stats-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(130px, 22%)), 1fr)); }
@container page (max-width: 520px) { .ui-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Key-value pairs */
.ui-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-sm) var(--sp-md); margin: 0; }
.ui-kv dt { font-size: var(--fs-sm); color: var(--ui-muted); }
.ui-kv dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 700; color: var(--ui-ink); }
.ui-good { color: var(--ui-ok) !important; } .ui-bad-text { color: var(--ui-bad) !important; }

/* Progress bars */
.ui-progress-row { display: block; margin-top: var(--sp-sm); }
.ui-progress-label { display: flex; justify-content: space-between; gap: var(--sp-sm); font-size: var(--fs-sm); color: var(--ui-muted); margin-bottom: 4px; }
.ui-progress-label span:first-child { color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-progress { display: block; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.ui-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--ui-primary); }
.ui-progress-alt > span { background: #16a34a; }
a.ui-progress-row:hover .ui-progress-label span:first-child { color: var(--ui-primary); }

/* Card grid, used for projects */
.ui-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-md); }
.ui-project { display: block; transition: border-color .15s, box-shadow .15s; }
.ui-project:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
.ui-project-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-sm); }
.ui-project-head > span:first-child { min-width: 0; }

.ui-notice { background: var(--ui-info-soft); border-color: #bfdbfe; margin-bottom: var(--sp-md); }
.ui-notice svg { color: var(--ui-info); }

/* Badge text never below 12 px */
.ui-badge { font-size: max(12px, var(--fs-xs)); }

/* Toolbar: filters and a few numbers above a list, in one line where it fits */
.ui-toolbar { display: flex; align-items: flex-end; gap: var(--sp-md); flex-wrap: wrap; padding: var(--sp-sm) var(--sp-md); margin-bottom: var(--sp-md); }
.ui-field { display: flex; flex-direction: column; gap: 4px; min-width: min(100%, 220px); margin: 0; }
.ui-field > span { font-size: var(--fs-sm); font-weight: 600; color: var(--ui-muted); }
.ui .ui-field select, .ui .ui-field input { min-height: var(--tap); padding: 0 12px; border: 1px solid var(--ui-line); border-radius: calc(var(--ui-radius) - 4px);
  background: #fff; font: inherit; font-size: max(16px, var(--fs-base)); color: var(--ui-ink); margin: 0; width: 100%; }
.ui-toolbar-stats { display: flex; gap: var(--sp-lg); margin: 0 0 0 auto; flex-wrap: wrap; }
.ui-toolbar-stats dt { font-size: max(12px, var(--fs-xs)); color: var(--ui-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ui-toolbar-stats dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--ui-ink); }

/* Rows whose actions wrap under the title when the row is narrow */
.ui-row-wrap { flex-wrap: wrap; }
.ui-row-wrap .ui-row-main { min-width: min(100%, 220px); }
.ui-row-wrap .ui-row-side { flex-wrap: wrap; justify-content: flex-end; }
.ui-amount { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ui-amount strong { color: var(--ui-ink); }
.ui-amount small { font-size: var(--fs-xs); color: var(--ui-muted); }

.ui-btn-danger { background: #fff; color: var(--ui-bad) !important; border-color: #fecaca; }
.ui-btn-danger:hover { background: var(--ui-bad-soft); }

/* A small "More" menu for secondary and destructive actions */
.ui-menu { position: relative; }
.ui-menu > summary { list-style: none; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(300px, 80vw); padding: var(--sp-sm); display: grid; gap: var(--sp-sm); }
.ui-menu-form { display: grid; gap: var(--sp-xs); }

/* The old phone rule for ".content li a" makes list links inline-flex; rows keep their own layout */
.ui a.ui-row-main { display: block; min-height: 0; padding: 0; }
.ui a.ui-row { min-height: calc(var(--tap) + 16px); }

/* On a narrow page the More menu opens under its row, the width of the row, instead of off the screen edge */
.ui-row-wrap { position: relative; }
@container page (max-width: 600px) {
  .ui-menu { position: static; }
  .ui-menu-panel { left: var(--sp-sm); right: var(--sp-sm); width: auto; top: calc(100% - 4px); }
  .ui-toolbar-stats { margin-left: 0; width: 100%; justify-content: space-between; }
  .ui-row-wrap .ui-row-side { justify-content: flex-start; width: 100%; }
}

/* ---- Roles & access ---- */
.ui-row-desc { white-space: normal !important; margin-top: 2px; }
.ui-badge-neutral { background: #e2e8f0; color: #334155; }
.ui-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-md); }
.ui-field-wide { grid-column: 1 / -1; }
.ui-kind-help { margin-top: var(--sp-sm); }
.ui-perm-group { border: 1px solid var(--ui-line, #e2e8f0); margin: 0; min-width: 0; }
.ui-perm-group legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; }
.ui-perm-group legend + * { clear: both; }
.ui .ui-check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #f1f5f9; cursor: pointer; }
.ui .ui-check:first-of-type { border-top: 0; }
.ui .ui-check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--ui-primary); }
.ui .ui-check span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui .ui-check strong { font-size: var(--fs-base); color: var(--ui-ink); font-weight: 600; }
.ui .ui-check small { font-size: max(12px, var(--fs-sm)); color: var(--ui-muted); line-height: 1.4; }
.ui .ui-check-off { cursor: not-allowed; opacity: .6; }
.ui-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; }
.ui-danger-zone { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md); flex-wrap: wrap; border-color: #fecaca; }
.ui-danger-zone p { margin: 2px 0 0; }
.ui-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-matrix { border-collapse: collapse; width: 100%; font-size: max(12px, var(--fs-sm)); }
.ui-matrix th, .ui-matrix td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; text-align: center; white-space: nowrap; }
.ui-matrix thead th { font-weight: 600; color: var(--ui-muted); vertical-align: bottom; }
.ui-matrix thead th span { display: inline-block; max-width: 9em; white-space: normal; line-height: 1.2; }
.ui-matrix tbody th[scope=row], .ui-matrix thead th:first-child { text-align: left; font-weight: 500; color: var(--ui-text); position: sticky; left: 0; background: #fff; }
.ui-matrix-group th { text-align: left; background: #f8fafc; color: var(--ui-ink); font-weight: 700; padding-top: 12px; }
.ui-yes svg { width: 18px; height: 18px; color: var(--ui-ok); vertical-align: middle; }
.ui-no { color: #cbd5e1; }
.ui-eyebrow a { color: inherit; text-decoration: none; }
.ui-eyebrow a:hover { color: var(--ui-primary); }
.ui legend.ui-card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--ui-ink); }
.ui-matrix-wrap { padding: 0 var(--sp-md) var(--sp-sm); }
.ui-card:not(.ui-card-pad) > p.ui-sub { padding: 0 var(--sp-md) var(--sp-md); margin: 0; }
.ui-role-card { max-width: 900px; margin-bottom: var(--sp-md); }
.ui-role-form { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: flex-end; }
.ui-role-form .ui-field { flex: 1 1 240px; }

/* ---- Daily cost card: total top right, qty x rate = amount lines ---- */
.ui-cost-card { max-width: 760px; margin-bottom: 20px; }
.ui-cost-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-md); padding: var(--sp-md); border-bottom: 1px solid var(--ui-line); }
.ui-cost-head .ui-eyebrow { margin: 0 0 4px; }
.ui .ui-cost-count { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--ui-ink); }
.ui-cost-total { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ui-cost-amount { font-size: var(--fs-2xl); font-weight: 800; color: var(--ui-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-cost-label { font-size: max(12px, var(--fs-xs)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.ui-cost-pay { margin-top: 4px; font-size: var(--fs-sm); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-cost-wrap { overflow-x: auto; padding: 0 var(--sp-md); }
.ui-cost-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ui-cost-table th, .ui-cost-table td { padding: 10px 8px; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; }
.ui-cost-table th:first-child { padding-left: 0; } .ui-cost-table td:last-child, .ui-cost-table th:last-child { padding-right: 0; }
.ui-cost-table thead th { font-size: max(12px, var(--fs-xs)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); }
.ui-cost-table tbody th { font-weight: 400; }
.ui-cost-table .num { text-align: right; white-space: nowrap; }
.ui-cost-code { display: block; font-weight: 700; color: var(--ui-ink); }
.ui-cost-table small { display: block; font-size: max(12px, var(--fs-xs)); color: var(--ui-muted); white-space: normal; }
.ui-cost-table td.num small { display: inline; }
.ui-cost-x { color: var(--ui-muted); }
.ui-cost-table tfoot th, .ui-cost-table tfoot td { border-bottom: 0; border-top: 2px solid var(--ui-line); font-weight: 700; color: var(--ui-ink); font-size: var(--fs-base); }
.ui .ui-cost-warn { color: var(--ui-bad); }
@container page (max-width: 480px) { .ui-cost-amount { font-size: var(--fs-xl); } }

/* ==================================================================================================
   Primitives for the page-by-page rebuild (25 Sept 2026): tables, forms, detail lists, modals, pager.
   Everything is scoped under .ui like the rest of this file.
   ================================================================================================== */

/* Page widths: forms and detail pages read better narrow */
.ui-narrow { max-width: 720px; }
.ui-medium { max-width: 980px; }
.ui-section { margin-bottom: var(--sp-lg); }
.ui h2.ui-section-title { margin: 0 0 var(--sp-sm); font-size: var(--fs-lg); font-weight: 700; color: var(--ui-ink); }
.ui h3.ui-h3 { margin: 0 0 var(--sp-xs); font-size: var(--fs-base); font-weight: 700; color: var(--ui-ink); }
.ui p.ui-text { margin: 0 0 var(--sp-sm); }
.ui .ui-muted { color: var(--ui-muted); }
.ui .ui-small { font-size: var(--fs-sm); }
.ui a.ui-link { color: var(--ui-primary); font-weight: 600; }
.ui a.ui-link:hover { text-decoration: underline; }
.ui-card-body { padding: var(--sp-md); }
.ui-card-foot { padding: var(--sp-sm) var(--sp-md); border-top: 1px solid var(--ui-line); display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.ui-card-head-sub { display: block; font-size: var(--fs-sm); color: var(--ui-muted); font-weight: 400; }
.ui-count { font-size: var(--fs-sm); color: var(--ui-muted); white-space: nowrap; }

/* Tables: inside a card, scroll sideways in their own box on narrow pages, never the whole page */
.ui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ui-card > .ui-table-wrap { border-radius: var(--ui-radius); }
.ui-card > .ui-card-head + .ui-table-wrap { border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
.ui table.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); text-align: left; display: table; max-width: none; }
.ui .ui-table th, .ui .ui-table td { padding: clamp(8px, 0.6cqi + 6px, 14px) clamp(10px, 0.9cqi + 8px, 20px); border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.ui .ui-table thead th { font-size: max(12px, var(--fs-xs)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); background: var(--ui-bg); border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ui .ui-table tbody tr:last-child td { border-bottom: 0; }
.ui .ui-table tbody tr:hover { background: #fafbfd; }
.ui .ui-table td.num, .ui .ui-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui .ui-table td.actions, .ui .ui-table th.actions { text-align: right; white-space: nowrap; }
.ui .ui-table .ui-row-title, .ui .ui-table .ui-row-sub { white-space: normal; }
.ui .ui-table a.ui-link { white-space: nowrap; }
.ui .ui-table tfoot th, .ui .ui-table tfoot td { border-top: 2px solid var(--ui-line); border-bottom: 0; font-weight: 700; color: var(--ui-ink); }
.ui .ui-table .ui-btn-sm { min-height: 36px; }
.ui-row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.ui-row-actions form { display: inline; margin: 0; }
/* Stacked table: under 640px of page width each row becomes a card, cells show their column label */
@container page (max-width: 640px) {
  .ui table.ui-table-stack, .ui .ui-table-stack tbody, .ui .ui-table-stack tr, .ui .ui-table-stack td { display: block; width: 100%; }
  .ui .ui-table-stack thead { display: none; }
  .ui .ui-table-stack tr { padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--ui-line); }
  .ui .ui-table-stack tbody tr:last-child { border-bottom: 0; }
  .ui .ui-table-stack td { display: flex; gap: var(--sp-sm); justify-content: space-between; align-items: baseline; padding: 4px 0; border: 0; text-align: right; }
  .ui .ui-table-stack td::before { content: attr(data-label); flex: 0 0 38%; text-align: left; font-size: max(12px, var(--fs-xs)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); }
  .ui .ui-table-stack td:not([data-label])::before { content: none; }
  .ui .ui-table-stack td.actions, .ui .ui-table-stack td.num { text-align: right; }
  .ui .ui-table-stack td.actions { justify-content: flex-end; padding-top: var(--sp-xs); }
  .ui .ui-table-stack td.actions::before { content: none; }
  .ui .ui-table-stack td.actions .ui-row-actions { justify-content: flex-start; width: 100%; }
}

/* Forms: one column, two where the card is wide enough; every control a thumb tall */
.ui-form { display: grid; gap: var(--sp-md); }
.ui-form-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ui-form .ui-field-wide { grid-column: 1 / -1; }
.ui .ui-field textarea { min-height: calc(var(--tap) * 2); padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: calc(var(--ui-radius) - 4px);
  background: #fff; font: inherit; font-size: max(16px, var(--fs-base)); color: var(--ui-ink); margin: 0; width: 100%; resize: vertical; line-height: 1.4; }
.ui .ui-field input[type=file] { padding: 8px 12px; min-height: var(--tap); line-height: 1.4; }
.ui .ui-field input:focus, .ui .ui-field select:focus, .ui .ui-field textarea:focus { outline: 2px solid #a5b4fc; outline-offset: 0; border-color: var(--ui-primary); }
.ui .ui-field input:disabled, .ui .ui-field select:disabled, .ui .ui-field textarea:disabled { background: var(--ui-bg); color: var(--ui-muted); }
.ui .ui-field input[readonly] { background: var(--ui-bg); }
.ui .ui-field-help { font-size: max(12px, var(--fs-xs)); color: var(--ui-muted); margin: 0; }
.ui .ui-field-error { font-size: max(12px, var(--fs-xs)); color: var(--ui-bad); margin: 0; }
.ui .ui-field.ui-field-inline { flex-direction: row; align-items: center; gap: var(--sp-sm); }
.ui .ui-field.ui-field-inline input[type=checkbox], .ui .ui-field.ui-field-inline input[type=radio] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--ui-primary); }
.ui .ui-field.ui-field-inline > span { font-weight: 500; color: var(--ui-text); }
.ui .ui-check-list { display: grid; gap: 2px; }
.ui-form-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; margin-top: var(--sp-xs); }
.ui-form-actions.ui-form-actions-end { justify-content: flex-end; }
.ui-form-actions .ui-btn-block { flex: 1 1 100%; }
.ui .ui-input-group { display: flex; gap: var(--sp-xs); align-items: stretch; }
.ui .ui-input-group > .ui-field { flex: 1 1 auto; }
.ui .ui-input-group > .ui-btn { align-self: flex-end; }
/* A plain button element gets the same look as .ui-btn links */
.ui button.ui-btn { font: inherit; font-weight: 600; font-size: var(--fs-base); }
.ui button.ui-btn-sm { font-size: var(--fs-sm); }

/* Detail lists: label over value, as many per row as fit */
.ui-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-sm) var(--sp-md); margin: 0; }
.ui-dl > div { min-width: 0; }
.ui-dl dt { font-size: max(12px, var(--fs-xs)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); }
.ui-dl dd { margin: 2px 0 0; color: var(--ui-ink); font-weight: 500; overflow-wrap: anywhere; }
.ui-dl dd.ui-muted { color: var(--ui-muted); font-weight: 400; }
.ui-dl-1 { grid-template-columns: 1fr; }
.ui-dl-1 > div { display: flex; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-xs) 0; border-top: 1px solid #f1f5f9; }
.ui-dl-1 > div:first-child { border-top: 0; }
.ui-dl-1 dt { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 500; }
.ui-dl-1 dd { margin: 0; text-align: right; }

/* Badge tones for anything that is not an entry status */
.ui-badge-ok { background: var(--ui-ok-soft); color: var(--ui-ok); }
.ui-badge-warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.ui-badge-bad { background: var(--ui-bad-soft); color: var(--ui-bad); }
.ui-badge-info { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-badge-primary { background: var(--ui-primary-soft); color: var(--ui-primary); }
.ui-badge-active, .ui-badge-billed, .ui-badge-paid { background: var(--ui-ok-soft); color: var(--ui-ok); }
.ui-badge-on-hold, .ui-badge-custom { background: var(--ui-warn-soft); color: var(--ui-warn); }
.ui-badge-completed, .ui-badge-archived, .ui-badge-suspended { background: #e2e8f0; color: #334155; }
.ui-badge-lg { font-size: var(--fs-sm); padding: 0.3em 0.9em; }
.ui-chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* Modal: a centred panel over a dimmed page; the page toggles .is-open or sets display:flex in its own script */
.ui-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, 0.55); align-items: center; justify-content: center; padding: var(--sp-md); }
.ui-modal.is-open { display: flex; }
.ui-modal-panel { background: #fff; border-radius: var(--ui-radius); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25); width: min(100%, 480px); max-height: calc(100dvh - 2 * var(--sp-md)); overflow: auto; padding: var(--sp-lg); }
.ui-modal-panel.ui-modal-wide { width: min(100%, 760px); }
.ui .ui-modal-panel h3 { margin: 0 0 var(--sp-xs); font-size: var(--fs-lg); font-weight: 700; color: var(--ui-ink); }
.ui .ui-modal-panel p.ui-sub { margin: 0 0 var(--sp-md); }

/* Pager */
.ui-pager { display: flex; gap: var(--sp-sm); align-items: center; justify-content: center; flex-wrap: wrap; padding: var(--sp-sm) var(--sp-md); border-top: 1px solid var(--ui-line); font-size: var(--fs-sm); color: var(--ui-muted); }

/* Alerts inside a page (not the flash strip) */
.ui-alert { display: flex; gap: var(--sp-xs); align-items: flex-start; padding: var(--sp-sm) var(--sp-md); border-radius: calc(var(--ui-radius) - 2px); border: 1px solid; margin-bottom: var(--sp-md); font-size: var(--fs-sm); }
.ui-alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ui-alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ui-alert-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.ui-alert-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* Tabs / segmented switch (links or buttons) */
.ui-tabs { display: flex; gap: 4px; padding: 4px; background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: calc(var(--ui-radius) - 2px); width: max-content; max-width: 100%; overflow-x: auto; }
.ui-tabs > a, .ui-tabs > button { flex: 0 0 auto; min-height: calc(var(--tap) - 10px); padding: 0 var(--sp-sm); border-radius: calc(var(--ui-radius) - 4px); border: 0; background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ui-muted); cursor: pointer; display: inline-flex; align-items: center; }
.ui-tabs > .is-active, .ui-tabs > [aria-current="page"] { background: #fff; color: var(--ui-ink); box-shadow: var(--ui-shadow); }

/* Photo / thumbnail grid */
.ui-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: var(--sp-sm); }
.ui-thumb { display: block; border: 1px solid var(--ui-line); border-radius: calc(var(--ui-radius) - 2px); overflow: hidden; background: var(--ui-bg); }
.ui-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ui-thumb figcaption { padding: 6px 8px; font-size: max(12px, var(--fs-xs)); color: var(--ui-muted); }

/* Utility */
.ui-flex { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; }
.ui-flex-between { justify-content: space-between; }
.ui-grid-2 { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.ui-mt { margin-top: var(--sp-md); } .ui-mb { margin-bottom: var(--sp-md); } .ui-mb-sm { margin-bottom: var(--sp-sm); }
.ui-right { text-align: right; } .ui-center { text-align: center; }
.ui-nowrap { white-space: nowrap; }
@container page (max-width: 640px) { .ui-hide-narrow { display: none !important; } .ui-tabs { width: 100%; } .ui-tabs > a, .ui-tabs > button { flex: 1 1 auto; justify-content: center; } }
/* Old phone rules in style.css force .content li a and .content span into inline-flex/nowrap; rows and cells inside .ui keep their own layout */
.content .ui span { white-space: normal; }
.content .ui .ui-badge, .content .ui .ui-nowrap, .content .ui .ui-btn { white-space: nowrap; }
.content .ui li a { min-height: 0; display: inline; }
.content .ui li a.ui-btn { display: inline-flex; }
.content .ui li a.ui-row, .content .ui li a.ui-tile { display: flex; }

/* ---- Gaps found during the rebuild ---- */
.ui-alert-neutral { background: var(--ui-bg); color: var(--ui-text); border-color: var(--ui-line); }
.ui-divider { display: flex; align-items: center; gap: var(--sp-sm); color: var(--ui-muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; margin: var(--sp-sm) 0; }
.ui-divider::before, .ui-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ui-line); }
.ui-scroll { max-height: 520px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ui-scroll-sm { max-height: 300px; overflow-y: auto; }
.ui-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui .ui-table input[type=checkbox], .ui .ui-table input[type=radio] { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--ui-primary); vertical-align: middle; }
.ui-auth { max-width: 420px; margin: 0 auto; }
.ui-root.ui-root-full { width: 100%; }
/* Modals opened by scripts that set display:block instead of flex still centre */
.ui-modal[style*="block"] > .ui-modal-panel { margin: 8vh auto 0; }
/* Stacked tables on a phone: totals row reads as a summary line */
@container page (max-width: 640px) {
  .ui .ui-table-stack tfoot, .ui .ui-table-stack tfoot tr, .ui .ui-table-stack tfoot th, .ui .ui-table-stack tfoot td { display: block; width: 100%; border: 0; }
  .ui .ui-table-stack tfoot tr { padding: var(--sp-sm) var(--sp-md); border-top: 2px solid var(--ui-line); }
  .ui .ui-table-stack tfoot th, .ui .ui-table-stack tfoot td { padding: 2px 0; text-align: left; }
  .ui .ui-table-stack tfoot td:empty { display: none; }
}

/* Wide (non-stacked) tables on a narrow page scroll in their box instead of squeezing every column */
@container page (max-width: 900px) {
  .ui .ui-table-wrap > table.ui-table:not(.ui-table-stack) { width: max-content; min-width: 100%; }
  .ui .ui-table-wrap > table.ui-table:not(.ui-table-stack) td { max-width: 280px; }
}

/* A More menu inside a table: the panel opens in place (a scrolling table box would clip a floating one) */
.ui-menu-inline { position: static; }
.ui-menu-inline > .ui-menu-panel { position: static; width: auto; min-width: 160px; margin-top: 6px; box-shadow: none; text-align: left; }
.ui .ui-table td.actions .ui-menu-inline > summary { display: inline-flex; }

/* Stacked tables: a cell marked "main" becomes the card's heading on a phone (no column label, full width) */
@container page (max-width: 640px) {
  .ui .ui-table-stack td.main { display: block; text-align: left; padding-bottom: var(--sp-xs); }
  .ui .ui-table-stack td.main::before { content: none; }
  .ui .ui-table-stack td.main .ui-link { font-size: var(--fs-base); }
  .ui .ui-table-stack td.main .ui-row-sub, .ui .ui-table-stack td.main .ui-row-note { display: block; white-space: normal; }
}

/* Sign-in and other standalone pages keep a gutter on phones */
body.login-page .ui-root { padding: 0 12px; }

/* ---- Fixes from the second audit ---- */
/* Save button on Edit Locations turns red while there are unsaved changes */
.ui .ui-btn-primary.ui-btn-unsaved { background: var(--ui-bad); }
.ui .ui-btn-primary.ui-btn-unsaved:hover { background: #991b1b; }
/* Long file names wrap instead of being cut off */
.ui .ui-row-title.ui-wrap, .ui .ui-wrap { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
/* Input + button groups stack on a narrow page so the button never runs off the screen */
@container page (max-width: 520px) {
  .ui .ui-input-group { flex-wrap: wrap; }
  .ui .ui-input-group > .ui-field { flex: 1 1 100%; min-width: 0; }
  .ui .ui-input-group > .ui-btn { flex: 0 0 auto; }
  .ui .ui-field input[type=file] { max-width: 100%; }
}
/* Job template builder rows: label and type side by side, both allowed to shrink */
.ui .meta-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 40px !important; }
.ui .meta-row > input, .ui .meta-row > select { min-width: 0; width: 100%; }
/* Empty-state line for custom records hides as soon as a record group is on the page */
#master-records-container > .ui-records-empty:not(:only-child) { display: none; }
.ui h1.ui-title.ui-auth-title { font-size: var(--fs-lg); font-weight: 600; color: var(--ui-muted); margin-top: var(--sp-xs); }
/* The old phone rule in style.css forces every span to wrap; counts, badges, buttons and amounts stay on one line */
.content .ui .ui-count, .content .ui .ui-badge, .content .ui .ui-btn, .content .ui .ui-nowrap, .content .ui .ui-amount strong { white-space: nowrap !important; }
/* Only groups that end in a button stack on a narrow page; time + AM/PM pairs stay side by side */
@container page (max-width: 520px) {
  .ui .ui-input-group:not(:has(> .ui-btn)) { flex-wrap: nowrap; }
  .ui .ui-input-group:not(:has(> .ui-btn)) > .ui-field { flex: 1 1 0; }
}
.ui h1.ui-title.ui-auth-title { margin-bottom: var(--sp-md); }
/* A bordered, scrollable checklist: the frame shows there is more to scroll to */
.ui .ui-check-box { max-height: 300px; overflow-y: auto; border: 1px solid var(--ui-line); border-radius: calc(var(--ui-radius) - 4px); padding: 0 var(--sp-sm); background: #fff; }

/* ---- Home pages: full-width rows, paired cards of equal height ---- */
.ui-tiles.ui-tiles-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin-bottom: var(--sp-md); }
@container page (min-width: 820px) {
  .ui-tiles.ui-tiles-row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .ui-tiles-row .ui-tile { flex-direction: row; align-items: center; min-height: 0; padding: var(--sp-sm) var(--sp-md); }
  .ui-tiles-row .ui-tile .ui-badge { position: static; margin-left: auto; }
}
.ui-grid-2.ui-grid-even { align-items: stretch; margin-bottom: var(--sp-md); }
.ui-grid-2.ui-grid-even > * { min-width: 0; }
.ui-grid-2 > :only-child { grid-column: 1 / -1; }
@container page (min-width: 700px) { .ui-grid-2.ui-grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Quick-link row: tiles stretch to fill each line, so a short last line never leaves a hole */
.ui-tiles.ui-tiles-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.ui-tiles.ui-tiles-row > .ui-tile { flex: 1 1 150px; }
@container page (min-width: 820px) { .ui-tiles.ui-tiles-row > .ui-tile { flex-basis: 220px; } }

/* ---- Balance pass ---- */
/* Pages that are one narrow form sit in a centred column, header included */
.ui.ui-centered { max-width: 760px; margin: 0 auto; }
.ui.ui-centered > .ui-narrow, .ui.ui-centered > .ui-medium { max-width: none; }
/* Side-by-side cards always share the same bottom edge */
.ui-grid-2, .ui-grid-main { align-items: stretch; }
.ui-grid-2 > .ui-card, .ui-grid-main > .ui-card { display: flex; flex-direction: column; }
.ui-grid-2 > .ui-card > .ui-list, .ui-grid-main > .ui-card > .ui-list, .ui-grid-2 > .ui-card > .ui-table-wrap, .ui-grid-main > .ui-card > .ui-table-wrap { flex: 1 1 auto; }
.ui-toolbar-stats dd.ui-small { font-size: var(--fs-sm); font-weight: 500; }

/* ---- Office home: six figures in one row on a laptop, three by two on a phone ---- */
.ui-stats-6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(120px, 15%)), 1fr)); }
@container page (max-width: 700px) { .ui-stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-kv.ui-kv-big { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ui-kv.ui-kv-big dd { font-size: var(--fs-xl); }
.ui-stat-warn .ui-stat-value { color: var(--ui-warn); }
/* Week totals: three rows, label left and amount right, filling the card beside project completion */
.ui-kv.ui-kv-big { grid-template-columns: 1fr; gap: 0; }
.ui-kv.ui-kv-big > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-md); padding: var(--sp-sm) 0; border-top: 1px solid #f1f5f9; }
.ui-kv.ui-kv-big > div:first-child { border-top: 0; padding-top: 0; }
.ui-kv.ui-kv-big dt { font-size: var(--fs-base); color: var(--ui-text); }
.ui-kv.ui-kv-big dd { margin: 0; font-variant-numeric: tabular-nums; }

/* The page block sits centred in whatever width the content area has, so collapsing the menu keeps it balanced */
.ui { margin-left: auto; margin-right: auto; }
.ui.ui-flashes { max-width: 1320px; }

/* ---- Rename in place: a pen beside the title opens a small form under it ---- */
.ui-title-row { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; }
.ui-title-row > h1 { margin: 0; }
.ui-inline-edit-form[hidden] { display: none !important; }
.ui .ui-btn-icon { padding: 0 var(--sp-xs); min-width: calc(var(--tap) - 8px); color: var(--ui-muted) !important; }
.ui .ui-btn-icon:hover { color: var(--ui-primary) !important; }
.ui-inline-edit-form { flex-basis: 100%; display: flex; gap: var(--sp-sm); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-xs); padding: var(--sp-sm) var(--sp-md); background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); max-width: 640px; }
.ui-inline-edit-form .ui-field { flex: 1 1 260px; }
/* Table rows that open a record */
.ui .ui-table tr.ui-row-link { cursor: pointer; }
.ui .ui-table tr.ui-row-link:hover { background: var(--ui-primary-soft); }
.ui .ui-table tr.ui-row-link:focus-visible { outline: 3px solid #a5b4fc; outline-offset: -3px; }

/* Ready-day picks on Create daily */
.ui-mt-sm { margin-top: var(--sp-sm); }
.ui .ui-chips > .ui-btn.is-active { border-color: var(--ui-primary); background: var(--ui-primary-soft); }
.ui .ui-chips > .ui-btn .ui-badge { margin-left: 4px; }

/* Tap targets: small inline links keep their size on screen but take a thumb-sized touch area */
.ui .ui-eyebrow a, .ui .ui-tap { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* Status picker inside a table cell */
.ui-inline-status { margin: 0; }
.ui .ui-status-select { min-height: 36px; padding: 4px 28px 4px 10px; border-radius: 999px; border: 1px solid var(--ui-line); font: inherit; font-size: var(--fs-sm); font-weight: 600; background: #fff; }
.ui .ui-status-billed { color: var(--ui-ok); border-color: var(--ui-ok-soft); background: var(--ui-ok-soft); }
.ui .ui-status-paid { color: #1d4ed8; border-color: #dbeafe; background: #dbeafe; }
/* Row actions inside a table stay on one line; the table scrolls sideways instead of rows growing tall */
.ui .ui-table td.actions .ui-row-actions { flex-wrap: nowrap; }
/* Dense tables (many columns): tighter side padding so a laptop shows every column without sideways scroll */
@container page (min-width: 900px) {
  .ui .ui-table-dense th, .ui .ui-table-dense td { padding-left: 9px; padding-right: 9px; }
  .ui .ui-table-dense th:first-child, .ui .ui-table-dense td:first-child { padding-left: var(--sp-md); }
  .ui .ui-table-dense th:last-child, .ui .ui-table-dense td:last-child { padding-right: var(--sp-md); }
  .ui .ui-table-dense .ui-status-select { padding: 4px 24px 4px 8px; }
}
/* On a wide page the More menu floats over the rows below instead of widening its cell; the table box stops clipping while a menu is open */
@container page (min-width: 900px) {
  .ui .ui-table td.actions { position: relative; }
  .ui .ui-table td.actions .ui-menu-inline > .ui-menu-panel { position: absolute; right: var(--sp-md); top: calc(100% - 6px); width: min(300px, 80vw); margin: 0; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16); z-index: 30; }
  .ui .ui-table-wrap:has(details[open]) { overflow: visible; }
}

/* A checkbox inside a table cell */
.ui .ui-check-cell { padding: 0; border: 0; gap: 8px; align-items: center; }
.ui .ui-check-cell input { margin: 0; }
.ui .ui-check-cell span { font-size: var(--fs-sm); color: var(--ui-text); }
/* Name plus a pen in a table cell; the rename form drops below the name */
.ui .ui-name-row { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.ui .ui-inline-edit-cell { margin-top: var(--sp-xs); padding: var(--sp-xs) 0 0; min-width: 260px; }
.ui .ui-inline-edit-cell .ui-field { flex: 1 1 200px; }

/* Tech pay tally: a paid party's row, then the technicians under it */
.ui .ui-tally-payee td { background: #f8fafc; }
.ui .ui-tally-indent { display: inline-block; padding-left: 18px; position: relative; }
.ui .ui-tally-indent::before { content: ""; position: absolute; left: 4px; top: 0.35em; width: 8px; height: 8px; border-left: 2px solid #cbd5e1; border-bottom: 2px solid #cbd5e1; }

/* Back link above a page title */
.ui .ui-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: -8px 0 2px -4px; padding: 0 8px 0 4px; border-radius: 8px; color: var(--ui-primary); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.ui .ui-back:hover { background: var(--ui-primary-soft); }
.ui .ui-back span { font-size: 1.15em; line-height: 1; }

/* A flagged row on the per-location pages */
.ui .ui-table tr.ui-row-flag td { background: #fff7f7; }

/* Type-ahead location picker */
.ui .ui-combo { position: relative; min-width: 16rem; flex: 1 1 20rem; }
.ui .ui-combo-menu { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: .25rem 0 0; padding: .25rem; list-style: none; max-height: 20rem; overflow: auto;
  background: #fff; border: 1px solid var(--ui-line); border-radius: .6rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); }
.ui .ui-combo-menu li[role=option] { padding: .45rem .6rem; border-radius: .4rem; cursor: pointer; font-size: .92rem; display: flex; gap: .5rem; align-items: baseline; }
.ui .ui-combo-menu li[role=option]:hover, .ui .ui-combo-menu li.is-active { background: var(--ui-accent-soft, #eef2ff); }
.ui .ui-combo-menu li strong { font-weight: 600; }
.ui .ui-combo-menu li span { font-size: .8rem; }
.ui .ui-combo-more { padding: .4rem .6rem; font-size: .8rem; color: var(--ui-muted); }

/* Case photos */
.ui .cp-list { list-style: none; margin: 0; padding: 0; }
.ui .cp-row + .cp-row { border-top: 1px solid var(--ui-line); }
.ui .cp-pick { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem 1rem; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 64px; }
.ui .cp-pick:active { background: #f1f5f9; }
.ui .cp-tick { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--ui-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
.ui .cp-row.is-done .cp-tick { background: var(--ui-ok); border-color: var(--ui-ok); }
.ui .cp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ui .cp-main strong { font-size: 1.05rem; }
.ui .cp-sub { font-size: .82rem; color: var(--ui-muted); }
.ui .cp-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--ui-accent, #4f46e5); }
.ui .cp-action svg { width: 1rem; height: 1rem; }
.ui .cp-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.ui .cp-sheet[hidden] { display: none; }
.ui .cp-card { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 1rem 1rem 0 0; padding: 1rem; margin: 0; }
@media (min-width: 700px) { .ui .cp-sheet { align-items: center; padding: 1rem; } .ui .cp-card { border-radius: 1rem; } }
.ui .cp-drop { display: block; border: 2px dashed var(--ui-line); border-radius: .8rem; padding: 1.25rem; text-align: center; cursor: pointer; margin: .5rem 0; }
.ui .cp-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui .cp-drop-text { display: flex; flex-direction: column; gap: .2rem; } .ui .cp-drop-text span { font-size: .85rem; color: var(--ui-muted); }
.ui .cp-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; margin: .5rem 0; }
.ui .cp-previews img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .5rem; }
.ui .cp-actions { margin-top: .75rem; }
body.cp-open { overflow: hidden; }

/* Entry page */
.ui .ui-title-sub { font-weight: 500; color: var(--ui-muted); font-size: .7em; }
.ui .ui-comment { margin: var(--sp-sm) 0 0; padding-top: var(--sp-sm); border-top: 1px solid var(--ui-line); white-space: pre-wrap; }
.ui .ui-comment .ui-dt { display: block; font-size: max(12px, var(--fs-xs)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); margin-bottom: 2px; }
.ui .ui-thumb-cap { font-size: .78rem; padding: 4px 6px; color: var(--ui-muted); text-align: center; background: #f8fafc; }
.ui .ui-danger-text { color: var(--ui-bad); }
.ui .ui-terms { border-top: 1px solid var(--ui-line); }
.ui .ui-terms-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; font-size: .92rem; }
.ui .ui-terms-form input { width: 4.5rem; text-align: center; }