/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #eef1f6;
  --surface:   #ffffff;
  --border:    #e2e6ed;
  --text:      #18202e;
  --muted:     #64748b;
  --accent:    #2563eb;
  --accent-h:  #1d4ed8;
  --accent-lt: #eff6ff;
  --danger:    #dc2626;
  --green:     #16a34a;
  --yellow:    #ca8a04;
  --radius:    10px;
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

/* ── Layout ── */
.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 208px;
  min-width: 208px;
  background: #161f30;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-shadow: 2px 0 12px rgba(0,0,0,.18);
}

.sidebar-header {
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo { width: 34px; height: 34px; flex-shrink: 0; }
.sidebar-title { display: flex; flex-direction: column; }
.sidebar-title-main { font-size: 17px; font-weight: 700; color: #f1f5f9; letter-spacing: .2px; }
.sidebar-title-goat { color: #facc15; }

.sidebar-nav { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; flex: 1; }
.sidebar-footer {
  padding: 10px 8px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-util-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.sidebar-util-btn:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }

.nav-btn {
  background: none;
  border: none;
  color: #94a3b8;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-btn:hover  { background: rgba(255,255,255,.09); color: #e2e8f0; }
.nav-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.35); }
.new-quote-btn  { color: #86efac !important; border: 1px solid rgba(22,163,74,.3); margin-top: 4px; }

.main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Views ── */
.view { display: none; flex-direction: column; gap: 16px; }
.view.active { display: flex; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.card-header h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .1px;
}

/* ── Accordion cards ── */
.accordion-header {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.accordion-header:hover h2 { color: var(--accent); }
.accordion-chevron {
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.2s ease;
  display: inline-block;
}
.accordion-card.collapsed .accordion-chevron { transform: rotate(-90deg); }
.accordion-body { margin-top: 18px; overflow: hidden; }
.accordion-card.collapsed .accordion-body { display: none; }

/* ── Forms ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

input[type="text"],
input[type="date"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
textarea { resize: vertical; }

/* ── Rich Text Editor (Scope of Work) ── */
.rte-wrap {
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.rte-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  background: #f4f7fb;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.rte-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  line-height: 1.4;
  min-width: 28px;
  text-align: center;
  transition: background .1s;
}
.rte-btn:hover { background: #e2e8f0; border-color: var(--border); }
.rte-btn:active { background: #cbd5e1; }
.rte-select {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 4px;
  font-size: 12px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  width: auto;
}
.rte-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 3px;
}
.rte-editor {
  min-height: 80px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  line-height: 1.6;
}
.rte-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.rte-editor ul, .rte-editor ol { margin: 4px 0 4px 20px; }
.rte-editor li { margin-bottom: 2px; }
.rte-editor h1, .rte-editor h2, .rte-editor h3,
.rte-editor h4, .rte-editor h5, .rte-editor h6 { font-size: 1.05em; font-weight: 700; margin: .5em 0 .25em; }
.rte-editor p { margin: 0 0 .4em; }
.rte-editor code { font-family: monospace; font-size: .95em; background: var(--bg-alt, #f1f5f9); padding: 0 3px; border-radius: 3px; }

/* ── Table ── */
.table-wrapper { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead tr { border-bottom: 2px solid var(--border); background: #f8fafc; }
th {
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
td { padding: 7px 6px; vertical-align: middle; }

.col-desc     { width: 35%; }
.col-category { width: 16%; }
.col-qty      { width: 10%; }
.col-unit     { width: 10%; }
.col-price    { width: 13%; }
.col-total    { width: 12%; }
.col-action   { width: 6%; }

td input, td select { padding: 5px 8px; font-size: 13px; }

.row-total { font-weight: 600; font-size: 13px; padding: 6px 10px; }

.delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 5px;
  transition: color .15s, background .15s;
}
.delete-btn:hover { color: var(--danger); background: #fee2e2; }

/* ── Bottom row ── */
.bottom-row { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }

.totals-card { display: flex; flex-direction: column; gap: 10px; }
.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.totals-row:last-of-type { border-bottom: none; }
.totals-row.grand {
  font-size: 16px;
  font-weight: 700;
  padding-top: 10px;
}
.tax-input { width: 80px; text-align: right; }

.action-row { display: flex; gap: 8px; margin-top: 8px; }
.action-row select { flex: 1; }

/* ── Buttons ── */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(37,99,235,.2);
}
.btn-primary:hover {
  background: var(--accent-h);
  box-shadow: 0 3px 10px rgba(37,99,235,.3);
}

.btn-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.btn-secondary:hover {
  background: var(--accent-lt);
  box-shadow: 0 1px 4px rgba(37,99,235,.12);
}

/* ── Status badges ── */
.status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.status-badge.draft    { background: #f1f5f9; color: #64748b; }
.status-badge.sent     { background: #eff6ff; color: var(--accent); }
.status-badge.accepted { background: #dcfce7; color: var(--green); }
.status-badge.rejected { background: #fee2e2; color: var(--danger); }

/* ── Saved list ── */
.list-hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.list-hint strong { color: var(--text); font-weight: 600; }
.saved-list { display: flex; flex-direction: column; gap: 8px; }
.saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.saved-item:hover { background: #f8fafc; box-shadow: var(--shadow); }
.saved-item-active { border-color: var(--accent) !important; background: var(--accent-lt) !important; }
.saved-item-complete { border-left: 3px solid var(--green) !important; }
.complete-toggle { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.complete-toggle input { cursor: pointer; accent-color: var(--green); }
.complete-toggle:has(input:checked) { color: var(--green); font-weight: 600; }
.saved-item-info { display: flex; flex-direction: column; gap: 3px; }
.saved-item-title { font-weight: 600; font-size: 14px; }
.saved-item-meta { font-size: 12px; color: var(--muted); }
.saved-item-right { display: flex; align-items: center; gap: 12px; }
.saved-item-total { font-weight: 700; font-size: 15px; color: var(--text); }

.empty-state { color: var(--muted); font-size: 13px; text-align: center; padding: 1.5rem; }

/* ── Labor row highlight ── */
tr.labor-row { background: #f8faff; }
.unit-label { font-size: 12px; color: var(--muted); padding: 0 8px; }

/* ── Rates source label ── */
.rates-source { font-size: 12px; color: var(--green); font-weight: 500; }

/* ── Rates table ── */
.rates-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rates-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  background: #f8fafc;
}
.rates-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.rates-table tr:last-child td { border-bottom: none; }
.rates-table tr:hover td { background: #f8fafc; }

/* ── Blended rate banner ── */
/* Sent → Accepted, inline on the Quotes list */
.btn-accept-inline {
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 700; font-family: inherit; white-space: nowrap;
  background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0;
  transition: background .12s ease, color .12s ease;
}
.btn-accept-inline:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── Awarded estimate freeze ── */
.award-freeze {
  margin-top: 12px; padding: 10px 12px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius);
  font-size: 12px; line-height: 1.5; color: #14532d;
}
.award-freeze.hidden { display: none; }
.af-line { font-size: 12.5px; }
.af-date { color: var(--muted); font-size: 11px; margin-left: 4px; }
.af-note { color: var(--muted); font-size: 11px; margin: 2px 0 8px; }

.ctd-baseline { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ctd-baseline.frozen { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }
.ctd-baseline.live   { background: #fffbeb; color: #92400e;      border: 1px solid #fde68a; }

/* ── Cost to Date ── */
.ctd-inline-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ctd-jobline {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 4px 14px; font-size: 13px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.ctd-muted { color: var(--muted); font-size: 12px; }
.ctd-sep   { color: var(--muted); }

.ctd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ctd-card  { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
.ctd-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 8px; }
.ctd-card-row   { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.ctd-card-row span { color: var(--muted); }
.ctd-card-var   { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; font-weight: 700; }
.ctd-card-pct   { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.ctd-over  { color: #b91c1c; }
.ctd-under { color: #15803d; }
.ctd-flat  { color: var(--muted); }

.ctd-ratesline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ctd-ratesline strong { color: var(--text); }

.ctd-section-hdr { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 10px; }
.ctd-section-hdr h3 { font-size: 13px; font-weight: 700; color: var(--accent); }

.ctd-table-wrap { overflow-x: auto; }
.ctd-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 900px; }
.ctd-table th {
  background: #f8fafc; color: var(--muted); border-bottom: 1px solid var(--border);
  padding: 6px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; text-align: center; white-space: nowrap;
}
.ctd-table th.ctd-th-pos { text-align: left; }
.ctd-table .ctd-th-sub { font-size: 9px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ctd-table td { padding: 5px 4px; border-bottom: 1px solid #f0f4f8; }
.ctd-table td input { width: 100%; min-width: 0; padding: 5px 6px; font-size: 12px; text-align: right; }
.ctd-table td input.ctd-pos { text-align: left; }
.ctd-table .ctd-num { text-align: right; white-space: nowrap; padding-right: 8px; }
.ctd-table tfoot td { border-top: 2px solid var(--border); background: #f8fafc; padding: 8px 4px; }
.ctd-foot-label { text-align: right; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ctd-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

.ctd-extras { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.ctd-field { display: flex; flex-direction: column; gap: 4px; }
.ctd-field span { font-size: 11px; color: var(--muted); }
.ctd-field input { width: 160px; }
.ctd-projection { flex: 1; min-width: 260px; font-size: 12px; line-height: 1.7; padding: 10px 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius); }
.ctd-paste { width: 100%; font-family: inherit; font-size: 12px; }

/* ── Labor rate sheet expiry ── */
.rates-expiry-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; margin-bottom: 14px;
  border-radius: var(--radius);
  font-size: 13px; line-height: 1.45;
}
.rates-expiry-banner.hidden { display: none; }
.rates-expiry-banner.expired { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.rates-expiry-banner.soon    { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.reb-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.reb-go {
  margin-left: auto; flex-shrink: 0;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: #fff; color: inherit;
  border: 1px solid currentColor; opacity: .85;
}
.reb-go:hover { opacity: 1; }

.rates-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.rates-badge.ok      { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }
.rates-badge.soon    { background: #fffbeb; color: #92400e;      border: 1px solid #fde68a; }
.rates-badge.expired { background: #fef2f2; color: #991b1b;      border: 1px solid #fecaca; }
.rates-badge.none    { background: #f8fafc; color: var(--muted); border: 1px solid var(--border); font-weight: 500; }

.blended-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: 14px 20px;
}
.blended-banner.hidden { display: none; }
.blended-banner-left { display: flex; flex-direction: column; gap: 2px; }
.blended-label { font-weight: 700; font-size: 13px; color: var(--accent); }
.blended-sub { font-size: 12px; color: var(--muted); }
.blended-banner-right { display: flex; align-items: baseline; gap: 6px; }
/* Safety rate — edited here because it is a component of the rate shown alongside it.
   Kept deliberately quiet: it should read as a footnote to the rate, not compete with it. */
.blended-safety {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; margin-right: 18px;
  white-space: nowrap;
}
.blended-safety-label { font-size: 11px; color: var(--muted); }
.blended-safety .safety-input {
  width: 56px; padding: 2px 4px;
  font-size: 12px; color: var(--muted);
  background: transparent;
  border: none; border-bottom: 1px dashed #bfdbfe; border-radius: 0;
  transition: color .12s ease, border-color .12s ease;
}
.blended-safety:hover .safety-input { color: var(--text); border-bottom-color: var(--accent); }
.blended-safety .safety-input:focus {
  color: var(--text); outline: none;
  border-bottom: 1px solid var(--accent);
}
.blended-rate { font-size: 24px; font-weight: 700; color: var(--accent); }
.blended-unit { font-size: 12px; color: var(--muted); }

/* ── Crew task row ── */
tr.crew-task-row { background: #f0fdf4; }
.type-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.type-chip.crew { background: #dcfce7; color: var(--green); }

/* ── Accent button ── */
.btn-accent {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(22,163,74,.2);
}
.btn-accent:hover { background: #15803d; box-shadow: 0 3px 10px rgba(22,163,74,.25); }

/* ── Work areas ── */
.area-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.area-block:last-child { margin-bottom: 0; }

.area-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f4f7fb;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.area-name-inp {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 6px;
  color: var(--text);
}
.area-name-inp:focus { background: #fff; border-color: var(--accent); }
.area-subtotal {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}
.area-actions { display: flex; gap: 6px; align-items: center; }
.area-del-btn { margin-left: 4px; }

/* ── Areas summary bar ── */
.areas-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 18px;
  background: #f4f7fb;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}
.areas-summary-item { display: flex; align-items: center; gap: 6px; }
.areas-summary-label { color: var(--muted); }
.areas-summary-item strong { font-size: 15px; color: var(--accent); }
.areas-summary-sep { color: var(--border); font-size: 18px; }
.areas-summary-note { font-size: 11px; color: var(--muted); }
.summary-ok   { color: var(--green) !important; }
.summary-over { color: var(--danger) !important; }
.summary-warn { font-size: 11px; color: var(--danger); font-weight: 600; }

/* ── Date+time row ── */
.datetime-row { display: flex; gap: 6px; }
.datetime-row input[type="date"] { flex: 1; }
.datetime-row input[type="time"] { width: 115px; }

.tasks-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tasks-table th {
  text-align: left; padding: 8px 10px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.tasks-table td { padding: 6px 4px; border-bottom: 1px solid #f0f4f8; }
.tasks-table td input[type="number"] { min-width: 80px; width: 100%; }
.tasks-table td select { min-width: 130px; width: 100%; }
.unit-select { min-width: 100px; font-size: 12px; padding: 4px 6px; }
.tasks-table tr:last-child td { border-bottom: none; }
.tasks-table tr:hover td { background: #f8fffe; }
/* Pads short rows out to the full table width so row tints reach the right edge */
.tasks-table .col-filler { padding: 0; }

/* ── Task table column sizing ──
   Widths are declared here rather than left to the browser so all three row types
   (crew / labor / other) land on the same grid. Inputs inside these narrow columns
   must clear the `min-width: 80px` on .tasks-table td input[type="number"] — without
   min-width:0 the browser honours the 80px floor, overflows the column, and wraps the
   trailing "%" onto a second line, which is what made the Materials rows taller than
   the crew rows. */
.tasks-table .col-drag     { width: 20px; }
.tasks-table .col-desc     { width: auto; min-width: 180px; }
.tasks-table .col-ratetype { width: 118px; }
.tasks-table .col-rate     { width: 104px; }
.tasks-table .col-margin   { width: 74px; white-space: nowrap; text-align: left; }
.tasks-table .col-qty      { width: 104px; }
.tasks-table .col-unit     { width: 96px; }
.tasks-table .col-total    { width: 112px; white-space: nowrap; }
.tasks-table .col-split    { width: 62px; }
.tasks-table .col-action   { width: 34px; }

/* `[type="number"]` carries class-level specificity, so the base rule at the top of
   this section outranks a plain `.margin-input`; match its attribute to win. */
.tasks-table td input[type="number"].margin-input {
  width: 46px; min-width: 0; padding: 5px 4px; text-align: right;
}
.tasks-table .margin-pct   { font-size: 11px; color: var(--muted); margin-left: 2px; }
.tasks-table td input[type="text"].unit-input { width: 100%; min-width: 0; }
.tasks-table td select     { min-width: 0; }
.tasks-table .unit-select  { min-width: 0; }
/* Keep every row the same height even though the Other row packs in more controls */
.tasks-table tbody td { height: 40px; }

/* ── Area total row (foot of each task table) ── */
.tasks-table tfoot .area-total-row td {
  border-top: 2px solid var(--border);
  border-bottom: none;
  padding: 9px 4px;
  background: #f8fafc;
}
.tasks-table tfoot .area-total-label {
  text-align: right; padding-right: 12px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
}
.tasks-table tfoot .area-total-cell { font-weight: 700; font-size: 14px; color: var(--text); }
.tasks-table tfoot tr:hover td { background: #f8fafc; }

/* ── Drag-to-reorder tasks ── */
.tasks-table .col-drag { width: 20px; padding: 8px 2px; }
.tasks-table td.drag-cell { padding: 6px 2px; text-align: center; }
.drag-handle {
  display: inline-block; padding: 2px 3px;
  color: var(--muted); opacity: .35;
  font-size: 14px; line-height: 1;
  cursor: grab; user-select: none;
  transition: opacity .12s ease, color .12s ease;
}
.tasks-table tr:hover .drag-handle { opacity: .8; }
.drag-handle:active { cursor: grabbing; }
/* The row stays in flow and shuffles between its siblings, so it needs to stay
   clearly readable while moving — highlight it rather than fading it out. */
.tasks-table tr.dragging td {
  background: #e8f2ff !important;
  border-top: 1px solid var(--accent, #2563eb);
  border-bottom: 1px solid var(--accent, #2563eb);
}
body.task-dragging { cursor: grabbing; user-select: none; }
body.task-dragging .drag-handle { cursor: grabbing; }

/* ── Shift sections ── */
.shift-section { display: flex; flex-direction: column; gap: 8px; }
.shift-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
}
.shift-label { font-weight: 600; font-size: 13px; }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.divider-v { width: 1px; height: 20px; background: var(--border); }

/* ── Crew inline result row ── */
.crew-inline-wrap { display: flex; flex-direction: column; gap: 12px; }
.crew-result-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.blended-pill {
  margin-left: auto;
  background: var(--accent-lt);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 13px;
  color: var(--accent);
}
.blended-pill strong { font-size: 15px; }

/* ── Crew builder ── */
.crew-shift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.toggle-group { display: flex; gap: 5px; }
.toggle-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  color: var(--text);
}
.toggle-btn:hover { background: #e8edf5; }
.toggle-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(37,99,235,.2);
}

.day-checks { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.day-fixed { font-size: 13px; color: var(--muted); }
.day-check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.day-note { font-size: 11px; color: var(--muted); }
.weekday-select {
  font-size: 13px; padding: 3px 6px; min-width: 0; width: auto;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}

/* ── Custom schedule calendar (Crew & Shift header) ── */
.day-summary {
  font-size: 12.5px; color: var(--accent-h); background: var(--accent-lt);
  border: 1px solid #bfdbfe; border-radius: 6px; padding: 4px 9px; white-space: nowrap; cursor: default;
}
.cal-wrap { position: relative; }
.cal-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-btn.active:hover { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.cal-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 276px; padding: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md);
  text-align: left; font-weight: 400;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-size: 13px; color: var(--text); }
.cal-nav {
  width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
}
.cal-nav:hover { background: var(--accent-lt); border-color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-day {
  height: 30px; border: 1px solid transparent; border-radius: 6px;
  background: #f4f7fb; color: var(--text); font-size: 12.5px; cursor: pointer;
}
.cal-day.pad { background: transparent; cursor: default; }
.cal-day.sat, .cal-day.sun { color: var(--muted); }
.cal-day:not(.pad):hover { border-color: var(--accent); }
.cal-day.today { font-weight: 700; text-decoration: underline; }
.cal-day.sel     { background: var(--accent); border-color: var(--accent); color: #fff; }
.cal-day.sel.sat { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.cal-day.sel.sun { background: var(--danger); border-color: var(--danger); color: #fff; }
.cal-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.cal-sum { flex: 1; font-size: 12px; color: var(--text); }
.cal-link { background: none; border: none; color: var(--danger); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.cal-link:disabled { color: var(--muted); cursor: default; }
.cal-hint { font-size: 10.5px; line-height: 1.35; color: var(--muted); margin-top: 8px; }

.hb-item.pd { background: #fff7ed; color: #9a3412; }
.hours-breakdown { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.hb-item {
  font-size: 13px; padding: 6px 12px;
  border-radius: 7px;
  background: #f4f7fb;
  border: 1px solid var(--border);
}
.hb-item.st    strong { color: var(--accent); }
.hb-item.pm    strong { color: var(--yellow); }
.hb-item.dt    strong { color: var(--danger); }
.hb-item.total strong { color: var(--text); }

.crew-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.crew-table th {
  text-align: left; padding: 8px 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted);
  border-bottom: 2px solid var(--border); background: #f8fafc;
}
.crew-table td { padding: 8px 8px; border-bottom: 1px solid var(--border); }
.crew-table tr:last-child td { border-bottom: none; }
.crew-weekly-cost { font-size: 13px; }

/* ── Blended result card ── */
.blended-result-card { background: #f8fafc; }
.blended-result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}
.blended-stat { display: flex; flex-direction: column; gap: 4px; }
.blended-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.blended-stat-val { font-size: 18px; font-weight: 700; color: var(--text); }
.blended-stat.highlight .blended-stat-val { color: var(--accent); font-size: 22px; }
.blended-note { font-size: 12px; color: var(--muted); }

/* ── Schedule / Gantt ── */
/* Scrolls both ways inside a capped height so the header rows (sticky top) and the
   name column (sticky left) both have a scroll container to stick to. */
.sched-wrap { position: relative; overflow: auto; max-height: calc(100vh - 250px); }
.sched-head { position: sticky; top: 0; z-index: 12; background: #fff; }
.sched-head .sched-hdr-label { z-index: 13; }
.sched-conflict-band {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: rgba(220,38,38,.10);
  border-left: 1px dashed rgba(220,38,38,.35); border-right: 1px dashed rgba(220,38,38,.35);
}
.sched-day-cell.is-conflict { color: var(--danger); font-weight: 700; background: #fee2e2; cursor: help; }
.sched-conflict-note {
  display: inline-block; margin-bottom: 10px; padding: 6px 10px; font-size: 12px;
  color: var(--danger); background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px;
}
.sched-bar.is-complete {
  opacity: .55;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0 6px, transparent 6px 12px);
}
.sched-quote-tag { font-size: 11px; margin-left: 4px; }
.sched-toggle { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sched-dot.conflict { border-radius: 2px; background: #fee2e2; border: 1px dashed var(--danger); box-sizing: border-box; }
.sched-edit-pop {
  position: fixed; z-index: 100; width: 300px; padding: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md);
}
.sched-edit-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.sched-edit-num   { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.sched-edit-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sched-edit-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.sched-edit-grid input { font-size: 12.5px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.sched-edit-note  { font-size: 12px; line-height: 1.45; color: var(--muted); }
.sched-edit-err   { font-size: 11.5px; color: var(--danger); min-height: 14px; margin-top: 4px; }
.sched-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sched-edit-actions .btn-primary { margin-left: auto; }
.sched-gantt { display: inline-block; min-width: 100%; position: relative; }

.sched-hdr-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.sched-hdr-label { flex: 0 0 220px; width: 220px; padding: 6px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); display: flex; align-items: center; }
/* The name column sticks to the left edge while the timeline scrolls under it. z-index
   sits above the today line (10) so the line never draws across the names. */
.sched-hdr-label, .sched-label { position: sticky; left: 0; z-index: 11; background: #fff; }
.sched-hdr-label { border-right: 1px solid var(--border); }
.sched-nav .toggle-btn { padding-left: 10px; padding-right: 10px; }
.sched-month-cells { display: flex; flex: 1; }
.sched-month-cell { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; padding: 5px 4px; border-left: 2px solid var(--border); background: #f4f7fb; white-space: nowrap; overflow: hidden; }
.sched-day-cells { display: flex; flex: 1; }
.sched-day-cell { font-size: 11px; font-weight: 500; color: var(--muted); text-align: center; padding: 4px 0; border-left: 1px solid #e4e9f0; white-space: nowrap; }
.sched-day-cell.is-today { color: var(--accent); font-weight: 700; background: #eff6ff; }
.sched-day-cell.is-weekend { color: #bbb; }
.sched-day-cell.is-month-start { border-left: 2px solid var(--border); }

.sched-row { display: flex; align-items: stretch; border-bottom: 1px solid #eaeff5; cursor: pointer; }
.sched-row:hover .sched-label { background: #f8fafc; }
.sched-label { flex: 0 0 220px; width: 220px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); }
.sched-quote-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.sched-quote-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

.sched-bar-track { position: relative; height: 44px; flex: 1; }
.sched-bar {
  position: absolute; top: 8px; height: 28px;
  border-radius: 6px; display: flex; align-items: center;
  padding: 0 10px; min-width: 4px; overflow: hidden;
  cursor: pointer; transition: filter .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.sched-bar:hover { filter: brightness(1.07); }
.sched-bar-label { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }

.sched-bar.status-draft    { background: #94a3b8; }
.sched-bar.status-sent     { background: var(--accent); }
.sched-bar.status-accepted { background: var(--green); }
.sched-bar.status-rejected { background: var(--danger); }

.sched-today-line {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--danger); opacity: .5; pointer-events: none;
  z-index: 10;
}

.sched-legend { display: flex; gap: 12px; align-items: center; }
.sched-legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.sched-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sched-dot.draft    { background: #94a3b8; }
.sched-dot.sent     { background: var(--accent); }
.sched-dot.accepted { background: var(--green); }
.sched-dot.rejected { background: var(--danger); }

.sched-unscheduled { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sched-unsched-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 10px; }
.sched-unsched-item { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.sched-unsched-item:hover { background: #f8fafc; }
.sched-unsched-total { margin-left: auto; font-weight: 600; color: var(--accent); }

/* ── Takeoffs ── */
.takeoff-calc-layout { display: flex; gap: 20px; align-items: flex-start; }
.takeoff-dims-col { flex: 1; min-width: 0; }
.takeoff-3d-col { flex: 0 0 280px; width: 280px; }
.takeoff-3d-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
#takeoff-3d-canvas { width: 280px; height: 280px; border-radius: var(--radius); display: block; border: 1px solid var(--border); }
.takeoff-link-bar { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.takeoff-link-bar select { flex: 1; min-width: 160px; }
.takeoff-attach-info { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.takeoff-dims-text { font-size: 13px; color: var(--muted); }
.takeoff-dims { padding: 0 0 8px; }
.dim-hint { display: block; min-height: 14px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.dim-hint.bad { color: var(--danger); }
.takeoff-count { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.takeoff-count input { width: 54px; min-width: 0; padding: 4px 6px; font-size: 13px; text-align: center; }
.takeoff-source-note {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 10px;
  font-size: 12px; color: var(--accent-h); background: var(--accent-lt);
  border: 1px solid #bfdbfe; border-radius: 6px;
}
.mat-search { width: 190px; min-width: 0; padding: 5px 8px; font-size: 12px; }
.purchase-rollup { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--border); }
.takeoff-layers-header { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.takeoff-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.takeoff-results-wrap { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

.layer-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.layer-num { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 52px; }
.layer-row select { flex: 1; }

.crew-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.crew-member-num { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 20px; text-align: center; }
.crew-name-inp { flex: 1; }
.saved-item-crew { font-size: 12px; color: var(--muted); }
.layer-thick-wrap { display: flex; align-items: center; gap: 4px; }
.layer-thick-wrap input { width: 80px; }
.layer-unit-label { font-size: 12px; color: var(--muted); white-space: nowrap; }

.mat-type-chip { font-size: 10px; font-weight: 700; background: #e0f2fe; color: #0369a1; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.materials-table td { vertical-align: middle; }
.material-edit-form {
  background: #f4f7fb;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.material-form-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── Split toggle ── */
.split-toggle { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.split-toggle input { cursor: pointer; accent-color: var(--accent); }
.split-toggle:has(input:checked) { color: var(--accent); font-weight: 600; }

/* ── Split area picker ── */
.split-cell { white-space: nowrap; }
.split-areas-wrap { position: relative; display: inline-block; margin-top: 3px; }
.split-areas-btn {
  font-size: 10px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--accent); cursor: pointer; white-space: nowrap;
}
.split-areas-btn:hover { background: var(--accent-lt); }
.split-areas-menu {
  position: fixed; z-index: 50;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: 6px; min-width: 170px;
  max-height: 220px; overflow-y: auto;
}
.split-menu-hint { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 2px 4px 5px; }
.split-area-opt { display: flex; align-items: center; gap: 6px; padding: 4px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; border-radius: 4px; }
.split-area-opt:hover { background: #f0f4f8; }
.split-area-opt input { cursor: pointer; accent-color: var(--accent); }
.split-menu-note { font-size: 10px; color: var(--muted); padding: 5px 4px 2px; border-top: 1px solid var(--border); margin-top: 4px; }

/* ── Summary column show/hide toggles ── */
.col-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.col-toggles:empty { display: none; }
.col-toggles-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-right: 2px; }
.col-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); cursor: pointer; user-select: none; }
.col-toggle input { cursor: pointer; accent-color: var(--accent); margin: 0; }
.col-toggle-empty { color: var(--muted); font-style: italic; }

/* ── Quote Summary Table ── */
.sum-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sum-table thead tr { background: #1a2e4a; color: #fff; }
.sum-area-hdr { padding: 10px 14px; font-weight: 700; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.sum-col-hdr  { padding: 10px 14px; font-weight: 700; text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.sum-table tbody tr:nth-child(even) { background: #f6f8fb; }
.sum-table tbody tr:hover { background: #eef2f7; }
.sum-area { padding: 8px 14px; font-weight: 500; }
.sum-num   { padding: 8px 14px; text-align: right; color: var(--text); white-space: nowrap; }
.sum-total { font-weight: 700; }
/* Empty categories show "-" — dimmed so real figures carry the eye */
.sum-zero  { color: var(--muted); font-weight: 400; }
.sum-table tfoot tr { border-top: 2px solid #1a2e4a; }
.sum-subtotal-row td { padding: 7px 14px; text-align: right; font-weight: 600; color: var(--muted); font-size: 12px; }
.sum-subtotal-row td:first-child { text-align: right; }
.sum-tax-row td { padding: 5px 14px; text-align: right; font-size: 12px; color: var(--muted); }
.sum-grand-row td { padding: 10px 14px; text-align: right; font-weight: 700; font-size: 14px; background: #1a2e4a; color: #fff; }

/* ── Material price freshness ── */
.mat-price-date { font-size: 10.5px; color: var(--muted); }
.mat-price-stale-btn {
  font-size: 10.5px; font-weight: 600; color: #92400e;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 999px;
  padding: 1px 8px; cursor: pointer; margin-top: 2px;
}
.mat-price-stale-btn:hover { background: #fef3c7; }
.stale-price-note {
  margin-top: 8px; padding: 8px 12px; font-size: 12px; color: #92400e;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px;
}

/* ── Profit Margin card subtle style ── */
.profit-margin-card { border-left: 3px solid var(--accent); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8d0db; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a0aab8; }

/* ── Web sign-in ── */
.login-screen {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: #161f30;
  align-items: center; justify-content: center;
}
.login-screen.show { display: flex; }
.login-card {
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.login-logo { width: 72px; height: 72px; }
.login-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px; }
.login-title span { color: var(--accent); }
.login-form { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.login-form input { width: 100%; }
.login-form .btn-primary { margin-top: 12px; width: 100%; padding: 10px; }
.login-link { font-size: 12px; color: var(--accent); text-align: center; margin-top: 8px; text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.login-msg { font-size: 12px; color: var(--muted); text-align: center; min-height: 16px; margin-top: 8px; }
.login-msg.err { color: var(--danger); }

/* Signed-in user in the sidebar footer (web only) */
.user-box { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; }
.user-name { color: #e2e8f0; font-size: 12px; font-weight: 600; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { color: #64748b; font-size: 11px; text-transform: capitalize; padding: 0 2px 4px; }

/* Settings → Users */
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.users-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.users-table .muted, .muted { color: var(--muted); font-size: 12px; }
.role-select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--surface); }

/* Viewers: the server refuses their saves; hide the buttons that would only error */
body.viewer #save-btn, body.viewer #add-attachment-btn, body.viewer #restore-btn, body.viewer #merge-btn { display: none !important; }