/* .app-header* removed — base.html now uses .navbar (ported from m1-scheduling). */
.app-main { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
/* Wide-layout override: the files list (11-column table) and the file detail
   page (header band + 2/3-1/3 split) both use the full viewport width, capped
   by their own inner .page / .detail-page wrappers (1800px). */
.app-main:has(> .page--wide),
.app-main:has(> .detail-page) { max-width: none; margin: 1rem auto; padding: 0 1.5rem; }
/* Full-bleed override: the settings shell is an app-frame (full-height flex with
   a left strip that should touch the viewport edge), so it drops the width cap
   AND the centering margin / side padding — unlike .page--wide it is edge-to-edge. */
.app-main:has(> .page--full) { max-width: none; margin: 0; padding: 0; }
.placeholder { background: var(--color-surface); border: 1px solid var(--m1-sand); border-radius: 0.5rem; padding: 1.5rem; }
.error { background: var(--color-surface); border: 1px solid var(--color-danger); border-radius: 0.5rem; padding: 1.5rem; }
.error h1 { color: var(--color-danger); margin-top: 0; }
.muted { color: var(--color-text-muted); }
code { background: rgba(0,0,0,0.05); padding: 0.1em 0.3em; border-radius: 0.25em; font-size: 0.9em; }

/* ── Finance File List Page (Iter 3a) ── */

*, *::before, *::after { box-sizing: border-box; }

/* Page container */
.page {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px 40px;
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.4;
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 12px;
}
.page-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--m1-dark-green);
}
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  background: var(--m1-bone-80);
  color: var(--m1-artichoke);
  font-size: 11px;
  font-weight: 700;
  border-radius: 11px;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--m1-teal);
  color: #fff;
}
.btn-primary:hover { background: #1e5a5c; }
.btn-secondary {
  background: #fff;
  color: #555;
  border: 1px solid var(--m1-sand);
}
.btn-secondary:hover { background: var(--m1-bone-60); }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* My Files / All Files toggle */
.toggle-group {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.toggle-group .toggle-btn {
  padding: 5px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--m1-sand);
  background: var(--m1-bone-60);
  color: #777;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.toggle-group .toggle-btn:first-child { border-radius: 4px 0 0 4px; }
.toggle-group .toggle-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.toggle-group .toggle-btn.active {
  background: var(--m1-teal);
  color: #fff;
  border-color: var(--m1-teal);
}

/* Status tabs */
.status-tabs-wrapper {
  position: sticky;
  top: calc(var(--nav-height) + 8px);
  z-index: 90;
  background: var(--bg);
  margin: 0 -20px;
  padding: 0 20px;
}
.status-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--m1-sand);
}
.status-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  background: var(--m1-bone-60);
  cursor: pointer;
  border: 1px solid var(--m1-sand);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-right: 2px;
  position: relative;
  top: 2px;
  transition: background 0.15s;
  font-family: inherit;
}
.status-tab:hover { background: var(--m1-bone-80); }
.status-tab.active {
  background: #fff;
  color: #333;
  font-weight: 700;
  border-color: var(--m1-sand);
  border-bottom: 2px solid #fff;
}
.status-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 4px 4px 0 0;
}
.status-tab[data-accent="teal"].active::before    { background: var(--m1-teal); }
.status-tab[data-accent="slate"].active::before   { background: var(--m1-slate-gray); }
.status-tab[data-accent="emerald"].active::before { background: var(--m1-emerald); }
.status-tab[data-accent="burnt"].active::before   { background: var(--m1-burnt-umber); }
.status-tab[data-accent="olive"].active::before   { background: var(--m1-olive); }
.status-tab[data-accent="none"].active::before    { background: transparent; }
.status-tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  background: var(--m1-bone-80);
  color: #888;
}
.status-tab.active .tab-count {
  background: var(--m1-dark-green);
  color: #fff;
}

/* Filter bar */
.filter-bar {
  background: var(--surface);
  border-radius: 0 0 4px 4px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-bar input,
.filter-bar select {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  background: #fff;
  color: #333;
  outline: none;
  transition: border-color 0.15s;
}
.filter-bar input:focus,
.filter-bar select:focus { border-color: var(--m1-teal); }
.search-input-wrapper { position: relative; }
.search-input-wrapper input { padding-left: 30px; width: 180px; }
.search-input-wrapper .search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  opacity: 0.45;
}
.filter-bar select { min-width: 110px; cursor: pointer; }
.filter-group-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  user-select: none;
}
.filter-group-toggle input[type="checkbox"] {
  accent-color: var(--m1-teal);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.filter-reset {
  margin-left: auto;
  font-size: 12px;
  color: var(--m1-teal);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.filter-reset:hover { text-decoration: underline; }

/* Data table */
.table-card {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.data-table thead th {
  background: var(--m1-artichoke);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px;
  text-align: left;
  border-bottom: 2px solid #636854;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table thead th.col-file-id  { width: 6%; }
.data-table thead th.col-unit     { width: 7%; }
.data-table thead th.col-customer { width: 15%; }
.data-table thead th.col-rep      { width: 9%; }
.data-table thead th.col-method   { width: 10%; }
.data-table thead th.col-status   { width: 13%; }
.data-table thead th.col-bank     { width: 8%; }
.data-table thead th.col-excede   { width: 5%; text-align: center; }
.data-table thead th.col-updated  { width: 7%; }
.data-table thead th.col-assigned { width: 7%; }
.data-table thead th.col-actions  { width: 13%; }
.data-table tbody tr { border-bottom: 1px solid #eee; transition: background 0.1s; }
.data-table tbody tr:nth-child(even) { background: #fafaf7; }
.data-table tbody tr:hover { background: #f3f1ea; }
/* Whole row opens the detail page (JS delegated click); show it's clickable. */
.data-table tbody tr.file-row { cursor: pointer; }
.data-table tbody tr.file-row:hover { background: #eef0e8; }
.data-table tbody td {
  padding: 7px 8px;
  font-size: 12px;
  color: #444;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-excede-cell { text-align: center; }
/* Status cell stacks badge + sub-stage; override the table-wide nowrap. */
.data-table tbody td.col-status-cell { white-space: normal; }

/* Deal group rows */
.deal-group-row td {
  background: var(--m1-bone-80);
  color: var(--m1-dark-green);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  border-bottom: 1px solid var(--m1-sand);
}

/* Unit link */
.unit-link { color: var(--m1-teal); text-decoration: none; font-weight: 600; }
.unit-link:hover { text-decoration: underline; }

/* Icon source: Lucide (MIT), inlined as SVG per-use (see base.html nav icons).
   No runtime dependency; promote to a local sprite (static/img/icons.svg + <use>)
   if icon usage grows beyond a handful. */

/* Misc text */
.em-dash    { color: #ccc; }
.updated-text  { color: #999; font-size: 11px; }
.assigned-text { font-size: 11px; color: #555; }

/* File ID pill — the accessible primary nav link */
.file-id-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--m1-teal);
  background: var(--m1-bone-80);
  border-radius: 10px;
  text-decoration: none;
}
.file-id-pill:hover { background: var(--m1-bone-60); text-decoration: underline; }

/* Status cell sub-stage caption (documents_returned partial/complete) */
.status-substage { font-size: 10px; color: #888; margin-top: 2px; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
/* Payment method */
.badge-m1-internal { background: rgba(39,107,110,0.1);  color: var(--m1-teal); }
.badge-m1-brokered { background: rgba(49,78,86,0.1);    color: var(--m1-slate-gray); }
.badge-3rd-party   { background: rgba(77,162,132,0.1);  color: var(--m1-emerald); }
.badge-cash        { background: rgba(89,97,82,0.1);    color: var(--m1-olive); }
.badge-lease,
.badge-rental,
.badge-loaner      { background: rgba(115,118,96,0.1);  color: var(--m1-artichoke); }
.badge-tbd         { background: var(--m1-bone-80);     color: #aaa; }
/* Status */
.badge-submitted { background: rgba(49,78,86,0.1);    color: var(--m1-slate-gray); }
.badge-approved  { background: rgba(77,162,132,0.1);  color: var(--m1-emerald); }
.badge-denied    { background: rgba(132,53,45,0.1);   color: var(--m1-burnt-umber); }
.badge-completed { background: rgba(89,97,82,0.1);    color: var(--m1-olive); }
/* Blocked */
.badge-blocked-customer  { background: rgba(221,210,164,0.35); color: #9a7b1c; }
.badge-blocked-bank      { background: rgba(132,53,45,0.1);    color: var(--m1-burnt-umber); }
.badge-blocked-delivery  { background: rgba(49,78,86,0.1);     color: var(--m1-slate-gray); }

/* Pagination */
.pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #888;
}
.pagination-info { font-weight: 500; }
.pagination-nav  { display: flex; align-items: center; gap: 2px; }
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  background: #fff;
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.page-btn:hover  { background: var(--m1-bone-60); }
.page-btn.active { background: var(--m1-teal); color: #fff; border-color: var(--m1-teal); }

/* Empty state */
.empty-state-row td { text-align: center; }
.empty-state {
  padding: 48px 16px !important;
  color: #aaa;
  font-size: 13px;
  font-style: italic;
}

/* Horizontal scroll fallback: always-on so narrow viewports never crush the table */
.table-card { overflow-x: auto; }

/* ── New Finance File create form (Iter 3a D1) ── */
.create-form {
  background: var(--surface, #fff);
  border: 1px solid var(--m1-sand, #d9d4c3);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.create-form__title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--m1-dark-green, #1a2e1a);
}
.create-form__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 16px;
}
.create-form__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  /* Equal-width fields that share leftover space and wrap together. */
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 320px;
}
.create-form__required { color: var(--m1-burnt-umber, #84352d); }
.create-form__select,
.create-form__input {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--m1-sand, #d9d4c3);
  border-radius: 4px;
  background: #fff;
  color: #333;
  outline: none;
  transition: border-color 0.15s;
  /* Fill the label so select + inputs share one width and align. */
  width: 100%;
  box-sizing: border-box;
  height: 32px;
}
.create-form__select:focus,
.create-form__input:focus { border-color: var(--m1-teal, #276b6e); }
.form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.data-table { min-width: 1100px; }

/* Inline validation error shown inside the create form */
.form-error {
  min-height: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--m1-burnt-umber, #84352d);
  background: rgba(132,53,45,0.07);
  border-radius: 4px;
  padding: 0;
  transition: padding 0.15s;
}
.form-error:not(:empty) {
  padding: 6px 10px;
  margin-bottom: 10px;
}

/* ===== Dashboard (Iter 3b) ===== */
/* Ported from docs/wireframes/dashboard.html. Only dashboard-specific classes are
   declared here; brand :root vars (m1-brand.css) and shared list-page classes
   (.page-header, .data-table, .unit-link, .toggle-group, status/payment badges)
   are reused, not redeclared. */

/* Cards */
.card {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.card-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--m1-dark-green);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header .card-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--m1-bone-60);
  color: var(--m1-artichoke);
}

/* KPI row */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-card {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  border-left: 4px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.kpi-card .kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--m1-artichoke);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.kpi-card .kpi-sub { font-size: 10px; color: var(--m1-artichoke); margin-top: 2px; }

.kpi-card.kpi-active-files { border-left-color: var(--m1-teal); }
.kpi-card.kpi-active-files .kpi-value { color: var(--m1-teal); }
.kpi-card.kpi-in-queue { border-left-color: var(--m1-slate-gray); }
.kpi-card.kpi-in-queue .kpi-value { color: var(--m1-slate-gray); }
.kpi-card.kpi-awaiting { border-left-color: var(--m1-emerald); }
.kpi-card.kpi-awaiting .kpi-value { color: var(--m1-emerald); }
.kpi-card.kpi-completed { border-left-color: var(--m1-electric-green); }
.kpi-card.kpi-completed .kpi-value { color: var(--m1-success); }
.kpi-card.kpi-aging { border-left-color: var(--m1-burnt-umber); background: var(--color-danger-subtle); }
.kpi-card.kpi-aging .kpi-value { color: var(--m1-burnt-umber); }
.kpi-card.kpi-not-excede { border-left-color: var(--m1-dutch-white); }
.kpi-card.kpi-not-excede .kpi-value { color: var(--m1-amber); }
.kpi-card.kpi-cleared { border-left-color: var(--m1-olive); }
.kpi-card.kpi-cleared .kpi-value { color: var(--m1-olive); }

/* Status distribution bar */
.status-bar-card { margin-bottom: 20px; }
.status-bar-wrapper { margin-bottom: 10px; }
.status-bar {
  display: flex;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.status-bar .segment {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: opacity 0.15s;
  position: relative;
}
.status-bar .segment:hover { opacity: 0.85; }

/* Status colors — shared by distribution segments and legend dots */
.segment-queue,     .status-dot-queue     { background: var(--m1-teal); }
.segment-submitted, .status-dot-submitted { background: var(--m1-slate-gray); }
.segment-approved,  .status-dot-approved  { background: var(--m1-emerald); }
.segment-denied,    .status-dot-denied    { background: var(--m1-burnt-umber); }
.segment-completed, .status-dot-completed { background: var(--m1-olive); }
.segment-cancelled, .status-dot-cancelled { background: var(--m1-artichoke); }

.status-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
}
.legend-item:hover { color: var(--m1-dark-green); }
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-count { font-weight: 600; color: var(--m1-dark-green); }

/* Two-column layout */
.dashboard-columns {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 16px;
}
.col-left,
.col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Activity feed */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--m1-bone-60);
}
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  background: var(--m1-artichoke);
}
/* activity-dot class is ev.change_kind */
.activity-dot.create { background: var(--m1-teal); }
.activity-dot.update { background: var(--m1-slate-gray); }
.activity-dot.note   { background: var(--m1-olive); }
.activity-content { flex: 1; min-width: 0; }
.activity-text { font-size: 12.5px; color: #444; line-height: 1.4; }
.activity-text strong { font-weight: 600; color: var(--m1-dark-green); }
.activity-text .unit-num,
.unit-num { font-weight: 600; color: var(--m1-teal); }
.activity-time { font-size: 11px; color: var(--m1-sand); margin-top: 2px; }

/* Aging alerts table */
.aging-card { border-left: 4px solid var(--m1-burnt-umber); }
.days-critical { color: var(--m1-burnt-umber); font-weight: 700; }
.days-warning { color: var(--m1-amber); font-weight: 600; }

/* Status badge (base) — color variants reuse the existing .badge-* status rules */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.badge-cancelled { background: rgba(115,118,96,0.1); color: var(--m1-artichoke); }

/* Horizontal bar charts */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 12px;
  color: #555;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  flex: 1;
  height: 22px;
  background: var(--m1-bone-60);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  background: var(--m1-teal);
  transition: width 0.3s ease;
}
.bar-count {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  margin-left: 8px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   Shared utilities + button/chip variants used by the detail page and the
   list-row overflow menu. These classes were referenced by templates from
   Iter 4–6 but had no CSS until the detail-page styling pass.
   ───────────────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Button variants (complement .btn / .btn-primary / .btn-secondary). */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--m1-olive);
}
.btn-ghost:hover { background: var(--m1-bone-60); }
.btn-danger {
  background: var(--m1-burnt-umber);
  border: 1px solid var(--m1-burnt-umber);
  color: #fff;
}
.btn-danger:hover { background: var(--m1-burnt-dark); }

/* Small status/sensitivity chips. */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(115,118,96,0.12);
  color: var(--m1-artichoke);
}
.chip-blocker        { background: rgba(132,53,45,0.12);  color: var(--m1-burnt-umber); }
.chip-sensitive,
.chip-restricted     { background: rgba(132,53,45,0.12);  color: var(--m1-burnt-umber); }
.chip-standard,
.chip-internal       { background: rgba(39,107,110,0.12); color: var(--m1-teal); }

/* Actions cell: one primary state-machine button in a fixed-width slot, then
   the ⋯ overflow toggle. The min-width keeps ⋯ in the same x-position on every
   row regardless of the primary label ("Advance" vs "Mark Docs Returned").
   "Mark Funded" lives in the ⋯ menu on the list (see _file_row.html), so a list
   row is always exactly one button + ⋯.
   overflow:visible is required so the ⋯ popover (absolutely positioned) is not
   clipped by the table-wide `td { overflow: hidden }` rule. */
.row-actions {
  overflow: visible;
  white-space: nowrap;
}
.row-actions .btn-advance {
  min-width: 150px;       /* fits "Mark Docs Returned"; aligns the ⋯ that follows */
  text-align: center;
}
.row-actions .btn-sm { margin-right: 4px; }

/* Row/detail overflow menu (the ⋯ actions popover). */
.row-overflow, .detail-overflow { position: relative; display: inline-block; }
/* While the menu is open the toggle sets aria-expanded="true" (app.js). Lift the
   whole .row-overflow above sibling table rows so the absolutely-positioned menu
   is not painted under the following <tr> (which has its own zebra/hover bg). */
.row-overflow:has(.row-overflow-toggle[aria-expanded="true"]),
.detail-overflow:has(.row-overflow-toggle[aria-expanded="true"]) {
  z-index: 60;
}
/* The ⋯ toggle must read as a button, not faint inline text. Bordered pill,
   clear hover/active, comfortable hit target. */
.row-overflow-toggle {
  font-size: 18px;
  line-height: 1;
  padding: 2px 9px;
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  color: var(--m1-olive);
  background: var(--surface);
}
.row-overflow-toggle:hover { background: var(--m1-bone-60); border-color: var(--m1-olive); }
.row-overflow-toggle[aria-expanded="true"] { background: var(--m1-bone-60); border-color: var(--m1-olive); }
.row-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: 6px;
}
.overflow-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
}
.overflow-item:hover { background: var(--m1-bone-60); }
.cancel-confirm {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--m1-bone-60);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cancel-reason-input {
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   File detail page. The shipped detail templates (file_detail.html +
   _file_detail_body.html and its section partials) use these detail-* /
   note-* / pii-* / doc-* / history-* classes. Styled to match the list
   page's card vocabulary: white surface, soft shadow, 4px radius, dark-green
   headings, teal accents.
   ───────────────────────────────────────────────────────────────────────── */
.detail-page {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px 48px;
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.4;
}

/* The inline edit form renders standalone (outside the panel grid), so it
   keeps its own card chrome. The action row sits inside the header band — its
   layout comes from the .detail-actions flex rule below, no card wrapper. */
.detail-edit {
  background: var(--surface);
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.detail-edit h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--m1-olive);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--m1-bone-60);
}

/* Inline banner (stale reload / error). */
.detail-banner {
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 500;
}
.detail-banner--stale { background: rgba(148,108,20,0.12); color: var(--m1-amber); }
.detail-banner--error { background: rgba(132,53,45,0.12);  color: var(--m1-burnt-umber); }

/* Action button row. */
.detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* State grid: a <dl> of .detail-field cells (each wraps a dt label above a dd
   value), laid out 4 across like the wireframe. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 24px;
  margin: 0;
}
.detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.detail-field dt {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--m1-placeholder);
}
.detail-field dd {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  word-break: break-word;
}

/* Lifecycle progress strip — read-only timestamps. */
.detail-timeline .detail-field dd {
  font-weight: 400;
  color: var(--m1-placeholder);
}

/* Cancelled banner inside the state card. */
.detail-cancelled {
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(132,53,45,0.10);
  color: var(--m1-burnt-umber);
  font-size: 12px;
  font-weight: 500;
}

/* Edit form fields. */
.detail-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-end;
}
.detail-edit h2 { flex-basis: 100%; }
.edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--m1-placeholder);
}
.edit-input,
.edit-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  padding: 6px 10px;
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  background: #fff;
  min-width: 200px;
}
.edit-input:focus,
.edit-select:focus { outline: none; border-color: var(--m1-teal); }

/* Identity overrides post together; lay their inputs out inline like the
   sibling edit fields. */
.edit-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-end;
  flex-basis: 100%;
}

/* Checkbox edit field — label and box on one line, not stacked. */
.edit-field--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.edit-check { width: 16px; height: 16px; }

/* Notes. */
.note-add-form { margin-bottom: 16px; }
.note-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  resize: vertical;
}
.note-textarea:focus { outline: none; border-color: var(--m1-teal); }
.note-form-actions { margin-top: 8px; }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-item {
  padding: 10px 0;
  border-top: 1px solid var(--m1-bone-60);
}
.note-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.note-author { font-weight: 600; color: var(--m1-dark-green); font-size: 12px; }
.note-time   { font-size: 11px; color: var(--m1-placeholder); }
.note-body   { font-size: 13px; color: var(--color-text); white-space: pre-wrap; }

/* Documents table — reuses the list table look at section scale. */
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table thead th {
  background: var(--m1-bone-60);
  color: var(--m1-olive);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--m1-sand);
}
.doc-table tbody td {
  padding: 7px 8px;
  font-size: 12px;
  border-bottom: 1px solid var(--m1-bone-60);
}
.doc-name a { color: var(--m1-teal); text-decoration: none; }
.doc-name a:hover { text-decoration: underline; }
.doc-size { white-space: nowrap; }
.doc-actions { text-align: right; }
.doc-upload-form { margin-bottom: 16px; }
.doc-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.doc-upload-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--m1-placeholder);
}

/* PII section. */
.pii-grid { margin: 0; }
.pii-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--m1-bone-60);
}
.pii-field:first-child { border-top: 0; }
.pii-field dt {
  flex: 0 0 160px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--m1-placeholder);
}
.pii-field dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pii-masked { font-family: monospace; font-size: 13px; color: var(--color-text); }
.pii-set-form { display: flex; gap: 8px; align-items: center; }

/* History feed. */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--m1-bone-60);
  font-size: 12px;
}
.history-item:first-child { border-top: 0; }
.history-who    { font-weight: 600; color: var(--m1-dark-green); flex: 0 0 auto; }
.history-phrase { color: var(--color-text); flex: 1 1 auto; }
.history-when   { color: var(--m1-placeholder); font-size: 11px; white-space: nowrap; }

/* Responsive */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .dashboard-columns { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── File Detail Redesign (chevron + 2/3-1/3 split) ── */

.detail { max-width: none; margin: 0; padding: 0 0 40px; }

.detail-banner { padding: 10px 14px; border-radius: 6px; margin: 12px 0; font-size: 13px; }
.detail-banner--stale { background: #fff8e6; border: 1px solid var(--m1-dutch-white, #DDD2A4); color: var(--color-text, #1D3026); }
.detail-banner--error { background: #fbeaea; border: 1px solid var(--color-danger, #84352D); color: var(--color-danger, #84352D); }

/* Header band */
.detail-header { background: #fff; border: 1px solid var(--color-border-warm, #e0ddd4); border-radius: 10px; padding: 20px 24px; margin: 14px 0; }
.detail-header-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-title { font-size: 21px; font-weight: 700; color: var(--color-text, #1D3026); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.detail-id-chip { font-family: ui-monospace, monospace; font-size: 12px; background: #f3f1ec; color: var(--color-text-muted, #596152); border: 1px solid var(--color-border-warm, #e0ddd4); border-radius: 5px; padding: 3px 8px; }
/* The .detail-lens chip owns right-justification (margin-left:auto). The toggle
   must NOT also use margin-left:auto — a second auto-margin splits the free space
   and lands the lens mid-right. The toggle follows the lens via the flex gap. */

.detail-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 26px; margin: 0; }
.detail-facts[hidden] { display: none; }
.detail-unlinked { color: var(--color-text-muted, #596152); font-weight: 400; font-style: italic; }

.detail-blocker-banner { margin: 14px 0; padding: 9px 14px; border-radius: 6px; background: #fbeaea; border: 1px solid var(--color-danger, #84352D); color: var(--color-danger, #84352D); font-size: 13px; }

/* Chevron */
.detail-chevron { margin: 16px 0; overflow-x: auto; padding-bottom: 14px; }
.detail-chevron-track { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; min-width: max-content; }
.chevron-step { position: relative; display: flex; align-items: center; gap: 6px; flex-direction: row; padding: 9px 22px 9px 26px; font-size: 12px; font-weight: 600; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.chevron-step:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: 16px; }
.chevron-step--done { background: var(--m1-dark-green, #1D3026); color: #fff; opacity: 0.55; }
.chevron-step--current { background: var(--m1-teal, #276B6E); color: #fff; font-weight: 700; }
.chevron-step--waiting { background: var(--m1-dutch-white, #DDD2A4); color: var(--color-text, #1D3026); box-shadow: inset 0 0 0 2px var(--m1-teal, #276B6E); }
.chevron-step--future { background: var(--m1-bone-80, #EBE7DB); color: var(--m1-artichoke, #737660); }
.chevron-glyph { font-size: 11px; }
.chevron-sub { position: absolute; left: 0; top: 100%; margin-top: 2px; font-size: 10px; font-weight: 400; color: var(--color-text-muted, #596152); white-space: nowrap; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.detail-cancelled { margin-top: 14px; padding: 9px 14px; border-radius: 6px; background: #fbeaea; border: 1px solid var(--color-danger, #84352D); color: var(--color-danger, #84352D); font-size: 13px; }

/* Content split */
.detail-content { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.detail-workspace, .detail-rail { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .detail-content { grid-template-columns: 1fr; } }

/* Panel shell */
.detail-panel { background: #fff; border: 1px solid var(--color-border-warm, #e0ddd4); border-radius: 9px; overflow: hidden; }
.detail-panel-hd { background: var(--m1-dark-green, #1D3026); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 9px 14px; }
.detail-panel-bd { padding: 14px; }
.detail-rail .detail-panel-hd { background: var(--m1-teal, #276B6E); }
.detail-timeline { display: grid; grid-template-columns: 1fr; gap: 8px; }
.detail-timeline .detail-field dt { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--color-text-muted, #596152); font-weight: 700; }
.detail-timeline .detail-field dd { margin: 0; font-size: 13px; color: var(--color-text, #1D3026); }

/* ---- Iter 9a: reference-data admin editor ---- */
.reference-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.reference-tabs a { font-size: 13px; color: var(--m1-teal, #2C7A6B); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.reference-tabs a:hover { border-bottom-color: var(--m1-teal, #2C7A6B); }
.reference-tabs a[aria-current="page"] { color: var(--m1-dark-green, #1D3026); border-bottom-color: var(--m1-dark-green, #1D3026); font-weight: 700; }
.reference-add-form { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--m1-sand, #C9D1C2); }
.data-table tr.is-inactive { opacity: 0.55; }

/* ---- Iter 9c: Finance Quotes (amber accent; slate stays reserved for Files) ---- */
/* Amber tab accent — the New button + active bucket-tab top bar + label. */
.btn-quote { background: var(--m1-amber); }
.btn-quote:hover { background: #7d5b10; }
.status-tab[data-accent="amber"].active::before { background: var(--m1-amber); }
.quote-tabs .status-tab.active { color: var(--m1-amber); }

/* Whole-row click affordance (delegated nav in app.js). */
.quote-row { cursor: pointer; }

/* Quote status badges. Active band reads amber-family; won = success green;
   lost (declined/expired) = muted sand. */
.badge-quote-draft    { background: var(--m1-bone-60);          color: var(--m1-dark-green); }
.badge-quote-quoted   { background: rgba(148,108,20,0.10);      color: var(--m1-amber); }
.badge-quote-approved { background: rgba(148,108,20,0.10);      color: var(--m1-amber); }
.badge-quote-docd     { background: rgba(148,108,20,0.10);      color: var(--m1-amber); }
.badge-quote-executed { background: rgba(148,108,20,0.10);      color: var(--m1-amber); }
.badge-quote-funded   { background: var(--m1-success);          color: #fff; }
.badge-quote-declined,
.badge-quote-expired  { background: var(--m1-sand);             color: var(--m1-dark-green); }

/* Comparison matrix — competing quotes on one deal, side by side. Columns =
   quotes (header = composed label link); rows = the locked comparison set.
   Bordered grid; column headers read bone, row headers read surface-alt. */
.quote-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.quote-matrix th,
.quote-matrix td { border: 1px solid var(--m1-border-secondary); padding: 5px 9px; text-align: left; }
.quote-matrix thead th { background: var(--m1-bone-60); color: var(--m1-dark-green); }
.quote-matrix tbody th { background: var(--color-surface-alt); width: 120px; }
.quote-matrix-corner { background: var(--color-surface-alt); }

/* ---- Iter 9d: quote filter chips + export + more-filters (amber lens) ---- */
/* "Needs attention" view chips — an orthogonal filter dimension that ANDs with
   the active status tab. Mirrors the .toggle-btn pill proportions; the active
   state is amber-filled so "which view is on" reads at a glance. */
.quote-views {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.view-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #777;
  background: var(--m1-bone-60);
  border: 1px solid var(--m1-sand);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.view-chip:hover { background: var(--m1-bone-80); }
.view-chip--active {
  background: var(--m1-amber);
  color: #fff;
  border-color: var(--m1-amber);
}
.view-chip--active:hover { background: #7d5b10; }
/* "Clear view" — visually secondary text link, not a chip. */
.view-chip--clear {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 5px 6px;
  font-weight: 500;
  color: var(--m1-amber);
}
.view-chip--clear:hover {
  background: transparent;
  text-decoration: underline;
}

/* Export CSV — a bordered secondary button consistent with the filter bar. */
.filter-export {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  color: #555;
  background: #fff;
  border: 1px solid var(--m1-sand);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.filter-export:hover { background: var(--m1-bone-60); border-color: var(--m1-amber); }

/* More filters — CSP-safe progressive disclosure (<details>). */
.filter-more { width: 100%; }
.filter-more summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m1-amber);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}
.filter-more[open] summary::before { transform: rotate(90deg); }
.filter-more summary:hover { text-decoration: underline; }
/* Responsive grid of label+control pairs; labels stack their text above. */
.filter-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.filter-more-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #555;
}

/* ── Manual deal link (Iter 9a′-1: Find Deal) ─────────────────────────── */
.deal-search-intro { max-width: 60ch; font-size: 13px; margin: 0 0 16px; }
.deal-search-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.deal-search-bar .search-input-wrapper { flex: 1 1 auto; max-width: 460px; }

.deal-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.deal-result { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--color-surface, #fff); border: 1px solid var(--color-border-warm, #e0ddd4); border-radius: 9px; }
.deal-result__main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.deal-result__name { font-size: 15px; font-weight: 600; color: var(--color-text, #1D3026); }
.deal-result__id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--color-text-muted, #596152); }
.deal-result__meta { font-size: 12px; }
.deal-result__actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.deal-result--done { color: var(--m1-teal, #276B6E); font-weight: 600; }
.deal-results-footer { font-size: 12px; margin: 12px 0 0; }

#deal-search-results.htmx-request { opacity: .5; }
.deal-result .btn.htmx-request { pointer-events: none; opacity: .6; }

/* Iter 9c-prime Deals view ------------------------------------------------ */
/* Two color-coded lenses on the deal hub: Quotes = amber (warm),
   Files = slate (cool). Accent = left-border + heading color only; does NOT
   recolor the nav. Tokens from m1-brand.css; flat rgba tints match the
   Iter 9c quote-badge convention (no color-mix). */
.deal-section { margin: 1.5rem 0; padding-left: 1rem; border-left: 4px solid transparent; }
.deal-section--quotes { border-left-color: var(--m1-amber); }
.deal-section--quotes .deal-section-hd h2 { color: var(--m1-amber); }
.deal-section--files { border-left-color: var(--m1-slate-gray); }
.deal-section--files .deal-section-hd h2 { color: var(--m1-slate-gray); }
.deal-section-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.deal-section-count { font-size: 0.85em; color: var(--color-text-muted, #596152); font-weight: 600; }
.deal-section-actions { display: flex; gap: 0.5rem; }

.deals-table .num { text-align: right; }
.count-pill { display: inline-block; min-width: 1.6em; padding: 0 0.4em; border-radius: 999px;
  font-size: 0.8em; font-weight: 600; text-align: center; }
.count-pill--quote { background: rgba(148, 108, 20, 0.18); color: var(--m1-amber); }
.count-pill--file  { background: rgba(49, 78, 86, 0.18);   color: var(--m1-slate-gray); }

/* ── Deal header (Task 10: grid / FD chip / units progress / inline select /
   notes row) + breadcrumb. Reuses existing .card / .badge / .detail-header /
   .form-* / .btn* — only genuinely new classes are defined here. Tokens are the
   real m1-brand.css custom properties (teal/dark-green/sand/etc.), not the stale
   blue/yellow design-context table. ──────────────────────────────────────── */

/* Breadcrumb (detail pages — markup added in Task 9, no CSS until now). */
.breadcrumb { padding: 6px 0; margin-bottom: 8px; font-size: 12px;
  display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: var(--m1-teal, #276B6E); text-decoration: none; font-weight: 600; font-size: 12px;
  max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--m1-sand, #C4BFA6); font-size: 11px; }
.breadcrumb .current { font-weight: 600; color: var(--m1-dark-green, #1D3026);
  max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Title row + FD chip (chip is distinct from .detail-id-chip — deal-header has
   its own title row; reuse .card/.detail-header/.badge on the section). */
.deal-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deal-title { font-size: 21px; font-weight: 700; color: var(--m1-dark-green, #1D3026);
  margin: 0; min-width: 0; }
.deal-id-chip { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600;
  color: var(--m1-dark-green, #1D3026); background: var(--m1-bone-60, #F0EDE4);
  border: 1px solid var(--m1-sand, #C4BFA6); border-radius: 4px; padding: 2px 6px; }

/* Info grid (4-col, concept-grouped). */
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; margin-top: 12px; }
.info-item { min-width: 0; }
.info-group-label { grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-secondary, #4A5043);
  border-bottom: 1px solid var(--m1-sand, #C4BFA6); padding-bottom: 2px; margin-top: 4px; }
.info-group-label:first-child { margin-top: 0; }
.info-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-secondary, #4A5043); font-weight: 700; }
/* Detail-header value emphasis (shared Deal/File/Quote): bold, slightly
   smaller than the old 14px — strong scan line at higher density. */
.info-value { font-size: 13px; font-weight: 700; color: var(--m1-dark-green, #1D3026); }
.info-sub { font-size: 11px; color: var(--color-text-secondary, #4A5043); margin-top: 2px; }

/* Units progress bar (inline width style on .progress-bar-fill is set in the
   template — style-src allows 'unsafe-inline'). */
.progress-inline { display: flex; align-items: center; gap: 8px; }
.progress-text { font-size: 14px; color: var(--m1-dark-green, #1D3026); }
.progress-bar-track { flex: 1; height: 6px; background: var(--m1-sand, #C4BFA6);
  border-radius: 3px; overflow: hidden; max-width: 120px; }
.progress-bar-fill { height: 100%; background: var(--m1-teal, #276B6E); }

/* Inline assignee select. */
.inline-select { font-size: 13px; padding: 3px 6px; }
.assignee-saved-hint { font-size: 11px; color: var(--m1-teal, #276B6E); margin-left: 6px; }

/* htmx-indicator: hidden until the triggering element is mid-request. HTMX adds
   .htmx-request to the element with hx-indicator. (No base rule existed.) */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { opacity: 1; }

/* Notes row. .deal-notes-input is styled directly (no global .form-input rule
   exists; mirrors .note-textarea). */
.header-notes { margin-top: 12px; }
.notes-edit-row { display: flex; gap: 8px; align-items: flex-start; }
.deal-notes-input { flex: 1; box-sizing: border-box; font-family: inherit;
  font-size: 13px; padding: 8px 10px; border: 1px solid var(--m1-sand, #C4BFA6);
  border-radius: 4px; resize: vertical; }
.deal-notes-input:focus { outline: none; border-color: var(--m1-teal, #276B6E); }
.notes-saved-hint { font-size: 11px; color: var(--color-text-secondary, #4A5043);
  margin-top: 4px; min-height: 14px; }

/* Responsive collapse. */
@media (max-width: 900px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .info-grid { grid-template-columns: 1fr; }
  .inline-select, .deal-notes-input { width: 100%; }
}

/* ============================================================================
   Detail-header convergence (spec 2026-06-05): one header system, three lenses.
   .info-grid / .info-group-label / .info-label / .info-value are the canonical
   header vocabulary (originally the Deal header). Each entity adds a lens accent:
   a 4px colored left-border + a right-justified icon+label chip. Lens colors
   reuse the nav-link identity (teal/warm-grey/amber); chip text uses AA-safe
   siblings (deal=teal, file=artichoke, quote=amber) on white. Icons are the EXACT nav
   Lucide SVGs, rendered inline in the template.
   ========================================================================== */

/* Lens accent strip on the header panel. */
.detail-header--deal  { border-left: 4px solid var(--m1-teal, #276B6E); }
.detail-header--file  { border-left: 4px solid var(--m1-warm-grey, #9C927C); }
.detail-header--quote { border-left: 4px solid #D7A93B; }

/* Right-justified lens chip: nav icon + uppercase label. */
.detail-lens {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.detail-lens svg { width: 15px; height: 15px; display: block; }
.detail-lens--deal  { color: var(--m1-teal, #276B6E); }
.detail-lens--file  { color: var(--m1-artichoke, #737660); }
.detail-lens--quote { color: var(--m1-amber, #946C14); }

/* ============================================================================
   Quote form (spec 2026-06-05). Backs the quote-* classes in _quote_form.html
   and _quote_detail_body.html, which previously had NO matching rules (form
   rendered with browser defaults). Amber lens throughout = quote identity.
   ========================================================================== */

/* Vertical stack of section cards. */
.quote-form { display: flex; flex-direction: column; gap: 14px; }

/* Top-of-form error banner (reuses .form-error look; scoped wrapper). */
.quote-form__error {
  font-size: 12px; font-weight: 600; color: var(--m1-burnt-umber, #84352D);
  background: rgba(132,53,45,0.07); border-radius: 4px; padding: 8px 12px;
}

/* Section card = white panel + amber filled header bar (the header div). */
.quote-card {
  background: #fff;
  border: 1px solid var(--color-border-warm, #e0ddd4);
  border-radius: 9px;
  padding: 0;
  overflow: hidden;
  margin: 0;
  min-width: 0;
}
/* fieldset legends don't fill width natively; render the bar via a div header.
   display:block + box-sizing make it span the card edge-to-edge. */
.quote-card__hd {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--m1-amber, #946C14);
  color: #fff;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 9px 14px;
  margin: 0;
}

/* Field grid lives inside a padded body wrapper. */
.quote-card__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 16px;
  padding: 16px;
}

/* Field = label-above-input flex column. */
.quote-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.quote-field--wide { grid-column: span 2; }
.quote-field__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--color-text-secondary, #4A5043);
}
.quote-field__req { color: var(--m1-amber, #946C14); }

.quote-field__input,
.quote-field__select {
  font-family: inherit; font-size: 13px; padding: 7px 9px;
  color: var(--m1-dark-green, #1D3026);
  border: 1px solid var(--m1-sand, #C4BFA6); border-radius: 5px;
  background: #fff; width: 100%; box-sizing: border-box;
}
.quote-field__input:focus,
.quote-field__select:focus {
  outline: none;
  border-color: var(--m1-teal, #276B6E);
  box-shadow: 0 0 0 3px rgba(39,107,110,0.15);
}
.quote-field__input::placeholder { color: var(--m1-placeholder, #7A7D6E); }
textarea.quote-field__input { resize: vertical; }

/* Error state. */
.quote-field--error .quote-field__input,
.quote-field--error .quote-field__select { border-color: var(--m1-burnt-umber, #84352D); }
.field-error { font-size: 11px; color: var(--m1-burnt-dark, #6B2A24); margin-top: 2px; }

/* Advanced economics — native <details>, CSP-safe (no JS). */
.quote-advanced { grid-column: 1 / -1; border-top: 1px dashed var(--m1-sand, #C4BFA6); padding-top: 12px; }
.quote-advanced > summary {
  font-size: 12px; font-weight: 700; color: var(--m1-amber, #946C14);
  cursor: pointer; list-style: none; user-select: none;
}
.quote-advanced > summary::-webkit-details-marker { display: none; }
/* CSS-only rotating disclosure triangle (CSP-safe; mirrors .filter-more). */
.quote-advanced > summary::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 6px;
  transition: transform 0.15s;
}
.quote-advanced[open] > summary::before { transform: rotate(90deg); }
.quote-advanced[open] > summary { margin-bottom: 12px; }
/* Advanced-econ fields reuse .quote-card__grid for the 4-col layout but must
   NOT re-pad — the enclosing .quote-advanced already sits inside the card's
   padded grid. Zero the nested padding so advanced fields align flush with
   the Economics fields above. */
.quote-advanced .quote-card__grid { padding: 0; }

/* Checkbox row. */
.quote-card__checks {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 0 16px 16px; font-size: 13px;
}
.quote-check { display: flex; gap: 6px; align-items: center; }
.quote-muted { color: var(--color-text-muted, #596152); font-size: 12px; }

/* Live structure-label bar (in the header). */
.quote-preview-bar { display: flex; align-items: baseline; gap: 8px; }
.quote-preview-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--color-text-secondary, #4A5043);
}

/* Action row. */
.quote-form__actions { display: flex; gap: 8px; align-items: center; margin-top: 2px; }

/* Responsive collapse (matches the info-grid breakpoints). */
@media (max-width: 900px) { .quote-card__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quote-card__grid { grid-template-columns: 1fr; } }