/* SecondCoat CRM. Layout familiarity: dark left sidebar, light content area,
   compact cards, colored pipeline columns (the shape the owner is used to,
   our own code and branding). Accent: deep green for Green Touch. */

:root {
  --green: #1d5c3f;
  --green-dark: #14402c;
  --green-light: #e7f2ec;
  --sidebar-bg: #16241d;
  --sidebar-text: #cfe0d6;
  --bg: #f4f6f5;
  --card: #ffffff;
  --border: #dde3e0;
  --text: #1f2a25;
  --muted: #6b7a72;
  --danger: #b23b3b;
  --warn: #b8860b;
  --radius: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--danger); margin: 8px 0; }
code { background: #eef1ef; padding: 1px 5px; border-radius: 4px; }
h1 { font-size: 24px; margin: 0 0 14px; }
h2 { font-size: 19px; margin: 20px 0 10px; }
h3 { font-size: 16px; margin: 14px 0 8px; }

/* ---------- Center screens (setup / auth / loading) ---------- */
.center-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--sidebar-bg);
  padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
}
.center-card {
  background: var(--card); border-radius: 12px; padding: 28px;
  max-width: 420px; width: 100%; box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.center-card label { display: block; margin: 10px 0; font-weight: 600; }
.brand-mark { font-size: 24px; font-weight: 800; color: var(--green); letter-spacing: -.5px; }
.brand-mark.light { color: #fff; }

/* ---------- App shell ---------- */
#app-shell { display: flex; min-height: 100vh; }
#sidebar {
  width: 240px; flex: 0 0 240px; background: #ffffff; color: var(--text);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { padding: 18px 16px 10px; }
.brand-logo-chip { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: inline-block; max-width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.brand-logo { max-height: 48px; max-width: 180px; object-fit: contain; display: block; }
.sidebar-business { color: var(--muted); font-size: 13px; margin-top: 2px; }
#main-nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; flex: 1; overflow-y: auto; }
.nav-group {
  color: #8a978f; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; padding: 14px 12px 4px;
}
.nav-item {
  background: none; border: 0; color: var(--text); text-align: left;
  padding: 11px 14px; border-radius: 6px; cursor: pointer; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center;
}
.nav-item:hover { background: #eef3f0; }
.nav-item.active { background: var(--green); color: #fff; }
.badge {
  background: #d97706; color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px;
}
.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
.sidebar-footer .btn { margin-top: 8px; }

#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px));
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  transform: translateZ(0);
}
#topbar h1 { margin: 0; flex: 0 0 auto; }
.topbar-search { flex: 1; max-width: 420px; }
.topbar-search input { width: 100%; }
.topbar-business { color: var(--muted); font-weight: 600; white-space: nowrap; }
#sidebar-toggle { display: none; }
#view-container {
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px));
}

/* ---------- Forms and buttons ---------- */
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; background: #fff; color: var(--text);
  min-width: 0; max-width: 100%;
}
/* Fix round 27: WebKit (the Mac and iPhone apps) sizes date and time
   inputs to their editor's natural width and lets them spill out of
   their column or panel - Rick, 2026-11-14: New Appointment Start and
   End time, New Invoice Due date, and the deal rail Appointment date
   and time all crossed into the next field. Round 25 guarded the grid
   columns and the deal panel, but the inputs themselves carried no
   shrink rule outside the panel. The base rule above now gives every
   field min-width: 0 and max-width: 100%, and this line pins the
   date and time family explicitly so it cannot regress. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { min-width: 0; max-width: 100%; }
/* Fix round 29: WebKit (the Mac and iPhone apps) sizes date and time
   inputs as content-box even when border-box is set, so the field
   renders wider than its container by its own padding and border
   (12px + 12px + 1px + 1px = 26px) and spills over the next field
   or past the panel edge. Proven on Rick's Mac app, 2026-11-14, in a
   freshly relaunched app on the current live build: the rail date
   and time fields crossed the panel border by about 10px and the
   appointment times slid under the next field, while text fields
   and selects fit. Blink honors border-box, so only WebKit gets
   the width compensation; the supports gate keeps Chrome and
   desktop web at full width. */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { width: calc(100% - 26px); }
}
textarea { min-height: 80px; resize: vertical; }
label { font-weight: 500; color: #4c5b50; display: block; margin: 8px 0 4px; }
.btn {
  display: inline-block; border: 1px solid var(--border); background: #fff; color: var(--text);
  padding: 10px 18px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600;
  text-decoration: none;
}
.btn:hover { background: #f0f3f1; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-danger { color: var(--danger); border-color: #e3c2c2; }
.btn-small { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; margin-top: 10px; }
.btn-ghost { border: 0; background: none; font-size: 18px; }
.btn-ghost-light { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn[disabled] { opacity: .55; cursor: default; }

/* ---------- Cards, tables, stats ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat .stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.stat .stat-value { font-size: 26px; font-weight: 800; margin-top: 4px; }
table.data { width: 100%; border-collapse: collapse; background: var(--card); }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.row-actions { white-space: nowrap; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--green-light); color: var(--green-dark); }
.pill-parked { background: #f3e5c3; color: #7a5b00; }
.pill-status { background: #e8edf3; color: #33506e; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

/* ---------- Pipeline board ---------- */
/* Board header (Tranche A2): filters row + New Appointment type menu. */
.board-filters {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.board-filters label { margin: 0; font-size: 13px; }
.btn-toggle-on { border-color: var(--green); color: var(--green-dark); font-weight: 700; }
.menu-wrap { position: relative; display: inline-block; }
.appt-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 210px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 22px rgba(20, 30, 24, .16); padding: 4px;
}
.appt-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; font-size: 14px; padding: 9px 11px; border-radius: 4px; cursor: pointer; color: var(--text);
}
.appt-menu-item:hover { background: #f0f3f1; color: var(--green-dark); }
.pipeline-group-title { margin: 18px 0 10px; font-size: 17px; }
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.stage-col {
  flex: 0 0 300px; background: #ecefec; border-radius: var(--radius);
  border: 1px solid var(--border); min-height: 120px; display: flex; flex-direction: column;
}
.stage-col.drag-over { outline: 2px dashed var(--green); outline-offset: -4px; }
.stage-head { padding: 12px 14px; border-radius: var(--radius) var(--radius) 0 0; color: #fff; }
.stage-head .stage-name { font-weight: 700; font-size: 15px; }
.stage-head .stage-total { font-size: 13px; opacity: .9; }
.stage-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.deal-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 13px 14px;
  cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.deal-card:hover { border-color: var(--green); }
.deal-card .deal-title { font-weight: 700; font-size: 15px; }
.deal-card .deal-value { color: var(--green-dark); font-weight: 700; font-size: 15px; }
.deal-card .deal-meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.deal-card .deal-move { margin-top: 7px; display: flex; gap: 4px; }
.deal-card .deal-move button {
  border: 1px solid var(--border); background: #f6f8f7; border-radius: 4px;
  font-size: 12px; padding: 4px 9px; cursor: pointer;
}
.deal-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.deal-action {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--green);
  border-radius: 999px; color: var(--green-dark); background: var(--green-light);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.deal-action:hover { background: #d8e9de; }
/* Tranche A: card header row with the per-card menu, and the proposals
   status tabs. The card menu reuses .appt-menu positioning. */
.deal-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.card-menu-btn {
  border: 1px solid var(--border); background: #f6f8f7; border-radius: 4px;
  font-size: 14px; line-height: 1; padding: 5px 10px; cursor: pointer; color: var(--muted);
}
.card-menu-btn:hover { color: var(--green-dark); border-color: var(--green); }
.card-menu { right: 0; left: auto; }
.status-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,25,20,.55); z-index: 90;
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: calc(22px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 760px; padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.modal.wide { max-width: 960px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head h2 { margin: 0; }
.modal-close { border: 0; background: none; font-size: 22px; padding: 4px 8px; cursor: pointer; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
/* Fix round 25: plain 1fr columns are minmax(auto, 1fr), so a field with a
   wide natural size (date, time, select) forced its column wider than the
   form and the next box slid underneath it (Rick, 2026-11-14: boxes
   overlapping in the appointment dialog and elsewhere). minmax(0, ...) plus
   min-width: 0 on the children lets every column shrink to its share. */
.grid-2 > * { min-width: 0; }
.activity-log { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.activity-log div { padding: 6px 0; border-bottom: 1px dashed #edf0ee; font-size: 14px; }
.activity-log div:last-child { border-bottom: 0; }

/* ---------- Customer proposal view ---------- */
.customer-view { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 26px; max-width: 780px; }
.customer-view .cv-head { border-bottom: 3px solid var(--green); padding-bottom: 12px; margin-bottom: 14px; }
.customer-view .cv-company { font-size: 22px; font-weight: 800; color: var(--green-dark); }
.customer-view table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.customer-view td, .customer-view th { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.customer-view .cv-total { font-size: 17px; font-weight: 800; }

/* ---------- Follow-ups ---------- */
.due-card { border-left: 4px solid var(--warn); }
.due-card pre {
  white-space: pre-wrap; word-wrap: break-word; background: #fafbfa;
  border: 1px solid var(--border); border-radius: 6px; padding: 10px; font: inherit; font-size: 13px;
}

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--sidebar-bg); color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25); }

/* ---------- Public booking page ---------- */
.book-wrap { max-width: 640px; margin: 0 auto; padding: 20px 14px 40px; }
.book-head { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px 16px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-bottom: 16px; }
.book-head .book-company { font-size: 26px; font-weight: 800; color: var(--green-dark); }
.book-head .pub-logo { margin: 0 auto 8px; }
.book-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- V2 additions: calendar, reports, public pages ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 2px 4px; }
.cal-cell { background: var(--card); border: 1px solid var(--border); border-radius: 6px; min-height: 86px; padding: 5px 6px; overflow: hidden; }
.cal-cell.empty { background: transparent; border: 0; }
.cal-cell.today { outline: 2px solid var(--green); outline-offset: -2px; }
.cal-cell .cal-day { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.cal-ev { display: block; font-size: 12px; line-height: 1.35; padding: 3px 5px; margin-bottom: 3px; background: var(--green-light); border-radius: 4px; color: var(--text); text-decoration: none; word-break: break-word; }
.cal-ev:hover { background: #d8e9de; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.bar-label { flex: 0 0 210px; font-size: 13px; }
.bar-track { flex: 1; background: #edf0ee; border-radius: 999px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; }
.bar-value { flex: 0 0 110px; text-align: right; font-weight: 700; }

/* Public customer pages (proposal / invoice) */
.pub-wrap { max-width: 780px; margin: 0 auto; padding: 20px 14px 48px; }
.pub-head { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.pub-logo { max-height: 64px; max-width: 240px; display: block; margin-bottom: 8px; }
.pub-item-photo { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.pub-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-photos img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px; }
.att-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; vertical-align: middle; }
.photo-fail-note { color: var(--danger); font-weight: 600; }
.att-thumb-sm { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.pub-company { font-size: 26px; font-weight: 800; color: var(--green-dark); }
.pub-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.pub-card h2 { margin-top: 0; }
.pub-card table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.pub-card td, .pub-card th { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.pub-total { font-size: 18px; font-weight: 800; }
.pre-line { white-space: pre-line; }
.pkg-choice { display: block; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 8px 0; cursor: pointer; font-weight: 400; }
.pkg-choice:hover { border-color: var(--green); }
.pkg-choice input { width: auto; margin-right: 8px; }
.pkg-choice.selected { border-color: var(--green); background: var(--green-light); }
.pkg-choice .pkg-price { font-weight: 800; }
.status-accepted { background: #e7f2ec; border: 1px solid var(--green); color: var(--green-dark); border-radius: 8px; padding: 12px 14px; font-weight: 600; }
.status-note { background: #fdf6e0; border: 1px solid #d9b93a; border-radius: 8px; padding: 12px 14px; }
.pay-big { display: block; text-align: center; font-size: 17px; padding: 14px; margin-top: 10px; }
@media (max-width: 860px) {
  .cal-cell { min-height: 62px; }
  .bar-label { flex-basis: 120px; }
  .bar-value { flex-basis: 84px; }
}

/* ---------- V3: settings card wall, mobile tab bar ---------- */
/* Settings sections (already individual cards) lay out as a card wall on
   wide screens; the wide template editor keeps the full row. */
@media (min-width: 1400px) {
  body[data-view="settings"] #view-container {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; align-items: start;
  }
  body[data-view="settings"] #view-container > .card { margin-bottom: 0; }
  body[data-settings-page="template"] #view-container > .card { grid-column: 1 / -1; }
}

#tabbar { display: none; }
@media (max-width: 860px) {
  #tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: #fff; border-top: 1px solid var(--border);
    padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    transform: translateZ(0);
  }
  .tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: 0; padding: 4px 2px; cursor: pointer;
    color: var(--muted); font-size: 12px; font-weight: 600; font-family: inherit;
  }
  .tab-item svg { width: 25px; height: 25px; }
  .tab-item.active { color: var(--green); }
  #main { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  #toast-root { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  #quick-add { padding: 8px 10px; white-space: nowrap; }
}

/* ---------- Settings sub-navigation ---------- */
/* The sidebar Settings item is a disclosure accordion: its sub-list shows
   only while the settings nav group carries .open, which render() syncs
   from state.settingsNavOpen. The header click toggles it; navigating into
   Settings opens it; it keeps its state across other views. Each sub-item
   opens its own page in the main area. */
.nav-settings-group { display: flex; flex-direction: column; gap: 2px; }
.nav-sub { display: none; flex-direction: column; gap: 2px; }
.nav-settings-group.open .nav-sub { display: flex; }
.nav-sub-item {
  background: none; border: 0; color: var(--text); text-align: left;
  padding: 9px 12px 9px 24px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.nav-sub-item:hover { background: #eef3f0; }
.nav-sub-item.active { background: var(--green); color: #fff; }
.nav-caret { display: inline-block; font-size: 11px; transition: transform .15s ease; }
.nav-settings-group.open .nav-caret { transform: rotate(180deg); }
/* Back link at the top of each settings sub-page (opens the sub-page list),
   and the list itself (the first thing shown for Settings on narrow screens). */
.settings-back-wrap { margin-bottom: 10px; }
.settings-back {
  background: none; border: 0; padding: 0; color: var(--green); font: inherit;
  font-weight: 700; cursor: pointer;
}
.settings-back:hover { color: var(--green-dark); }
#view-container > .settings-back-wrap, #view-container > .settings-menu { grid-column: 1 / -1; }
.settings-menu { display: flex; flex-direction: column; }
.settings-menu-item {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 10px; font: inherit; font-weight: 600; color: var(--text);
  cursor: pointer; text-align: left;
}
.settings-menu-item:hover { border-color: var(--green); }
.settings-menu-item .chev { color: var(--muted); font-size: 18px; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  #sidebar {
    position: fixed; z-index: 60; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .2s ease;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #main-nav { -webkit-overflow-scrolling: touch; }
  #sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  #sidebar-toggle { display: inline-block; }
  .topbar-business { display: none; }
  /* Fix round 30: on the iPhone the top row runs out of room and the
     search box gets squeezed into a narrow empty pill that slides
     under the + New button (Rick, 2026-11-14). The bar now wraps and
     the search takes its own full-width second row; the title, + New
     and the bell keep the first row. Applies on every screen because
     the top bar is shared across the whole app. */
  #topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-search { order: 5; flex: 1 1 100%; max-width: none; }
  .grid-2 { grid-template-columns: 1fr; }
  #view-container {
    padding: 12px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
  }
}

/* ---------- Deal workspace modal, card labels (Tranche A1) ---------- */
/* Page scroll is locked while any modal is open. */
body.modal-open { overflow: hidden; }
.modal.deal-modal { max-width: 1080px; }
.deal-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 6px; }
.deal-layout > * { min-width: 0; }
.deal-panel {
  background: #fafbfa; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.deal-panel h3 { margin-top: 2px; }
.deal-panel p { margin: 6px 0; }
.deal-main { min-width: 0; }
/* Fix round 25 (cont.): the deal rail's date and time fields carry a wide
   natural size in WebKit and pushed past the panel's edge at full width;
   the max-width guard existed only under the small-screen media query.
   Panel fields now stay inside the panel at every width. */
.deal-panel input, .deal-panel select, .deal-panel textarea { max-width: 100%; min-width: 0; }
.deal-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; }
.deal-status-grid .deal-panel { margin-bottom: 0; }
.deal-status-grid .toolbar { margin-bottom: 2px; }
.deal-status-grid select { min-width: 0; }
.deal-tabs {
  display: flex; gap: 2px; flex-wrap: wrap; margin: 14px 0 10px;
  border-bottom: 1px solid var(--border);
}
.deal-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
}
.deal-tab:hover { color: var(--green-dark); }
.deal-tab.active { color: var(--green-dark); border-bottom-color: var(--green); }
.deal-tab-body h3:first-child { margin-top: 2px; }

/* Label chips and the in-place picker (board cards, deal workspace). */
.deal-labels { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.label-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f0f3f1; border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--text);
}
.label-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.label-add {
  background: none; border: 0; padding: 1px 2px; font: inherit; font-size: 12px;
  font-weight: 700; color: var(--green); cursor: pointer;
}
.label-add:hover { color: var(--green-dark); text-decoration: underline; }
.label-pop {
  flex: 1 1 100%; background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; margin-top: 4px; max-height: 230px; overflow-y: auto;
}
.label-pick-row {
  display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0;
  padding: 4px 2px; cursor: pointer; font-size: 13px;
}
.label-pick-row input { width: auto; }

/* Settings, Card Labels page rows. */
.lb-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 0;
  border-bottom: 1px dashed #edf0ee;
}
.lb-row:last-child { border-bottom: 0; }
.lb-row .lb-name { font-weight: 600; }
.lb-row .spacer { flex: 1; }

/* The deal workspace becomes a full-screen sheet on phones. */
@media (max-width: 860px) {
  .modal-backdrop.deal-modal-backdrop { padding: 0; align-items: stretch; overflow: hidden; }
  .modal.deal-modal {
    max-width: none; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  }
  .modal.deal-modal .activity-log { max-height: none; overflow: visible; }
  .modal.deal-modal .label-pop { max-height: none; overflow: visible; }
  .modal.deal-modal .deal-panel input, .modal.deal-modal .deal-panel select, .modal.deal-modal .deal-panel textarea { max-width: 100%; }
  .deal-layout { grid-template-columns: 1fr; }
  .deal-status-grid { grid-template-columns: 1fr; }
  .deal-status-grid .deal-panel { margin-bottom: 10px; }
}

/* ---------- Tier 2 additions ---------- */
.notif-wrap { position: relative; flex: 0 0 auto; }
#notif-bell { position: relative; font-size: 17px; line-height: 1; padding: 6px 8px; }
#notif-badge { position: absolute; top: -4px; right: -6px; }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, 92vw);
  max-height: 70vh; overflow-y: auto; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 60; text-align: left;
}
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.notif-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border); padding: 11px 16px; cursor: pointer;
}
.notif-item:hover { background: #f4f8f5; }
.notif-item.unread { background: #eef6f0; }
.notif-item .notif-type {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--green); margin-bottom: 1px;
}
.notif-item .notif-title { display: block; font-weight: 600; font-size: 14px; }
.notif-item .notif-text { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.notif-item .notif-when { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.table-scroll { overflow-x: auto; }
.muted-row { opacity: .55; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin: 2px 10px 2px 0; }
.check-inline input { width: auto; }
.optout-box { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; margin: 10px 0 4px; }
.optout-box legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.cal-holiday { font-size: 11px; font-weight: 600; color: #9a3412; margin-bottom: 2px; }
.cal-holiday-inline { font-size: 11px; font-weight: 600; color: #9a3412; }
.cal-3day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cal-3col { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-height: 140px; }
.cal-3col.today { outline: 2px solid var(--green); outline-offset: -2px; }
.cal-3head { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
@media (max-width: 700px) { .cal-3day { grid-template-columns: 1fr; } }

/* ---------- Email two-pane inbox ---------- */
.em-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.em-head .spacer, .em-pane-head .spacer { flex: 1; }
.em-routing {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
}
.em-dot { width: 8px; height: 8px; border-radius: 50%; background: #c3ccc7; display: inline-block; }
.em-dot.on { background: #2e9e62; }
.em-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.em-filters input { flex: 1 1 220px; width: auto; }
.em-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.em-side { min-width: 0; }
.crew-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.em-side .card { margin-bottom: 0; }
.rich-wrap { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
.rich-bar { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; border-bottom: 1px solid var(--border); background: #f7f9f8; }
.rich-edit { min-height: 110px; padding: 10px; outline: none; }
.rich-edit:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rich-edit img { max-width: 100%; }
@media (max-width: 1240px) {
  .em-shell { grid-template-columns: 340px minmax(0, 1fr); }
  .em-side { grid-column: 1 / -1; }
}
.em-list {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow-y: auto; max-height: calc(100vh - 250px);
}
.em-item {
  display: flex; gap: 10px; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--border); padding: 12px 14px;
  cursor: pointer; font: inherit; color: var(--text);
}
.em-item:last-child { border-bottom: 0; }
.em-item:hover { background: #f4f7f5; }
.em-item.selected { background: var(--green-light); }
.em-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.em-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.em-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.em-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-item.unread .em-item-name { font-weight: 800; }
.em-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.em-item-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.em-item-subject { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-item-preview { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-pane { min-width: 0; }
.em-pane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.em-pane-head h3 { margin: 0; }
.em-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.em-msg { margin-bottom: 8px; }
.em-composer {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin-top: 12px;
}
.em-pane-empty {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; text-align: center;
}
@media (max-width: 860px) {
  .em-shell { grid-template-columns: 1fr; }
  .em-shell.has-open .em-list { display: none; }
  .em-shell:not(.has-open) .em-pane { display: none; }
  .em-list { max-height: none; }
}

/* ---------- Phone fit pass (2026-11-12): no screen wider than the phone ----------
   A .modal is a flex child of its backdrop; without min-width:0 its
   widest row (the proposal builder's line-item row was the offender)
   stretches the whole popup past the screen. Wide tables now sit in
   .table-scroll wrappers and scroll inside their card instead. */
.modal { min-width: 0; }
.topbar-search { min-width: 0; }
#topbar h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-msg p, .em-rich { overflow-wrap: anywhere; }
.em-rich img { max-width: 100%; height: auto; }
.em-rich table { max-width: 100%; }
.em-pane-head { flex-wrap: wrap; }
.em-pane-head h3 { min-width: 0; overflow-wrap: anywhere; }
.lb-row { flex-wrap: wrap; }
.lb-row input, .lb-row select { min-width: 0; }
.ch-row { flex-wrap: wrap; }
.ch-row label, .ch-row input { min-width: 0; }
@media (max-width: 860px) {
  .pf-flexrow, .pt-flexrow { flex-wrap: wrap; row-gap: 8px; }
  .pf-flexrow > label, .pt-flexrow > label { min-width: 0; }
  .pf-flexrow input, .pt-flexrow input { min-width: 0; }
  .bf-qrow .row-actions { white-space: normal; }
  .board-filters label { flex: 1 1 150px; min-width: 0; }
  .board-filters select, .toolbar select { max-width: 100%; }
}

/* Products & Services parity (2026-11-12) */
.pb-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.pb-photo { max-width: 120px; max-height: 120px; border-radius: 8px; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #eef4ee; border: 1px solid #cfe0cf; padding: 8px; border-radius: 8px; margin: 8px 0; }
.bulk-bar label { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

/* Tranche B: package cards, the shared package editor rows,
   the Add Multiple picker, and the customer package cards. */
.pkg-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.pkge-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.am-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pkg-choice .pkg-desc { margin-top: 4px; font-size: 13px; opacity: 0.75; white-space: pre-line; font-weight: 400; }
.pkg-items { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.pkg-item { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; font-weight: 400; }
.pkg-item.notinc { opacity: 0.55; }

.stage-foot { padding: 9px 12px; font-size: 13px; color: #555; border-top: 1px solid #e3e0d8; background: #faf9f6; }
.chat-msg { border: 1px solid #e3e0d8; border-radius: 8px; padding: 11px 13px; margin: 0 0 8px; background: #fff; }
.chat-out { background: #eef5f0; border-color: #cfe0d4; }
.stat-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.stat-tile { flex: 1 1 140px; background: #fff; border: 1px solid #e3e0d8; border-radius: 8px; padding: 14px 16px; }
.stat-tile .stat-num { font-size: 24px; font-weight: 700; }
.stat-tile .stat-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .04em; }
th.sortable { cursor: pointer; }
.col-locked { background: #f4f2ec; }

/* ---------- Readability pass (2026-11-13) ----------
   The parity build matched DripJobs feature for feature, but the
   screens still rendered dense: small type, tight padding, small
   targets. The base rules above now carry the roomier scale. What
   remains here is the phone-specific piece: form fields at 16px so
   iOS does not zoom on focus and text stays readable, and taller
   touch targets in the phone chrome. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 42px; }
  .btn-small { min-height: 34px; }
  .deal-card { padding: 14px; }
}

/* ---------- Clean workspace pass (2026-11-13) ----------
   The proposal screens rebuilt in the reference layout's
   arrangement: a header card, a meta strip, section cards, a
   totals band, and editor rows laid out as CSS grids. Grid
   tracks cannot paint over each other the way the old flex
   label rows did on phones, which is what squished the
   builder's Qty / Price / Unit fields into one another. */
.sec-card { padding: 18px 20px; }
.li-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.li-grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .55fr) minmax(0, .8fr) minmax(0, .8fr); gap: 10px; }
.li-grid-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.li-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.li-actions .spacer { flex: 1; }
.li-total { font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.pt-grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .55fr) minmax(0, .8fr) minmax(0, 1fr); gap: 10px; }
.pt-grid-sub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 2px; }
.pkge-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.pkge-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sched-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; align-items: end; margin-top: 6px; }
.totals-band { border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin: 12px 0; background: #fff; }
.totals-band .tb-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.totals-band .tb-total { display: flex; justify-content: space-between; gap: 12px; background: var(--green-dark); color: #fff; border-radius: 6px; padding: 10px 14px; font-weight: 800; margin-top: 8px; }
.pd-head { display: flex; gap: 16px; align-items: flex-start; }
.pd-avatar { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.pd-head-main { flex: 1; min-width: 0; }
.pd-cust-name { font-size: 18px; font-weight: 800; }
.pd-title { font-size: 24px; font-weight: 800; text-align: right; }
.pd-head-side { text-align: right; flex: 0 0 auto; }
.pd-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.pd-meta .pm-item { min-width: 110px; }
.pd-meta .pm-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pd-meta .pm-value { font-weight: 600; }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.notes-grid .note-card { margin-bottom: 0; }
.avatar-sm { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); font-weight: 700; font-size: 13px; vertical-align: middle; margin-right: 8px; flex: 0 0 34px; }
.pill-pending { background: #fdf3d7; color: #7a5b00; }
.pill-accepted { background: #e2f2e6; color: #14532d; }
.pill-rejected { background: #fbe3e3; color: #7a1f1f; }
.amount-cell { color: var(--green-dark); font-weight: 700; white-space: nowrap; }
.addr-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-card .toolbar:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .li-grid-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .li-grid-main .li-name-cell { grid-column: 1 / -1; }
  .li-grid-sub { grid-template-columns: minmax(0, 1fr); }
  .pt-grid-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt-grid-main .li-name-cell { grid-column: 1 / -1; }
  .pt-grid-sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sched-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .notes-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-head { flex-wrap: wrap; }
  .pd-head-side { text-align: left; }
  .pd-title { text-align: left; font-size: 21px; }
  .modal-backdrop.sheet-backdrop { padding: 0; align-items: stretch; overflow: hidden; }
  .modal.sheet {
    max-width: none; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  }
}

/* ---------- Twin pass (2026-11-13) ----------
   Builder and proposal pages read as full pages on desktop,
   the way the reference editor is a page and not a popup, and
   the top search becomes the wide pill. */
.topbar-search input { border-radius: 999px; }
@media (min-width: 861px) {
  .modal-backdrop.sheet-backdrop { padding: 24px 12px; }
  .modal.sheet {
    max-width: 1180px; height: calc(100dvh - 48px); max-height: calc(100dvh - 48px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}

/* ---------- Extreme separation (2026-11-13, owner directive) ----------
   The pale theme melted together on the phone: near-white page,
   white cards, hairline borders, washed-out pills. This block
   pushes contrast to the opposite end: a clearly gray-green page,
   white cards with real borders and shadows, tinted section
   header bands, a green proposal header, tinted table headers,
   and solid status pills, so every block reads as its own block. */
:root { --bg: #e2e9e3; --border: #b9c7ba; }
.card {
  border: 1px solid #aebfac; border-radius: 14px;
  box-shadow: 0 3px 12px rgba(18, 38, 26, .13);
}
body:not([data-view="settings"]) #view-container > .card { margin-bottom: 16px; }
.sec-card > h3:first-child, .note-card > h3:first-child {
  margin: -18px -20px 14px !important; padding: 12px 20px;
  background: #e7f1e9; border-bottom: 1px solid #c2d4c4;
  border-radius: 14px 14px 0 0; color: var(--green-dark); font-size: 17px;
}
.modal.sheet { background: #e2e9e3; }
.modal.sheet .sec-card, .modal.sheet .pd-head, .modal.sheet .pd-meta,
.modal.sheet .notes-grid { margin-bottom: 16px; }
.pd-head {
  background: linear-gradient(135deg, #175c3d, #22784f);
  border-radius: 12px; padding: 18px; color: #fff;
}
.pd-head .pd-cust-name, .pd-head .pd-title { color: #fff; }
.pd-head .muted { color: #cfe6d8; }
.pd-avatar { background: #ffffff; color: var(--green-dark); }
.pd-actions-row .btn { background: #ffffff; border-color: #ffffff; color: var(--green-dark); }
.pd-actions-row .btn-primary { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.pd-meta { background: #e7f1e9; border: 1px solid #c2d4c4; border-radius: 12px; padding: 14px 16px; }
.pm-label { color: var(--green-dark); }
table.data th { background: #e7f1e9; color: #224433; border-bottom: 2px solid #b9c7ba; }
table.data tr:nth-child(even) { background: #f4f8f4; }
.stage-col { background: #d9e3d9; border: 1px solid #aebfac; border-radius: 14px; }
.stage-head { border-bottom: 3px solid rgba(0, 0, 0, .16); }
.deal-card { border: 1px solid #9db29d; box-shadow: 0 2px 8px rgba(18, 38, 26, .12); }
.deal-value { color: var(--green-dark); font-weight: 800; }
.pill { font-weight: 700; }
.pill-pending { background: #f5b921; color: #4a3500; }
.pill-accepted { background: #1e9e62; color: #ffffff; }
.pill-rejected { background: #cf3f3f; color: #ffffff; }
.pill-status { background: #cfdccf; color: #243528; }
.filter-card { background: #e7f1e9; border-color: #aebfac; }
.stat { border-top: 4px solid var(--green); }
.btn-ghost { border-color: #93ab94; background: #ffffff; }
.btn-primary { box-shadow: 0 2px 6px rgba(20, 64, 44, .35); }
input, select, textarea { border-color: #93ab94; }
#topbar { border-bottom: 2px solid #c2d4c4; box-shadow: 0 2px 10px rgba(18, 38, 26, .08); }
#sidebar { border-right: 2px solid #c2d4c4; }
.nav-group { border-top: 1px solid #dfe7df; margin-top: 8px; padding-top: 12px; }

/* ---------- Add Item dialog and items table (2026-11-13) ---------- */
.linklike { background: none; border: none; padding: 0; color: var(--green); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.li-table td, .li-table th { vertical-align: middle; }
.li-drag { color: #9db29d; width: 28px; }
.li-name { color: var(--green-dark); font-size: 15px; }
.li-opt-label { margin: 16px 0 6px; font-size: 12px; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.li-row-actions { white-space: nowrap; text-align: right; }
.ie-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(13, 24, 18, .55); overflow-y: auto; padding: 16px 10px 28px; }
.ie-panel { max-width: 660px; margin: 0 auto; background: #eef2ee; border-radius: 14px; padding: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.ie-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; margin: 2px 2px 12px; }
.ie-sec { background: #fff; border: 1px solid #aebfac; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ie-sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ie-sec-head .spacer { flex: 1; }
.ie-sec-title { font-weight: 800; color: var(--green-dark); font-size: 16px; }
.ie-price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ie-total-row { text-align: right; font-size: 17px; margin-top: 10px; }
.ie-total-row strong { color: var(--green-dark); }
.ie-foot { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 860px) { .ie-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Toggle switches (the tgl helper): a real sliding switch everywhere a
   toggle renders, DripJobs-style, instead of a bare checkbox. */
.tgl { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; position: relative; }
.tgl input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgl .tgl-track { flex: none; width: 38px; height: 22px; border-radius: 999px; background: #a9bcab; position: relative; transition: background .15s ease; }
.tgl .tgl-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tgl input:checked + .tgl-track { background: #1f7a4d; }
.tgl input:checked + .tgl-track::after { transform: translateX(16px); }
.tgl input:focus-visible + .tgl-track { outline: 2px solid #175c3d; outline-offset: 2px; }

/* Visual pass (2026-11-13): DripJobs-shaped clarity in SecondCoat's own
   green. Pastel stage headers with a white count pill, card value as a
   bottom row, pastel pill tabs everywhere .deal-tabs renders, greener
   money columns, calendar weekend tint and a soft today, gridded
   proposal meta, and the two-pane Drips layout with a step timeline. */
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #22312a; }
.stage-count { background: #ffffff; color: #22312a; border-radius: 999px; padding: 1px 9px; font-weight: 700; font-size: 12px; flex: none; }
.deal-value-row { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #dde3e0; padding-top: 6px; margin-top: 6px; }
.deal-value-row span { color: #6b7a6e; font-size: 12px; }
.deal-value-row strong { color: #175c3d; font-size: 15px; }
.deal-card-top .avatar-sm { flex: none; }
.deal-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.deal-tabs .deal-tab { border-radius: 999px; background: #e9f0ea; border: 1px solid #cfdccf; padding: 6px 14px; color: #33463a; cursor: pointer; font: inherit; }
.deal-tabs .deal-tab.active { background: #ffffff; border-color: #175c3d; color: #175c3d; font-weight: 700; }
.bal-cell { color: #1e7a3c; font-weight: 700; }
.num-strong { font-weight: 700; color: #175c3d; }
.stage-chip { display: inline-block; border-radius: 8px; padding: 2px 8px; color: #22312a; font-size: 12px; font-weight: 600; }
.cal-cell.weekend { background: #f0f4f0; }
.cal-cell.today { background: #fff6da; }
.pd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px 18px; }
.board-group-tabs { margin: 4px 0 2px; }
.seq-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .seq-layout { grid-template-columns: 1fr; } }
.seq-stage { background: #ffffff; border: 1px solid #b9c7ba; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.seq-stage-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 12px 14px; cursor: pointer; font: inherit; text-align: left; }
.seq-stage-name { font-weight: 700; color: #22312a; flex: 1; }
.seq-chev { color: #6b7a6e; flex: none; }
.seq-stage-body { border-top: 1px solid #e3eae3; padding: 8px; }
.seq-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: #f4f7f4; border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer; font: inherit; text-align: left; color: #22312a; }
.seq-row.sel { background: #e7f1e9; border-color: #175c3d; font-weight: 600; }
.seq-timeline { position: relative; margin-left: 14px; padding-left: 26px; }
.seq-timeline::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: #cfdccf; }
.seq-step { position: relative; margin-bottom: 12px; }
.seq-step-dot { position: absolute; left: -26px; top: 12px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: #175c3d; color: #ffffff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1; }
.seq-step-card { background: #ffffff; border: 1px solid #b9c7ba; border-radius: 12px; padding: 12px 14px; }
.seq-step-when { color: #6b7a6e; font-size: 13px; }
.seq-step-when strong { color: #22312a; }
.seq-step-name { font-weight: 700; color: #22312a; margin: 3px 0; }
.seq-add-btn { position: relative; margin-left: -26px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid #175c3d; background: #ffffff; color: #175c3d; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; }

/* Add Item calculator layout (2026-11-13): measurement fields get their
   own grid and the Use buttons their own row, so nothing squeezes or
   wraps mid-word the way the shared auto-fit grid did. */
.calc-fields { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 6px; }
@media (max-width: 700px) { .calc-fields { grid-template-columns: repeat(2, 1fr); } }
.calc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.calc-actions .btn { white-space: nowrap; }

/* Add Item dialog, DripJobs model (2026-11-13): floating labels on the
   dialog fields, a tabbed quantity calculator, and $ / % / unit carried
   inside the price fields. */
.fl-field { position: relative; margin-top: 12px; }
.fl-field > input, .fl-field > select, .fl-field .adorn { margin-top: 0; }
.fl-label { position: absolute; top: -7px; left: 10px; background: #ffffff; padding: 0 5px; font-size: 11px; color: #6b7a6e; z-index: 1; pointer-events: none; }
.adorn { display: flex; align-items: center; border: 1px solid #b9c7ba; border-radius: 10px; background: #ffffff; overflow: hidden; }
.adorn input { border: none !important; box-shadow: none !important; flex: 1; min-width: 0; background: transparent; }
.adorn input:disabled { color: #55645a; }
.adorn-pre, .adorn-suf { color: #6b7a6e; padding: 0 4px 0 10px; flex: none; }
.adorn-suf { padding: 0 10px 0 4px; }
.adorn-unit { flex: none !important; width: 58px; text-align: right; color: #6b7a6e; padding-right: 10px; }
.ie-price-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.calc-tabs { display: flex; gap: 0; border: 1px solid #cfdccf; border-radius: 10px; overflow: hidden; margin-top: 8px; }
.calc-tabs button { flex: 1; background: #eef3ee; border: none; padding: 8px 4px; font: inherit; font-weight: 600; color: #55645a; cursor: pointer; }
.calc-tabs button.active { background: #ffffff; color: #175c3d; box-shadow: inset 0 -2px 0 #175c3d; }
.calc-fields { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.rich-bar select[data-rich-size] { width: auto; padding: 4px 6px; }

/* Packages + page forms (2026-11-13): package card header with the price
   at the right, and floating labels on full-page forms. */
.pkg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pkg-price { margin-left: auto; font-size: 17px; font-weight: 700; color: #175c3d; }
.pkg-card .li-table { margin-top: 8px; }

.confirm-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(13, 24, 18, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.confirm-card { background: #ffffff; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.28); max-width: 430px; width: 100%; padding: 20px; }
.confirm-msg { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: #22312a; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.preview-overlay { position: fixed; inset: 0; z-index: 390; background: rgba(13, 24, 18, .55); display: flex; align-items: flex-start; justify-content: center; padding: 18px; overflow: auto; }
.preview-card { background: #ffffff; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.28); max-width: 980px; width: 100%; padding: 16px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }