@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Inter+Tight:wght@600;700;800&display=swap');

:root {
  /* Neutral surfaces + text -- true neutral, no green undertone */
  --ink: #15181b;
  --muted: #636d77;
  --line: #e4e7eb;
  --line-strong: #cdd3da;
  --panel: #ffffff;
  --canvas: #f5f6f8;

  /* Brand: near-black charcoal for solid fills, true logo red (#ED1C24) reserved
     for accents -- keeps primary actions from reading as alarm/danger red. */
  --brand-950: #0d0b0c;
  --brand-900: #1a1517;
  --brand-800: #251d1f;
  --brand-700: #372c2e;
  --brand-600: #ed1c24;
  --brand-100: #fce3e1;
  --brand-50: #fdf1f0;

  --blue: #1d5fa8;
  --blue-soft: #eaf2fb;
  --orange: #a15a12;
  --orange-soft: #fdf1e4;
  --red: #d6272a;
  --red-soft: #fdecec;
  --yellow: #8a6708;
  --yellow-soft: #fbf3d6;
  --purple: #6647a0;
  --purple-soft: #f1edfb;
  --success: #16794f;
  --success-soft: #e6f5ec;

  --shadow-sm: 0 1px 2px rgba(15, 17, 20, 0.05), 0 3px 10px rgba(15, 17, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 17, 20, 0.09);
  --shadow-lg: 0 22px 55px rgba(9, 10, 12, 0.26);
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 13px;
  --sidebar-width: 264px;
  --topbar-height: 74px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, .page-heading h1, .page-intro h2 { font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: var(--brand-600); }
.hidden { display: none !important; }
.noscript { padding: 20px; background: var(--red-soft); color: var(--red); text-align: center; font-weight: 700; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  z-index: 40;
  color: #eef0f2;
  background: linear-gradient(180deg, var(--brand-950), var(--brand-900) 45%, #140f11);
  border-right: 1px solid rgba(255,255,255,.06);
}
.brand { height: var(--topbar-height); display: flex; align-items: center; gap: 12px; padding: 13px 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark {
  width: 40px; height: 40px; padding: 6px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
  background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.04);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-family: "Inter Tight", "Inter", sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-copy span { margin-top: 4px; color: #a9adb2; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-close { display: none !important; margin-left: auto; color: #d8dade; }
.nav-list { flex: 1; overflow-y: auto; padding: 16px 12px; }
.nav-item { width: 100%; min-height: 43px; display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 8px; margin: 2px 0; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: #b8bcc2; text-align: left; cursor: pointer; transition: .16s ease; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { color: #fff; background: rgba(237, 28, 36, .16); box-shadow: inset 3px 0 var(--brand-600); }
.nav-icon { width: 25px; height: 25px; display: grid; place-items: center; font-size: 17px; }
.nav-count { min-width: 23px; padding: 1px 6px; border-radius: 20px; background: rgba(255,255,255,.10); color: #d7d9dc; font-size: 11px; text-align: center; }
.nav-label { margin: 20px 11px 7px; color: #797d84; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-footer { padding: 15px 18px 17px; border-top: 1px solid rgba(255,255,255,.08); }
.storage-status { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47,191,113,.16); }
.storage-status div { display: flex; min-width: 0; flex-direction: column; }
.storage-status strong { font-size: 12px; }
.storage-status span:last-child { margin-top: 2px; color: #96999e; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-button { padding: 8px 0 0; border: 0; background: transparent; color: #a3a6ab; font-size: 11px; cursor: pointer; }
.text-button:hover { color: #fff; }
.sidebar-scrim { display: none; }

.main-area { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-height); display: grid; grid-template-columns: minmax(220px,.7fr) minmax(340px,1.4fr) auto; align-items: center; gap: 22px; padding: 0 28px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-button { display: none !important; }
.page-heading { min-width: 0; }
.page-heading span { display: block; margin-bottom: 1px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.page-heading h1 { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.command-wrap { position: relative; display: flex; align-items: center; min-width: 0; height: 43px; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; box-shadow: 0 1px 1px rgba(15,17,20,.03); }
.command-wrap:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(237,28,36,.12); }
.command-search-icon { margin-left: 13px; color: #8891a0; font-size: 20px; line-height: 1; transform: rotate(-12deg); }
.command-wrap input { min-width: 0; flex: 1; height: 100%; padding: 0 8px 0 9px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.command-wrap input::placeholder { color: #90979f; }
.command-wrap kbd { margin: 0 6px 0 4px; padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; color: #838a93; background: #f7f8f9; font-size: 10px; font-family: inherit; }
.mic-button { height: 31px; display: inline-flex; align-items: center; gap: 6px; margin-right: 5px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--brand-900); color: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }
.mic-button:hover { background: var(--brand-700); }
.mic-button.listening { background: var(--red); animation: pulse 1.15s infinite; }
.mic-icon { width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; color: #fff; font-size: 0; }
.command-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; max-height: 320px; overflow-y: auto; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg); }
.suggestion-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.suggestion-item:hover { background: var(--brand-50); }
.suggestion-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--brand-100); color: var(--brand-800); }
.suggestion-item div { min-width: 0; }
.suggestion-item strong, .suggestion-item span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-item span { color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.avatar-button { width: 37px; height: 37px; border: 0; border-radius: 11px; background: var(--brand-100); color: var(--brand-900); font-size: 10px; font-weight: 900; cursor: pointer; }
.mobile-command-row { display: none; }
.page-container { max-width: 1640px; margin: 0 auto; padding: 26px 28px 50px; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(237,28,36,.24); outline-offset: 2px; }
.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; }
.icon-button:hover { background: #eef0f2; color: var(--ink); }
.primary-button, .secondary-button, .ghost-button, .danger-button, .success-button {
  min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-weight: 700; font-size: 12px; text-decoration: none; transition: .15s ease;
}
.primary-button { background: var(--brand-800); color: #fff; }
.primary-button:hover { background: var(--brand-700); }
.secondary-button { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.secondary-button:hover { background: var(--canvas); border-color: #b7bec6; }
.ghost-button { background: transparent; color: var(--muted); border-color: transparent; }
.ghost-button:hover { background: #eef0f2; color: var(--ink); }
.danger-button { color: var(--red); background: var(--red-soft); }
.danger-button:hover { background: #fbdcdb; }
.success-button { color: var(--success); background: var(--success-soft); }
.success-button:hover { background: #d8eee1; }
.compact { min-height: 35px; padding: 6px 11px; }
.small-button { min-height: 31px; padding: 5px 10px; font-size: 11px; }
.full-button { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; }
.button-row.end { justify-content: flex-end; }

.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-intro h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.035em; }
.page-intro p { max-width: 700px; margin: 0; color: var(--muted); }
.page-intro-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.date-chip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 6px 9px; border-radius: 8px; background: var(--brand-100); color: var(--brand-900); font-size: 11px; font-weight: 800; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.metric-card { position: relative; min-height: 116px; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }
.metric-card::after { content: ""; position: absolute; right: -25px; bottom: -42px; width: 100px; height: 100px; border-radius: 50%; background: var(--metric-tint, var(--brand-50)); }
.metric-label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.metric-symbol { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--metric-tint, var(--brand-50)); color: var(--metric-color, var(--brand-700)); font-size: 14px; }
.metric-value { position: relative; z-index: 1; margin-top: 10px; font-size: 25px; font-weight: 900; letter-spacing: -.045em; }
.metric-note { position: relative; z-index: 1; margin-top: 2px; color: var(--muted); font-size: 10px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .9fr); gap: 16px; }
.dashboard-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.panel-header h3 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.panel-body { padding: 16px 17px; }
.panel-body.flush { padding: 0; }
.panel-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: #fbfbfc; }
.panel-actions { display: flex; align-items: center; gap: 7px; }

.priority-list { display: flex; flex-direction: column; }
.priority-item { display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 17px; border-bottom: 1px solid var(--line); cursor: pointer; }
.priority-item:last-child { border-bottom: 0; }
.priority-item:hover { background: #fafafb; }
.priority-score { width: 41px; height: 41px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--brand-700); background: var(--brand-50); font-weight: 900; }
.priority-score.critical { color: var(--red); background: var(--red-soft); }
.priority-score.high { color: var(--orange); background: var(--orange-soft); }
.priority-score.medium { color: var(--yellow); background: var(--yellow-soft); }
.priority-main { min-width: 0; }
.priority-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.priority-main strong { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priority-meta { margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priority-reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.reason-chip { padding: 2px 6px; border-radius: 5px; background: #eef0f2; color: #565e67; font-size: 9px; }
.priority-action { color: var(--muted); font-size: 18px; }

.badge, .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 20px; background: #eef0f2; color: #4c545d; font-size: 9px; font-weight: 850; letter-spacing: .02em; white-space: nowrap; }
.badge.green, .status-badge.approved, .status-badge.complete, .status-badge.active { background: var(--success-soft); color: var(--success); }
.badge.red, .status-badge.blocked, .status-badge.lost, .status-badge.cancelled { background: var(--red-soft); color: var(--red); }
.badge.orange, .status-badge.waiting { background: var(--orange-soft); color: var(--orange); }
.badge.blue, .status-badge.quote, .status-badge.in-progress { background: var(--blue-soft); color: var(--blue); }
.badge.purple { background: var(--purple-soft); color: var(--purple); }
.badge.yellow { background: var(--yellow-soft); color: var(--yellow); }

.quick-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick-app { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; text-align: left; }
.quick-app:hover { border-color: #c7ccd2; background: var(--brand-50); }
.app-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--brand-100); color: var(--brand-700); font-size: 17px; }
.quick-app div { min-width: 0; }
.quick-app strong, .quick-app span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-app strong { font-size: 11px; }
.quick-app span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-symbol { width: 29px; height: 29px; display: grid; place-items: center; border-radius: var(--radius-sm); background: #eef0f2; color: var(--brand-700); }
.activity-item strong { display: block; font-size: 11px; }
.activity-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.search-field { position: relative; min-width: 210px; flex: 1; }
.search-field input { width: 100%; height: 37px; padding: 0 11px 0 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; outline: 0; }
.search-field::before { content: "⌕"; position: absolute; left: 11px; top: 6px; color: var(--muted); font-size: 18px; }
.filter-select { height: 37px; min-width: 125px; padding: 0 30px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.segmented button { min-height: 29px; padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,17,20,.1); }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.data-table th { padding: 10px 13px; border-bottom: 1px solid var(--line); color: var(--muted); background: #fbfbfc; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 12px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: #fafafb; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.cell-main { min-width: 0; }
.cell-main strong { display: block; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-main span { display: block; max-width: 260px; margin-top: 2px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-pill { min-width: 37px; display: inline-grid; place-items: center; padding: 4px 7px; border-radius: 7px; background: var(--brand-50); color: var(--brand-700); font-weight: 900; }
.row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.row-actions button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.row-actions button:hover { background: #eceef0; color: var(--ink); }
.empty-table { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty-table strong { display: block; margin-bottom: 5px; color: var(--ink); }

.form-section { margin-bottom: 20px; }
.form-section:last-child { margin-bottom: 0; }
.form-section-title { margin: 0 0 10px; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.form-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; color: #454e56; font-size: 10px; font-weight: 850; letter-spacing: .025em; }
.field label small { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: #fff; outline: 0; }
.field input, .field select { height: 39px; padding: 0 10px; }
.field textarea { min-height: 86px; padding: 9px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(237,28,36,.10); }
.field-help { margin-top: 4px; color: var(--muted); font-size: 9px; }
.check-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.check-field { display: inline-flex; align-items: center; gap: 7px; color: #454e56; font-size: 11px; font-weight: 700; cursor: pointer; }
.check-field input { width: 17px; height: 17px; accent-color: var(--brand-600); }
.inline-field { display: flex; align-items: center; gap: 8px; }
.inline-field input { flex: 1; }
.required { color: var(--red); }
.validation-error { margin-top: 4px; color: var(--red); font-size: 9px; }
.info-box, .warning-box, .success-box { padding: 11px 13px; border-radius: var(--radius-sm); font-size: 11px; }
.info-box { color: #2c557c; background: var(--blue-soft); border: 1px solid #c9daf1; }
.warning-box { color: #76560b; background: var(--yellow-soft); border: 1px solid #efdfa4; }
.success-box { color: var(--success); background: var(--success-soft); border: 1px solid #bfe0cd; }

.tool-layout { display: grid; grid-template-columns: minmax(380px,.92fr) minmax(420px,1.25fr); gap: 16px; align-items: start; }
.tool-form-panel { position: sticky; top: calc(var(--topbar-height) + 18px); }
.tool-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 13px; }
.summary-tile { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.summary-tile span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.summary-tile strong { display: block; margin-top: 5px; font-size: 18px; letter-spacing: -.03em; }
.summary-tile.featured { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.summary-tile.featured span { color: #b5d1c4; }
.product-stack { display: flex; flex-direction: column; gap: 10px; }
.product-card { position: relative; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfb; }
.product-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.product-card-header strong { font-size: 11px; }
.product-card-remove { width: 27px; height: 27px; border: 0; border-radius: 7px; color: var(--red); background: transparent; cursor: pointer; }
.product-card-remove:hover { background: var(--red-soft); }
.product-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.preview-chip { padding: 7px 8px; border-radius: 7px; background: #edf2ef; }
.preview-chip span, .preview-chip strong { display: block; }
.preview-chip span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.preview-chip strong { margin-top: 2px; font-size: 10px; }
.result-table { width: 100%; border-collapse: collapse; min-width: 850px; font-size: 11px; }
.result-table th { padding: 9px; border: 1px solid var(--line); background: #edf3f0; font-size: 8px; text-transform: uppercase; }
.result-table td { padding: 9px; border: 1px solid var(--line); text-align: right; }
.result-table td:first-child, .result-table th:first-child { text-align: left; }
.result-table tfoot td { background: var(--brand-50); font-weight: 900; }
.calculator-empty { min-height: 210px; display: grid; place-items: center; padding: 30px; text-align: center; color: var(--muted); }
.calculator-empty strong { display: block; margin-bottom: 4px; color: var(--ink); }

.rate-result-hero { display: grid; grid-template-columns: 1.2fr repeat(2,.85fr); gap: 10px; margin-bottom: 14px; }
.rate-hero-card { padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafcfb; }
.rate-hero-card.primary { color: #fff; background: linear-gradient(135deg, var(--brand-950), var(--brand-700)); border-color: var(--brand-900); }
.rate-hero-card span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.rate-hero-card.primary span { color: #afd1c1; }
.rate-hero-card strong { display: block; margin-top: 6px; font-size: 25px; letter-spacing: -.04em; }
.confidence-meter { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 10px; background: #dce5e0; }
.confidence-meter i { display: block; height: 100%; border-radius: inherit; background: var(--brand-600); }
.comparable-list { display: flex; flex-direction: column; gap: 8px; }
.comparable-row { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(4,minmax(62px,.7fr)); align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfb; font-size: 10px; }
.comparable-row strong, .comparable-row span { display: block; }
.comparable-row span { color: var(--muted); font-size: 9px; }

.app-library-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.app-card { position: relative; min-height: 154px; display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.app-card:hover { border-color: #accabd; }
.app-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.app-card .app-icon { width: 42px; height: 42px; font-size: 20px; }
.app-card-menu { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.app-card h3 { margin: 12px 0 3px; font-size: 13px; }
.app-card p { flex: 1; margin: 0; color: var(--muted); font-size: 10px; }
.app-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 12px; }
.app-card-footer span { color: var(--muted); font-size: 9px; }

.chart-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.bar-chart { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 92px minmax(0,1fr) 36px; align-items: center; gap: 9px; font-size: 10px; }
.bar-track { height: 8px; overflow: hidden; border-radius: 10px; background: #e6ece9; }
.bar-fill { height: 100%; border-radius: inherit; background: var(--brand-600); }
.donut-wrap { display: grid; place-items: center; min-height: 225px; }
.donut { width: 155px; height: 155px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--brand-600) 0 var(--donut-a), #e3a144 var(--donut-a) var(--donut-b), #4884c6 var(--donut-b) var(--donut-c), #c8d3ce var(--donut-c) 100%); }
.donut::before { content: ""; width: 92px; height: 92px; border-radius: 50%; background: #fff; }
.donut-label { position: absolute; text-align: center; }
.donut-label strong, .donut-label span { display: block; }
.donut-label strong { font-size: 24px; }
.donut-label span { color: var(--muted); font-size: 9px; }

.settings-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.65fr); gap: 16px; align-items: start; }
.settings-stack { display: flex; flex-direction: column; gap: 16px; }
.data-action-list { display: flex; flex-direction: column; gap: 8px; }
.data-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.data-action strong, .data-action span { display: block; }
.data-action span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.storage-meter { height: 8px; margin: 8px 0; overflow: hidden; border-radius: 9px; background: #e4ebe7; }
.storage-meter i { display: block; height: 100%; background: var(--brand-600); }

.empty-state { padding: 42px 22px; text-align: center; }
.empty-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 12px; background: var(--brand-100); color: var(--brand-800); font-size: 23px; }
.empty-state h3 { margin: 0 0 5px; font-size: 14px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(10,10,12,.58); backdrop-filter: blur(3px); }
.modal { width: min(690px, 100%); max-height: min(90vh, 850px); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg); animation: modalIn .18s ease-out; }
.modal.wide { width: min(940px,100%); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-eyebrow, .drawer-heading-copy > span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.modal-header h2, .drawer-header h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.modal-body { overflow-y: auto; padding: 18px; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); background: #fafcfb; }

.drawer { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(590px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -16px 0 45px rgba(12,13,15,.18); animation: drawerIn .2s ease-out; }
.drawer-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,12,.38); }
.detail-hero { padding: 16px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--brand-950), var(--brand-700)); }
.detail-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.detail-hero h3 { margin: 0 0 3px; font-size: 20px; }
.detail-hero p { margin: 0; color: #b9d4c7; font-size: 10px; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.detail-stat { padding: 9px; border-radius: 8px; background: rgba(255,255,255,.10); }
.detail-stat span, .detail-stat strong { display: block; }
.detail-stat span { color: #b9d4c7; font-size: 8px; text-transform: uppercase; }
.detail-stat strong { margin-top: 3px; font-size: 12px; }
.detail-section { margin-top: 18px; }
.detail-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.detail-section-header h3 { margin: 0; font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.detail-field { padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.detail-field span, .detail-field strong { display: block; }
.detail-field span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.detail-field strong { margin-top: 3px; font-size: 11px; overflow-wrap: anywhere; }
.timeline { position: relative; padding-left: 19px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.timeline-item { position: relative; padding: 0 0 13px; }
.timeline-item::before { content: ""; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.timeline-item strong { display: block; font-size: 10px; }
.timeline-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.timeline-item p { margin: 4px 0 0; color: #48564f; font-size: 10px; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 120; width: min(350px, calc(100vw - 36px)); display: flex; flex-direction: column; gap: 8px; }
.toast { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 12px 35px rgba(15,17,20,.18); animation: toastIn .2s ease-out; }
.toast-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-100); color: var(--brand-800); }
.toast.error .toast-icon { background: var(--red-soft); color: var(--red); }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 11px; }
.toast span { margin-top: 1px; color: var(--muted); font-size: 9px; }
.toast button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.command-result { position: fixed; left: 50%; bottom: 24px; z-index: 115; width: min(560px, calc(100vw - 34px)); padding: 15px 44px 15px 17px; border-radius: 13px; color: #fff; background: var(--brand-950); box-shadow: var(--shadow-lg); transform: translateX(-50%); }
.command-result-label { display: block; color: #91b8a6; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.command-result strong { display: block; margin-top: 2px; font-size: 13px; }
.command-result p { margin: 3px 0 0; color: #d3e6dd; font-size: 10px; }
.command-result-close { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border: 0; border-radius: 7px; color: #b9d4c7; background: transparent; cursor: pointer; }
.command-result-close:hover { background: rgba(255,255,255,.1); }

@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,39,42,.30); } 50% { box-shadow: 0 0 0 7px rgba(214,39,42,0); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes drawerIn { from { transform: translateX(30px); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1220px) {
  .metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topbar { grid-template-columns: minmax(190px,.7fr) minmax(300px,1.2fr) auto; padding: 0 20px; gap: 15px; }
  .tool-layout { grid-template-columns: minmax(340px,.9fr) minmax(380px,1.1fr); }
}
@media (max-width: 980px) {
  .sidebar { transform: translateX(-101%); transition: transform .2s ease; }
  .sidebar.open { transform: none; }
  .sidebar-close { display: inline-grid !important; }
  .sidebar-scrim.open { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(10,10,12,.45); }
  .main-area { margin-left: 0; }
  .menu-button { display: inline-grid !important; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar > .command-wrap { display: none; }
  .mobile-command-row { display: block; padding: 10px 18px 0; }
  .command-wrap.mobile { max-width: none; }
  .command-wrap.mobile .mic-button { margin-left: 3px; }
  .mic-button.icon-only { width: 34px; padding: 0; }
  .page-container { padding: 20px 18px 40px; }
  .dashboard-grid, .settings-grid, .chart-grid { grid-template-columns: 1fr; }
  .tool-layout { grid-template-columns: 1fr; }
  .tool-form-panel { position: static; }
  .app-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  :root { --topbar-height: 64px; }
  .topbar { height: var(--topbar-height); padding: 0 13px; }
  .page-heading span { display: none; }
  .page-heading h1 { font-size: 18px; }
  .topbar-actions .secondary-button { display: none; }
  .page-container { padding: 16px 12px 34px; }
  .mobile-command-row { padding: 8px 12px 0; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .page-intro h2 { font-size: 21px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .metric-card { min-height: 104px; padding: 14px; }
  .metric-value { font-size: 22px; }
  .form-grid, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .panel-header { align-items: flex-start; }
  .quick-app-grid { grid-template-columns: 1fr; }
  .priority-item { grid-template-columns: 40px minmax(0,1fr); padding: 12px; }
  .priority-action { display: none; }
  .app-library-grid { grid-template-columns: 1fr; }
  .tool-summary, .rate-result-hero { grid-template-columns: 1fr; }
  .product-preview { grid-template-columns: 1fr 1fr; }
  .comparable-row { grid-template-columns: 1fr 1fr; }
  .comparable-row > div:first-child { grid-column: 1 / -1; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal, .modal.wide { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
  .detail-grid, .detail-stat-grid { grid-template-columns: 1fr 1fr; }
  .filter-row { align-items: stretch; }
  .search-field, .filter-select { width: 100%; }
  .search-field { min-width: 0; }
  .panel-toolbar { align-items: stretch; }
  .command-result { bottom: 12px; }
}
@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 94px; }
  .product-preview, .detail-grid, .detail-stat-grid { grid-template-columns: 1fr; }
}


/* Integrated uploaded applications */
.integrated-page-intro { margin-bottom: 14px; }
.integrated-context-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.integrated-context-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px;
  border: 1px solid #b6d8c7; border-radius: 999px; background: var(--brand-50);
  color: var(--brand-900); font-size: 11px; font-weight: 700;
}
.integrated-context-chip.neutral { border-color: var(--line); background: #fff; color: var(--muted); }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.integrated-tool-shell {
  overflow: hidden; min-height: 760px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-sm);
}
.integrated-tool-status {
  display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: #f9fbfa; color: var(--muted);
  font-size: 11px; font-weight: 650;
}
.integrated-tool-frame { display: block; width: 100%; min-height: 760px; border: 0; background: #fff; }
.integrated-server-notice { margin-top: 10px; }

@media (max-width: 980px) {
  .integrated-tool-shell, .integrated-tool-frame { min-height: 700px; }
}
@media (max-width: 700px) {
  .integrated-page-intro .page-intro-actions { width: 100%; }
  .integrated-page-intro .page-intro-actions > * { flex: 1 1 145px; }
  .integrated-tool-shell { margin-inline: -4px; border-radius: 12px; }
  .integrated-tool-shell, .integrated-tool-frame { min-height: 820px; }
  .integrated-tool-status { align-items: flex-start; }
}

@media print {
  .sidebar, .topbar, .mobile-command-row, .page-intro, .panel-header .panel-actions, .toast-stack, .command-result { display: none !important; }
  .main-area { margin: 0; }
  .page-container { max-width: none; padding: 0; }
  body { background: #fff; }
  .panel { border: 0; box-shadow: none; }
}

/* Version 4: product catalog, sales metrics, and quote progress */
.quote-stars {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 9px;
  border: 1px solid #e2c984; border-radius: 999px; background: #fffaf0; color: #9a6500;
  font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.quote-stars:hover { border-color: #c69b2a; background: #fff5d9; transform: translateY(-1px); }
.quote-stars > span { color: #d59a08; font-size: 15px; letter-spacing: .03em; line-height: 1; white-space: nowrap; }
.quote-stars small { color: #72520b; font-size: 9px; font-weight: 850; white-space: nowrap; }
.quote-stars.compact { min-height: 25px; padding: 3px 7px; gap: 5px; }
.quote-stars.compact > span { font-size: 12px; }
.quote-stars.compact small { font-size: 8px; }
.quote-stars-display { color: #d59a08; font-size: 20px; letter-spacing: .05em; line-height: 1; white-space: nowrap; }

.quote-progress-preview {
  padding: 14px; border: 1px solid #ead8a6; border-radius: 12px; background: linear-gradient(135deg,#fffdf8,#fff8e8);
}
.quote-progress-preview > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.quote-progress-preview > div:first-child strong { color: var(--ink); font-size: 12px; }
.quote-progress-preview p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.threshold-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.threshold-strip.threshold-legend { margin-top: 0; }
.threshold-chip {
  display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--muted); font-size: 9px; font-weight: 750;
}
.threshold-chip.reached { border-color: #e0c573; background: #fff7dc; color: #805b08; }
.threshold-editor { display: grid; gap: 10px; margin-top: 14px; }
.threshold-editor-row {
  display: grid; grid-template-columns: 110px 120px minmax(200px,1fr); align-items: end; gap: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb;
}
.threshold-editor-row .quote-stars-display { align-self: center; font-size: 17px; }
.input-suffix { display: flex; align-items: stretch; }
.input-suffix input { min-width: 0; border-radius: 8px 0 0 8px !important; }
.input-suffix span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: #f4f6f5;
  color: var(--muted); font-size: 10px; font-weight: 800;
}

.sales-metrics-panel { overflow: visible; }
.sales-filter-grid {
  display: grid; grid-template-columns: minmax(180px,1.5fr) repeat(4,minmax(130px,1fr)) minmax(125px,.8fr) minmax(125px,.8fr) auto;
  align-items: end; gap: 10px;
}
.sales-filter-search { min-width: 0; }
.sales-filter-reset { align-self: end; }
.sales-metric-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sales-bar-row { grid-template-columns: minmax(90px,130px) minmax(100px,1fr) 46px minmax(115px,auto); }
.sales-bar-row small { color: var(--muted); font-size: 8px; white-space: nowrap; }

.integrated-product-tracking {
  display: grid; grid-template-columns: minmax(230px,1fr) minmax(160px,.55fr); gap: 10px 14px;
  padding: 14px; border: 1px solid #b9dcca; border-radius: 12px; background: var(--brand-50);
}
.integrated-product-tracking > .check-field { align-self: end; }
.integrated-product-preview { grid-column: 1 / -1; display: grid; gap: 6px; }
.integrated-product-preview span {
  display: block; padding: 8px 10px; border: 1px solid rgba(26,91,62,.14); border-radius: 8px;
  background: rgba(255,255,255,.75); color: var(--muted); font-size: 9px;
}
.integrated-product-preview strong { color: var(--ink); }
.integrated-product-tracking > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; }

@media (max-width: 1320px) {
  .sales-filter-grid { grid-template-columns: repeat(4,minmax(135px,1fr)); }
  .sales-filter-search { grid-column: span 2; }
  .sales-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .sales-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sales-filter-search { grid-column: 1 / -1; }
  .sales-filter-reset { align-self: stretch; }
  .sales-filter-reset button { width: 100%; }
  .threshold-editor-row { grid-template-columns: 90px 110px minmax(150px,1fr); }
  .sales-bar-row { grid-template-columns: 90px minmax(80px,1fr) 40px; }
  .sales-bar-row small { grid-column: 2 / -1; }
}
@media (max-width: 700px) {
  .sales-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .threshold-editor-row { grid-template-columns: 1fr; align-items: stretch; }
  .threshold-editor-row .quote-stars-display { align-self: start; }
  .integrated-product-tracking { grid-template-columns: 1fr; }
  .integrated-product-preview, .integrated-product-tracking > p { grid-column: auto; }
}
@media (max-width: 480px) {
  .sales-filter-grid, .sales-metric-grid { grid-template-columns: 1fr; }
  .sales-filter-search { grid-column: auto; }
  .quote-stars > span { font-size: 13px; }
  .threshold-strip { gap: 5px; }
  .threshold-chip { width: 100%; justify-content: center; }
}

/* Product-line controls inside activity lists and compact metric tables */
.activity-item:has(> button) { grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; }
.compact-table th, .compact-table td { padding-top: 9px; padding-bottom: 9px; }
.muted-text { color: var(--muted); font-size: 10px; }


/* Version 4 product catalog */
.catalog-filter-grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.catalog-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.catalog-category-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.catalog-category-chip span { color: var(--muted); margin-left: 4px; }
.catalog-category-chip.active { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-800); }
.catalog-table td { vertical-align: middle; }
.catalog-table tbody tr { cursor: pointer; }
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.catalog-picker-field small { display: block; margin-top: 6px; color: var(--muted); }
.catalog-selection-empty {
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  background: #f7f9f8;
}
.catalog-selection-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid #b8dfcc;
  border-radius: 10px;
  background: var(--brand-50);
}
.catalog-selection-card > div:first-child { display: grid; gap: 4px; }
.catalog-selection-card small { color: var(--muted); }
.catalog-selection-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.catalog-selection-facts span { padding: 5px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 10px; font-weight: 700; }
@media (max-width: 920px) {
  .catalog-filter-grid { grid-template-columns: 1fr 1fr; }
  .catalog-filter-search { grid-column: 1 / -1; }
  .catalog-selection-card { align-items: flex-start; flex-direction: column; }
  .catalog-selection-facts { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .catalog-filter-grid { grid-template-columns: 1fr; }
  .catalog-filter-search { grid-column: auto; }
}


/* Version 5: expanded job cards, job products, customer tasks, and red stars */
.quote-stars { border-color: #e5b4b1; background: #fff6f5; color: var(--red); }
.quote-stars:hover { border-color: #c95c56; background: #ffebe9; }
.quote-stars > span, .quote-stars-display, .drawer-red-stars { color: #c73631 !important; }
.quote-stars small { color: #8f2926; }
.threshold-chip.reached { border-color: #e2aaa6; background: #fff0ef; color: #8f2926; }

.jobs-card-list { display: grid; gap: 14px; padding: 14px; background: #f8faf9; }
.job-priority-card {
  display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 18px; padding: 20px;
  border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.job-priority-card:hover { transform: translateY(-1px); border-color: #b9cdc3; box-shadow: 0 8px 22px rgba(15,17,20,.08); }
.job-priority-rank {
  min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  align-self: start; padding: 13px 9px; border-radius: 13px; background: var(--brand-50); color: var(--brand-900); text-align: center;
}
.job-priority-rank span { font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.job-priority-rank strong { margin: 3px 0 1px; font-size: 31px; line-height: 1; font-weight: 950; letter-spacing: -.05em; }
.job-priority-rank small { font-size: 10px; font-weight: 850; }
.job-priority-rank.critical { background: var(--red-soft); color: var(--red); }
.job-priority-rank.high { background: var(--orange-soft); color: var(--orange); }
.job-priority-rank.medium { background: var(--yellow-soft); color: var(--yellow); }
.job-card-main { min-width: 0; }
.job-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.job-card-title { min-width: 0; }
.job-company-row { display: flex; align-items: center; gap: 9px; }
.job-company-row h3 { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 900; letter-spacing: -.025em; }
.job-pinned-star { color: #c73631; font-size: 18px; line-height: 1; }
.job-card-title p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.job-card-title p strong { color: var(--ink); font-weight: 800; }
.job-card-status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.job-action-plan { margin-top: 15px; padding: 14px 16px; border-left: 4px solid var(--brand-600); border-radius: 0 11px 11px 0; background: #f5faf7; }
.job-action-label, .job-section-label { color: var(--brand-700); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.job-action-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 4px; }
.job-action-heading strong { font-size: 15px; font-weight: 900; }
.job-action-heading span { color: var(--muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.job-action-plan p { max-width: 920px; margin: 7px 0 0; color: #425149; font-size: 12px; line-height: 1.55; }
.job-task-preview { margin-top: 14px; }
.job-task-preview-list, .drawer-task-list { display: grid; gap: 7px; margin-top: 7px; }
.job-task-preview > small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.job-task-checkbox {
  display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 9px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
}
.job-task-checkbox:hover { border-color: #b8ccc2; background: #fbfdfc; }
.job-task-checkbox input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--brand-700); }
.job-task-checkbox span { min-width: 0; }
.job-task-checkbox strong { display: block; font-size: 11px; font-weight: 800; }
.job-task-checkbox small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.job-task-checkbox.completed { background: #f2f6f4; color: var(--muted); }
.job-task-checkbox.completed strong { text-decoration: line-through; }
.job-task-checkbox.compact { padding: 8px 9px; }
.job-task-preview-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.job-all-tasks-done { margin-top: 14px; padding: 9px 11px; border: 1px solid #b9ddcb; border-radius: 10px; background: var(--brand-50); color: var(--brand-800); font-size: 11px; font-weight: 800; }
.job-card-meta-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 15px; }
.job-card-meta-grid > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.job-card-meta-grid span { display: block; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.job-card-meta-grid strong { display: block; margin-top: 4px; font-size: 12px; font-weight: 850; }
.job-card-meta-grid small { display: block; max-width: 100%; margin-top: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-card-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.job-card-footer .priority-reasons { margin: 0; }
.job-card-actions { display: flex; gap: 7px; }
.job-card-actions button { min-height: 31px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.job-card-actions button:hover { border-color: var(--brand-600); background: var(--brand-50); }
.job-card-actions .job-calculator-button { border-color: var(--brand-900); background: var(--brand-900); color: #fff; }
.job-card-actions .job-calculator-button:hover { border-color: var(--brand-700); background: var(--brand-700); color: #fff; }
.job-pin-button { color: #c73631 !important; font-size: 15px !important; }
.job-pin-button.active { border-color: #d98e8a !important; background: #fff0ef !important; }

.modal.job-editor { width: min(1180px,100%); }
.job-form-section { margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fcfdfc; }
.job-form-section:last-child { margin-bottom: 0; }
.job-form-section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.job-form-section-header > div { display: flex; align-items: flex-start; gap: 10px; }
.job-form-section-header > div > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: var(--brand-900); color: #fff; font-size: 11px; font-weight: 900; }
.job-form-section-header h3 { margin: 0; font-size: 14px; }
.job-form-section-header p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.job-product-picker { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; }
.job-product-editor-list, .job-task-editor-list { display: grid; gap: 11px; margin-top: 12px; }
.job-product-editor-row, .job-task-editor-row { position: relative; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.job-product-editor-row > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 11px; }
.job-product-editor-row > header > div { display: grid; gap: 3px; }
.job-product-editor-row > header strong { font-size: 12px; }
.job-product-editor-row > header small { color: var(--muted); font-size: 9px; }
.job-product-fields { display: grid; grid-template-columns: 110px 150px minmax(170px,1fr) 120px; align-items: end; gap: 10px; }
.job-product-fields .full { grid-column: 1 / -1; }
.job-calculator-setup { padding: 12px; border: 1px solid #c9d8e8; border-radius: 11px; background: #f7faff; }
.job-calculator-setup-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.job-calculator-setup-heading > div { display: grid; gap: 2px; }
.job-calculator-setup-heading strong { font-size: 11px; }
.job-calculator-setup-heading span:not(.badge) { color: var(--muted); font-size: 9px; }
.job-calculator-fields { display: grid; grid-template-columns: minmax(160px,1.2fr) minmax(145px,1fr) 110px minmax(125px,.9fr) minmax(125px,.9fr); align-items: end; gap: 9px; }
.job-calculator-check { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.job-calculator-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-700); }
.job-calculator-check span { display: grid; gap: 1px; }
.job-calculator-check strong { font-size: 9px; }
.job-calculator-check small { color: var(--muted); font-size: 8px; }
.job-product-total { min-height: 39px; display: flex; flex-direction: column; justify-content: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #f5f8f6; }
.job-product-total span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.job-product-total strong { margin-top: 2px; font-size: 11px; }
.job-product-summary-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 12px; border: 1px solid #b9dcc9; border-radius: 10px; background: var(--brand-50); }
.job-product-summary-bar > div { display: flex; flex-direction: column; }
.job-product-summary-bar span { color: var(--muted); font-size: 10px; }
.job-task-editor-row { display: grid; grid-template-columns: 70px minmax(210px,1.5fr) 145px minmax(180px,1fr) auto; align-items: end; gap: 10px; }
.job-task-editor-row.completed { background: #f4f7f5; }
.job-task-complete-control { min-height: 39px; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; font-weight: 800; }
.job-task-complete-control input { width: 16px; height: 16px; accent-color: var(--brand-700); }
.job-task-details-field { grid-column: 2 / -1; }
.job-task-lock { align-self: center; white-space: nowrap; }
.job-progress-help { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.drawer-action-plan { padding: 14px; border-left: 4px solid var(--brand-600); border-radius: 0 10px 10px 0; background: var(--brand-50); }
.drawer-action-plan strong { display: block; font-size: 13px; }
.drawer-action-plan span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.drawer-action-plan p { margin: 8px 0 0; color: #3e4e46; font-size: 11px; line-height: 1.5; }
.drawer-product-list { display: grid; gap: 9px; }
.drawer-product-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.drawer-product-list article > div:first-child { display: grid; gap: 3px; }
.drawer-product-list article small { color: var(--muted); font-size: 9px; }
.drawer-product-numbers { text-align: right; }
.drawer-product-numbers strong, .drawer-product-numbers span { display: block; font-size: 10px; }
.drawer-product-numbers span { margin-top: 3px; color: var(--muted); }
.drawer-product-list p { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px solid var(--line); color: #46564e; font-size: 10px; }
.integrated-transfer-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 13px; border: 1px solid #b8dcc8; border-radius: 10px; background: var(--brand-50); color: var(--brand-900); }
.integrated-transfer-banner strong { flex: 0 0 auto; font-size: 10px; }
.integrated-transfer-banner span { font-size: 10px; line-height: 1.45; }
.integrated-job-pricing-sync { padding: 12px; border: 1px solid #b8dcc8; border-radius: 10px; background: var(--brand-50); }
.integrated-job-pricing-sync .check-field { font-weight: 850; color: var(--brand-900); }
.integrated-job-pricing-sync p { margin: 6px 0 0 24px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.integrated-job-pricing-sync.disabled { opacity: .58; background: var(--surface-soft); border-color: var(--line); }
.integrated-job-pricing-sync.disabled .check-field { color: var(--muted); }

@media (max-width: 1050px) {
  .job-task-preview-list { grid-template-columns: 1fr; }
  .job-card-meta-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-product-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-product-fields .full { grid-column: 1 / -1; }
  .job-calculator-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-task-editor-row { grid-template-columns: 70px minmax(180px,1fr) 140px; }
  .job-task-editor-row > .field:nth-of-type(3) { grid-column: 2 / 4; }
  .job-task-details-field { grid-column: 2 / 4; }
}
@media (max-width: 760px) {
  .job-priority-card { grid-template-columns: 1fr; padding: 14px; }
  .job-priority-rank { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 9px 11px; }
  .job-priority-rank strong { margin: 0; font-size: 22px; }
  .job-card-header, .job-card-footer, .job-action-heading, .job-product-summary-bar { align-items: stretch; flex-direction: column; }
  .job-card-status { align-items: flex-start; }
  .job-card-meta-grid { grid-template-columns: 1fr; }
  .job-product-picker { grid-template-columns: 1fr; }
  .job-product-picker button { width: 100%; }
  .job-task-editor-row { grid-template-columns: 1fr; }
  .job-task-details-field, .job-task-editor-row > .field:nth-of-type(3) { grid-column: auto; }
  .job-product-fields { grid-template-columns: 1fr; }
  .job-product-fields .full { grid-column: auto; }
  .job-calculator-fields { grid-template-columns: 1fr; }
  .integrated-transfer-banner { align-items: flex-start; flex-direction: column; }
  .drawer-product-list article { grid-template-columns: 1fr; }
  .drawer-product-numbers { text-align: left; }
}

/* Version 6: job-to-Furniture-Calculator product transfer retained */
.job-calculator-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: var(--brand-800) !important;
  background: var(--brand-900) !important;
  color: #fff !important;
  font-weight: 850 !important;
  white-space: nowrap;
}
.job-calculator-button:hover {
  border-color: var(--brand-600) !important;
  background: var(--brand-700) !important;
  color: #fff !important;
}
.job-calculator-setup {
  margin-top: 2px;
  padding: 12px;
  border: 1px solid #c8d8f2;
  border-radius: 11px;
  background: linear-gradient(135deg, #f5f8fe, #fbfdff);
}
.job-calculator-setup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.job-calculator-setup-heading > div { min-width: 0; }
.job-calculator-setup-heading strong { display: block; color: #234f87; font-size: 11px; font-weight: 900; }
.job-calculator-setup-heading span:not(.badge) { display: block; margin-top: 2px; color: #65758a; font-size: 9px; }
.job-calculator-fields {
  display: grid;
  grid-template-columns: minmax(155px, 1.2fr) minmax(145px, 1fr) 110px minmax(135px, 1fr) minmax(135px, 1fr);
  align-items: end;
  gap: 9px;
  margin-top: 10px;
}
.job-calculator-check {
  min-height: 39px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #d6e0ee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.job-calculator-check:hover { border-color: #9eb8dc; background: #f9fbff; }
.job-calculator-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.job-calculator-check span { min-width: 0; }
.job-calculator-check strong { display: block; color: #2a4059; font-size: 9px; font-weight: 850; }
.job-calculator-check small { display: block; margin-top: 1px; color: #748191; font-size: 8px; line-height: 1.25; }
.integrated-transfer-banner {
  display: grid;
  gap: 3px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #add7c2;
  border-left: 4px solid var(--brand-600);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-50), #fff);
  color: var(--brand-900);
  box-shadow: var(--shadow-sm);
}
.integrated-transfer-banner strong { font-size: 12px; font-weight: 900; }
.integrated-transfer-banner span { color: #4d6559; font-size: 10px; line-height: 1.5; }

@media (max-width: 1180px) {
  .job-calculator-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .job-card-actions { flex-wrap: wrap; }
  .job-calculator-button { width: 100%; white-space: normal; }
  .job-calculator-setup-heading { flex-direction: column; }
  .job-calculator-fields { grid-template-columns: 1fr; }
}

/* Version 7 foundation retained: job work cards, urgency, wide details, and app-transfer controls */
.job-worklist-panel { overflow: hidden; }
.job-filter-bar { display: grid; grid-template-columns: minmax(320px,1fr) 150px 160px auto; gap: 9px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.job-filter-bar select { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 0 10px; color: var(--ink); font: inherit; font-size: 11px; }
.job-search-wrap { min-height: 38px; }
.job-worklist { display: grid; gap: 17px; padding: 17px; background: #f4f7f5; }
.job-worklist-empty { background: #fff; border-radius: 12px; }
.job-work-card { position: relative; display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 17px; padding: 20px; border: 1px solid #cbd8d1; border-radius: 15px; background: #fff; box-shadow: 0 3px 10px rgba(15,17,20,.045); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.job-work-card:hover { border-color: #9dbdab; box-shadow: 0 10px 28px rgba(15,17,20,.09); transform: translateY(-1px); }
.job-work-card.overdue, .job-work-card.due-today { border-left: 5px solid #bd2d2a; }
.job-work-card.due-tomorrow, .job-work-card.due-soon { border-left: 5px solid #d97813; }
.job-priority-column { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start; padding: 13px 8px; border-radius: 13px; background: #edf6f1; color: var(--brand-900); text-align: center; }
.job-priority-column > span { order: -1; color: #6d7c74; font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.job-priority-column strong { margin-top: 2px; font-size: 10px; font-weight: 950; }
.job-priority-score { margin-top: 5px; font-size: 34px; font-weight: 950; line-height: .95; letter-spacing: -.05em; }
.job-priority-score.critical { color: #a92925; }
.job-priority-score.high { color: #8d590f; }
.job-card-main { min-width: 0; }
.job-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.job-card-identity { min-width: 0; }
.job-company-name { display: block; color: #0b2118; font-size: 18px; font-weight: 950; line-height: 1.18; letter-spacing: -.025em; }
.job-card-identity h3 { margin: 5px 0 3px; font-size: 13px; font-weight: 900; line-height: 1.3; }
.job-pin-mark { margin-left: 7px; color: #d3322f; }
.job-card-subline { color: var(--muted); font-size: 10px; }
.job-card-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.job-red-stars .quote-stars > span, .job-red-stars .quote-stars-display, .job-red-stars { color: #cf302d !important; font-weight: 950; }
.job-action-focus { margin-top: 15px; padding: 15px 17px; border: 1px solid #cfe4d8; border-left: 5px solid var(--brand-600); border-radius: 0 12px 12px 0; background: #f3faf6; }
.job-action-focus.overdue, .job-action-focus.due-today { border-color: #efb6b3; border-left-color: #bd2d2a; background: #fff1f0; }
.job-action-focus.due-tomorrow, .job-action-focus.due-soon { border-color: #f1d1a7; border-left-color: #d97813; background: #fff8ed; }
.job-action-focus-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.job-action-focus-top > span { color: var(--brand-700); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.job-action-focus.overdue .job-action-focus-top > span, .job-action-focus.due-today .job-action-focus-top > span { color: #9b2522; }
.job-action-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 7px; }
.job-action-title-row strong { color: #10251c; font-size: 15px; font-weight: 950; line-height: 1.3; }
.job-action-title-row em { color: #526159; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.job-action-focus p { margin: 7px 0 0; color: #46564e; font-size: 11px; line-height: 1.6; }
.job-due-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border: 1px solid #b7d4c4; border-radius: 999px; background: #e6f5ed; color: #145b3e; font-size: 9px; font-weight: 950; white-space: nowrap; }
.job-due-pill.overdue, .job-due-pill.due-today { border-color: #e9aaa6; background: #ffe3e1; color: #a32623; }
.job-due-pill.due-tomorrow, .job-due-pill.due-soon { border-color: #eac58d; background: #fff0d8; color: #8b4f08; }
.job-card-lower { display: grid; grid-template-columns: minmax(360px,1.2fr) minmax(370px,1fr); gap: 14px; margin-top: 15px; }
.job-card-task-area, .job-card-facts { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfb; }
.job-card-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.job-card-section-title strong { font-size: 11px; }
.job-card-section-title span { color: var(--muted); font-size: 9px; font-weight: 750; }
.job-card-task-list { display: grid; gap: 6px; }
.job-card-empty { padding: 9px; color: var(--muted); font-size: 10px; }
.job-card-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.job-card-facts > div { min-width: 0; }
.job-card-facts > div > span, .job-card-facts > div > strong, .job-card-facts > div > small { display: block; }
.job-card-facts > div > span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.job-card-facts > div > strong { margin-top: 4px; font-size: 12px; font-weight: 900; }
.job-card-facts > div > small { max-width: 100%; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.job-card-facts .job-fact-due.overdue, .job-card-facts .job-fact-due.due-today { color: #b12825; font-weight: 900; }
.job-card-facts .job-fact-due.due-tomorrow, .job-card-facts .job-fact-due.due-soon { color: #9a5b0d; font-weight: 900; }
.job-why-it-matters { grid-column: 1 / -1; }
.job-why-it-matters .priority-reasons { margin-top: 6px; }
.job-tool-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.job-tool-row > div:first-child strong, .job-tool-row > div:first-child span { display: block; }
.job-tool-row > div:first-child strong { font-size: 10px; }
.job-tool-row > div:first-child span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.job-tool-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.job-tool-actions button, .job-drawer-toolbar .job-calculator-button, .job-drawer-toolbar .job-freight-button { min-height: 33px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 850; cursor: pointer; }
.job-tool-actions button:hover { border-color: var(--brand-600); background: var(--brand-50); }
.job-tool-actions .job-calculator-button, .job-drawer-toolbar .job-calculator-button { border-color: var(--brand-900); background: var(--brand-900); color: #fff; }
.job-tool-actions .job-freight-button, .job-drawer-toolbar .job-freight-button { border-color: #1f5fa7; background: #1f5fa7; color: #fff; }
.job-tool-actions .job-pin-button.active { border-color: #e7a7a4; background: #fff0ef; color: #c72d29; }

.drawer.drawer-wide { width: min(780px, calc(100vw - 40px)); }
.drawer.drawer-extra-wide { width: min(1240px, calc(100vw - 32px)); }
.job-detail-drawer .drawer-header { min-height: 78px; padding: 16px 22px; }
.job-detail-drawer .drawer-header h2 { font-size: 21px; }
.job-detail-drawer .drawer-body { padding: 20px 22px 28px; background: #f5f8f6; }
.job-drawer-urgency { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 15px 17px; border: 1px solid #c6dfd2; border-left: 6px solid var(--brand-600); border-radius: 12px; background: #edf8f2; }
.job-drawer-urgency.overdue, .job-drawer-urgency.due-today { border-color: #e9aaa7; border-left-color: #b52b28; background: #ffefee; }
.job-drawer-urgency.due-tomorrow, .job-drawer-urgency.due-soon { border-color: #ebc793; border-left-color: #d47811; background: #fff7e9; }
.job-drawer-urgency > div:first-child { min-width: 0; }
.job-drawer-urgency span { display: block; color: #426355; font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.job-drawer-urgency.overdue span, .job-drawer-urgency.due-today span { color: #9f2522; }
.job-drawer-urgency strong { display: block; margin-top: 4px; font-size: 17px; font-weight: 950; line-height: 1.25; }
.job-drawer-urgency p { margin: 6px 0 0; color: #45564d; font-size: 11px; line-height: 1.55; }
.job-drawer-urgency-date { flex: 0 0 auto; min-width: 120px; display: flex; flex-direction: column; justify-content: center; padding-left: 16px; border-left: 1px solid rgba(90,96,104,.18); text-align: right; }
.job-drawer-urgency-date b { font-size: 13px; }
.job-drawer-urgency-date small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.job-detail-hero { border-radius: 14px; }
.job-detail-hero .job-company-name { color: #fff; font-size: 18px; }
.job-detail-hero h3 { margin-top: 4px; font-size: 15px; }
.job-drawer-score { display: grid; justify-items: center; gap: 3px; }
.job-drawer-score > span, .job-drawer-score > small { color: #d9e8e0; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.job-drawer-summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.job-drawer-summary-grid > div { min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,255,255,.08); }
.job-drawer-summary-grid span, .job-drawer-summary-grid strong, .job-drawer-summary-grid small { display: block; }
.job-drawer-summary-grid span { color: #cde0d7; font-size: 7.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.job-drawer-summary-grid strong { margin-top: 4px; color: #fff; font-size: 11px; line-height: 1.3; }
.job-drawer-summary-grid small { margin-top: 3px; color: #cde0d7; font-size: 8px; }
.job-drawer-summary-grid small.overdue, .job-drawer-summary-grid small.due-today { color: #ffaca8; font-weight: 900; }
.job-drawer-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 15px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.job-drawer-toolbar button { min-height: 35px; }
.job-drawer-layout { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(300px,.82fr); gap: 15px; align-items: start; }
.job-drawer-main-column, .job-drawer-side-column { display: grid; gap: 14px; }
.job-detail-card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 2px 8px rgba(15,17,20,.035); }
.job-detail-card.customer-action-detail { border-left: 5px solid var(--brand-600); }
.job-detail-card.customer-action-detail.overdue, .job-detail-card.customer-action-detail.due-today { border-color: #e9aaa7; border-left-color: #b52b28; background: #fff8f7; }
.job-detail-card.customer-action-detail.due-tomorrow, .job-detail-card.customer-action-detail.due-soon { border-color: #edcd9d; border-left-color: #d47811; background: #fffbf4; }
.job-detail-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.job-detail-card-header h3 { margin: 2px 0 0; font-size: 13px; }
.section-kicker { display: block; color: var(--brand-700); font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.job-next-action-large strong { display: block; font-size: 17px; font-weight: 950; line-height: 1.3; }
.job-next-action-large > span { display: block; margin-top: 5px; color: #8e2926; font-size: 10px; font-weight: 900; }
.job-next-action-large p { margin: 9px 0 0; color: #405047; font-size: 11px; line-height: 1.65; }
.drawer-task-list.detailed { gap: 8px; }
.drawer-task-detail { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfb; }
.drawer-task-detail > p { margin: 6px 0 0 31px; color: #59675f; font-size: 9px; line-height: 1.5; }
.drawer-product-list.expanded article { grid-template-columns: minmax(0,1fr) auto; padding: 13px; }
.drawer-product-title { display: grid; gap: 3px; }
.drawer-product-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 14px; padding-top: 9px; border-top: 1px solid var(--line); color: #4b5a52; font-size: 9px; }
.job-contact-card strong, .job-contact-card span, .job-contact-card small { display: block; }
.job-contact-card strong { font-size: 13px; }
.job-contact-card span { margin-top: 5px; color: #405148; font-size: 10px; line-height: 1.5; }
.job-contact-card p { margin: 8px 0 0; padding: 9px; border-radius: 8px; background: #f4f7f5; color: #526159; font-size: 9px; line-height: 1.5; }
.job-contact-card small { margin-top: 7px; color: var(--muted); font-size: 9px; }
.transfer-readiness-list { display: grid; gap: 11px; }
.transfer-readiness-list > div { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfb; }
.transfer-app-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-50); color: var(--brand-800); font-size: 14px; font-weight: 900; }
.transfer-readiness-list strong, .transfer-readiness-list p, .transfer-readiness-list small { display: block; }
.transfer-readiness-list strong { font-size: 10px; }
.transfer-readiness-list p { margin: 4px 0; color: #526159; font-size: 9px; line-height: 1.5; }
.transfer-readiness-list small { margin-top: 4px; font-size: 8.5px; line-height: 1.45; }
.warning-text { color: #9a5b0d !important; font-weight: 800; }
.success-text { color: #176343 !important; font-weight: 800; }
.job-notes-box { padding: 11px; border-radius: 9px; background: #f5f8f6; color: #3f5047; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.job-drawer-bottom-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.integrated-transfer-banner.needs-review { border-color: #ebc793; background: #fff7e9; }


/* Readability and due-work emphasis retained in Version 8 */
.job-task-checkbox { grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; }
.job-task-checkbox em { align-self: center; min-width: 66px; padding: 4px 7px; border-radius: 999px; background: #eef4f0; color: #486056; font-size: 8px; font-style: normal; font-weight: 950; text-align: center; text-transform: uppercase; white-space: nowrap; }
.job-task-checkbox.urgency-overdue,
.job-task-checkbox.urgency-today { border-color: #e59e9a; background: #fff0ef; box-shadow: inset 4px 0 0 #bd2d2a; }
.job-task-checkbox.urgency-overdue strong,
.job-task-checkbox.urgency-today strong { color: #8f201e; }
.job-task-checkbox.urgency-overdue em,
.job-task-checkbox.urgency-today em { background: #ffd9d6; color: #9e2421; }
.job-task-checkbox.urgency-tomorrow,
.job-task-checkbox.urgency-soon { border-color: #e9c384; background: #fff8eb; box-shadow: inset 4px 0 0 #d47811; }
.job-task-checkbox.urgency-tomorrow em,
.job-task-checkbox.urgency-soon em { background: #ffe8c6; color: #8c5109; }
.job-task-checkbox.completed { grid-template-columns: 18px minmax(0,1fr); box-shadow: none; }
.job-deadline-fact { padding: 10px !important; border: 1px solid transparent; border-radius: 9px; }
.job-deadline-fact.overdue,
.job-deadline-fact.due-today { border-color: #eba9a5; background: #fff0ef; }
.job-deadline-fact.overdue > span,
.job-deadline-fact.due-today > span,
.job-deadline-fact.overdue > strong,
.job-deadline-fact.due-today > strong { color: #9d2421 !important; }
.job-deadline-fact.due-tomorrow,
.job-deadline-fact.due-soon { border-color: #ebc78f; background: #fff7e9; }
.job-deadline-fact.due-tomorrow > span,
.job-deadline-fact.due-soon > span,
.job-deadline-fact.due-tomorrow > strong,
.job-deadline-fact.due-soon > strong { color: #87500d !important; }
.job-action-focus.overdue .job-action-title-row strong,
.job-action-focus.due-today .job-action-title-row strong,
.customer-action-detail.overdue .job-next-action-large strong,
.customer-action-detail.due-today .job-next-action-large strong { color: #8f201e; }
.job-action-focus.due-tomorrow .job-action-title-row strong,
.job-action-focus.due-soon .job-action-title-row strong,
.customer-action-detail.due-tomorrow .job-next-action-large strong,
.customer-action-detail.due-soon .job-next-action-large strong { color: #7f4a08; }
.job-detail-drawer .drawer-body { font-size: 12px; }
.job-detail-card { padding: 17px; }
.job-detail-card-header h3 { font-size: 14px; }
.job-next-action-large strong { font-size: 19px; }
.job-next-action-large p { font-size: 12px; }
.drawer-task-detail > p { font-size: 10px; }
.job-drawer-layout { grid-template-columns: minmax(0,1.5fr) minmax(355px,.9fr); gap: 18px; }
.job-drawer-toolbar { position: sticky; top: -20px; z-index: 5; box-shadow: 0 5px 14px rgba(15,17,20,.08); }
.job-freight-form-section { border-color: #b7d0e8; background: #f7fbff; }
.job-freight-form-section .job-form-section-header > div > span { background: #1f5fa7; }
.job-transfer-help { display: grid; gap: 4px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #c8dcef; border-radius: 10px; background: #eef6ff; }
.job-transfer-help strong { color: #184b83; font-size: 11px; }
.job-transfer-help span { color: #41566d; font-size: 10px; line-height: 1.55; }
.job-freight-check-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.job-freight-check-grid .check-field { min-height: 39px; padding: 8px 9px; border: 1px solid #d3e0ea; border-radius: 8px; background: #fff; }
.freight-setup-card { border-color: #c3d8ec; }
.job-freight-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.job-freight-summary-grid > div { min-width: 0; padding: 11px; border: 1px solid #d4e2ee; border-radius: 9px; background: #f4f9ff; }
.job-freight-summary-grid span,
.job-freight-summary-grid strong { display: block; }
.job-freight-summary-grid span { color: #567086; font-size: 8px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.job-freight-summary-grid strong { margin-top: 4px; color: #163b5f; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.job-freight-description { margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfb; }
.job-freight-description span,
.job-freight-description strong { display: block; }
.job-freight-description span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.job-freight-description strong { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.job-freight-description p { margin: 7px 0 0; color: #4c5b53; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.job-freight-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.job-freight-chip-list span { padding: 5px 8px; border: 1px solid #bdd6c8; border-radius: 999px; background: #edf8f2; color: #225b40; font-size: 8px; font-weight: 850; }
.job-freight-chip-list span.customs { border-color: #c5d7ea; background: #edf5fd; color: #245783; }
.job-freight-chip-list span.neutral { border-color: var(--line); background: #f5f7f6; color: var(--muted); }
.transfer-readiness-list > div { background: #fff; }
.transfer-readiness-list p { font-size: 10px; }

@media (max-width: 1120px) {
  .job-filter-bar { grid-template-columns: minmax(260px,1fr) 130px 145px; }
  .job-filter-bar > button { grid-column: 3; justify-self: end; }
  .job-card-lower { grid-template-columns: 1fr; }
  .job-drawer-layout { grid-template-columns: 1fr; }
  .job-drawer-side-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-drawer-side-column > .job-detail-card:first-child, .job-drawer-side-column > .transfer-readiness-card { grid-column: auto; }
}

@media (max-width: 820px) {
  .job-filter-bar { grid-template-columns: 1fr 1fr; }
  .job-search-wrap { grid-column: 1 / -1; }
  .job-filter-bar > button { grid-column: auto; justify-self: stretch; }
  .job-worklist { padding: 10px; }
  .job-work-card { grid-template-columns: 74px minmax(0,1fr); gap: 11px; padding: 14px; }
  .job-priority-column { min-height: 92px; }
  .job-priority-score { font-size: 29px; }
  .job-card-heading { flex-direction: column; }
  .job-card-heading-actions { align-items: flex-start; }
  .job-action-focus-top, .job-action-title-row, .job-tool-row { align-items: flex-start; flex-direction: column; }
  .job-tool-actions { justify-content: flex-start; }
  .job-card-facts { grid-template-columns: 1fr 1fr; }
  .job-drawer-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-drawer-side-column { grid-template-columns: 1fr; }
  .drawer-product-details { grid-template-columns: 1fr; }
  .job-freight-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .job-work-card { grid-template-columns: 1fr; }
  .job-priority-column { min-height: auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 9px 11px; }
  .job-priority-score { margin: 0; font-size: 24px; }
  .job-card-facts { grid-template-columns: 1fr; }
  .job-why-it-matters { grid-column: auto; }
  .drawer.drawer-wide, .drawer.drawer-extra-wide { width: 100%; }
  .job-detail-drawer .drawer-body { padding: 14px; }
  .job-drawer-urgency { flex-direction: column; }
  .job-drawer-urgency-date { padding: 9px 0 0; border-top: 1px solid rgba(90,96,104,.18); border-left: 0; text-align: left; }
  .job-drawer-summary-grid { grid-template-columns: 1fr; }
  .job-drawer-toolbar button { width: 100%; }
  .job-freight-check-grid, .job-freight-summary-grid { grid-template-columns: 1fr; }
  .job-task-checkbox { grid-template-columns: 18px minmax(0,1fr); }
  .job-task-checkbox em { grid-column: 2; justify-self: start; }
}

/* Advanced job editor: explicit customer-address transfer control */
.field-label-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.field-label-action > label { margin: 0; }
.field-inline-button { appearance: none; border: 1px solid #a9cbbd; border-radius: 999px; background: #eef8f3; color: #0f5b40; padding: 4px 8px; font: inherit; font-size: 9px; font-weight: 850; line-height: 1.15; cursor: pointer; white-space: nowrap; }
.field-inline-button:hover { background: #dff2e9; border-color: #4f9a7b; }
@media (max-width: 620px) { .field-label-action { align-items: flex-start; flex-direction: column; gap: 4px; } }

/* Version 8 — simple quote workspace and skid-only Freight Rate AI handoff */
.drawer.drawer-extra-wide.quote-workspace-drawer { width: min(1380px, calc(100vw - 24px)); }
.quote-workspace-drawer .drawer-header { padding: 15px 24px; background: #fff; }
.quote-workspace-drawer .drawer-body { padding: 18px 24px 28px; }
.quote-workspace-hero { margin-bottom: 12px; }
.quote-workspace-hero .detail-hero-top { align-items: flex-start; }
.quote-summary-grid > div { min-height: 68px; }
.quote-summary-grid small.overdue,
.quote-summary-grid small.due-today { color: #ffd9d6; font-weight: 900; }
.quote-summary-grid small.due-tomorrow,
.quote-summary-grid small.due-soon { color: #ffe8bd; font-weight: 900; }
.drawer-red-stars { color: #ff5954 !important; letter-spacing: .02em; }

.quote-workspace-toolbar { position: sticky; top: -18px; z-index: 8; align-items: center; padding: 10px; box-shadow: 0 7px 22px rgba(15,17,20,.10); }
.quote-workspace-toolbar > button { min-height: 37px; }
.quote-workspace-toolbar .primary-button { box-shadow: 0 3px 8px rgba(20,22,25,.16); }
.quote-workspace-toolbar .job-freight-button,
.quote-freight-helper .job-freight-button { appearance: none; min-height: 36px; padding: 7px 11px; border: 1px solid #1f5fa7; border-radius: 8px; background: #1f5fa7; color: #fff; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.quote-workspace-toolbar .job-freight-button:hover,
.quote-freight-helper .job-freight-button:hover { background: #174d89; border-color: #174d89; }
.quote-workspace-toolbar .job-calculator-button { appearance: none; min-height: 36px; padding: 7px 11px; border: 1px solid var(--brand-900); border-radius: 8px; background: var(--brand-900); color: #fff; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.quote-workspace-toolbar .job-calculator-button:hover { background: var(--brand-800); }

.quote-workspace-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.62fr); gap: 16px; align-items: start; }
.quote-workspace-main,
.quote-workspace-side { min-width: 0; display: grid; gap: 14px; }
.quote-workspace-side { position: sticky; top: 53px; }

.quote-builder-card { padding: 0; overflow: hidden; }
.quote-builder-header { margin: 0; padding: 17px 18px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#fff,#fbfdfc); }
.quote-builder-header > div:first-child { min-width: 0; }
.quote-builder-header h3 { font-size: 16px; }
.quote-builder-header p { max-width: 680px; margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.quote-line-table-wrap { width: 100%; overflow-x: auto; }
.quote-line-table { width: 100%; min-width: 790px; border-collapse: collapse; }
.quote-line-table th { padding: 10px 12px; border-bottom: 1px solid var(--line); background: #f4f8f6; color: #5b6b63; font-size: 8px; font-weight: 950; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.quote-line-table th:nth-child(n+3) { text-align: right; }
.quote-line-table th:last-child { width: 72px; }
.quote-line-table td { padding: 12px; border-bottom: 1px solid #e4ebe7; vertical-align: top; }
.quote-line-table tbody tr:hover { background: #fbfdfc; }
.quote-line-product { display: grid; gap: 5px; min-width: 205px; }
.quote-line-product > div { display: flex; align-items: center; gap: 7px; }
.quote-line-product strong { color: #10251c; font-size: 11px; font-weight: 950; line-height: 1.35; }
.quote-line-product small { color: var(--muted); font-size: 8.5px; line-height: 1.4; }
.quote-line-description { display: grid; gap: 3px; min-width: 210px; max-width: 360px; }
.quote-line-description strong { color: #283b32; font-size: 10px; }
.quote-line-description span { color: #526159; font-size: 9px; line-height: 1.5; white-space: normal; }
.quote-number-cell { text-align: right; white-space: nowrap; font-size: 10px; font-weight: 750; }
.quote-line-total { color: #103c2b; font-size: 11px; font-weight: 950; }
.quote-line-actions { display: flex; justify-content: flex-end; gap: 5px; }
.quote-line-actions button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #244438; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.quote-line-actions button:hover { border-color: #70a58c; background: #edf8f2; }
.quote-line-actions .danger-icon { color: #b32c28; }
.quote-line-actions .danger-icon:hover { border-color: #e7aaa6; background: #fff0ef; }

.quote-builder-empty { display: grid; justify-items: center; gap: 8px; padding: 38px 18px; color: var(--muted); text-align: center; }
.quote-builder-empty > div { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-50); color: var(--brand-700); font-size: 24px; font-weight: 900; }
.quote-builder-empty strong { color: var(--ink); font-size: 14px; }
.quote-builder-empty span { font-size: 10px; }
.quote-builder-empty button { margin-top: 4px; }

.quote-builder-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(245px,310px); gap: 14px; padding: 16px 18px 18px; background: #fbfdfc; }
.quote-freight-helper { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; padding: 13px; border: 1px solid #bfd4e8; border-radius: 10px; background: #f2f8fe; }
.quote-freight-helper strong { color: #174a7e; font-size: 11px; }
.quote-freight-helper span { grid-column: 1; color: #4a6075; font-size: 9px; line-height: 1.55; }
.quote-freight-helper button { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 220px; white-space: normal; }
.quote-total-panel { display: grid; align-content: center; gap: 7px; padding: 13px 15px; border: 1px solid #cbd9d2; border-radius: 10px; background: #fff; }
.quote-total-panel > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.quote-total-panel span { color: #596860; font-size: 9px; }
.quote-total-panel strong { font-size: 11px; white-space: nowrap; }
.quote-total-difference strong { color: #87600d; }
.quote-total-grand { margin-top: 2px; padding-top: 9px; border-top: 2px solid var(--brand-900); }
.quote-total-grand span { color: var(--ink); font-weight: 900; }
.quote-total-grand strong { color: var(--brand-900); font-size: 17px; font-weight: 950; }
.quote-total-panel button { justify-self: end; margin-top: 2px; }

.quote-side-summary { border-top: 4px solid var(--brand-700); }
.quote-side-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 11px; }
.quote-side-facts > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #f7faf8; }
.quote-side-facts span,
.quote-side-facts strong { display: block; }
.quote-side-facts span { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.quote-side-facts strong { margin-top: 4px; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }

.quote-product-form-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; padding: 12px 14px; border: 1px solid #cfe0d7; border-radius: 10px; background: #f2f8f5; }
.quote-product-form-intro strong,
.quote-product-form-intro span { display: block; }
.quote-product-form-intro strong { color: #113b2b; font-size: 12px; }
.quote-product-form-intro span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.quote-product-simple-grid { margin-top: 13px; }
.quote-line-live-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; padding: 12px 14px; border: 1px solid #c7d8cf; border-radius: 10px; background: #f6faf8; }
.quote-line-live-total span { color: #58675f; font-size: 10px; font-weight: 800; }
.quote-line-live-total strong { color: var(--brand-900); font-size: 18px; font-weight: 950; }
.quote-update-total-check { margin-top: 9px; padding: 10px 12px; border: 1px solid #d7e3dd; border-radius: 9px; background: #fff; }
.quote-product-advanced { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; }
.quote-product-advanced summary { padding: 12px 14px; color: #274b3c; font-size: 10px; font-weight: 900; cursor: pointer; }
.quote-product-advanced[open] summary { border-bottom: 1px solid var(--line); }
.quote-product-advanced-grid { padding: 14px; align-items: end; }
.quote-product-advanced-grid .check-field { min-height: 39px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.quote-simple-info { margin-top: 14px; }

@media (max-width: 1120px) {
  .quote-workspace-layout { grid-template-columns: 1fr; }
  .quote-workspace-side { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quote-workspace-side > .job-detail-card:first-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .quote-workspace-drawer .drawer-body { padding: 14px; }
  .quote-workspace-toolbar { position: static; }
  .quote-workspace-toolbar > button { flex: 1 1 190px; }
  .quote-builder-header { flex-direction: column; }
  .quote-builder-header .button-row { width: 100%; }
  .quote-builder-header .button-row button { flex: 1; }
  .quote-builder-bottom { grid-template-columns: 1fr; }
  .quote-freight-helper { grid-template-columns: 1fr; }
  .quote-freight-helper span,
  .quote-freight-helper button { grid-column: 1; grid-row: auto; }
  .quote-freight-helper button { max-width: none; width: 100%; }
  .quote-workspace-side { grid-template-columns: 1fr; }
  .quote-workspace-side > .job-detail-card:first-child { grid-column: auto; }
}

@media (max-width: 560px) {
  .drawer.drawer-extra-wide.quote-workspace-drawer { width: 100%; }
  .quote-workspace-drawer .drawer-header { padding: 13px 15px; }
  .quote-workspace-drawer .drawer-body { padding: 10px; }
  .quote-workspace-toolbar > button { flex-basis: 100%; width: 100%; }
  .quote-builder-header { padding: 14px; }
  .quote-builder-bottom { padding: 13px; }
  .quote-side-facts { grid-template-columns: 1fr; }
  .quote-product-form-intro { align-items: flex-start; flex-direction: column; }
  .quote-line-live-total { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* Version 9 — cleaner color-coded quote workspace and back navigation */
.topbar-back-button,
.drawer-back-button,
.context-back-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #c8d6cf;
  border-radius: 10px;
  background: #fff;
  color: #173e2f;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: .15s ease;
}
.topbar-back-button:hover,
.drawer-back-button:hover,
.context-back-button:hover { border-color: #6fa78c; background: #edf8f2; color: #0f5a3e; transform: translateX(-1px); }
.topbar-back-button .back-arrow,
.drawer-back-button .back-arrow,
.context-back-button .back-arrow { font-size: 18px; line-height: 1; }
.topbar-back-button .back-label,
.drawer-back-button .back-label,
.context-back-button .back-label { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }

.modal-header-leading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.modal-heading-copy { min-width: 0; }
.modal-heading-copy h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-back-button { flex: 0 0 auto; background: #f5faf7; }
.drawer-header-leading { min-width: 0; display: flex; align-items: center; gap: 14px; }
.drawer-heading-copy { min-width: 0; }
.drawer-heading-copy h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-back-button { flex: 0 0 auto; background: #f5faf7; }
.drawer-close-button { flex: 0 0 auto; }
.page-inline-back { border-color: #a8cabb; background: #f5faf7; }

.quote-workspace-drawer .drawer-header {
  min-height: 78px;
  padding: 13px 22px;
  background: linear-gradient(180deg, #ffffff, #f9fbfa);
  box-shadow: 0 5px 18px rgba(15,17,20, .06);
  z-index: 2;
}
.quote-workspace-drawer .drawer-body { padding: 18px 22px 30px; background: #eef3f0; }
.quote-workspace-hero { margin-bottom: 14px; box-shadow: 0 12px 28px rgba(15,17,20, .16); }
.quote-workspace-hero .job-company-name { font-size: 19px; }
.quote-workspace-hero h3 { margin-top: 5px; font-size: 16px; }
.quote-summary-grid > div { position: relative; overflow: hidden; min-height: 70px; background: rgba(255,255,255,.09); }
.quote-summary-grid > div::after { content: ""; position: absolute; inset: auto -20px -28px auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.055); }
.quote-summary-grid .quote-summary-deadline.overdue,
.quote-summary-grid .quote-summary-deadline.due-today { border-color: rgba(255, 166, 161, .72); background: rgba(143, 31, 28, .34); }
.quote-summary-grid .quote-summary-deadline.due-tomorrow,
.quote-summary-grid .quote-summary-deadline.due-soon { border-color: rgba(255, 217, 151, .65); background: rgba(145, 86, 12, .32); }

.quote-workspace-toolbar {
  position: sticky;
  top: -18px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(230px, .9fr) minmax(300px, 1.25fr) minmax(240px, .95fr);
  gap: 9px;
  margin: 0 0 16px;
  padding: 9px;
  border: 1px solid #cbd8d1;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(15,17,20,.11);
}
.quote-toolbar-group { min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 10px; }
.quote-toolbar-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
.quote-toolbar-label { display: block; margin: 0 0 6px; font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.quote-toolbar-build { border-color: #bcdcca; background: #edf8f2; }
.quote-toolbar-build .quote-toolbar-label { color: #116342; }
.quote-toolbar-tools { border-color: #bed4e9; background: #eef6ff; }
.quote-toolbar-tools .quote-toolbar-label { color: #1b568c; }
.quote-toolbar-more { border-color: #ddd8c7; background: #fbf9f1; }
.quote-toolbar-more .quote-toolbar-label { color: #735e1a; }
.quote-workspace-toolbar .primary-button,
.quote-workspace-toolbar .secondary-button,
.quote-workspace-toolbar .ghost-button,
.quote-workspace-toolbar .job-calculator-button,
.quote-workspace-toolbar .job-freight-button { min-height: 35px; padding: 7px 10px; }

.quote-workspace-layout { grid-template-columns: minmax(0,1.62fr) minmax(315px,.66fr); gap: 18px; }
.quote-workspace-main,
.quote-workspace-side { gap: 16px; }
.quote-workspace-side { top: 60px; }
.job-detail-card.section-card {
  --section-color: #287f5b;
  --section-tint: #edf8f2;
  border-top: 4px solid var(--section-color);
  box-shadow: 0 7px 22px rgba(15,17,20,.065);
}
.job-detail-card.section-card > .job-detail-card-header {
  margin: -17px -17px 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(37, 78, 60, .11);
  border-radius: 9px 9px 0 0;
  background: var(--section-tint);
}
.job-detail-card.section-card > .job-detail-card-header > div:first-child { position: relative; min-width: 0; padding-left: 39px; }
.job-detail-card.section-card > .job-detail-card-header > div:first-child::before {
  content: var(--section-icon, "•");
  position: absolute;
  left: 0;
  top: 0;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--section-color);
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 4px 10px rgba(18,20,23,.13);
}
.job-detail-card.section-card .section-kicker { color: var(--section-color); }
.job-detail-card.section-card .job-detail-card-header h3 { font-size: 14px; line-height: 1.28; }
.job-detail-card.section-due { --section-color: #bd2d2a; --section-tint: #fff0ef; --section-icon: "!"; }
.job-detail-card.section-due.due-tomorrow,
.job-detail-card.section-due.due-soon { --section-color: #d47811; --section-tint: #fff6e8; }
.job-detail-card.section-due.no-date,
.job-detail-card.section-due.upcoming { --section-color: #287f5b; --section-tint: #edf8f2; }
.job-detail-card.section-quote { --section-color: #16704c; --section-tint: #eaf7f0; --section-icon: "+"; }
.job-detail-card.section-workflow { --section-color: #6552a5; --section-tint: #f3f0fb; --section-icon: "✓"; }
.job-detail-card.section-summary { --section-color: #177051; --section-tint: #edf8f2; --section-icon: "$"; }
.job-detail-card.section-customer { --section-color: #2f67a6; --section-tint: #eef5fd; --section-icon: "◎"; }
.job-detail-card.section-progress { --section-color: #b7780b; --section-tint: #fff8e8; --section-icon: "★"; }
.job-detail-card.section-priority { --section-color: #b64a2a; --section-tint: #fff1eb; --section-icon: "↑"; }
.job-detail-card.section-notes { --section-color: #7656a8; --section-tint: #f5f0fb; --section-icon: "✎"; }
.job-detail-card.section-history { --section-color: #287a82; --section-tint: #ecf7f8; --section-icon: "$"; }

.quote-builder-card.section-card { padding: 0; }
.quote-builder-card.section-card > .quote-builder-header { margin: 0; border-radius: 0; padding: 16px 18px 14px; }
.quote-builder-card.section-card > .quote-builder-header > div:first-child { padding-left: 41px; }
.quote-builder-card { border-color: #9fcab4; }
.quote-line-table th { background: #edf7f2; color: #3b6552; }
.quote-line-table tbody tr:nth-child(even) { background: #fbfdfc; }
.quote-line-table tbody tr:hover { background: #f0f8f4; }
.quote-builder-bottom { background: linear-gradient(180deg, #fbfdfc, #f5f9f7); }
.quote-total-panel { border-color: #a9cbbb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.quote-side-summary { border-top-color: var(--section-color); }
.quote-side-facts > div { background: rgba(255,255,255,.78); }
.section-progress .quote-progress-preview,
.section-progress .quote-progress-card { background: #fffaf0; }
.section-priority .reason-chip { border: 1px solid #efd2c8; background: #fff8f4; color: #784331; }
.section-notes .job-notes-box { background: #fbf8ff; }
.section-history .activity-symbol { background: #dff1f2; color: #23646b; }
.job-drawer-bottom-actions { margin-top: 18px; padding: 14px; border: 1px solid #d2ddd7; border-radius: 12px; background: #fff; }

@media (max-width: 1280px) {
  .quote-workspace-toolbar { grid-template-columns: 1fr 1fr; }
  .quote-toolbar-more { grid-column: 1 / -1; }
}
@media (max-width: 1120px) {
  .quote-workspace-layout { grid-template-columns: 1fr; }
  .quote-workspace-side { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quote-workspace-side > .section-summary { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .topbar-back-button .back-label { display: none; }
  .topbar-back-button { width: 36px; padding: 0; }
}
@media (max-width: 820px) {
  .quote-workspace-toolbar { position: static; grid-template-columns: 1fr; }
  .quote-toolbar-more { grid-column: auto; }
  .quote-toolbar-group > div > button { flex: 1 1 180px; }
  .quote-workspace-side { grid-template-columns: 1fr; }
  .quote-workspace-side > .section-summary { grid-column: auto; }
}
@media (max-width: 620px) {
  .drawer-header-leading { gap: 8px; }
  .drawer-back-button { width: 38px; padding: 0; }
  .drawer-back-button .back-label { display: none; }
  .quote-workspace-drawer .drawer-header { padding: 11px 12px; }
  .quote-workspace-drawer .drawer-body { padding: 10px; }
  .quote-toolbar-group > div { flex-direction: column; }
  .quote-toolbar-group > div > button { width: 100%; }
  .job-detail-card.section-card > .job-detail-card-header { margin: -14px -14px 12px; padding: 13px 13px 11px; }
  .quote-builder-card.section-card > .quote-builder-header { margin: 0; padding: 14px; }
}


/* Version 9 finishing touches: distinct summary colors and compact modal navigation */
.quote-summary-grid .quote-summary-total {
  border-color: rgba(115, 219, 169, .38);
  background: rgba(28, 120, 82, .34);
}
.quote-summary-grid .quote-summary-products {
  border-color: rgba(135, 190, 244, .42);
  background: rgba(42, 98, 160, .30);
}
.quote-summary-grid .quote-summary-tasks {
  border-color: rgba(190, 168, 242, .42);
  background: rgba(103, 72, 157, .30);
}
.quote-summary-grid .quote-summary-progress {
  border-color: rgba(255, 208, 119, .48);
  background: rgba(151, 100, 14, .31);
}
.modal-header-leading { flex: 1; overflow: hidden; }
.modal-header .context-back-button { min-width: 0; }

@media (max-width: 620px) {
  .modal-header-leading { gap: 8px; }
  .context-back-button { width: 38px; padding: 0; }
  .context-back-button .back-label { display: none; }
}

/* Version 10 — bolder dashboard, monthly sales chart, and workflow action centre */
.dashboard-page { display: grid; gap: 18px; }
.dashboard-welcome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 154px;
  padding: 25px 28px;
  border: 1px solid rgba(237, 28, 36, .3);
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 206, 100, .18), transparent 27%),
    radial-gradient(circle at 70% 115%, rgba(237, 28, 36, .28), transparent 36%),
    linear-gradient(125deg, var(--brand-950) 0%, var(--brand-900) 55%, #3a1013 100%);
  box-shadow: 0 16px 36px rgba(9, 10, 12, .22);
}
.dashboard-welcome::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -42px;
  top: -74px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025);
}
.dashboard-welcome-copy { min-width: 0; max-width: 850px; }
.dashboard-welcome .date-chip { margin-bottom: 10px; color: var(--brand-800); background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.09); }
.dashboard-welcome h2 { margin: 0; font-size: clamp(25px, 2vw, 34px); line-height: 1.12; letter-spacing: -.045em; }
.dashboard-welcome p { max-width: 760px; margin: 9px 0 0; color: #ecd4d3; font-size: 13px; line-height: 1.55; }
.dashboard-welcome-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.dashboard-hero-button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,255,255,.10);
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(7px);
  transition: .16s ease;
}
.dashboard-hero-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.18); }
.dashboard-hero-button.primary { border-color: #f6cf70; color: #173a2d; background: #f6cf70; box-shadow: 0 7px 18px rgba(45, 29, 3, .18); }
.dashboard-hero-button.primary:hover { background: #ffda82; }

.dashboard-shortcut-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; }
.dashboard-shortcut {
  --shortcut-color: #267c59;
  --shortcut-tint: #edf8f2;
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--shortcut-color) 22%, #dfe7e3);
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff 30%, var(--shortcut-tint));
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  transition: .16s ease;
}
.dashboard-shortcut:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--shortcut-color) 46%, #dfe7e3); box-shadow: 0 10px 24px rgba(15,17,20,.09); }
.dashboard-shortcut > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: var(--shortcut-color); font-size: 18px; font-weight: 950; box-shadow: 0 6px 14px color-mix(in srgb, var(--shortcut-color) 24%, transparent); }
.dashboard-shortcut div { min-width: 0; }
.dashboard-shortcut strong, .dashboard-shortcut small { display: block; }
.dashboard-shortcut strong { font-size: 12px; font-weight: 950; }
.dashboard-shortcut small { margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.dashboard-shortcut.tone-green { --shortcut-color: #247b57; --shortcut-tint: #eaf8f1; }
.dashboard-shortcut.tone-blue { --shortcut-color: #2c67a8; --shortcut-tint: #eef5fd; }
.dashboard-shortcut.tone-purple { --shortcut-color: #7651ad; --shortcut-tint: #f4effb; }
.dashboard-shortcut.tone-orange { --shortcut-color: #bd651e; --shortcut-tint: #fff3e9; }
.dashboard-shortcut.tone-yellow { --shortcut-color: #a77a12; --shortcut-tint: #fff8df; }

.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.dashboard-kpi {
  --kpi-color: #247b57;
  --kpi-tint: #edf8f2;
  position: relative;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
  display: block;
  padding: 17px 18px 15px;
  border: 1px solid color-mix(in srgb, var(--kpi-color) 22%, #dce5e0);
  border-top: 4px solid var(--kpi-color);
  border-radius: 15px;
  color: var(--ink);
  background: linear-gradient(145deg, #fff 42%, var(--kpi-tint));
  box-shadow: 0 5px 18px rgba(15,17,20,.065);
  text-align: left;
  cursor: pointer;
  transition: .16s ease;
}
.dashboard-kpi::after { content: ""; position: absolute; right: -28px; bottom: -45px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--kpi-color) 10%, transparent); }
.dashboard-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kpi-color) 45%, #dce5e0); box-shadow: 0 11px 26px rgba(15,17,20,.11); }
.dashboard-kpi-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 9px; color: #53635b; font-size: 10px; font-weight: 950; letter-spacing: .055em; text-transform: uppercase; }
.dashboard-kpi-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--kpi-color); background: var(--kpi-tint); font-size: 15px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi-color) 13%, transparent); }
.dashboard-kpi-value { position: relative; z-index: 1; display: block; margin-top: 8px; font-size: clamp(24px, 1.8vw, 31px); line-height: 1; font-weight: 950; letter-spacing: -.05em; }
.dashboard-kpi-note { position: relative; z-index: 1; display: block; margin-top: 6px; color: #53635b; font-size: 10px; font-weight: 700; line-height: 1.35; }
.dashboard-kpi-trend { position: relative; z-index: 1; display: block; margin-top: 6px; color: var(--kpi-color); font-size: 9px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-kpi.tone-green { --kpi-color: #21825b; --kpi-tint: #e7f8f0; }
.dashboard-kpi.tone-blue { --kpi-color: #2b66a8; --kpi-tint: #ebf3fd; }
.dashboard-kpi.tone-purple { --kpi-color: #7251aa; --kpi-tint: #f2edfb; }
.dashboard-kpi.tone-orange { --kpi-color: #b7601c; --kpi-tint: #fff0e5; }
.dashboard-kpi.tone-red { --kpi-color: #b53b35; --kpi-tint: #ffedeb; }

.dashboard-overview-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(340px,.78fr); gap: 16px; align-items: stretch; }
.dashboard-work-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(390px,.82fr); gap: 16px; align-items: start; }
.dashboard-bottom-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.dashboard-panel { --panel-accent: #287f5b; --panel-tint: #edf8f2; overflow: hidden; border-radius: 16px; border-top: 4px solid var(--panel-accent); box-shadow: 0 7px 22px rgba(15,17,20,.07); }
.dashboard-panel.panel-sales { --panel-accent: #20805b; --panel-tint: #e9f8f1; }
.dashboard-panel.panel-action-center { --panel-accent: #c55a24; --panel-tint: #fff2e9; }
.dashboard-panel.panel-priority-jobs { --panel-accent: #376fae; --panel-tint: #edf5fd; }
.dashboard-panel.panel-client-followups { --panel-accent: #7454aa; --panel-tint: #f4effb; }
.dashboard-panel.panel-quick-launch { --panel-accent: #1d846d; --panel-tint: #e9f8f4; }
.dashboard-panel.panel-recent-activity { --panel-accent: #9a7216; --panel-tint: #fff8e5; }
.dashboard-panel-header { min-height: 72px; padding: 14px 17px; background: linear-gradient(135deg, var(--panel-tint), #fff 76%); }
.dashboard-panel-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.dashboard-panel-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #fff; background: var(--panel-accent); font-size: 16px; font-weight: 950; box-shadow: 0 5px 12px color-mix(in srgb, var(--panel-accent) 22%, transparent); }
.dashboard-panel-title > div { min-width: 0; }
.dashboard-panel-header h3 { font-size: 16px; font-weight: 950; letter-spacing: -.02em; }
.dashboard-panel-header p { margin-top: 4px; color: #5d6b64; font-size: 10.5px; line-height: 1.4; }
.dashboard-open-task-count { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 9px; border-radius: 999px; color: #84441d; background: #ffe2cf; font-size: 9px; font-weight: 950; white-space: nowrap; }

.dashboard-sales-content { display: grid; gap: 16px; }
.dashboard-sales-overview { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 2px 2px 0; }
.dashboard-sales-overview > div:first-child span, .dashboard-sales-overview > div:first-child strong, .dashboard-sales-overview > div:first-child small { display: block; }
.dashboard-sales-overview > div:first-child span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-sales-overview > div:first-child strong { margin-top: 4px; color: #123c2d; font-size: clamp(31px, 2.6vw, 43px); line-height: 1; font-weight: 950; letter-spacing: -.055em; }
.dashboard-sales-overview > div:first-child small { margin-top: 7px; color: #52635a; font-size: 11px; font-weight: 750; }
.sales-change { min-width: 235px; display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 1px 9px; align-items: center; padding: 10px 12px; border: 1px solid #d5e2dc; border-radius: 11px; background: #f8fbf9; }
.sales-change > span { grid-row: 1 / span 2; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; font-weight: 950; }
.sales-change strong, .sales-change small { display: block; }
.sales-change strong { font-size: 10px; line-height: 1.35; }
.sales-change small { color: var(--muted); font-size: 8.5px; }
.sales-change.positive { border-color: #b9dccb; background: #eef9f3; }
.sales-change.positive > span { color: #16704c; background: #d9f3e6; }
.sales-change.negative { border-color: #efc3bf; background: #fff3f1; }
.sales-change.negative > span { color: #ae302c; background: #ffe0dd; }
.sales-change.neutral > span { color: #51645b; background: #e8efeb; }
.dashboard-sales-chart { overflow: hidden; padding: 13px 15px 14px; border: 1px solid #d8e5df; border-radius: 13px; background: linear-gradient(180deg, #fbfdfc, #f4f8f6); }
.sales-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-bottom: 10px; color: #55675e; font-size: 9px; font-weight: 850; }
.sales-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sales-chart-legend i { width: 10px; height: 10px; display: inline-block; border-radius: 3px; }
.sales-chart-legend i.bbc29 { background: #2b9b6b; }
.sales-chart-legend i.other { background: #3c78bd; }
.sales-chart-legend .quoted-pill { margin-left: auto; padding: 5px 8px; border-radius: 999px; color: #68469e; background: #eee6fb; font-weight: 950; }
.sales-chart-bars { min-width: 430px; height: 235px; display: grid; grid-template-columns: repeat(auto-fit,minmax(78px,1fr)); align-items: end; gap: 13px; padding: 15px 10px 0; border-radius: 10px; background: repeating-linear-gradient(to top, transparent 0, transparent 53px, rgba(45,91,69,.075) 54px, transparent 55px); }
.sales-chart-column { min-width: 0; height: 100%; display: grid; grid-template-rows: 22px minmax(125px,1fr) 18px 15px; justify-items: center; align-items: end; gap: 3px; }
.sales-chart-value { color: #33493e; font-size: 9px; font-weight: 950; white-space: nowrap; }
.sales-chart-bar-zone { width: min(58px, 72%); height: 100%; display: flex; align-items: end; }
.sales-chart-bar { width: 100%; min-height: 4px; overflow: hidden; display: flex; flex-direction: column-reverse; border-radius: 9px 9px 4px 4px; background: #e2ebe6; box-shadow: 0 5px 12px rgba(21,61,45,.11); transition: .2s ease; }
.sales-chart-column:hover .sales-chart-bar { filter: saturate(1.12); transform: scaleX(1.05); }
.sales-chart-bar.empty { box-shadow: none; }
.sales-chart-segment { width: 100%; display: block; }
.sales-chart-segment.bbc29 { background: linear-gradient(180deg, #3db981, #23855b); }
.sales-chart-segment.other { background: linear-gradient(180deg, #6099d5, #326eaf); }
.sales-chart-column > strong { color: #2a4035; font-size: 9px; font-weight: 950; white-space: nowrap; }
.sales-chart-column > small { color: var(--muted); font-size: 8px; white-space: nowrap; }
.sales-breakdown-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.sales-breakdown-card { --breakdown-color: #24825b; --breakdown-tint: #ecf8f2; min-width: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--breakdown-color) 18%, #dde5e1); border-radius: 11px; background: var(--breakdown-tint); }
.sales-breakdown-card span, .sales-breakdown-card strong, .sales-breakdown-card small { display: block; }
.sales-breakdown-card span { color: #586960; font-size: 8px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.sales-breakdown-card strong { margin-top: 4px; color: var(--breakdown-color); font-size: 14px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sales-breakdown-card small { margin-top: 3px; color: #627168; font-size: 8px; }
.sales-breakdown-card.other { --breakdown-color: #326eaf; --breakdown-tint: #eef5fd; }
.sales-breakdown-card.orders { --breakdown-color: #7250aa; --breakdown-tint: #f3effb; }
.sales-breakdown-card.category { --breakdown-color: #a66d13; --breakdown-tint: #fff8e7; }

.dashboard-action-center { display: grid; gap: 11px; }
.dashboard-focus-card { --focus-color: #c25c27; --focus-tint: #fff4ec; position: relative; width: 100%; min-width: 0; display: grid; gap: 3px; padding: 13px 42px 13px 15px; border: 1px solid color-mix(in srgb, var(--focus-color) 34%, #dce4e0); border-left: 5px solid var(--focus-color); border-radius: 12px; color: var(--ink); background: linear-gradient(135deg, var(--focus-tint), #fff 75%); text-align: left; cursor: pointer; transition: .16s ease; }
.dashboard-focus-card:hover { transform: translateX(2px); box-shadow: 0 8px 18px rgba(15,17,20,.08); }
.dashboard-focus-card.client { --focus-color: #6750a4; --focus-tint: #f5f1fb; }
.dashboard-focus-card.overdue, .dashboard-focus-card.due-today { --focus-color: #bd322d; --focus-tint: #fff0ee; }
.dashboard-focus-card.due-tomorrow, .dashboard-focus-card.due-soon, .dashboard-focus-card.due-week { --focus-color: #c46d16; --focus-tint: #fff5e8; }
.dashboard-focus-card strong, .dashboard-focus-card b, .dashboard-focus-card small { display: block; min-width: 0; }
.focus-card-eyebrow { color: var(--focus-color); font-size: 8px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-focus-card strong { margin-top: 2px; font-size: 14px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-focus-card b { margin-top: 2px; color: #273c32; font-size: 11px; line-height: 1.4; }
.dashboard-focus-card small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.dashboard-focus-card > i { position: absolute; right: 13px; top: 50%; color: var(--focus-color); font-size: 20px; font-style: normal; font-weight: 950; transform: translateY(-50%); }
.dashboard-focus-empty { display: grid; gap: 5px; justify-items: start; padding: 17px; border: 1px dashed #b8cec2; border-radius: 12px; background: #f5faf7; }
.dashboard-focus-empty strong { font-size: 13px; }
.dashboard-focus-empty span { color: var(--muted); font-size: 10px; }
.workflow-count-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.workflow-count { --count-color: #2f6fae; --count-tint: #eef5fd; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--count-color) 20%, #dbe4df); border-radius: 10px; color: var(--ink); background: var(--count-tint); text-align: left; cursor: pointer; }
.workflow-count:hover { border-color: color-mix(in srgb, var(--count-color) 48%, #dbe4df); }
.workflow-count strong { min-width: 31px; color: var(--count-color); font-size: 20px; line-height: 1; font-weight: 950; }
.workflow-count span { color: #526259; font-size: 9px; font-weight: 850; line-height: 1.25; }
.workflow-count.red { --count-color: #b43a35; --count-tint: #ffefed; }
.workflow-count.orange { --count-color: #b9651d; --count-tint: #fff2e8; }
.workflow-count.blue { --count-color: #2f6fae; --count-tint: #eef5fd; }
.workflow-count.purple { --count-color: #7351aa; --count-tint: #f3effb; }
.dashboard-action-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.dashboard-action-buttons button { width: 100%; }
.dashboard-command-tip { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid #d5dfda; border-radius: 10px; background: #f7faf8; }
.dashboard-command-tip > span { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #1b6548; background: #dff2e9; font-size: 16px; }
.dashboard-command-tip strong, .dashboard-command-tip small { display: block; }
.dashboard-command-tip strong { font-size: 9px; font-weight: 950; }
.dashboard-command-tip small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }

.dashboard-priority-list, .dashboard-client-list { gap: 0; }
.dashboard-priority-row, .dashboard-client-row { grid-template-columns: 61px minmax(0,1fr) 20px; align-items: start; gap: 13px; padding: 16px 17px; background: #fff; }
.dashboard-priority-row:hover { background: #f7fbff; }
.dashboard-client-row:hover { background: #fbf8ff; }
.dashboard-priority-score, .dashboard-client-score { width: 59px; height: 59px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 14px; }
.dashboard-priority-score strong, .dashboard-client-score strong { font-size: 21px; line-height: 1; font-weight: 950; }
.dashboard-priority-score span, .dashboard-client-score span { margin-top: 3px; font-size: 7px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-priority-title-row { gap: 6px; }
.dashboard-priority-company { max-width: 390px; color: #13271e; font-size: 14px; font-weight: 950; }
.dashboard-priority-stars { margin-left: auto; color: #d6302c; font-size: 10px; font-weight: 950; white-space: nowrap; }
.dashboard-priority-job { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 3px; }
.dashboard-priority-job > strong { font-size: 11px; font-weight: 900; }
.dashboard-priority-job > span { color: var(--muted); font-size: 9px; }
.dashboard-client-contact { margin-top: 3px; color: #5c6c63; font-size: 9.5px; font-weight: 700; }
.dashboard-next-action { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; margin-top: 8px; padding: 7px 9px; border-left: 3px solid #3978b7; border-radius: 7px; background: #f0f6fc; }
.dashboard-next-action.client-followup { border-left-color: #7755ad; background: #f5f1fb; }
.dashboard-next-action > span { color: #617069; font-size: 8px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.dashboard-next-action > strong { min-width: 0; color: #19382c; font-size: 10.5px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-next-action > em { padding: 3px 6px; border-radius: 999px; color: #38614d; background: #dfece5; font-size: 8px; font-style: normal; font-weight: 950; white-space: nowrap; }
.dashboard-next-action > em.overdue, .dashboard-next-action > em.due-today { color: #aa302c; background: #ffe2df; }
.dashboard-next-action > em.due-tomorrow, .dashboard-next-action > em.due-soon, .dashboard-next-action > em.due-week { color: #a45a16; background: #ffead6; }
.dashboard-priority-detail { margin-top: 6px; color: #53635b; font-size: 9.5px; line-height: 1.45; }
.dashboard-priority-row .priority-reasons, .dashboard-client-row .priority-reasons { margin-top: 7px; }
.dashboard-priority-row .reason-chip, .dashboard-client-row .reason-chip { border: 1px solid #dfe8e3; background: #f5f8f6; font-size: 8px; }
.dashboard-priority-row .priority-action, .dashboard-client-row .priority-action { align-self: center; color: #769086; font-size: 24px; }

.dashboard-quick-app-grid { gap: 9px; }
.dashboard-quick-app { position: relative; min-height: 63px; padding: 10px 36px 10px 10px; border-radius: 11px; }
.dashboard-quick-app .app-icon { --app-color: #267b58; --app-tint: #dff4ea; color: var(--app-color); background: var(--app-tint); }
.dashboard-quick-app.tone-1 .app-icon { --app-color: #2e67a7; --app-tint: #e7f0fb; }
.dashboard-quick-app.tone-2 .app-icon { --app-color: #7451aa; --app-tint: #f0eafb; }
.dashboard-quick-app.tone-3 .app-icon { --app-color: #b55f1e; --app-tint: #ffecdd; }
.dashboard-quick-app.tone-4 .app-icon { --app-color: #b13d38; --app-tint: #ffe9e7; }
.dashboard-quick-app.tone-5 .app-icon { --app-color: #97700d; --app-tint: #fff5d1; }
.dashboard-quick-app strong { font-size: 11.5px; font-weight: 950; }
.dashboard-quick-app > i { position: absolute; right: 12px; top: 50%; color: #809087; font-size: 16px; font-style: normal; transform: translateY(-50%); }
.dashboard-activity-list { gap: 0; }
.dashboard-activity-item { position: relative; grid-template-columns: 34px minmax(0,1fr) 14px; align-items: center; padding: 10px 0; }
.dashboard-activity-item .activity-symbol { --activity-color: #267c59; --activity-tint: #e3f5ec; width: 32px; height: 32px; color: var(--activity-color); background: var(--activity-tint); font-weight: 950; }
.dashboard-activity-item.tone-1 .activity-symbol { --activity-color: #2d67a7; --activity-tint: #e8f1fb; }
.dashboard-activity-item.tone-2 .activity-symbol { --activity-color: #7552aa; --activity-tint: #f0ebfa; }
.dashboard-activity-item.tone-3 .activity-symbol { --activity-color: #b85f1c; --activity-tint: #fff0e3; }
.dashboard-activity-item.tone-4 .activity-symbol { --activity-color: #a97a12; --activity-tint: #fff6d9; }
.dashboard-activity-item strong { font-size: 10.5px; font-weight: 950; }
.dashboard-activity-item span { font-size: 9px; }
.dashboard-activity-item > i { color: #8a9991; font-size: 17px; font-style: normal; }

@media (max-width: 1380px) {
  .dashboard-shortcut-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-overview-grid { grid-template-columns: 1fr; }
  .dashboard-action-center { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-action-center > .workflow-count-grid,
  .dashboard-action-center > .dashboard-action-buttons,
  .dashboard-action-center > .dashboard-command-tip { grid-column: 1 / -1; }
}
@media (max-width: 1120px) {
  .dashboard-work-grid, .dashboard-bottom-grid { grid-template-columns: 1fr; }
  .dashboard-action-center { grid-template-columns: 1fr; }
  .dashboard-action-center > .workflow-count-grid,
  .dashboard-action-center > .dashboard-action-buttons,
  .dashboard-action-center > .dashboard-command-tip { grid-column: auto; }
  .sales-breakdown-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .dashboard-page { gap: 14px; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; min-height: 0; padding: 21px; }
  .dashboard-welcome-actions { width: 100%; justify-content: flex-start; }
  .dashboard-hero-button { flex: 1 1 180px; }
  .dashboard-shortcut-grid, .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-sales-overview { align-items: stretch; flex-direction: column; gap: 11px; }
  .sales-change { min-width: 0; }
  .dashboard-sales-chart { overflow-x: auto; }
  .sales-chart-bars { min-width: 520px; }
  .dashboard-priority-row, .dashboard-client-row { grid-template-columns: 57px minmax(0,1fr); }
  .dashboard-priority-row .priority-action, .dashboard-client-row .priority-action { display: none; }
  .dashboard-priority-stars { margin-left: 0; }
}
@media (max-width: 560px) {
  .dashboard-welcome { border-radius: 15px; padding: 18px; }
  .dashboard-welcome h2 { font-size: 25px; }
  .dashboard-shortcut-grid, .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .dashboard-shortcut { min-height: 68px; }
  .dashboard-kpi { min-height: 118px; }
  .dashboard-panel-header { align-items: flex-start; }
  .dashboard-panel-title { align-items: flex-start; }
  .dashboard-panel-header > .secondary-button, .dashboard-panel-header > .ghost-button, .dashboard-panel-header > .panel-actions { flex: 0 0 auto; }
  .sales-breakdown-grid { grid-template-columns: 1fr; }
  .workflow-count-grid, .dashboard-action-buttons { grid-template-columns: 1fr; }
  .dashboard-priority-row, .dashboard-client-row { grid-template-columns: 49px minmax(0,1fr); gap: 10px; padding: 13px 12px; }
  .dashboard-priority-score, .dashboard-client-score { width: 48px; height: 48px; border-radius: 12px; }
  .dashboard-priority-score strong, .dashboard-client-score strong { font-size: 18px; }
  .dashboard-next-action { grid-template-columns: 1fr auto; }
  .dashboard-next-action > span { grid-column: 1 / -1; }
  .dashboard-priority-company { font-size: 13px; }
  .dashboard-quick-app-grid { grid-template-columns: 1fr; }
}


/* Version 11 — Jobs split into Today’s Work and All Active Jobs, grouped by creation month */
.jobs-page-shell {
  display: grid;
  gap: 15px;
}
.jobs-page-intro { margin-bottom: 0; }

.jobs-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.jobs-view-tab {
  appearance: none;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 84px;
  padding: 14px 17px;
  border: 1px solid #c8d8d0;
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,17,20, .05);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.jobs-view-tab:hover {
  border-color: #78ab94;
  box-shadow: 0 10px 26px rgba(15,17,20, .09);
  transform: translateY(-1px);
}
.jobs-view-tab.active {
  border-color: #176848;
  background: linear-gradient(135deg, #e6f6ee 0%, #fff 72%);
  box-shadow: inset 0 0 0 1px rgba(23, 104, 72, .24), 0 10px 28px rgba(16, 81, 57, .11);
}
.jobs-tab-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #eaf2ee;
  color: #176848;
  font-size: 20px;
  font-weight: 950;
}
.jobs-view-tab.active .jobs-tab-icon {
  background: #176848;
  color: #fff;
  box-shadow: 0 5px 13px rgba(23, 104, 72, .22);
}
.jobs-view-tab > div { min-width: 0; }
.jobs-view-tab > div strong,
.jobs-view-tab > div small { display: block; }
.jobs-view-tab > div strong {
  color: #11271e;
  font-size: 15px;
  font-weight: 950;
}
.jobs-view-tab > div small {
  margin-top: 4px;
  color: #63736b;
  font-size: 10px;
  line-height: 1.4;
}
.jobs-view-tab > b {
  min-width: 39px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #edf4f0;
  color: #176848;
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}
.jobs-view-tab.active > b { background: #cfeede; color: #0d5a3c; }

.jobs-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}
.jobs-summary-card {
  --summary-color: #176848;
  --summary-tint: #dff3e8;
  position: relative;
  min-height: 110px;
  overflow: hidden;
  padding: 15px 16px;
  border: 1px solid #d4dfda;
  border-top: 4px solid var(--summary-color);
  border-radius: 13px;
  background: linear-gradient(145deg, #fff 40%, color-mix(in srgb, var(--summary-tint) 45%, #fff));
  box-shadow: 0 4px 13px rgba(15,17,20, .045);
}
.jobs-summary-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -31px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--summary-tint);
  opacity: .8;
}
.jobs-summary-card > span,
.jobs-summary-card > strong,
.jobs-summary-card > small { position: relative; z-index: 1; display: block; }
.jobs-summary-card > span {
  color: var(--summary-color);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.jobs-summary-card > strong {
  margin-top: 7px;
  color: #10251c;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: 1;
}
.jobs-summary-card > small {
  max-width: 83%;
  margin-top: 7px;
  color: #637169;
  font-size: 9px;
  line-height: 1.4;
}
.jobs-summary-card.tone-red { --summary-color: #c13b35; --summary-tint: #ffe1df; }
.jobs-summary-card.tone-crimson { --summary-color: #9f2535; --summary-tint: #f9dfe5; }
.jobs-summary-card.tone-orange { --summary-color: #b86b15; --summary-tint: #ffe9cc; }
.jobs-summary-card.tone-blue { --summary-color: #2b67a8; --summary-tint: #dcecff; }
.jobs-summary-card.tone-purple { --summary-color: #7251a6; --summary-tint: #eadff8; }
.jobs-summary-card.tone-green { --summary-color: #257956; --summary-tint: #dcf1e7; }

.jobs-attention-rules {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid #bed4c8;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf8f3, #fff);
}
.jobs-rules-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: #267a58;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}
.jobs-attention-rules strong { display: block; color: #154f39; font-size: 11px; font-weight: 950; }
.jobs-attention-rules p { margin: 3px 0 0; color: #5b6d64; font-size: 9px; line-height: 1.45; }

.jobs-split-panel { overflow: hidden; }
.jobs-split-filter {
  grid-template-columns: minmax(320px, 1fr) 170px 170px auto;
  border-bottom-color: #c7d8d0;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}
.job-month-groups {
  display: grid;
  gap: 20px;
  padding: 17px;
  background: #eef4f1;
}
.job-month-group {
  overflow: hidden;
  border: 1px solid #c6d7cf;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(15,17,20, .055);
}
.job-month-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  border-bottom: 1px solid #c8dad1;
  background: linear-gradient(135deg, #e6f4ed 0%, #f7fbf9 58%, #fff 100%);
}
.month-tone-1 .job-month-header { background: linear-gradient(135deg, #e9f1fb 0%, #f8fbff 60%, #fff); }
.month-tone-2 .job-month-header { background: linear-gradient(135deg, #f1eaf9 0%, #fbf9fe 60%, #fff); }
.month-tone-3 .job-month-header { background: linear-gradient(135deg, #fff0da 0%, #fffaf2 60%, #fff); }
.month-tone-4 .job-month-header { background: linear-gradient(135deg, #f8e8e7 0%, #fff8f7 60%, #fff); }
.job-month-badge {
  display: grid;
  place-items: center;
  min-height: 59px;
  padding: 7px;
  border-radius: 13px;
  background: #176848;
  color: #fff;
  text-align: center;
  box-shadow: 0 6px 15px rgba(23, 104, 72, .18);
}
.month-tone-1 .job-month-badge { background: #2b67a8; }
.month-tone-2 .job-month-badge { background: #7251a6; }
.month-tone-3 .job-month-badge { background: #ad6714; }
.month-tone-4 .job-month-badge { background: #a63a36; }
.job-month-badge span,
.job-month-badge strong { display: block; }
.job-month-badge span { font-size: 13px; font-weight: 950; letter-spacing: .04em; }
.job-month-badge strong { margin-top: 2px; font-size: 9px; font-weight: 850; opacity: .9; }
.job-month-content { min-width: 0; }
.job-month-kicker {
  color: #2c7457;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.job-month-content h3 {
  margin: 3px 0 2px;
  color: #10251c;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.025em;
}
.job-month-content p {
  max-width: 760px;
  margin: 0;
  color: #5e6e66;
  font-size: 9px;
  line-height: 1.5;
}
.job-month-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.job-month-inline-stats > span {
  padding: 5px 8px;
  border: 1px solid rgba(117, 154, 136, .3);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #586a61;
  font-size: 8px;
  font-weight: 800;
}
.job-month-inline-stats > span b { color: #153e2e; font-weight: 950; }
.job-month-inline-stats > span.overdue { border-color: #efb2ae; background: #fff1f0; color: #a22b27; }
.job-month-inline-stats > span.overdue b { color: #a22b27; }
.job-month-count {
  min-width: 92px;
  padding: 10px 12px;
  border: 1px solid #bdd5c9;
  border-radius: 11px;
  background: rgba(255,255,255,.84);
  text-align: center;
}
.job-month-count strong,
.job-month-count span { display: block; }
.job-month-count strong { color: #115a3e; font-size: 24px; font-weight: 950; line-height: 1; }
.job-month-count span { margin-top: 4px; color: #557066; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.job-month-list {
  display: grid;
  gap: 16px;
  padding: 16px;
  background: #f6f9f7;
}
.job-month-list .job-work-card { margin: 0; }

.job-card-top-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.job-created-badge {
  min-width: 154px;
  padding: 9px 11px;
  border: 1px solid #bcd3c8;
  border-radius: 11px;
  background: linear-gradient(135deg, #edf8f3, #fff);
  text-align: right;
}
.job-created-badge span,
.job-created-badge strong,
.job-created-badge small { display: block; }
.job-created-badge span { color: #397158; font-size: 7px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.job-created-badge strong { margin-top: 2px; color: #12372a; font-size: 12px; font-weight: 950; }
.job-created-badge small { margin-top: 2px; color: #65766e; font-size: 8px; }
.job-created-fact {
  padding: 10px !important;
  border: 1px solid #bfd8cb;
  border-radius: 10px;
  background: #eef8f3;
}
.job-created-fact > span,
.job-created-fact > strong { color: #1b6248 !important; }

.job-today-focus {
  margin-top: 15px;
  padding: 14px 15px;
  border: 1px solid #efb1ad;
  border-left: 5px solid #c33531;
  border-radius: 0 12px 12px 0;
  background: #fff5f4;
}
.job-today-focus.attention-blocked {
  border-color: #e5bd82;
  border-left-color: #c8750d;
  background: #fff8eb;
}
.job-today-focus-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 10px;
}
.job-today-focus-heading div span,
.job-today-focus-heading div strong { display: block; }
.job-today-focus-heading div span { color: #a62a26; font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.job-today-focus-heading div strong { margin-top: 3px; color: #7f1f1c; font-size: 14px; font-weight: 950; }
.job-today-focus-heading > b {
  padding: 5px 9px;
  border-radius: 999px;
  background: #ffe0dd;
  color: #9f2522;
  font-size: 8px;
  font-weight: 950;
  white-space: nowrap;
}
.job-today-action-list { display: grid; gap: 8px; }
.job-today-action {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #ead3d0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
}
.job-today-action-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f1ecea;
  color: #a52a26;
  font-size: 14px;
  font-weight: 950;
}
.job-today-action-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.job-today-action-title b { padding: 3px 7px; border-radius: 999px; background: #f1ecea; color: #7e4e47; font-size: 7px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.job-today-action-title strong { color: #1b2922; font-size: 11px; font-weight: 950; }
.job-today-action p { margin: 4px 0 0; color: #58675f; font-size: 9px; line-height: 1.5; }
.job-today-action > em { align-self: center; padding: 5px 8px; border-radius: 999px; background: #ffe3e1; color: #a32723; font-size: 7px; font-style: normal; font-weight: 950; white-space: nowrap; }
.job-today-action.tone-call .job-today-action-icon,
.job-today-action.tone-call .job-today-action-title b { background: #dff0ff; color: #1f5fa7; }
.job-today-action.tone-followup .job-today-action-icon,
.job-today-action.tone-followup .job-today-action-title b { background: #e4eefc; color: #315f99; }
.job-today-action.tone-update .job-today-action-icon,
.job-today-action.tone-update .job-today-action-title b { background: #ece3f8; color: #7550a7; }
.job-today-action.tone-deadline .job-today-action-icon,
.job-today-action.tone-deadline .job-today-action-title b { background: #ffe8c7; color: #955508; }
.job-today-action.tone-blocked .job-today-action-icon,
.job-today-action.tone-blocked .job-today-action-title b { background: #ffe0dd; color: #a32723; }
.job-today-action.tone-task .job-today-action-icon,
.job-today-action.tone-task .job-today-action-title b { background: #dff3e8; color: #176848; }
.job-more-actions { padding: 7px 9px; color: #7a5048; font-size: 8px; font-weight: 850; }
.job-work-card.attention-blocked { border-left: 5px solid #c8750d; }
.job-worklist-empty { display: grid; justify-items: start; gap: 8px; }

.quote-side-facts .quote-created-fact { border-color: #c5dacd; background: #eef8f3; }
.quote-side-facts .quote-created-fact span,
.quote-side-facts .quote-created-fact strong { color: #1a6248; }
.quote-summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quote-summary-grid .quote-summary-created { border-color: rgba(181, 226, 203, .42); background: rgba(35, 119, 82, .34); }

/* Version 11 Dashboard buttons can jump directly to either Jobs page. */
.dashboard-action-buttons .primary-button { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .jobs-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-split-filter { grid-template-columns: minmax(260px, 1fr) 155px 155px auto; }
  .job-month-header { grid-template-columns: 58px minmax(0, 1fr) 94px; }
}
@media (max-width: 900px) {
  .jobs-view-tabs { grid-template-columns: 1fr; }
  .jobs-split-filter { grid-template-columns: 1fr 1fr; }
  .jobs-split-filter .job-search-wrap { grid-column: 1 / -1; }
  .job-month-groups { padding: 11px; }
  .job-month-list { padding: 11px; }
  .job-card-heading-actions { width: 100%; }
  .job-card-top-row { justify-content: flex-start; flex-wrap: wrap; }
  .job-created-badge { width: 100%; text-align: left; }
  .job-today-focus-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
  .job-month-header { grid-template-columns: 52px minmax(0, 1fr); padding: 13px; }
  .job-month-count { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-width: 0; text-align: left; }
  .job-month-count span { margin-top: 0; }
}
@media (max-width: 620px) {
  .jobs-summary-grid { grid-template-columns: 1fr; }
  .jobs-view-tab { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px; }
  .jobs-tab-icon { width: 40px; height: 40px; border-radius: 11px; }
  .jobs-split-filter { grid-template-columns: 1fr; }
  .jobs-split-filter .job-search-wrap { grid-column: auto; }
  .job-month-groups { padding: 8px; }
  .job-month-list { padding: 8px; }
  .job-month-content h3 { font-size: 17px; }
  .job-month-inline-stats { display: grid; grid-template-columns: 1fr; }
  .job-today-action { grid-template-columns: 30px minmax(0, 1fr); }
  .job-today-action > em { grid-column: 2; justify-self: start; }
  .quote-summary-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 621px) and (max-width: 1120px) {
  .quote-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Version 11 finishing styles — month headers, visible creation dates, and denser job facts */
.job-month-header {
  grid-template-columns: 72px minmax(0, 1fr) auto;
}
.job-month-badge {
  display: grid;
  place-items: center;
  align-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(39, 111, 80, .28);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 5px 14px rgba(16, 54, 38, .08);
}
.job-month-badge span,
.job-month-badge strong { display: block; text-align: center; }
.job-month-badge span {
  color: #176848;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .05em;
}
.job-month-badge strong {
  margin-top: 2px;
  color: #53675d;
  font-size: 9px;
  font-weight: 900;
}
.job-month-content { min-width: 0; }
.job-month-kicker {
  display: block;
  color: #2c7457;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.job-month-content h3 {
  margin: 3px 0 2px;
  color: #10251c;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.025em;
}
.job-month-content > p {
  max-width: 760px;
  margin: 0;
  color: #5e6e66;
  font-size: 9px;
  line-height: 1.5;
}
.job-month-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.job-month-inline-stats > span {
  padding: 5px 8px;
  border: 1px solid rgba(117, 154, 136, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #5a6d63;
  font-size: 8px;
  font-weight: 800;
}
.job-month-inline-stats > span b { color: #163e2e; font-weight: 950; }
.job-month-inline-stats > span.overdue {
  border-color: #efb1ad;
  background: #fff0ef;
  color: #a22b27;
}
.job-month-inline-stats > span.overdue b { color: #a22b27; }
.job-month-count {
  display: grid;
  place-items: center;
  min-width: 92px;
  padding: 10px 13px;
  border: 1px solid rgba(39, 111, 80, .25);
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  text-align: center;
}
.job-month-count strong {
  color: #145d42;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}
.job-month-count span {
  margin-top: 4px;
  color: #5a6c63;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.job-card-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.job-card-facts .job-why-it-matters { grid-column: span 2; }
.job-work-card .job-created-badge { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }

@media (max-width: 1180px) {
  .job-month-header { grid-template-columns: 64px minmax(0, 1fr); }
  .job-month-count { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; gap: 7px; min-width: 0; padding: 8px 11px; }
  .job-month-count strong { font-size: 16px; }
  .job-month-count span { margin-top: 0; }
  .job-card-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .job-month-header { grid-template-columns: 50px minmax(0, 1fr); gap: 11px; }
  .job-month-badge { width: 48px; height: 48px; border-radius: 12px; }
  .job-month-badge span { font-size: 12px; }
  .job-month-content h3 { font-size: 17px; }
  .job-month-inline-stats { display: grid; grid-template-columns: 1fr; }
  .job-card-facts { grid-template-columns: 1fr; }
  .job-card-facts .job-why-it-matters { grid-column: auto; }
}

/* Version 12 — dated job call notes and scheduled customer callbacks */
.job-call-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid #b9d9dd;
  border-left: 5px solid #257784;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #edf9fa, #f9fdfd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.job-call-strip-copy { min-width: 0; display: grid; gap: 3px; }
.job-call-strip-copy > span {
  color: #276c76;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.job-call-strip-copy > strong {
  color: #173f45;
  font-size: 11px;
  font-weight: 950;
}
.job-call-strip-copy > small {
  color: #567077;
  font-size: 9px;
  line-height: 1.45;
}
.job-call-strip-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}
.job-call-strip-actions > span {
  color: #507078;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
.job-call-note-button,
.call-note-toolbar-button,
.callback-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 35px;
  padding: 7px 11px;
  border-radius: 9px;
  font: inherit;
  font-size: 9px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.job-call-note-button,
.call-note-toolbar-button {
  border: 1px solid #1f6f7b;
  background: #257784;
  color: #fff;
  box-shadow: 0 4px 10px rgba(37,119,132,.16);
}
.job-call-note-button:hover,
.call-note-toolbar-button:hover {
  background: #1d626d;
  transform: translateY(-1px);
}
.callback-button {
  border: 1px solid #bf6b11;
  background: #d57b19;
  color: #fff;
  box-shadow: 0 4px 10px rgba(189,105,17,.16);
}
.callback-button:hover {
  background: #b9650d;
  transform: translateY(-1px);
}
.job-call-note-button.small-button,
.call-note-toolbar-button.small-button,
.callback-button.small-button { min-height: 31px; padding: 5px 9px; font-size: 8px; }

.quote-workspace-toolbar {
  grid-template-columns: minmax(220px,.8fr) minmax(295px,1fr) minmax(390px,1.35fr);
}
.quote-workspace-toolbar .call-note-toolbar-button,
.quote-workspace-toolbar .callback-button { min-height: 35px; padding: 7px 10px; }
.quote-toolbar-more {
  border-color: #e8cba8;
  background: linear-gradient(135deg, #fffaf1, #fff);
}
.quote-toolbar-more .quote-toolbar-label { color: #8a5717; }

.job-call-form-intro,
.callback-form-intro {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 15px;
  border: 1px solid #bcd9dd;
  border-radius: 13px;
  background: linear-gradient(135deg, #edf9fa, #fff);
}
.job-call-form-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #257784;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 7px 17px rgba(37,119,132,.18);
}
.job-call-form-intro > div:last-child { min-width: 0; }
.job-call-form-intro strong,
.job-call-form-intro span { display: block; }
.job-call-form-intro strong { color: #173f45; font-size: 14px; font-weight: 950; }
.job-call-form-intro span { margin-top: 3px; color: #4f6d73; font-size: 10px; }
.job-call-form-intro p,
.callback-form-intro p { margin: 6px 0 0; color: #5b7070; font-size: 10px; line-height: 1.5; }
.call-note-help { border-color: #b8d7dc; background: #f0fafb; color: #275b64; }

.callback-form-intro {
  border-color: #ebcc9f;
  background: linear-gradient(135deg, #fff7e9, #fff);
}
.callback-form-date {
  min-width: 126px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #d57b19;
  color: #fff;
  box-shadow: 0 7px 17px rgba(189,105,17,.17);
}
.callback-form-date span,
.callback-form-date strong { display: block; }
.callback-form-date span { font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.callback-form-date strong { margin-top: 4px; font-size: 13px; font-weight: 950; }
.callback-existing-notice {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 3px 10px;
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid #e7c48e;
  border-radius: 10px;
  background: #fff7e7;
}
.callback-existing-notice span {
  grid-column: 1 / -1;
  color: #8a5b1a;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.callback-existing-notice strong { color: #75430b; font-size: 11px; }
.callback-existing-notice small { color: #775b36; font-size: 9px; }
.callback-followup-check { color: #7a4a12; font-weight: 900; }

.job-detail-card.section-calls {
  --section-color: #257784;
  --section-tint: #eaf7f8;
  --section-icon: "☎";
}
.section-calls .job-detail-card-header p {
  margin: 3px 0 0;
  color: #5d7478;
  font-size: 9px;
}
.job-call-history-list { display: grid; gap: 10px; }
.job-call-history-entry {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #c9dde0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(25,79,87,.045);
}
.job-call-history-date {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 76px;
  padding: 9px;
  border-radius: 10px;
  background: #e8f5f6;
  color: #225f68;
  text-align: center;
}
.job-call-history-date span,
.job-call-history-date strong,
.job-call-history-date small { display: block; }
.job-call-history-date span { font-size: 9px; font-weight: 950; text-transform: uppercase; }
.job-call-history-date strong { margin-top: 3px; font-size: 13px; font-weight: 950; }
.job-call-history-date small { margin-top: 2px; color: #5b787d; font-size: 8px; }
.job-call-history-content { min-width: 0; }
.job-call-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.job-call-history-heading > div:first-child { min-width: 0; }
.job-call-history-heading span,
.job-call-history-heading strong { display: block; }
.job-call-history-heading span { color: #27717c; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.job-call-history-heading strong { margin-top: 3px; color: #183a3f; font-size: 12px; font-weight: 950; line-height: 1.35; }
.job-call-history-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.job-call-history-content > p {
  margin: 9px 0;
  padding: 9px 10px;
  border-left: 3px solid #72abb2;
  border-radius: 0 8px 8px 0;
  background: #f4fafb;
  color: #465d61;
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.job-call-history-content > small { color: #718084; font-size: 8px; }
.job-call-history-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px 16px;
  border: 1px dashed #abcfd4;
  border-radius: 12px;
  background: #f5fbfb;
  text-align: center;
}
.job-call-history-empty > div { font-size: 24px; }
.job-call-history-empty strong { color: #214f56; font-size: 12px; }
.job-call-history-empty span { max-width: 500px; color: #61777b; font-size: 9px; line-height: 1.5; }
.job-call-history-more { margin-top: 9px; color: #667d80; font-size: 8px; text-align: center; }

.next-callback-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 5px 10px;
  margin-top: 11px;
  padding: 11px 12px;
  border: 1px solid #e0bd83;
  border-left: 4px solid #d57b19;
  border-radius: 0 10px 10px 0;
  background: #fff7e8;
}
.next-callback-card > div { min-width: 0; }
.next-callback-card span,
.next-callback-card strong,
.next-callback-card small { display: block; }
.next-callback-card span { color: #9a641d; font-size: 8px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.next-callback-card strong { margin-top: 3px; color: #6e410c; font-size: 11px; font-weight: 950; }
.next-callback-card small { margin-top: 3px; color: #765f40; font-size: 8px; }
.next-callback-card > b { align-self: start; padding: 4px 7px; border-radius: 999px; background: #f8dfb7; color: #82500f; font-size: 7px; font-weight: 950; white-space: nowrap; }
.next-callback-card > p { grid-column: 1 / -1; margin: 4px 0 0; color: #6e5c43; font-size: 9px; line-height: 1.45; }
.next-callback-card.overdue,
.next-callback-card.due-today { border-color: #efaaa5; border-left-color: #c43631; background: #fff0ef; }
.next-callback-card.overdue span,
.next-callback-card.overdue strong,
.next-callback-card.due-today span,
.next-callback-card.due-today strong { color: #9d2723; }
.next-callback-card.overdue > b,
.next-callback-card.due-today > b { background: #ffdcd9; color: #a02723; }
.next-callback-card.empty {
  align-items: center;
  border-style: dashed;
  border-left-width: 1px;
  background: #fffdf9;
}
.timeline-job-link {
  display: inline-block !important;
  width: fit-content;
  margin: 4px 0 2px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #eaf7f8;
  color: #276d77 !important;
  font-size: 8px !important;
  font-weight: 850;
}

/* The optional callback time adds one field to the advanced task editor. */
.job-task-editor-row {
  grid-template-columns: 70px minmax(210px,1.45fr) 145px 112px minmax(175px,1fr) auto;
}
.job-task-details-field { grid-column: 2 / -1; }

@media (max-width: 1320px) {
  .quote-workspace-toolbar { grid-template-columns: 1fr 1fr; }
  .quote-toolbar-more { grid-column: 1 / -1; }
}
@media (max-width: 1050px) {
  .job-task-editor-row { grid-template-columns: 70px minmax(180px,1fr) 140px 110px; }
  .job-task-editor-row > .field:nth-of-type(4) { grid-column: 2 / 5; }
  .job-task-details-field { grid-column: 2 / 5; }
}
@media (max-width: 820px) {
  .quote-workspace-toolbar { grid-template-columns: 1fr; }
  .quote-toolbar-more { grid-column: auto; }
  .job-call-strip { align-items: stretch; flex-direction: column; }
  .job-call-strip-actions { justify-content: space-between; }
}
@media (max-width: 760px) {
  .job-task-editor-row { grid-template-columns: 1fr; }
  .job-task-editor-row > .field:nth-of-type(4),
  .job-task-details-field { grid-column: auto; }
}
@media (max-width: 620px) {
  .job-call-strip-actions { align-items: stretch; flex-direction: column; }
  .job-call-note-button { width: 100%; }
  .job-call-form-intro,
  .callback-form-intro { grid-template-columns: 1fr; }
  .callback-form-date { min-width: 0; }
  .job-call-history-entry { grid-template-columns: 1fr; }
  .job-call-history-date { min-height: 0; grid-template-columns: auto auto auto; justify-content: start; gap: 5px; }
  .job-call-history-date span,
  .job-call-history-date strong,
  .job-call-history-date small { margin: 0; }
  .job-call-history-heading { flex-direction: column; }
  .job-call-history-actions { width: 100%; }
  .next-callback-card { grid-template-columns: 1fr; }
  .next-callback-card > b { justify-self: start; }
}

/* Version 13 - guided sales roadmap based on the customer follow-up flowchart */
.job-detail-card.section-tasks { --section-color: #4b657a; --section-tint: #eef4f8; --section-icon: "✓"; }
.sales-roadmap-section {
  --section-color: #6552a5;
  --section-tint: #f3f0fb;
  --section-icon: "↗";
  overflow: hidden;
}
.sales-roadmap-section > .job-detail-card-header p {
  max-width: 720px;
  margin: 5px 0 0;
  color: #647069;
  font-size: 9px;
  line-height: 1.5;
}
.roadmap-back-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid #8b7cc0;
  border-radius: 8px;
  background: #fff;
  color: #4f3e8b;
  font: inherit;
  font-size: 8px;
  font-weight: 950;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.roadmap-back-button:hover:not(:disabled) {
  background: #f2eefc;
  box-shadow: 0 4px 10px rgba(85, 65, 145, .12);
  transform: translateY(-1px);
}
.roadmap-back-button:disabled {
  border-color: #d8dfdb;
  background: #f4f6f5;
  color: #9aa49f;
  cursor: not-allowed;
}
.sales-roadmap-shell { display: grid; gap: 13px; }
.sales-roadmap-stagebar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  border: 1px solid #ddd6f1;
  border-radius: 12px;
  background: linear-gradient(135deg, #faf8ff, #fff);
}
.sales-roadmap-stage {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #7a817d;
}
.sales-roadmap-stage span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #e8ece9;
  color: #68736d;
  font-size: 9px;
  font-weight: 950;
}
.sales-roadmap-stage strong {
  overflow: hidden;
  color: inherit;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.sales-roadmap-stage.complete { color: #1c6749; }
.sales-roadmap-stage.complete span { background: #d8f3e5; color: #12603f; }
.sales-roadmap-stage.active {
  border-color: #8b7cc0;
  background: #eee9fb;
  color: #4d3c88;
  box-shadow: inset 0 0 0 1px rgba(101,82,165,.08);
}
.sales-roadmap-stage.active span { background: #6552a5; color: #fff; box-shadow: 0 4px 10px rgba(101,82,165,.22); }
.sales-roadmap-current {
  --roadmap-color: #2f67a6;
  --roadmap-tint: #eef5fd;
  display: grid;
  gap: 9px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--roadmap-color) 32%, #dce6e1);
  border-left: 6px solid var(--roadmap-color);
  border-radius: 0 13px 13px 0;
  background: linear-gradient(135deg, var(--roadmap-tint), #fff 78%);
  box-shadow: 0 5px 16px rgba(24, 52, 40, .05);
}
.sales-roadmap-current.tone-green { --roadmap-color: #1c7a52; --roadmap-tint: #eaf8f1; }
.sales-roadmap-current.tone-orange { --roadmap-color: #cb6d10; --roadmap-tint: #fff5e6; }
.sales-roadmap-current.tone-purple { --roadmap-color: #6b54ad; --roadmap-tint: #f2edfc; }
.sales-roadmap-current.tone-teal { --roadmap-color: #197982; --roadmap-tint: #eaf8f9; }
.sales-roadmap-current.tone-red { --roadmap-color: #b52b28; --roadmap-tint: #fff0ef; }
.sales-roadmap-current.tone-slate { --roadmap-color: #526a7a; --roadmap-tint: #eff4f7; }
.sales-roadmap-current-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sales-roadmap-current-top > div:first-child { min-width: 0; }
.sales-roadmap-current-top span {
  display: block;
  color: var(--roadmap-color);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sales-roadmap-current h4 {
  margin: 4px 0 0;
  color: #15251e;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.24;
  letter-spacing: -.015em;
}
.sales-roadmap-current > p {
  max-width: 900px;
  margin: 0;
  color: #4e6057;
  font-size: 10px;
  line-height: 1.55;
}
.sales-roadmap-due {
  flex: 0 0 auto;
  min-width: 130px;
  padding: 9px 10px;
  border: 1px solid #b8d0c4;
  border-radius: 10px;
  background: rgba(255,255,255,.82);
  text-align: right;
}
.sales-roadmap-due span,
.sales-roadmap-due strong { display: block; }
.sales-roadmap-due span { color: #607169; font-size: 7px; font-weight: 950; text-transform: uppercase; }
.sales-roadmap-due strong { margin-top: 3px; color: #213a2f; font-size: 9px; font-weight: 950; }
.sales-roadmap-due.overdue,
.sales-roadmap-due.due-today { border-color: #e7a09b; background: #fff0ef; }
.sales-roadmap-due.overdue span,
.sales-roadmap-due.overdue strong,
.sales-roadmap-due.due-today span,
.sales-roadmap-due.due-today strong { color: #a12522; }
.sales-roadmap-due.due-tomorrow,
.sales-roadmap-due.due-soon { border-color: #e8c181; background: #fff7e8; }
.sales-roadmap-due.due-tomorrow span,
.sales-roadmap-due.due-tomorrow strong,
.sales-roadmap-due.due-soon span,
.sales-roadmap-due.due-soon strong { color: #88500b; }
.sales-roadmap-due.no-date { border-color: #d7dfdb; background: #f5f7f6; }
.sales-roadmap-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.roadmap-stat {
  padding: 5px 8px;
  border: 1px solid #d7dfdb;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #55665d;
  font-size: 8px;
  font-weight: 900;
}
.roadmap-stat.orange { border-color: #edc690; background: #fff7e8; color: #8d540d; }
.roadmap-stat.teal { border-color: #a8d2d6; background: #edf9fa; color: #226c74; }
.sales-roadmap-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.sales-roadmap-choice {
  --choice-color: #2f67a6;
  --choice-tint: #eef5fd;
  appearance: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--choice-color) 28%, #dce5e0);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--choice-tint), #fff 82%);
  color: #17261f;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(20,22,25, .035);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sales-roadmap-choice:hover {
  border-color: var(--choice-color);
  box-shadow: 0 8px 20px rgba(20,22,25, .09);
  transform: translateY(-1px);
}
.sales-roadmap-choice.tone-green { --choice-color: #1b7a52; --choice-tint: #eaf8f1; }
.sales-roadmap-choice.tone-orange { --choice-color: #c66b10; --choice-tint: #fff5e6; }
.sales-roadmap-choice.tone-purple { --choice-color: #6a54ab; --choice-tint: #f2edfc; }
.sales-roadmap-choice.tone-teal { --choice-color: #197983; --choice-tint: #eaf8f9; }
.sales-roadmap-choice.tone-red { --choice-color: #b62e2a; --choice-tint: #fff0ef; }
.sales-roadmap-choice.tone-red-soft { --choice-color: #c36543; --choice-tint: #fff4ef; }
.sales-roadmap-choice.tone-slate { --choice-color: #526a7a; --choice-tint: #eff4f7; }
.sales-roadmap-choice-check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--choice-color);
  border-radius: 9px;
  background: #fff;
  color: var(--choice-color);
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 0 0 3px var(--choice-tint);
}
.sales-roadmap-choice-copy { min-width: 0; }
.sales-roadmap-choice-copy strong,
.sales-roadmap-choice-copy small { display: block; }
.sales-roadmap-choice-copy strong { color: #15261e; font-size: 10px; font-weight: 950; line-height: 1.25; }
.sales-roadmap-choice-copy small { margin-top: 4px; color: #5b6b63; font-size: 8px; line-height: 1.42; }
.sales-roadmap-choice-arrow { color: var(--choice-color); font-size: 16px; font-weight: 950; text-align: right; }
.sales-roadmap-tip {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #d9e2dd;
  border-radius: 10px;
  background: #f7faf8;
}
.sales-roadmap-tip > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e3eee8;
  color: #286a4e;
  font-size: 10px;
  font-weight: 950;
}
.sales-roadmap-tip strong { color: #284638; font-size: 9px; font-weight: 950; }
.sales-roadmap-tip p { margin: 3px 0 0; color: #637169; font-size: 8px; line-height: 1.45; }
.sales-roadmap-history {
  border: 1px solid #dcdfe6;
  border-radius: 11px;
  background: #fbfbfd;
  overflow: hidden;
}
.sales-roadmap-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #4f5860;
  font-size: 9px;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}
.sales-roadmap-history summary::-webkit-details-marker { display: none; }
.sales-roadmap-history summary b { color: #7b8580; font-size: 8px; }
.sales-roadmap-history[open] summary { border-bottom: 1px solid #e3e6e4; background: #f4f5f8; }
.sales-roadmap-history-list { display: grid; padding: 8px 12px 12px; }
.sales-roadmap-history-item {
  --history-color: #526a7a;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #e8ecea;
}
.sales-roadmap-history-item:last-child { border-bottom: 0; }
.sales-roadmap-history-item > span { width: 9px; height: 9px; margin-top: 2px; border-radius: 50%; background: var(--history-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--history-color) 15%, #fff); }
.sales-roadmap-history-item.tone-green { --history-color: #1b7a52; }
.sales-roadmap-history-item.tone-orange { --history-color: #c66b10; }
.sales-roadmap-history-item.tone-purple { --history-color: #6a54ab; }
.sales-roadmap-history-item.tone-teal { --history-color: #197983; }
.sales-roadmap-history-item.tone-red { --history-color: #b62e2a; }
.sales-roadmap-history-item strong,
.sales-roadmap-history-item small { display: block; }
.sales-roadmap-history-item strong { color: #31443a; font-size: 9px; font-weight: 900; }
.sales-roadmap-history-item small { margin-top: 3px; color: #748078; font-size: 8px; line-height: 1.45; }
.sales-roadmap-history-empty { padding: 13px; color: #7a8580; font-size: 9px; text-align: center; }
.sales-roadmap-final {
  --final-color: #1b7a52;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--final-color) 28%, #dce5e0);
  border-radius: 12px;
  background: color-mix(in srgb, var(--final-color) 7%, #fff);
}
.sales-roadmap-final.tone-red { --final-color: #b62e2a; }
.sales-roadmap-final > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--final-color); color: #fff; font-size: 18px; font-weight: 950; }
.sales-roadmap-final strong,
.sales-roadmap-final small { display: block; }
.sales-roadmap-final strong { color: #20372c; font-size: 12px; font-weight: 950; }
.sales-roadmap-final small { margin-top: 4px; color: #65736b; font-size: 9px; line-height: 1.45; }
.roadmap-form-intro {
  --form-color: #2f67a6;
  --form-tint: #eef5fd;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--form-color) 28%, #dce5e0);
  border-radius: 13px;
  background: linear-gradient(135deg, var(--form-tint), #fff);
}
.roadmap-form-intro.tone-purple { --form-color: #6a54ab; --form-tint: #f2edfc; }
.roadmap-form-intro.tone-orange { --form-color: #c66b10; --form-tint: #fff5e6; }
.roadmap-form-intro.tone-slate { --form-color: #526a7a; --form-tint: #eff4f7; }
.roadmap-form-intro > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--form-color); color: #fff; font-size: 20px; font-weight: 950; box-shadow: 0 7px 17px color-mix(in srgb, var(--form-color) 22%, transparent); }
.roadmap-form-intro strong { color: #20382d; font-size: 13px; font-weight: 950; }
.roadmap-form-intro p { margin: 5px 0 0; color: #5d6e65; font-size: 9px; line-height: 1.5; }
.roadmap-form-note { margin-top: 13px; }
@media (max-width: 900px) {
  .sales-roadmap-stagebar { grid-template-columns: 1fr; gap: 4px; }
  .sales-roadmap-stage { grid-template-columns: 25px minmax(0,1fr); min-height: 38px; }
  .sales-roadmap-choice-grid { grid-template-columns: 1fr; }
  .sales-roadmap-current-top { display: grid; }
  .sales-roadmap-due { min-width: 0; text-align: left; }
}
@media (max-width: 620px) {
  .sales-roadmap-current { padding: 13px; }
  .sales-roadmap-current h4 { font-size: 14px; }
  .sales-roadmap-choice { grid-template-columns: 32px minmax(0,1fr) 16px; min-height: 68px; padding: 10px; }
  .sales-roadmap-choice-check { width: 31px; height: 31px; }
  .roadmap-form-intro { grid-template-columns: 40px minmax(0,1fr); padding: 12px; }
  .roadmap-form-intro > span { width: 40px; height: 40px; font-size: 17px; }
}

/* Version 13 roadmap task handoff and focus state */
.job-task-checkbox.roadmap-managed {
  border-color: #cfc5ec;
  background: linear-gradient(135deg, #f6f3fd, #fff);
  cursor: pointer;
}
.job-task-checkbox.roadmap-managed:hover {
  border-color: #7864b6;
  background: #f2eefc;
  box-shadow: 0 5px 14px rgba(101,82,165,.09);
}
.job-task-checkbox.roadmap-managed input { pointer-events: none; accent-color: #6552a5; }
.job-task-checkbox.roadmap-managed.completed strong { text-decoration: none; }
.job-task-checkbox .roadmap-task-pill {
  min-width: 72px;
  background: #e9e3f8;
  color: #5a478f;
}
.job-task-complete-control.managed {
  border-color: #d3caea;
  background: #f5f2fb;
  color: #5a478f;
}
.job-task-complete-control.managed input { accent-color: #6552a5; }
.sales-roadmap-section.roadmap-focus-pulse {
  animation: roadmapFocusPulse 1.35s ease both;
}
@keyframes roadmapFocusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(101,82,165,0); }
  30% { box-shadow: 0 0 0 5px rgba(101,82,165,.18), 0 12px 30px rgba(67,47,126,.13); }
}


/* Version 14: maximized, collapsible quote workspace */
.drawer.drawer-extra-wide.quote-workspace-drawer.job-workspace-maximized {
  inset: 8px;
  width: auto;
  max-width: none;
  height: auto;
  border: 1px solid rgba(41, 87, 67, .22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(15,17,20, .32);
}
.job-workspace-maximized .drawer-header {
  min-height: 70px;
  padding: 12px 20px;
}
.job-workspace-maximized .drawer-body {
  padding: 18px 22px 34px;
  font-size: 13px;
}
.job-workspace-maximized .quote-workspace-layout {
  grid-template-columns: minmax(0, 1.78fr) minmax(360px, .7fr);
  gap: 20px;
}
.job-workspace-maximized .quote-workspace-main,
.job-workspace-maximized .quote-workspace-side { gap: 18px; }
.job-workspace-maximized .quote-workspace-side { top: 66px; }
.job-workspace-maximized .job-detail-card.section-card .job-detail-card-header h3 { font-size: 15px; }
.job-workspace-maximized .job-detail-card.section-card .job-detail-card-header p { max-width: 760px; margin: 4px 0 0; color: #5b6a62; font-size: 10px; line-height: 1.45; }
.job-workspace-maximized .job-next-action-large strong { font-size: 19px; line-height: 1.3; }
.job-workspace-maximized .job-next-action-large p { font-size: 12px; line-height: 1.65; }
.job-workspace-maximized .quote-line-table th { font-size: 9px; }
.job-workspace-maximized .quote-line-table td { font-size: 11px; }
.job-workspace-maximized .quote-line-product strong { font-size: 11px; }

.job-workspace-view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -3px 0 16px;
  padding: 11px 14px;
  border: 1px solid #c7d8cf;
  border-radius: 12px;
  background: linear-gradient(100deg, #f8fbf9, #edf6f1);
}
.job-workspace-view-controls > div:first-child { min-width: 0; }
.job-workspace-view-controls strong,
.job-workspace-view-controls span { display: block; }
.job-workspace-view-controls strong { color: #153d2d; font-size: 11px; }
.job-workspace-view-controls span { margin-top: 2px; color: #5a6a62; font-size: 9.5px; line-height: 1.45; }
.job-workspace-view-controls .button-row { flex: 0 0 auto; }

.job-essential-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: 18px;
}
.job-essential-work-grid > .job-detail-card { margin: 0; }
.job-detail-card.section-important-tasks {
  --section-color: #cc6d0c;
  --section-tint: #fff6e8;
  --section-icon: "✓";
}
.job-important-task-list { display: grid; gap: 8px; }
.job-important-task-row {
  padding: 8px;
  border: 1px solid #d8e1dc;
  border-radius: 10px;
  background: #fbfdfc;
}
.job-important-task-row.overdue,
.job-important-task-row.due-today { border-color: #edb1ad; background: #fff2f1; }
.job-important-task-row.due-tomorrow,
.job-important-task-row.due-soon { border-color: #efd09e; background: #fff8ec; }
.job-important-task-row > p { margin: 6px 5px 0 32px; color: #59675f; font-size: 9.5px; line-height: 1.5; }
.important-task-more { margin-top: 10px; width: 100%; }
.important-work-clear { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border: 1px dashed #9fcab5; border-radius: 11px; background: #f1faf5; }
.important-work-clear > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #d5f2e3; color: #12603f; font-size: 18px; font-weight: 950; }
.important-work-clear strong,
.important-work-clear small { display: block; }
.important-work-clear strong { color: #194d37; font-size: 12px; }
.important-work-clear small { margin-top: 2px; color: #607068; font-size: 9.5px; }

.job-collapsible-section { transition: box-shadow .16s ease, border-color .16s ease; }
.job-collapsible-header { align-items: flex-start; }
.job-collapsible-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; flex: 0 0 auto; }
.job-section-toggle {
  min-width: 72px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--section-color) 38%, #cbd5d0);
  border-radius: 8px;
  background: #fff;
  color: var(--section-color);
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
}
.job-section-toggle:hover { background: color-mix(in srgb, var(--section-tint) 78%, #fff); }
.job-section-toggle b { display: inline-block; font-size: 15px; line-height: 1; transition: transform .16s ease; }
.job-collapsible-section.is-collapsed .job-section-toggle b { transform: rotate(-90deg); }
.job-section-body { display: block; }
.job-section-collapsed-summary { display: none; align-items: center; gap: 11px; min-height: 54px; padding: 3px 2px 1px; }
.job-section-collapsed-summary .collapsed-section-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--section-tint); color: var(--section-color); font-size: 16px; font-weight: 950; }
.job-section-collapsed-summary > div { min-width: 0; }
.job-section-collapsed-summary strong,
.job-section-collapsed-summary small { display: block; }
.job-section-collapsed-summary strong { color: #173a2c; font-size: 11px; line-height: 1.35; }
.job-section-collapsed-summary small { margin-top: 2px; overflow: hidden; color: #66746d; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.job-collapsible-section.is-collapsed { box-shadow: 0 3px 12px rgba(15,17,20,.045); }
.job-collapsible-section.is-collapsed > .job-detail-card-header { margin-bottom: 0; border-bottom-color: transparent; }
.job-collapsible-section.is-collapsed .job-section-body { display: none; }
.job-collapsible-section.is-collapsed .job-section-collapsed-summary { display: flex; }
.job-collapsible-section.is-collapsed .job-collapsible-header > div:first-child p { display: none; }

@media (max-width: 1280px) {
  .job-essential-work-grid { grid-template-columns: 1fr; }
  .job-workspace-maximized .quote-workspace-layout { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr); }
}
@media (max-width: 1120px) {
  .job-workspace-maximized .quote-workspace-layout { grid-template-columns: 1fr; }
  .job-workspace-maximized .quote-workspace-side { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-workspace-maximized .quote-workspace-side > .section-summary { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .drawer.drawer-extra-wide.quote-workspace-drawer.job-workspace-maximized { inset: 0; border: 0; border-radius: 0; }
  .job-workspace-view-controls { align-items: stretch; flex-direction: column; }
  .job-workspace-view-controls .button-row { width: 100%; }
  .job-workspace-view-controls .button-row button { flex: 1; }
  .job-collapsible-header { align-items: stretch; flex-direction: column; }
  .job-collapsible-header-actions { justify-content: flex-start; }
  .job-workspace-maximized .quote-workspace-side { grid-template-columns: 1fr; }
  .job-workspace-maximized .quote-workspace-side > .section-summary { grid-column: auto; }
}
@media (max-width: 620px) {
  .job-workspace-maximized .drawer-body { padding: 10px 9px 24px; }
  .job-workspace-view-controls .button-row { flex-direction: column; }
  .job-section-toggle { margin-left: auto; }
}

/* Version 15 — higher-contrast Command Center surfaces and clearer dashboard priorities */
:root {
  --ink: #15181b;
  --muted: #5b6470;
  --line: #dfe3e7;
  --line-strong: #c5cbd3;
  --panel: #ffffff;
  --canvas: #f5f6f8;
  --shadow-sm: 0 2px 5px rgba(15,17,20, .06), 0 8px 22px rgba(15,17,20, .045);
  --shadow-lg: 0 24px 64px rgba(9, 10, 12, .26);
  --page-accent-rgb: 237, 28, 36;
  --page-secondary-rgb: 45, 103, 167;
}
body[data-current-page="dashboard"] { --page-accent-rgb: 237, 28, 36; --page-secondary-rgb: 202, 142, 31; }
body[data-current-page="clients"] { --page-accent-rgb: 53, 105, 177; --page-secondary-rgb: 112, 77, 168; }
body[data-current-page="jobs"] { --page-accent-rgb: 196, 91, 34; --page-secondary-rgb: 46, 111, 174; }
body[data-current-page="catalog"] { --page-accent-rgb: 109, 80, 168; --page-secondary-rgb: 38, 130, 94; }
body[data-current-page="furniture-calculator"] { --page-accent-rgb: 35, 126, 87; --page-secondary-rgb: 194, 101, 28; }
body[data-current-page="rate-estimator"] { --page-accent-rgb: 47, 105, 171; --page-secondary-rgb: 29, 132, 109; }
body[data-current-page="metrics"] { --page-accent-rgb: 31, 132, 91; --page-secondary-rgb: 116, 81, 170; }
body[data-current-page="apps"] { --page-accent-rgb: 24, 132, 109; --page-secondary-rgb: 177, 105, 30; }
body[data-current-page="settings"] { --page-accent-rgb: 80, 105, 95; --page-secondary-rgb: 47, 105, 171; }

html, body { background: var(--canvas); }
body { color: var(--ink); }
.main-area {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 2%, rgba(var(--page-accent-rgb), .05), transparent 31rem),
    var(--canvas);
  transition: background .22s ease;
}
.main-area::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: var(--topbar-height) 0 0 var(--sidebar-width);
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(15, 17, 20, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 17, 20, .03) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 72%);
}
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(252, 252, 253, .965);
  box-shadow: 0 5px 20px rgba(15,17,20, .07);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, rgba(var(--page-accent-rgb), .9), rgba(var(--page-secondary-rgb), .68), transparent 78%);
}
.page-heading h1 { color: var(--ink); font-weight: 800; }
.page-heading span { color: var(--muted); font-weight: 800; }
.command-wrap { border-color: var(--line-strong); box-shadow: 0 4px 15px rgba(15,17,20,.055); }
.page-container { min-height: calc(100vh - var(--topbar-height)); }
.page-intro {
  align-items: center;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-left: 5px solid rgb(var(--page-accent-rgb));
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(255,255,255,.97), rgba(var(--page-accent-rgb), .05));
  box-shadow: 0 7px 21px rgba(15,17,20, .06);
}
.page-intro h2 { color: var(--ink); font-weight: 800; }
.page-intro p { color: var(--muted); font-weight: 500; }

.panel,
.metric-card,
.app-card,
.product-card,
.catalog-selection-card,
.job-work-card,
.jobs-summary-card,
.job-priority-card,
.job-detail-card,
.quote-builder-card,
.freight-setup-card,
.next-callback-card,
.sales-breakdown-card {
  border-color: var(--line);
  background: rgba(255,255,255,.985);
  box-shadow: 0 4px 12px rgba(15,17,20,.065), 0 14px 34px rgba(15,17,20,.045);
}
.panel-header {
  border-bottom-color: var(--line);
  background: linear-gradient(125deg, rgba(var(--page-accent-rgb), .05), #fff 68%);
}
.panel-header h3 { color: var(--ink); font-weight: 800; }
.panel-header p { color: var(--muted); font-weight: 500; }
.panel-toolbar { border-bottom-color: var(--line); background: linear-gradient(90deg, #f8f8f9, #fbfbfc); }
.metric-card { border-top: 4px solid var(--metric-color, rgb(var(--page-accent-rgb))); background: linear-gradient(145deg, #fff 45%, var(--metric-tint, var(--brand-50))); }
.metric-label { color: var(--muted); font-weight: 800; }
.metric-value { color: var(--ink); }
.metric-note { color: var(--muted); font-weight: 500; }

.search-field input,
.filter-select,
.field input,
.field select,
.field textarea,
.command-wrap,
.segmented {
  border-color: var(--line-strong);
  background-color: #fefefe;
}
.field label { color: #3a4249; font-weight: 800; }
.data-table th { color: #454e56; background: #f6f7f8; font-weight: 800; }
.data-table td { border-bottom-color: var(--line); }
.data-table tbody tr:nth-child(even) { background: #fbfbfc; }
.data-table tbody tr:hover { background: rgba(var(--page-accent-rgb), .05); }
.reason-chip { border: 1px solid var(--line); color: #4c545d; background: #f5f6f7; font-weight: 750; }
.badge, .status-badge { font-weight: 800; }
.modal-backdrop { background: rgba(10,10,12, .68); backdrop-filter: blur(5px); }
.modal, .drawer { border: 1px solid var(--line); background: #fff; }
.modal-header, .drawer-header { background: linear-gradient(120deg, #fafafb, #fff 70%); }
.modal-body { background: #fdfdfe; }
.modal-footer { border-top-color: var(--line); background: #f8f8f9; }
.job-detail-drawer .drawer-body,
.quote-workspace-drawer .drawer-body,
.job-workspace-maximized .drawer-body {
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--page-accent-rgb), .04), transparent 30rem),
    var(--canvas);
}
.sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(237, 28, 36, .12), transparent 18rem),
    linear-gradient(180deg, var(--brand-950), var(--brand-900) 58%, #140f11);
  box-shadow: 8px 0 28px rgba(9,10,12,.2);
}
.nav-item { font-weight: 700; }
.nav-item.active { background: linear-gradient(90deg, rgba(237, 28, 36, .22), rgba(237, 28, 36, .08)); box-shadow: inset 4px 0 var(--brand-600); }

/* Priority jobs: explicit ranking, action, deadline, and explanation */
.dashboard-panel.panel-priority-jobs { --panel-accent: #2e6fb0; --panel-tint: #eaf3fd; }
.dashboard-work-grid { grid-template-columns: minmax(0,1.48fr) minmax(335px,.52fr); }
.dashboard-priority-explainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 13px 14px 4px;
  padding: 12px 14px;
  border: 1px solid #bfd2e4;
  border-radius: 13px;
  background: linear-gradient(120deg, #edf6ff, #fff 72%);
}
.dashboard-priority-explainer-copy { min-width: 0; display: flex; align-items: center; gap: 11px; }
.dashboard-priority-explainer-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; background: #2e6fb0; font-size: 16px; font-weight: 950; box-shadow: 0 5px 13px rgba(46,111,176,.22); }
.dashboard-priority-explainer strong,
.dashboard-priority-explainer small { display: block; }
.dashboard-priority-explainer strong { color: #163d63; font-size: 11px; font-weight: 950; }
.dashboard-priority-explainer small { margin-top: 2px; color: #53697a; font-size: 9px; line-height: 1.45; }
.dashboard-priority-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
.dashboard-priority-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #d7e1dc; border-radius: 999px; color: #52635a; background: #fff; font-size: 8px; font-weight: 900; white-space: nowrap; }
.dashboard-priority-legend i { width: 8px; height: 8px; border-radius: 50%; background: #6e92b8; }
.dashboard-priority-legend .critical i { background: #c43b35; }
.dashboard-priority-legend .high i { background: #c2751e; }
.dashboard-priority-legend .medium i { background: #4e80b7; }

.dashboard-priority-list { gap: 12px; padding: 10px 14px 15px; }
.dashboard-priority-row.dashboard-priority-card {
  --priority-color: #3b74ae;
  --priority-tint: #edf5fd;
  position: relative;
  grid-template-columns: 82px minmax(0,1fr) 112px;
  align-items: stretch;
  gap: 15px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--priority-color) 29%, #cbd9d2);
  border-left: 6px solid var(--priority-color);
  border-radius: 15px;
  background: linear-gradient(120deg, #fff 62%, color-mix(in srgb, var(--priority-tint) 72%, #fff));
  box-shadow: 0 7px 20px rgba(15,17,20,.075);
}
.dashboard-priority-row.dashboard-priority-card:last-child { border-bottom: 1px solid color-mix(in srgb, var(--priority-color) 29%, #cbd9d2); }
.dashboard-priority-row.dashboard-priority-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--priority-color) 48%, #cbd9d2); background: linear-gradient(120deg, #fff 55%, var(--priority-tint)); box-shadow: 0 13px 30px rgba(15,17,20,.12); }
.dashboard-priority-card.priority-critical { --priority-color: #bb352f; --priority-tint: #fff0ee; }
.dashboard-priority-card.priority-high { --priority-color: #b96b17; --priority-tint: #fff5e8; }
.dashboard-priority-card.priority-medium { --priority-color: #376fae; --priority-tint: #edf5fd; }
.dashboard-priority-card.priority-normal { --priority-color: #397d5c; --priority-tint: #edf8f2; }
.dashboard-priority-rank-card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 7px;
  border: 1px solid color-mix(in srgb, var(--priority-color) 24%, #fff);
  border-radius: 13px;
  color: var(--priority-color);
  background: var(--priority-tint);
  text-align: center;
}
.dashboard-priority-position { display: block; margin-bottom: 6px; padding: 3px 7px; border-radius: 999px; color: #fff; background: var(--priority-color); font-size: 8px; font-weight: 950; letter-spacing: .05em; }
.dashboard-priority-rank-card > strong { font-size: 32px; line-height: .95; font-weight: 950; letter-spacing: -.055em; }
.dashboard-priority-rank-card > b { margin-top: 5px; font-size: 9px; font-weight: 950; letter-spacing: .075em; text-transform: uppercase; }
.dashboard-priority-rank-card > small { margin-top: 6px; color: color-mix(in srgb, var(--priority-color) 82%, #27382f); font-size: 8px; font-weight: 850; line-height: 1.25; }
.dashboard-priority-main { display: grid; gap: 10px; min-width: 0; }
.dashboard-priority-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.dashboard-priority-identity { min-width: 0; }
.dashboard-priority-company { max-width: 100%; color: #10251b; font-size: 16px; font-weight: 950; line-height: 1.15; }
.dashboard-priority-job { margin-top: 5px; }
.dashboard-priority-job > strong { color: #253b31; font-size: 11.5px; font-weight: 900; }
.dashboard-priority-job > span { padding: 3px 6px; border-radius: 6px; color: #52655b; background: #eef3f0; font-size: 8.5px; font-weight: 800; }
.dashboard-priority-progress { flex: 0 0 auto; display: grid; justify-items: end; gap: 1px; text-align: right; }
.dashboard-priority-progress > span { color: #d22f2a; font-size: 11px; font-weight: 950; letter-spacing: .025em; }
.dashboard-priority-progress > strong { color: #b62c28; font-size: 12px; font-weight: 950; }
.dashboard-priority-progress > small { max-width: 150px; color: #65766d; font-size: 7.8px; line-height: 1.25; }
.dashboard-priority-do-next {
  --action-color: #3977b5;
  --action-tint: #eef6fd;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--action-color) 28%, #d5e0da);
  border-left: 5px solid var(--action-color);
  border-radius: 11px;
  background: linear-gradient(115deg, var(--action-tint), #fff 82%);
}
.dashboard-priority-do-next.overdue,
.dashboard-priority-do-next.due-today { --action-color: #bd342e; --action-tint: #fff0ee; }
.dashboard-priority-do-next.due-tomorrow,
.dashboard-priority-do-next.due-soon,
.dashboard-priority-do-next.due-week { --action-color: #bd6a17; --action-tint: #fff5e8; }
.dashboard-priority-action-heading { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.dashboard-priority-action-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--action-color); font-size: 16px; font-weight: 950; box-shadow: 0 5px 12px color-mix(in srgb, var(--action-color) 22%, transparent); }
.dashboard-priority-action-heading > div { min-width: 0; }
.dashboard-priority-action-heading > div span,
.dashboard-priority-action-heading > div strong { display: block; }
.dashboard-priority-action-heading > div span { color: var(--action-color); font-size: 8px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-priority-action-heading > div strong { margin-top: 2px; color: #10291d; font-size: 14px; font-weight: 950; line-height: 1.25; }
.dashboard-priority-action-heading > em { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--action-color) 28%, #fff); border-radius: 999px; color: var(--action-color); background: #fff; font-size: 8px; font-style: normal; font-weight: 950; white-space: nowrap; }
.dashboard-priority-do-next > p { margin: 8px 0 0 44px; color: #40564b; font-size: 10px; font-weight: 680; line-height: 1.5; }
.dashboard-priority-action-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 10px 0 0 44px; }
.dashboard-priority-action-facts > span { min-width: 0; padding: 6px 7px; border: 1px solid rgba(74,102,89,.12); border-radius: 8px; background: rgba(255,255,255,.76); }
.dashboard-priority-action-facts b,
.dashboard-priority-action-facts strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-priority-action-facts b { color: #6a7b72; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-priority-action-facts strong { margin-top: 2px; color: #223a2e; font-size: 8.5px; font-weight: 900; }
.dashboard-priority-why { display: flex; align-items: flex-start; gap: 8px; }
.dashboard-priority-why > span { flex: 0 0 auto; padding-top: 3px; color: #53685d; font-size: 7.5px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.dashboard-priority-why > div { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.dashboard-priority-why b { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--priority-color) 18%, #d6e0db); border-radius: 6px; color: color-mix(in srgb, var(--priority-color) 78%, #263b30); background: color-mix(in srgb, var(--priority-tint) 72%, #fff); font-size: 7.5px; font-weight: 850; }
.dashboard-priority-open { min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.dashboard-priority-open > span { color: #667970; font-size: 7.5px; font-weight: 900; text-align: center; }
.dashboard-priority-open button { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: var(--priority-color); font-size: 9px; font-weight: 950; cursor: pointer; box-shadow: 0 6px 14px color-mix(in srgb, var(--priority-color) 23%, transparent); }
.dashboard-priority-open button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.dashboard-priority-open button b { font-size: 14px; }

@media (max-width: 1380px) {
  .dashboard-priority-row.dashboard-priority-card { grid-template-columns: 74px minmax(0,1fr); }
  .dashboard-priority-open { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-end; }
  .dashboard-priority-open button { min-height: 34px; }
}
@media (max-width: 1120px) {
  .dashboard-work-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .main-area::before { left: 0; }
  .page-intro { align-items: flex-start; }
  .dashboard-priority-explainer { align-items: flex-start; flex-direction: column; }
  .dashboard-priority-legend { justify-content: flex-start; }
  .dashboard-priority-row.dashboard-priority-card { grid-template-columns: 62px minmax(0,1fr); gap: 11px; padding: 12px; }
  .dashboard-priority-rank-card { min-height: 136px; }
  .dashboard-priority-rank-card > strong { font-size: 26px; }
  .dashboard-priority-card-header { flex-direction: column; }
  .dashboard-priority-progress { justify-items: start; text-align: left; }
  .dashboard-priority-action-heading { grid-template-columns: 32px minmax(0,1fr); }
  .dashboard-priority-action-heading > em { grid-column: 2; justify-self: start; }
  .dashboard-priority-do-next > p,
  .dashboard-priority-action-facts { margin-left: 42px; }
  .dashboard-priority-action-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .page-intro { padding: 14px; border-left-width: 4px; }
  .dashboard-priority-explainer { margin: 9px 9px 2px; padding: 10px; }
  .dashboard-priority-list { padding: 8px 9px 12px; }
  .dashboard-priority-row.dashboard-priority-card { grid-template-columns: 1fr; border-left-width: 5px; }
  .dashboard-priority-rank-card { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 10px; }
  .dashboard-priority-position { margin: 0; }
  .dashboard-priority-rank-card > strong { font-size: 22px; }
  .dashboard-priority-rank-card > b,
  .dashboard-priority-rank-card > small { margin: 0; }
  .dashboard-priority-rank-card > small { margin-left: auto; }
  .dashboard-priority-action-heading { grid-template-columns: 32px minmax(0,1fr); }
  .dashboard-priority-do-next > p,
  .dashboard-priority-action-facts { margin-left: 0; }
  .dashboard-priority-action-facts { grid-template-columns: 1fr 1fr; }
  .dashboard-priority-why { flex-direction: column; gap: 4px; }
  .dashboard-priority-open { grid-column: auto; }
}


/* Version 16 — richer page backgrounds, clearer information zones, and stronger contrast */
:root {
  --page-bg-a: #f5f6f8;
  --page-bg-b: #f5f6f8;
  --page-bg-c: #f5f6f8;
  --surface-bright: rgba(255,255,255,.985);
  --surface-border: var(--line-strong);
}
body[data-current-page="dashboard"] { --page-accent-rgb: 237,28,36; --page-secondary-rgb: 201,137,27; }
body[data-current-page="clients"] { --page-accent-rgb:48,102,177; --page-secondary-rgb:113,77,171; }
body[data-current-page="jobs"] { --page-accent-rgb:201,87,29; --page-secondary-rgb:45,107,176; }
body[data-current-page="catalog"] { --page-accent-rgb:108,77,170; --page-secondary-rgb:34,132,91; }
body[data-current-page="furniture-calculator"] { --page-accent-rgb:29,126,83; --page-secondary-rgb:198,96,24; }
body[data-current-page="rate-estimator"] { --page-accent-rgb:44,101,173; --page-secondary-rgb:24,133,109; }
body[data-current-page="metrics"] { --page-accent-rgb:27,130,87; --page-secondary-rgb:115,76,169; }
body[data-current-page="apps"] { --page-accent-rgb:22,130,109; --page-secondary-rgb:183,104,24; }
body[data-current-page="settings"] { --page-accent-rgb:73,103,90; --page-secondary-rgb:45,103,174; }
html,body{background:var(--canvas)}
.main-area{background:radial-gradient(circle at 7% 4%,rgba(var(--page-accent-rgb),.05),transparent 31rem),radial-gradient(circle at 94% 8%,rgba(var(--page-secondary-rgb),.04),transparent 30rem),var(--canvas)}
.main-area::before{opacity:.5;background-image:linear-gradient(rgba(15,17,20,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,17,20,.035) 1px,transparent 1px);background-size:38px 38px}
.page-container{position:relative;padding-bottom:44px}
.page-container::after{content:"";position:fixed;z-index:-1;pointer-events:none;right:-8rem;bottom:-11rem;width:31rem;height:31rem;border-radius:50%;background:radial-gradient(circle,rgba(var(--page-secondary-rgb),.12),transparent 66%)}
.topbar{background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(var(--page-accent-rgb),.045),rgba(255,255,255,.97))}
.page-intro{border-color:rgba(var(--page-accent-rgb),.34);border-left-width:7px;background:linear-gradient(120deg,rgba(255,255,255,.99) 45%,rgba(var(--page-accent-rgb),.12)),#fff;box-shadow:0 9px 28px rgba(15,17,20,.085),inset 0 1px rgba(255,255,255,.9)}
.page-intro h2{font-size:clamp(22px,2vw,30px);letter-spacing:-.035em}.page-intro p{max-width:900px;color:var(--muted);font-size:11px;line-height:1.55}
.panel,.metric-card,.app-card,.product-card,.catalog-selection-card,.job-work-card,.jobs-summary-card,.job-priority-card,.job-detail-card,.quote-builder-card,.freight-setup-card,.next-callback-card,.sales-breakdown-card{border-color:var(--surface-border);background:var(--surface-bright);box-shadow:0 5px 15px rgba(15,17,20,.075),0 18px 42px rgba(15,17,20,.055)}
.panel{overflow:hidden;border-top:3px solid rgba(var(--page-accent-rgb),.45)}.panel-header{min-height:58px;border-bottom-color:var(--line);background:linear-gradient(112deg,rgba(var(--page-accent-rgb),.09),rgba(var(--page-secondary-rgb),.05) 48%,rgba(255,255,255,.99) 86%)}.panel-header h3{font-size:14px;letter-spacing:-.015em}.panel-header p{color:var(--muted)}.panel-body{background:linear-gradient(180deg,rgba(var(--page-accent-rgb),.02),rgba(255,255,255,.99) 88px)}.panel-toolbar{background:linear-gradient(90deg,rgba(var(--page-accent-rgb),.06),rgba(255,255,255,.97) 58%,rgba(var(--page-secondary-rgb),.04))}
.form-section,.info-box,.data-action,.detail-stat,.job-form-section,.catalog-selection-card{border-color:var(--line)}.form-section{border:1px solid var(--line);border-left:5px solid rgba(var(--page-accent-rgb),.6);border-radius:13px;background:linear-gradient(120deg,rgba(var(--page-accent-rgb),.05),#fff 68%)}.form-section:nth-of-type(3n+2){border-color:#c4cfe0;border-left-color:rgba(var(--page-secondary-rgb),.6);background:linear-gradient(120deg,rgba(var(--page-secondary-rgb),.06),#fff 68%)}.form-section:nth-of-type(3n){border-color:#e1cfb4;border-left-color:#c48a2c;background:linear-gradient(120deg,rgba(206,144,43,.07),#fff 68%)}.form-section-title{color:var(--ink);font-weight:800}
.info-box{border-left:5px solid rgba(var(--page-secondary-rgb),.7);background:linear-gradient(115deg,rgba(var(--page-secondary-rgb),.09),#fff 74%)}.data-action-list{gap:9px}.data-action{border:1px solid #c6d7cf;border-left:5px solid rgba(var(--page-accent-rgb),.56);border-radius:11px;background:linear-gradient(105deg,rgba(var(--page-accent-rgb),.065),#fff 62%)}.data-action:nth-child(even){border-left-color:rgba(var(--page-secondary-rgb),.63);background:linear-gradient(105deg,rgba(var(--page-secondary-rgb),.065),#fff 62%)}
.search-field input,.filter-select,.field input,.field select,.field textarea,.command-wrap,.segmented{border-color:var(--line-strong);background:rgba(255,255,255,.97);box-shadow:inset 0 1px 2px rgba(15,17,20,.04)}.search-field input:focus,.filter-select:focus,.field input:focus,.field select:focus,.field textarea:focus,.command-wrap:focus-within{border-color:rgb(var(--page-accent-rgb));box-shadow:0 0 0 3px rgba(var(--page-accent-rgb),.16)}
.data-table{background:rgba(255,255,255,.98)}.data-table th{color:#29483a;background:linear-gradient(180deg,rgba(var(--page-accent-rgb),.15),rgba(var(--page-accent-rgb),.07))}.data-table tbody tr:nth-child(odd){background:rgba(255,255,255,.98)}.data-table tbody tr:nth-child(even){background:rgba(var(--page-secondary-rgb),.035)}.data-table tbody tr:hover{background:rgba(var(--page-accent-rgb),.12)}
.primary-button,.success-button,.job-calculator-button{box-shadow:0 6px 14px rgba(20,22,25,.17)}.secondary-button,.ghost-button{background-color:rgba(255,255,255,.94)}
.dashboard-page{gap:19px}.dashboard-welcome{border:1px solid rgba(237,28,36,.28);border-left:8px solid var(--brand-600);background:radial-gradient(circle at 90% 15%,rgba(244,183,64,.16),transparent 18rem),linear-gradient(118deg,#fffcfb 0%,#fdedec 54%,#f3f0f2 100%);box-shadow:0 10px 30px rgba(15,17,20,.1)}
.dashboard-welcome-copy h2{color:#241416!important;text-shadow:none!important}.dashboard-welcome-copy p{color:#5c4b4c!important}.dashboard-welcome .date-chip{color:#8a1216;background:#fbe1e0;border-color:#f0b8b6}.dashboard-hero-button.secondary{color:#241416!important;background:#fff!important;border-color:#d9c2c1!important}.dashboard-hero-button.secondary:hover{background:#fdedec!important}
.dashboard-shortcut-grid,.dashboard-kpi-grid,.dashboard-overview-grid,.dashboard-work-grid,.dashboard-bottom-grid{padding:11px;border:1px solid rgba(15,17,20,.1);border-radius:20px;background:rgba(255,255,255,.28);box-shadow:inset 0 1px rgba(255,255,255,.5)}.dashboard-shortcut{border-width:1px;box-shadow:0 5px 14px rgba(15,17,20,.07)}.dashboard-kpi-card,.dashboard-focus-card,.workflow-count,.dashboard-quick-app,.dashboard-activity-item{border-color:var(--line-strong);box-shadow:0 5px 15px rgba(15,17,20,.075)}.dashboard-kpi-card{background:linear-gradient(135deg,#fff 48%,var(--metric-tint,var(--brand-50)))}.dashboard-panel.panel-sales{border-top-color:#188757}.dashboard-panel.panel-action-center{border-top-color:#c47d1d}.dashboard-panel.panel-priority-jobs{border-top-color:#3d72ad}.dashboard-panel.panel-client-followups{border-top-color:#7d55aa}.dashboard-panel.panel-quick-launch{border-top-color:#1d8c79}.dashboard-panel.panel-recent-activity{border-top-color:#b16a22}
body[data-current-page="clients"] .panel{border-top-color:#3a6db2}body[data-current-page="clients"] .data-table tbody tr{border-left:4px solid transparent}body[data-current-page="clients"] .data-table tbody tr:hover{border-left-color:#4e79b5}
.jobs-page-shell{border:1px solid rgba(190,112,66,.24);border-radius:20px;background:rgba(255,255,255,.28);box-shadow:inset 0 1px rgba(255,255,255,.55)}.jobs-page-shell>.panel{border-top-color:#ce641f}.job-month-groups{background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.08))}.job-month-group{border-color:#b7ccc2;background:rgba(255,255,255,.8);box-shadow:0 10px 26px rgba(15,17,20,.08)}.job-month-header{border-bottom-color:#bfcfc7;box-shadow:inset 0 -1px rgba(255,255,255,.8)}.job-month-list{background:linear-gradient(180deg,rgba(242,247,244,.88),rgba(255,255,255,.96))}.job-work-card{border-color:#b8cdc3;background:linear-gradient(110deg,rgba(255,255,255,.995) 72%,rgba(53,112,174,.065)),#fff;box-shadow:0 9px 24px rgba(15,17,20,.085)}.job-work-card.overdue{background:linear-gradient(110deg,#fff 69%,#fff0ed)}.job-work-card.due-today{background:linear-gradient(110deg,#fff 69%,#fff4e5)}.job-work-card:hover{border-color:rgba(var(--page-accent-rgb),.55);box-shadow:0 14px 34px rgba(15,17,20,.13)}.job-card-facts{background:linear-gradient(120deg,#f5faf7,#f3f7fb)}
body[data-current-page="catalog"] .panel{border-top-color:#7352a9}.product-card,.catalog-selection-card{background:linear-gradient(145deg,#fff 58%,rgba(112,78,169,.075))}.product-card:nth-child(3n+2){background:linear-gradient(145deg,#fff 58%,rgba(32,132,91,.08))}.product-card:nth-child(3n){background:linear-gradient(145deg,#fff 58%,rgba(194,121,30,.08))}
body[data-current-page="metrics"] .panel:nth-of-type(3n+1){border-top-color:#20875e}body[data-current-page="metrics"] .panel:nth-of-type(3n+2){border-top-color:#7652aa}body[data-current-page="metrics"] .panel:nth-of-type(3n){border-top-color:#c47a20}
body[data-current-page="apps"] .app-card:nth-child(4n+1){border-top:4px solid #1c8b73;background:linear-gradient(145deg,#fff 58%,#e7f6f1)}body[data-current-page="apps"] .app-card:nth-child(4n+2){border-top:4px solid #4f79b4;background:linear-gradient(145deg,#fff 58%,#eaf1fa)}body[data-current-page="apps"] .app-card:nth-child(4n+3){border-top:4px solid #b56d20;background:linear-gradient(145deg,#fff 58%,#fff1e1)}body[data-current-page="apps"] .app-card:nth-child(4n){border-top:4px solid #7753aa;background:linear-gradient(145deg,#fff 58%,#f0eafa)}
.settings-layout,.tool-layout{padding:10px;border:1px solid rgba(121,155,138,.25);border-radius:19px;background:rgba(255,255,255,.27)}.settings-stack .panel:nth-child(4n+1){border-top-color:#4c7461}.settings-stack .panel:nth-child(4n+2){border-top-color:#4774aa}.settings-stack .panel:nth-child(4n+3){border-top-color:#a66c2b}.settings-stack .panel:nth-child(4n){border-top-color:#7655a4}
body[data-current-page="furniture-calculator"] .tool-layout>.panel:first-child{border-top-color:#18875a}body[data-current-page="furniture-calculator"] .tool-layout>.panel:last-child{border-top-color:#c2691e}body[data-current-page="rate-estimator"] .tool-layout>.panel:first-child{border-top-color:#3f72af}body[data-current-page="rate-estimator"] .tool-layout>.panel:last-child{border-top-color:#168a72}.result-table thead th{background:linear-gradient(180deg,rgba(var(--page-accent-rgb),.18),rgba(var(--page-accent-rgb),.08))}.result-table tbody tr:nth-child(even){background:rgba(var(--page-secondary-rgb),.04)}
.modal-backdrop,.drawer-scrim{background:rgba(5,25,17,.72);backdrop-filter:blur(7px)}.modal,.drawer{border-color:#9fbcaf;box-shadow:0 30px 80px rgba(5,30,21,.34)}.modal-header,.drawer-header{border-bottom-color:#bdcec5;background:linear-gradient(105deg,rgba(var(--page-accent-rgb),.15),rgba(var(--page-secondary-rgb),.08),#fff 72%)}.modal-body{background:radial-gradient(circle at 8% 0%,rgba(var(--page-accent-rgb),.11),transparent 24rem),linear-gradient(145deg,#e5f1ea,#f4ede1 54%,#e8f0f6)}.quote-workspace-drawer .drawer-body,.job-workspace-maximized .drawer-body{background:radial-gradient(circle at 9% 0%,rgba(31,133,91,.16),transparent 28rem),radial-gradient(circle at 95% 4%,rgba(48,104,178,.15),transparent 27rem),linear-gradient(145deg,#deeee5,#f3e8dc 54%,#e2edf5)}.quote-workspace-hero{border:1px solid rgba(31,131,88,.52);background:radial-gradient(circle at 90% 10%,rgba(244,190,73,.2),transparent 18rem),linear-gradient(115deg,#0d533b,#176b4e 60%,#1f7556);box-shadow:0 12px 30px rgba(11,70,48,.22)}.quote-workspace-toolbar{border-color:#afc8bc;background:linear-gradient(115deg,rgba(255,255,255,.99),rgba(45,107,176,.075),rgba(202,119,29,.07))}.quote-toolbar-build{background:#ebf7f0;border-color:#b9dbc8}.quote-toolbar-tools{background:#eaf2fb;border-color:#bbcee3}.quote-toolbar-more{background:#fff3e5;border-color:#e4c9a6}.job-workspace-view-controls{border-color:#b7cbd1;background:linear-gradient(105deg,#eef7f3,#edf3fb 54%,#fff5e8)}
.job-essential-work-grid{padding:9px;border:1px solid rgba(190,91,34,.24);border-radius:17px;background:rgba(255,255,255,.34)}.section-card{border-width:1px;border-left-width:7px}.section-due{border-left-color:#d43b2f;background:linear-gradient(115deg,#fff0ed,#fff 68%)}.section-important-tasks{border-left-color:#c47a1d;background:linear-gradient(115deg,#fff5e8,#fff 68%)}.section-quote{border-left-color:#21765a;background:linear-gradient(115deg,#edf9f3,#fff 64%)}.section-workflow{border-left-color:#7453aa;background:linear-gradient(115deg,#f3edfb,#fff 66%)}.section-tasks{border-left-color:#3f73af;background:linear-gradient(115deg,#edf5fd,#fff 66%)}.section-calls{border-left-color:#168978;background:linear-gradient(115deg,#eaf8f5,#fff 66%)}.section-summary{border-left-color:#26755a;background:linear-gradient(115deg,#eef8f3,#fff 68%)}.section-customer{border-left-color:#3f72ad;background:linear-gradient(115deg,#edf4fc,#fff 68%)}.section-progress{border-left-color:#c4443b;background:linear-gradient(115deg,#fff0ef,#fff 68%)}.section-priority{border-left-color:#c2771d;background:linear-gradient(115deg,#fff5e7,#fff 68%)}.section-notes{border-left-color:#9b7b1f;background:linear-gradient(115deg,#fff9df,#fff 68%)}.section-history{border-left-color:#6f56a4;background:linear-gradient(115deg,#f1ecf9,#fff 68%)}.job-collapsible-section.is-collapsed{background:rgba(255,255,255,.94)}.job-collapsible-section.is-collapsed:hover{background:linear-gradient(110deg,rgba(var(--page-accent-rgb),.08),#fff)}.quote-line-table thead th{background:linear-gradient(180deg,#dcefe6,#edf6f1)}.quote-line-table tbody tr:nth-child(even){background:rgba(47,106,174,.035)}.quote-total-panel{border-color:#a9c9b9;background:linear-gradient(145deg,#e7f5ed,#fff)}.quote-freight-helper{border-color:#aac4df;background:linear-gradient(145deg,#eaf3fd,#fff)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(var(--page-secondary-rgb),.55);outline-offset:2px}
@media(max-width:980px){.dashboard-shortcut-grid,.dashboard-kpi-grid,.dashboard-overview-grid,.dashboard-work-grid,.dashboard-bottom-grid,.settings-layout,.tool-layout{padding:7px;border-radius:15px}.page-intro{border-left-width:5px}}
@media(max-width:620px){.dashboard-shortcut-grid,.dashboard-kpi-grid,.dashboard-overview-grid,.dashboard-work-grid,.dashboard-bottom-grid,.settings-layout,.tool-layout,.jobs-page-shell{padding:5px;border-radius:12px}.panel{border-top-width:2px}.section-card{border-left-width:5px}}

/* Version 19 — Create Quote page, saved freight cost visibility and larger guided roadmap */
.quote-freight-helper {
  grid-template-columns: minmax(280px, 1fr) minmax(260px, .78fr);
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #eef7ff, #ffffff 74%);
}
.quote-freight-helper.has-saved-rate {
  border-color: #92bfa9;
  background: linear-gradient(135deg, #eaf8f1 0%, #eef7ff 52%, #ffffff 100%);
}
.quote-freight-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
}
.quote-freight-copy strong { color: #174a7e; font-size: 13px; font-weight: 950; }
.quote-freight-copy span { grid-column: 1; color: #405b73; font-size: 10.5px; line-height: 1.55; }
.quote-freight-copy button { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 230px; white-space: normal; }
.quote-freight-status {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid #b8d8c7;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 5px 14px rgba(26, 73, 52, .06);
}
.quote-freight-status span {
  color: #28624a;
  font-size: 8.5px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.quote-freight-status strong {
  color: #0f4732;
  font-size: clamp(18px, 1.3vw, 24px);
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.08;
}
.quote-freight-status b {
  color: #174a7e;
  font-size: 13px;
  font-weight: 950;
}
.quote-freight-status small {
  color: #51635b;
  font-size: 10px;
  line-height: 1.45;
}
.quote-freight-status.empty {
  border-color: #bad3e7;
  background: linear-gradient(135deg, #f7fbff, #fff);
}
.quote-freight-status.empty strong { color: #1a5487; font-size: 16px; }
.quote-freight-status.has-rate {
  border-color: #8fc5a8;
  background: linear-gradient(135deg, #f1fbf6, #ffffff);
}
.quote-freight-status .small-button { justify-self: start; margin-top: 4px; }
.quote-freight-fact { border-color: #9ecab5 !important; background: #effaf5 !important; }
.quote-freight-fact strong { color: #0f5b3d !important; }
.quote-freight-fact.empty { border-color: #c9ddea !important; background: #f3f9ff !important; }
.quote-freight-fact.empty strong { color: #436173 !important; }
.freight-save-context {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 13px 15px;
  border: 1px solid #9fc7b4;
  border-left: 5px solid #1d684a;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #eaf8f1, #ffffff);
}
.freight-save-context span {
  color: #207051;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.freight-save-context strong { color: #10281e; font-size: 15px; font-weight: 950; }
.freight-save-context small { color: #53665d; font-size: 10.5px; line-height: 1.45; }

.sales-roadmap-section > .job-detail-card-header p {
  max-width: 880px;
  font-size: 11px;
  line-height: 1.55;
}
.sales-roadmap-shell { gap: 18px; }
.sales-roadmap-stagebar {
  gap: 10px;
  padding: 14px;
  border-radius: 15px;
}
.sales-roadmap-stage {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  min-height: 56px;
  padding: 10px 11px;
  border-radius: 12px;
}
.sales-roadmap-stage span {
  width: 33px;
  height: 33px;
  font-size: 11px;
}
.sales-roadmap-stage strong {
  font-size: 10.5px;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.sales-roadmap-current {
  gap: 13px;
  padding: 22px 24px;
  border-left-width: 8px;
  border-radius: 0 16px 16px 0;
}
.sales-roadmap-current-top span { font-size: 10px; }
.sales-roadmap-current h4 {
  margin-top: 6px;
  font-size: clamp(20px, 1.35vw, 25px);
  line-height: 1.18;
}
.sales-roadmap-current > p {
  max-width: 1020px;
  font-size: 13px;
  line-height: 1.6;
}
.sales-roadmap-due {
  min-width: 165px;
  padding: 12px 13px;
  border-radius: 12px;
}
.sales-roadmap-due span { font-size: 8.5px; }
.sales-roadmap-due strong { font-size: 11px; }
.sales-roadmap-stats { gap: 8px; }
.roadmap-stat { padding: 6px 10px; font-size: 9.5px; }
.sales-roadmap-choice-grid {
  gap: 12px;
}
.sales-roadmap-choice {
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  gap: 14px;
  min-height: 98px;
  padding: 16px;
  border-radius: 15px;
}
.sales-roadmap-choice-check {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 17px;
}
.sales-roadmap-choice-copy strong {
  font-size: 13px;
  line-height: 1.25;
}
.sales-roadmap-choice-copy small {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.5;
}
.sales-roadmap-choice-arrow { font-size: 21px; }
.sales-roadmap-tip {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 15px;
  border-radius: 12px;
}
.sales-roadmap-tip > span { width: 34px; height: 34px; font-size: 13px; }
.sales-roadmap-tip strong { font-size: 11px; }
.sales-roadmap-tip p { font-size: 10px; }
.sales-roadmap-history summary { padding: 12px 15px; font-size: 10.5px; }
.sales-roadmap-history summary b { font-size: 9.5px; }
.sales-roadmap-history-list { padding: 10px 15px 14px; }
.sales-roadmap-history-item { grid-template-columns: 15px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
.sales-roadmap-history-item strong { font-size: 10.5px; }
.sales-roadmap-history-item small { font-size: 9.5px; }
.sales-roadmap-final {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  padding: 19px;
}
.sales-roadmap-final > span { width: 52px; height: 52px; font-size: 22px; }
.sales-roadmap-final strong { font-size: 15px; }
.sales-roadmap-final small { font-size: 11px; }
.roadmap-back-button { min-height: 36px; padding: 8px 12px; font-size: 10px; }

@media (max-width: 1120px) {
  .quote-freight-helper { grid-template-columns: 1fr; }
  .quote-freight-copy { grid-template-columns: 1fr; }
  .quote-freight-copy span,
  .quote-freight-copy button { grid-column: 1; grid-row: auto; }
  .quote-freight-copy button { max-width: none; width: 100%; }
}
@media (max-width: 900px) {
  .sales-roadmap-stagebar { grid-template-columns: 1fr; }
  .sales-roadmap-stage { grid-template-columns: 34px minmax(0,1fr); min-height: 52px; }
  .sales-roadmap-choice-grid { grid-template-columns: 1fr; }
  .sales-roadmap-current-top { display: grid; }
  .sales-roadmap-due { min-width: 0; text-align: left; }
}
@media (max-width: 620px) {
  .sales-roadmap-current { padding: 16px; }
  .sales-roadmap-current h4 { font-size: 18px; }
  .sales-roadmap-choice { grid-template-columns: 40px minmax(0,1fr) 20px; min-height: 88px; padding: 13px; }
  .sales-roadmap-choice-check { width: 38px; height: 38px; }
}


/* Version 19: simplified Create Quote page */
body[data-current-page="create-quote"] { --page-accent-rgb: 237, 28, 36; --page-secondary-rgb: 53, 106, 181; }
body[data-current-page="create-quote"] .page-container { max-width: 1760px; }
.nav-item-create { margin-bottom: 12px; background: linear-gradient(120deg, rgba(85,207,145,.23), rgba(227,174,74,.19)); color:#fff; border:1px solid rgba(255,255,255,.10); }
.nav-item-create .nav-icon { background: rgba(255,255,255,.12); border-radius:8px; }
.nav-item-create.active { background: linear-gradient(120deg, rgba(85,207,145,.34), rgba(227,174,74,.25)); box-shadow: inset 3px 0 #e3ae4a; }
.create-quote-page { --quote-line:#d5e0da; }
.create-quote-intro { align-items:center; }
.quote-mode-chip { display:inline-flex; margin-bottom:8px; padding:7px 11px; border-radius:999px; background:#dff6eb; color:#0e5a40; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.create-quote-sheet { display:flex; flex-direction:column; gap:18px; }
.estimate-card { border:1px solid #c8d6cf; border-radius:18px; background:#fff; box-shadow:0 14px 38px rgba(13,15,18,.12); overflow:hidden; }
.create-quote-header-card { padding:0; }
.estimate-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 32px; border-bottom:1px solid #dfe7e3; background:#fff; color:#0f6d95; font-size:16px; letter-spacing:.08em; }
.estimate-title-row span { color:#17221d; font-size:13px; letter-spacing:0; }
.create-quote-customer-row { display:flex; align-items:flex-end; gap:12px; padding:20px 32px 8px; background:#f4f6f9; }
.create-quote-customer-row .field { width:min(280px, 100%); }
.create-quote-form-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 18px; padding:16px 32px; background:#f4f6f9; }
.create-quote-form-grid.three-cols { grid-template-columns: repeat(3,minmax(0,1fr)); padding-top:8px; padding-bottom:28px; }
.create-quote-form-grid .full { grid-column: 1 / -1; }
.quote-placeholder-bars { grid-column:span 2; align-self:center; display:grid; gap:9px; max-width:360px; }
.quote-placeholder-bars span { height:9px; border-radius:999px; background:#e0e8ed; }
.quote-placeholder-bars span:nth-child(1) { width:100%; }
.quote-placeholder-bars span:nth-child(2) { width:84%; }
.quote-placeholder-bars span:nth-child(3) { width:64%; }
.estimate-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 26px; border-bottom:1px solid var(--quote-line); background:linear-gradient(135deg,#f0faf5,#f5fbff); }
.estimate-section-heading h3 { margin:0; font-size:19px; letter-spacing:-.025em; }
.estimate-section-heading p { margin:3px 0 0; color:#63736b; font-size:12px; }
.create-quote-table-wrap { overflow:auto; padding:0 26px 10px; background:#fff; }
.create-quote-table { width:100%; min-width:1120px; border-collapse:collapse; }
.create-quote-table th { padding:12px 8px; border-bottom:1px solid #cdd9d3; color:#4d6158; background:#f7fbf8; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.create-quote-table td { padding:9px 8px; border-bottom:1px solid #e1e9e5; vertical-align:top; }
.create-quote-table input, .create-quote-table select { width:100%; height:34px; padding:6px 8px; border:1px solid #c8d6cf; border-radius:6px; background:#fff; font-size:12px; }
.create-quote-table input:focus, .create-quote-table select:focus { border-color:#25845f; box-shadow:0 0 0 3px rgba(37,132,95,.12); outline:0; }
.quote-line-grip { width:28px; color:#7a8b83; text-align:center; }
.quote-line-number { width:34px; color:#30433a; font-weight:800; }
.quote-product-cell { min-width:260px; }
.quote-product-cell small { display:block; margin-top:5px; color:#738179; font-size:10px; line-height:1.25; }
.number-input { text-align:right; }
.quote-line-amount { min-width:110px; color:#0b3f2e; font-weight:900; text-align:right; white-space:nowrap; }
.quote-line-remove { width:42px; text-align:right; }
.create-quote-lower-grid { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:22px; padding:18px 26px 26px; }
.quote-notes-fields { display:grid; grid-template-columns:minmax(0,360px) minmax(0,360px); gap:18px; align-items:start; }
.quote-notes-fields textarea { min-height:92px; }
.create-quote-total-box { align-self:start; display:grid; gap:8px; padding:18px; border:1px solid #c7d9d0; border-radius:14px; background:linear-gradient(145deg,#ffffff,#f0faf5); }
.create-quote-total-box > div { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; min-height:34px; border-bottom:1px solid #dfe8e3; }
.create-quote-total-box span { color:#31443b; font-weight:800; }
.create-quote-total-box label { display:inline-flex; align-items:center; gap:4px; color:#66746d; font-size:12px; }
.create-quote-total-box input { width:82px; height:30px; padding:5px 7px; border:1px solid #c8d6cf; border-radius:6px; text-align:right; }
.create-quote-total-box strong { min-width:96px; text-align:right; }
.create-quote-total-box .grand-total { grid-template-columns:1fr auto; padding-top:12px; border-top:3px solid #153f2f; border-bottom:0; }
.create-quote-total-box .grand-total strong { font-size:24px; color:#0c4e38; }
.create-quote-bottom-bar { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding:14px 18px; border:1px solid #c7d9d0; border-radius:16px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); box-shadow:0 -8px 28px rgba(13,15,18,.12); }
.create-quote-bottom-bar > div { display:flex; gap:9px; }
body[data-current-page="create-quote"] .estimate-card input,
body[data-current-page="create-quote"] .estimate-card select,
body[data-current-page="create-quote"] .estimate-card textarea { border-color:#bdccc5; }
body[data-current-page="create-quote"] .estimate-card label { color:#40574c; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.045em; }
@media (max-width: 1180px) { .create-quote-form-grid, .create-quote-form-grid.three-cols { grid-template-columns: repeat(2,minmax(0,1fr)); } .quote-placeholder-bars { grid-column: 1 / -1; } .create-quote-lower-grid { grid-template-columns:1fr; } .quote-notes-fields { grid-template-columns:1fr; } }
@media (max-width: 720px) { .create-quote-customer-row, .create-quote-intro, .create-quote-bottom-bar { flex-direction:column; align-items:stretch; } .create-quote-form-grid, .create-quote-form-grid.three-cols { grid-template-columns:1fr; padding-left:18px; padding-right:18px; } .estimate-title-row, .estimate-section-heading { padding-left:18px; padding-right:18px; } .create-quote-table-wrap, .create-quote-lower-grid { padding-left:12px; padding-right:12px; } .create-quote-bottom-bar > div { flex-direction:column; } }


/* Version 22 — quote-only job workspace */
.quote-only-drawer .drawer-body { background: linear-gradient(135deg,#f4fbf7 0%,#eef6ff 50%,#fff7e9 100%); }
.drawer.drawer-extra-wide.quote-workspace-drawer.quote-only-drawer.job-workspace-compact {
  inset: 28px 32px 28px auto;
  width: min(1080px, calc(100vw - 64px));
  max-width: none;
  height: auto;
  border: 1px solid rgba(41,87,67,.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(15,17,20,.32);
}
.quote-only-workspace { display: grid; gap: 14px; }
.quote-only-topline,
.quote-detail-return-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid #b9d8ca; border-radius: 15px;
  background: linear-gradient(135deg,#fff,#edf8f2); box-shadow: 0 6px 16px rgba(22,70,50,.06);
}
.quote-only-topline h3 { margin: 3px 0 0; color: #10291f; font-size: 20px; font-weight: 950; }
.quote-only-topline p, .quote-detail-return-bar span { margin: 4px 0 0; color: #5a6b63; font-size: 11px; line-height: 1.45; }
.quote-detail-return-bar span, .quote-detail-return-bar strong { display: block; }
.quote-detail-return-bar span { color: #6b5640; font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.quote-detail-return-bar strong { color: #1a3529; font-size: 13px; }
.quote-only-tools-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px; border: 1px solid #c5d9d0; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(17,57,41,.06); }
.quote-only-tools-row button { min-height: 36px; }
.quote-only-tools-row .job-calculator-button, .quote-only-tool-card .job-calculator-button { appearance: none; min-height: 36px; padding: 7px 11px; border: 1px solid var(--brand-900); border-radius: 8px; background: var(--brand-900); color: #fff; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.quote-only-tools-row .job-freight-button, .quote-only-tool-card .job-freight-button { appearance: none; min-height: 36px; padding: 7px 11px; border: 1px solid #1f5fa7; border-radius: 8px; background: #1f5fa7; color: #fff; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.quote-only-main-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,350px); gap: 16px; align-items: start; }
.quote-only-document-card { overflow: hidden; border: 1px solid #c7d8cf; border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(16,18,21,.09); }
.quote-only-document-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid #d9e5df; background: linear-gradient(135deg,#fff,#f7fbf9); }
.quote-only-document-header span, .quote-only-hidden-amount span, .quote-only-fact span { color: #426555; font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.quote-only-document-header h2 { margin: 4px 0 4px; color: #12382a; font-size: 25px; letter-spacing: -.03em; }
.quote-only-document-header p { margin: 2px 0 0; color: #617068; font-size: 11px; }
.quote-only-hidden-amount { min-width: 190px; padding: 13px 16px; border: 1px solid #c4d8cf; border-radius: 12px; background: #eef8f3; text-align: right; }
.quote-only-hidden-amount strong { display: block; margin-top: 4px; color: #093e2d; font-size: 23px; font-weight: 950; }
.quote-only-customer-row { padding: 12px 22px; border-bottom: 1px solid #dce6e1; background: #f8fbfa; }
.quote-only-customer-select { min-width: 220px; display: inline-flex; justify-content: space-between; gap: 16px; padding: 8px 11px; border: 1px solid #aebeb7; border-radius: 4px; background: #fff; color: #233a30; font: inherit; font-size: 11px; cursor: pointer; }
.quote-only-details-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px 0; }
.quote-only-details-header h3 { margin: 0; color: #15281f; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.quote-only-date-grid, .quote-only-reference-grid { display: grid; gap: 10px; padding: 14px 22px; border-bottom: 1px solid #dce6e1; }
.quote-only-date-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.quote-only-date-grid { border-bottom: 0; padding-bottom: 4px; }
.quote-only-reference-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.quote-only-fact { min-width: 0; padding: 10px; border: 1px solid #dde8e3; border-radius: 8px; background: #fff; }
.quote-only-fact strong, .quote-only-fact small { display: block; }
.quote-only-fact strong { margin-top: 4px; min-height: 15px; color: #15281f; font-size: 11px; overflow-wrap: anywhere; }
.quote-only-fact small { margin-top: 2px; color: #718078; font-size: 8.5px; }
.quote-only-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 22px; border-bottom: 1px solid #e1ebe6; }
.quote-only-section-title h3 { margin: 0; font-size: 16px; }
.quote-only-table-wrap { overflow-x: auto; }
.quote-only-table { width: 100%; min-width: 950px; border-collapse: collapse; }
.quote-only-table th { padding: 10px 9px; border-bottom: 1px solid #d6e3dd; background: #eef6f2; color: #536a5f; font-size: 8px; font-weight: 950; text-align: left; text-transform: uppercase; }
.quote-only-table td { padding: 12px 9px; border-bottom: 1px solid #e5eee9; vertical-align: top; color: #24382f; font-size: 10px; }
.quote-only-number, .quote-only-line-number { text-align: right; white-space: nowrap; }
.quote-only-product { display: grid; gap: 3px; }
.quote-only-product strong { color: #13261e; font-size: 11px; font-weight: 950; }
.quote-only-product small { color: #6b786f; font-size: 8.5px; }
.quote-only-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; color: #5e6d65; }
.quote-only-bottom-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(230px,.55fr); gap: 12px; padding: 16px 22px 20px; background: #fbfdfc; }
.quote-only-note-panel { min-width: 0; }
.quote-only-note-panel h4 { margin: 0 0 7px; color: #243d32; font-size: 11px; }
.quote-only-textarea-look { min-height: 76px; padding: 10px; border: 1px solid #c6d1cc; border-radius: 8px; background: #fff; color: #334840; font-size: 10px; line-height: 1.5; }
.quote-only-note-panel.muted .quote-only-textarea-look { background: #f6f7f6; color: #66736c; }
.quote-only-total-panel { display: grid; align-content: center; gap: 7px; padding: 13px 15px; border: 1px solid #cbd9d2; border-radius: 10px; background: #fff; }
.quote-only-total-panel > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.quote-only-total-panel span { color: #596860; font-size: 9px; }
.quote-only-total-panel strong { font-size: 11px; white-space: nowrap; }
.quote-only-grand-total { margin-top: 2px; padding-top: 9px; border-top: 2px solid var(--brand-900); }
.quote-only-grand-total span { color: var(--ink); font-weight: 900; }
.quote-only-grand-total strong { color: var(--brand-900); font-size: 17px; font-weight: 950; }
.quote-only-side-panel { display: grid; gap: 12px; position: sticky; top: 64px; }
.quote-only-tool-card { padding: 14px; border: 1px solid var(--side-border,#d3ded8); border-left: 5px solid var(--side-color,#12603f); border-radius: 13px; background: var(--side-bg,#fff); box-shadow: 0 5px 14px rgba(16,18,21,.055); }
.quote-only-tool-card h3 { margin: 0 0 4px; color: #15281f; font-size: 15px; }
.quote-only-tool-card p { margin: 0 0 11px; color: #5d6b63; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.quote-only-tool-card .full-button { width: 100%; justify-content: center; }
.quote-only-tab-header, .quote-only-card-heading { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.quote-only-tab-header span.active { padding: 5px 9px; border-radius: 999px; background: #e9e3f8; color: #5a478f; font-size: 9px; font-weight: 950; }
.quote-only-card-heading > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--side-color,#12603f); color: #fff; font-weight: 950; }
.quote-only-card-body p { margin: 10px 0 0; }
.quote-only-notes-card { --side-color:#6b54ad; --side-bg:#fbf9ff; --side-border:#d2c7ee; }
.quote-only-furniture-card { --side-color:#0d5a40; --side-bg:#f0fbf5; --side-border:#b8dbc9; }
.quote-only-freight-card { --side-color:#1f5fa7; --side-bg:#eef6ff; --side-border:#bad2ee; }
.quote-only-output-card { --side-color:#c66b10; --side-bg:#fff7ea; --side-border:#edd0a5; }
.quote-only-freight-cost { margin: 9px 0 11px; padding: 10px; border: 1px solid #bdd5ee; border-radius: 9px; background: #fff; }
.quote-only-freight-cost span, .quote-only-freight-cost strong { display: block; }
.quote-only-freight-cost span { color: #416780; font-size: 8px; font-weight: 950; text-transform: uppercase; }
.quote-only-freight-cost strong { margin-top: 4px; color: #174a7e; font-size: 14px; font-weight: 950; }
.button-row.vertical { flex-direction: column; align-items: stretch; }
@media (max-width: 1180px) {
  .quote-only-main-grid { grid-template-columns: 1fr; }
  .quote-only-side-panel { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quote-only-date-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quote-only-reference-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quote-only-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .drawer.drawer-extra-wide.quote-workspace-drawer.quote-only-drawer.job-workspace-compact { inset:0; width:auto; border-radius:0; }
  .quote-only-topline, .quote-detail-return-bar, .quote-only-document-header { flex-direction: column; align-items: stretch; }
  .quote-only-side-panel, .quote-only-date-grid, .quote-only-reference-grid { grid-template-columns: 1fr; }
  .quote-only-hidden-amount { text-align: left; }
}


/* v20 simplified quote-first workspace */
.drawer.drawer-extra-wide.quote-focus-drawer.job-workspace-maximized{inset:8px;width:auto;max-width:none;border-radius:18px;overflow:hidden}.drawer.drawer-extra-wide.quote-focus-drawer.quote-focus-compact{inset:22px 24px 22px auto;width:min(1060px,calc(100vw - 64px));max-width:none;border-radius:18px;overflow:hidden}.quote-focus-drawer .drawer-header{background:linear-gradient(120deg,#fff,#eff8f4 45%,#edf4ff);border-bottom:1px solid #b6d0c2}.quote-focus-drawer .drawer-body{padding:16px 18px 24px;background:radial-gradient(circle at 9% 0%,rgba(26,130,88,.17),transparent 28rem),radial-gradient(circle at 92% 6%,rgba(45,105,185,.14),transparent 28rem),linear-gradient(145deg,#dceee5,#f5ebdb 52%,#dfebf6)}.quote-focus-shell{display:grid;gap:14px}.quote-focus-command-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #adcabd;border-radius:16px;background:linear-gradient(110deg,#ffffff,#eff8f4 55%,#f2f6ff);box-shadow:0 12px 30px rgba(10,56,38,.13)}.quote-focus-command-strip span,.quote-focus-action-bar span,.quote-focus-card header span,.quote-focus-tool-card span{display:block;color:#20614a;font-size:9px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.quote-focus-command-strip strong{display:block;margin-top:3px;font-size:22px;line-height:1.12}.quote-focus-command-strip small{display:block;margin-top:3px;color:#49695a;font-size:11px;font-weight:750}.quote-focus-size-switch{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.quote-focus-size-switch button{min-height:34px;padding:7px 11px;border:1px solid #bfd2ca;border-radius:10px;background:#fff;color:#173a2c;font-size:10px;font-weight:900;cursor:pointer}.quote-focus-size-switch button.active{border-color:#0f5c43;background:#0f5c43;color:#fff}.quote-focus-action-bar{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px}.quote-focus-action-bar section{padding:12px;border:1px solid #b8d2c6;border-radius:14px;background:rgba(255,255,255,.91);box-shadow:0 9px 20px rgba(14,55,39,.08)}.quote-focus-action-bar section:nth-child(2){border-color:#abc6e2;background:#eef6ff}.quote-focus-action-bar section:nth-child(3){border-color:#e5c697;background:#fff6e8}.quote-focus-action-bar section>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}.quote-focus-action-bar button{min-height:34px}.quote-focus-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);gap:16px;align-items:start}.quote-focus-paper-column,.quote-focus-side-panel{min-width:0;display:grid;gap:14px}.quote-focus-side-panel{position:sticky;top:8px}.quote-paper-card{background:#fff;border:1px solid #b9c8c2;border-radius:15px;box-shadow:0 16px 40px rgba(10,39,28,.16);overflow:hidden}.quote-paper-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 26px;border-bottom:1px solid #e0e5e2;background:linear-gradient(180deg,#fff,#fbfdfc)}.quote-paper-brand{display:flex;align-items:center;gap:12px}.quote-paper-brand>span{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#0a6043,#d4b25d);color:#fff;font-size:15px;font-weight:950}.quote-paper-brand strong{display:block;font-size:18px}.quote-paper-brand small,.quote-paper-title span,.quote-paper-customer-select span,.quote-paper-date-grid span,.quote-paper-reference-grid span{display:block;color:#556b60;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.quote-paper-title{text-align:right}.quote-paper-title span{color:#0b67b3}.quote-paper-title strong{display:block;margin-top:4px;font-size:20px}.quote-paper-customer-block{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1fr);gap:18px;padding:22px 26px;background:#f3f6f9}.quote-paper-customer-select{min-height:70px;padding:12px;border:1px solid #bdc8cf;border-radius:9px;background:#fff}.quote-paper-customer-select strong{display:block;margin-top:5px;font-size:15px}.quote-paper-customer-select small{display:block;margin-top:4px;color:#62756c;font-size:10px}.quote-paper-date-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.quote-paper-date-grid>div,.quote-paper-reference-grid>div{min-height:48px;padding:9px 10px;border:1px solid #bbc8c3;border-radius:8px;background:#fff}.quote-paper-date-grid strong,.quote-paper-reference-grid strong{display:block;margin-top:5px;font-size:12px;min-height:14px}.quote-paper-reference-grid{display:grid;grid-template-columns:1.2fr 1.2fr 1.2fr .8fr .8fr;gap:10px;padding:16px 26px;border-top:1px solid #e0e5e2;background:#f9fbfa}.quote-paper-product-section{padding:20px 26px}.quote-paper-product-section h4{margin:0 0 10px;color:#152e24;font-size:14px}.quote-paper-table-wrap{overflow:auto;border:1px solid #ced8d3;border-radius:9px;background:#fff}.quote-paper-table{width:100%;border-collapse:collapse;min-width:760px}.quote-paper-table th{padding:10px 9px;border-bottom:1px solid #ced8d3;background:#eef5f1;color:#40594d;font-size:9px;text-transform:uppercase;letter-spacing:.05em;text-align:left}.quote-paper-table td{padding:12px 9px;border-bottom:1px solid #e3e9e6;vertical-align:top;font-size:11px}.quote-paper-table tbody tr:nth-child(even){background:#fbfdfc}.quote-paper-table td strong{display:block;font-size:12px}.quote-paper-table td small{display:block;margin-top:3px;color:#718079;font-size:9px}.quote-paper-row-num{width:36px;text-align:center;color:#6d7d75}.quote-paper-number{text-align:right;font-weight:850;white-space:nowrap}.quote-paper-tax{color:#5d6e66}.quote-paper-empty td{text-align:center;padding:32px!important}.quote-paper-empty span{display:block;margin-top:4px;color:#687a71}.quote-paper-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:18px;padding:20px 26px 26px;border-top:1px solid #d9e3de;background:#fafcfb}.quote-paper-notes-area label{display:block;margin-bottom:7px;color:#334f42;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}.quote-paper-notes-area div{min-height:94px;white-space:pre-wrap;padding:12px;border:1px solid #c5d1cb;border-radius:8px;background:#fff;color:#34483f;font-size:11px;line-height:1.5}.quote-paper-totals{align-self:start;display:grid;gap:8px;padding:15px;border:1px solid #b8cfc4;border-radius:10px;background:#fff}.quote-paper-totals>div{display:flex;justify-content:space-between;gap:12px;color:#344a40;font-size:11px}.quote-paper-grand{margin-top:4px;padding-top:11px;border-top:2px solid #174632}.quote-paper-grand strong{font-size:20px;color:#0a4e38}.quote-focus-card,.quote-focus-tool-card{border:1px solid #b7cbc1;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(12,46,33,.1);overflow:hidden}.quote-focus-card header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px;border-bottom:1px solid #d8e3de;background:#f6fbf8}.quote-notes-tab{border-left:7px solid #c09220}.quote-freight-tab{border-left:7px solid #246bad}.quote-focus-note-body{min-height:88px;padding:14px;white-space:pre-wrap;color:#30493d;font-size:12px;line-height:1.55;background:#fffdf2}.quote-focus-freight-status{padding:14px;background:#eef7ff}.quote-focus-freight-status strong{display:block;font-size:17px;color:#164f86}.quote-focus-freight-status span{display:block;margin-top:4px;color:#485f70;font-size:10px}.quote-focus-tool-grid{display:grid;gap:12px}.quote-focus-tool-card{display:grid;gap:12px;padding:14px}.quote-focus-tool-card p{margin:6px 0;color:#435f52;font-size:11px;line-height:1.45}.quote-focus-tool-card small{display:block;color:#536b60;font-size:10px;font-weight:800}.quote-focus-tool-card.furniture-tool{border-left:7px solid #16714f;background:linear-gradient(120deg,#eef9f3,#fff)}.quote-focus-tool-card.freight-tool{border-left:7px solid #2368aa;background:linear-gradient(120deg,#edf6ff,#fff)}.quote-focus-tool-card.quote-output-tool{border-left:7px solid #c27a1d;background:linear-gradient(120deg,#fff6e8,#fff)}.quote-focus-tool-card button{justify-self:start}.quote-focus-tool-card .job-calculator-button,.quote-focus-tool-card .job-freight-button,.quote-focus-action-bar .job-calculator-button,.quote-focus-action-bar .job-freight-button{appearance:none;border:0;border-radius:9px;color:#fff;font-size:10px;font-weight:950;cursor:pointer}.quote-focus-tool-card .job-calculator-button,.quote-focus-action-bar .job-calculator-button{background:#0e5e43}.quote-focus-tool-card .job-freight-button,.quote-focus-action-bar .job-freight-button{background:#1f61a8}.quote-next-action-teaser{border-left:7px solid #c54a36}.quote-next-action-teaser strong{display:block;padding:14px 14px 0;font-size:15px;color:#7f211b}.quote-next-action-teaser small,.quote-next-action-teaser p{display:block;margin:4px 14px;color:#4f6359;font-size:11px;line-height:1.45}.quote-focus-progress{display:flex;justify-content:space-between;gap:8px;margin:12px 14px 14px;padding-top:10px;border-top:1px solid #e0e8e4}.quote-focus-progress b{font-size:10px;color:#435f52}.quote-focus-compact .quote-focus-layout{grid-template-columns:1fr}.quote-focus-compact .quote-focus-side-panel{position:static;grid-template-columns:1fr 1fr}.quote-focus-compact .quote-focus-tool-grid{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.quote-focus-compact .quote-paper-customer-block,.quote-focus-compact .quote-paper-bottom{grid-template-columns:1fr}.quote-focus-compact .quote-paper-reference-grid{grid-template-columns:1fr 1fr}.job-action-center-drawer .drawer-header{background:linear-gradient(120deg,#fff8ed,#f3efff 58%,#eef8f3)}@media (max-width:1180px){.quote-focus-layout,.quote-focus-action-bar{grid-template-columns:1fr}.quote-focus-side-panel{position:static}.quote-focus-command-strip{align-items:flex-start;flex-direction:column}.quote-focus-size-switch{justify-content:flex-start}.quote-focus-compact .quote-focus-side-panel,.quote-focus-compact .quote-focus-tool-grid{grid-template-columns:1fr}}@media (max-width:720px){.drawer.drawer-extra-wide.quote-focus-drawer.quote-focus-compact,.drawer.drawer-extra-wide.quote-focus-drawer.job-workspace-maximized{inset:0;width:100%;border-radius:0}.quote-focus-drawer .drawer-body{padding:10px}.quote-paper-topbar,.quote-paper-customer-block,.quote-paper-reference-grid,.quote-paper-product-section,.quote-paper-bottom{padding-left:14px;padding-right:14px}.quote-paper-date-grid,.quote-paper-reference-grid{grid-template-columns:1fr}.quote-focus-action-bar section>div,.quote-focus-size-switch{width:100%}.quote-focus-action-bar button,.quote-focus-size-switch button{flex:1 1 100%;width:100%}}

/* Version 20 final polish — quote-first view keeps customer workflow hidden until Job actions is opened */
.quote-focus-drawer .drawer-body { background: radial-gradient(circle at 8% 6%, rgba(24,126,88,.18), transparent 30rem), radial-gradient(circle at 92% 4%, rgba(43,104,190,.14), transparent 28rem), linear-gradient(135deg,#e5f3eb 0%,#edf4ff 48%,#fff1dd 100%); }
.quote-focus-side-panel .quote-next-action-teaser { display: none !important; }
.quote-focus-tool-grid { grid-template-columns: 1fr; }
.quote-focus-tool-card strong { display:block; font-size:16px; color:#142b22; }
.quote-focus-tool-card button { min-height: 38px; }
.quote-focus-card header button, .quote-focus-tool-card button { font-weight: 950; }
.quote-focus-size-switch .primary-button, .quote-focus-size-switch button { box-shadow: 0 4px 12px rgba(15,76,55,.10); }
.job-action-center-drawer .quote-detail-return-bar { border-color:#d1b36e; background:linear-gradient(120deg,#fff8eb,#f6f0ff 55%,#eefaf4); }
@media (min-width: 1280px) { .quote-focus-layout { grid-template-columns: minmax(0,1.6fr) minmax(360px,.5fr); } }


/* Version 22 — quote small/full screen modes and visible quote notes */
.quote-window-controls .secondary-button.active {
  border-color: #0f5c43;
  background: #0f5c43;
  color: #fff;
  box-shadow: 0 6px 14px rgba(13,91,65,.18);
}
.quote-only-inline-notes {
  margin: 0 22px 16px;
  border: 1px solid #cfc2ea;
  border-left: 7px solid #7352b7;
  border-radius: 13px;
  background: linear-gradient(135deg,#fbf8ff,#fffdf5);
  overflow: hidden;
}
.quote-inline-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  background: #f2ecff;
  border-bottom: 1px solid #ddd2f1;
}
.quote-inline-notes-header span {
  display:block;
  color:#6c55a4;
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.quote-inline-notes-header h3 { margin: 4px 0 0; color:#23183e; font-size:16px; font-weight:950; }
.quote-inline-notes-body {
  min-height: 58px;
  padding: 14px 16px;
  color: #3f3850;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  background: #fff;
}
.quote-only-full-tool-tray { display: none; }
.quote-view-small.quote-only-drawer .quote-only-inline-notes { display: none; }
.quote-view-small.quote-only-drawer .quote-only-topline { background: linear-gradient(135deg,#fff,#edf8f2); }
.quote-view-small.quote-only-drawer .quote-only-main-grid { grid-template-columns: minmax(0,1fr) minmax(280px,350px); }
.quote-view-full.quote-only-drawer .drawer-header {
  min-height: 46px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #d7dce2;
}
.quote-view-full.quote-only-drawer .drawer-body { padding: 0; background: #f4f6f9 !important; }
.quote-view-full .quote-only-workspace { gap: 0; }
.quote-view-full .quote-only-topline {
  border: 0;
  border-bottom: 1px solid #d8dde3;
  border-radius: 0;
  padding: 12px 22px;
  background: #fff;
  box-shadow: none;
}
.quote-view-full .quote-mode-chip {
  display:inline-block;
  padding:4px 0 7px;
  border-bottom:3px solid #2ca24f;
  color:#0f5c43;
  background:transparent;
}
.quote-view-full .quote-only-topline h3 { font-size: 18px; }
.quote-view-full .quote-only-topline p { color:#51605a; }
.quote-full-info-banner {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin: 16px 18px 0;
  padding: 10px 12px;
  border:1px solid #1677d2;
  border-radius:4px;
  background:#f7fbff;
  color:#24475f;
  font-size:11px;
}
.quote-full-info-banner span { color:#1677d2; font-weight:950; }
.quote-full-info-banner p { margin:0; line-height:1.45; }
.quote-view-full .quote-only-tools-row {
  margin: 16px 18px 0;
  border-radius: 4px;
  border-color: #d2d9df;
  background: #fff;
  box-shadow: none;
}
.quote-view-full .quote-only-main-grid { grid-template-columns: minmax(0,1fr) minmax(310px,355px); gap: 18px; padding: 20px 18px 24px; }
.quote-view-full .quote-only-document-card { border-radius: 2px; border-color: #d5d9df; box-shadow: none; }
.quote-view-full .quote-only-document-header { padding: 26px 28px; background: #fff; }
.quote-view-full .quote-only-document-header span:first-child { color:#0067b1; font-size: 12px; }
.quote-view-full .quote-only-hidden-amount { border: 0; background: #fff; text-align: right; }
.quote-view-full .quote-only-hidden-amount span::after { content: " (hidden)"; text-transform:none; font-weight:700; }
.quote-view-full .quote-only-customer-row,
.quote-view-full .quote-only-date-grid,
.quote-view-full .quote-only-reference-grid { background: #f2f4f7; }
.quote-view-full .quote-only-date-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.quote-view-full .quote-only-reference-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.quote-view-full .quote-only-fact { border-radius: 2px; border-color: #b9c1ca; background: #fff; }
.quote-view-full .quote-only-section-title { background:#fff; }
.quote-view-full .quote-only-table th { background:#fff; border-top:1px solid #cdd4dc; }
.quote-view-full .quote-only-table td { border-bottom-color:#dce2e8; }
.quote-view-full .quote-only-bottom-grid { background:#fff; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(250px,.45fr); }
.quote-view-full .quote-only-side-panel { position: sticky; top: 18px; }
.quote-view-full .quote-only-side-panel .quote-only-notes-card { display:none; }
.quote-view-full .quote-only-full-tool-tray { display: none !important; }
.quote-view-full .quote-only-tool-card { border-radius: 8px; box-shadow: none; }
@media (max-width: 1180px) {
  .quote-view-full .quote-only-main-grid,
  .quote-view-small.quote-only-drawer .quote-only-main-grid { grid-template-columns: 1fr; }
  .quote-view-full .quote-only-side-panel { position: static; grid-template-columns: 1fr 1fr; }
  .quote-view-full .quote-only-full-tool-tray { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .quote-window-controls { width: 100%; }
  .quote-window-controls button { width: 100%; }
  .quote-view-full .quote-only-date-grid,
  .quote-view-full .quote-only-reference-grid { grid-template-columns: 1fr; }
  .quote-only-inline-notes { margin-left: 12px; margin-right: 12px; }
}

/* v22 quote editor refinements */
.quote-only-add-product-row{display:flex;align-items:center;gap:10px;margin:10px 0 0 0;padding:6px 0 0 0;color:#4d6358;font-size:12px}
.quote-only-add-product-link{border:0;background:#eef3f6;color:#063f31;border-radius:7px;padding:7px 12px;font-weight:950;box-shadow:none;cursor:pointer}
.quote-only-add-product-link:hover{background:#dff0e8}
.quote-only-fullscreen-mode .quote-only-add-product-row{margin-top:8px;padding-left:14px}
.quote-only-fullscreen-mode .quote-only-add-product-link{background:#edf1f5;border:1px solid #ccd6df;border-radius:4px;color:#1b2d24;font-size:12px;min-height:28px}
.quote-only-freight-instruction{margin:8px 0 10px;color:#31506d;font-size:12px;line-height:1.45}
.quote-only-freight-card .quote-only-freight-cost strong:empty::after{content:"Not saved yet"}
.quote-only-tools-row .secondary-button[data-action="edit-quote-details"]{display:none!important}
.quote-only-products-section .button-row .secondary-button[data-action="edit-quote-details"]{display:none!important}

/* v22 editable quote notes and add-product placement */
.quote-inline-notes-textarea{display:block;width:calc(100% - 28px);margin:14px;border:1px solid #d8cafa;border-radius:10px;min-height:96px;background:#fff;color:#1c2b24;font-size:13px;line-height:1.5;padding:12px;resize:vertical}
.quote-view-full .quote-only-add-product-row{margin-top:10px;padding-left:18px}
.quote-view-full .quote-only-add-product-link{background:#edf1f5;border:1px solid #c4ced8;border-radius:4px;color:#1b2d24;font-size:12px;min-height:28px}
.quote-view-full .quote-only-add-product-row span{color:#5d6b64}
.quote-only-tab-header .ghost-button[data-action="save-quote-notes-inline"],.quote-inline-notes-header .ghost-button[data-action="save-quote-notes-inline"]{background:#fff;color:#4c377b;border-color:#d8cafa}


/* BetterBuy v22 quote workflow cleanup */
.quote-view-small .quote-only-inline-notes { display: none; }
.quote-only-static-select { cursor: default; pointer-events: none; }
.quote-only-inline-notes.qnotes-card { margin: 0 32px 18px; border: 1px solid #dfd1fb; border-left: 7px solid #7651b4; border-radius: 12px; overflow: hidden; background: #fff; }
.quote-inline-notes-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #f3edff; border-bottom: 1px solid #dfd1fb; }
.quote-inline-notes-header span { display:block; color:#5b3f98; font-size:9px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.quote-inline-notes-header h3 { margin: 3px 0 0; color:#251c36; font-size: 18px; }
.quote-inline-notes-header p { margin: 4px 0 0; color:#675e76; font-size: 11px; }
.quote-inline-notes-input { min-height: 110px; margin-top: 12px; }
.quote-only-tab-header { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:14px 16px; background:#f3edff; border-bottom:1px solid #dfd1fb; }
.quote-only-tab-header .active { display:inline-flex; padding:5px 10px; border-radius:999px; background:#e7d9ff; color:#5b3f98; font-weight:950; font-size:10px; }
.quote-only-notes-card .qnotes-textarea { min-height: 150px; }
.quote-only-add-product-row { border-top: 1px dashed #cfdad4; }
.quote-only-add-product-link { display:inline-flex; align-items:center; gap:6px; }
.quote-only-freight-card .quote-only-freight-cost strong { color:#104b86; }
.quote-only-freight-card small { display:block; margin-top:10px; color:#23455f; line-height:1.45; }
.quote-view-full .quote-only-inline-notes.qnotes-card { display:block; }
.quote-view-full .quote-only-side-panel .quote-only-notes-card { display:none !important; }
.quote-view-full .quote-only-main-grid { grid-template-columns: minmax(0,1fr) minmax(310px,355px); }
@media (max-width: 1180px) {
  .quote-view-small .quote-only-inline-notes { display:block; margin: 0 14px 16px; }
  .quote-view-small .quote-only-side-panel .quote-only-notes-card { display:none; }
  .quote-view-full .quote-only-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .quote-only-inline-notes.qnotes-card { margin-left: 14px; margin-right: 14px; }
}


/* Version 22 — simple quote page refinements */
.quote-only-customer-select.readonly { cursor: default; justify-content: flex-start; font-weight: 850; }
.quote-only-add-product-row { align-items:center; }
.quote-only-add-product-link { display:inline-flex; align-items:center; gap:8px; }
.quote-only-freight-instruction { margin: 8px 0 10px; color:#38596f; font-size:10px; line-height:1.45; }
.qnotes-textarea, .quote-inline-notes-textarea { width:100%; min-height:112px; resize:vertical; padding:11px 12px; border:1px solid #d6caee; border-radius:10px; background:#fff; color:#283c33; font:inherit; font-size:11px; line-height:1.5; }
.qnotes-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.quote-only-tool-card.quote-only-notes-card { box-shadow:0 8px 20px rgba(93,66,154,.10); }
.quote-view-full .quote-only-add-product-row { justify-content:flex-start; }
@media (max-width:720px){.qnotes-textarea,.quote-inline-notes-textarea{min-height:140px}}

/* Version 22 final quote-note sizing */
.quote-only-notes-card .qnotes-textarea,.quote-only-inline-notes .quote-inline-notes-textarea{display:block;width:calc(100% - 28px);margin:14px;box-sizing:border-box}


/* BetterBuy v22 final quote note and freight blank-state polish */
.quote-only-inline-notes {
  border: 2px solid rgba(124, 58, 237, 0.28);
  background: #fbf7ff;
  box-shadow: inset 6px 0 0 rgba(124, 58, 237, 0.75);
  border-radius: 16px;
  margin: 0 32px 18px;
  padding: 18px 22px;
}
.quote-inline-notes-header,
.quote-only-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.quote-inline-notes-header span,
.quote-only-tab-header .active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d28d9;
}
.quote-inline-notes-header h3 {
  margin: 4px 0 0;
  font-size: 1.2rem;
  color: #1f2937;
}
.qnotes-textarea,
.quote-inline-notes-input,
.quote-inline-notes-textarea {
  width: 100%;
  min-height: 150px;
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255,255,255,0.9);
  padding: 14px 16px;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
  color: #102a22;
}
.quote-view-small .quote-only-document-card > .quote-only-inline-notes { display: none !important; }
.quote-view-small .quote-only-side-panel .quote-only-notes-card { display: block !important; }
.quote-view-full .quote-only-side-panel .quote-only-notes-card { display: none !important; }
.quote-view-full .quote-only-document-card > .quote-only-inline-notes { display: block !important; }
.quote-only-add-product-row {
  border: 1px dashed rgba(11, 95, 72, 0.36);
  background: #f3fbf7;
  border-radius: 14px;
  margin: 14px 0 2px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #315346;
}
.quote-only-add-product-link {
  border: 0;
  background: transparent;
  color: #0b5f48;
  font-weight: 900;
  cursor: pointer;
  font-size: 1.02rem;
}
.quote-only-freight-card .quote-only-freight-cost strong {
  overflow-wrap: anywhere;
}
@media (max-width: 1080px) {
  .quote-only-add-product-row { align-items: flex-start; flex-direction: column; }
}



/* Version 24 — send quote and per-line sales tax */
.quote-sales-tax-select{width:100%;min-width:150px;min-height:34px;padding:6px 28px 6px 9px;border:1px solid #b8cbc2;border-radius:8px;background:#fff;color:#17362a;font:inherit;font-size:10px;font-weight:850}.quote-sales-tax-select:focus{outline:2px solid rgba(16,96,63,.18);border-color:#0b6b49}.quote-tax-cell{min-width:160px}.quote-tax-total strong{color:#11633f}.quote-send-button,.quote-only-tools-row .quote-send-button{background:#087a44!important;border-color:#087a44!important;color:#fff!important}.quote-send-button:hover,.quote-only-tools-row .quote-send-button:hover{background:#06663a!important;border-color:#06663a!important}.quote-email-form textarea{min-height:260px;font-family:inherit;line-height:1.45}.quote-email-intro{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:14px;border:1px solid #c4e2d1;border-radius:14px;background:linear-gradient(135deg,#ecfff5,#f7fbff)}.quote-email-intro>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#0d6a42;color:#fff;font-weight:950}.quote-email-intro strong,.quote-email-intro small{display:block}.quote-email-intro strong{color:#102b21;font-size:16px;font-weight:950}.quote-email-intro small{color:#526961;margin-top:3px}.quote-email-mark-sent{margin:12px 0;padding:10px 12px;border:1px solid #c9ddcf;border-radius:12px;background:#f4fbf6}.quote-email-button-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 12px}.quote-only-output-card .button-row.vertical .quote-send-button{width:100%;justify-content:center}@media(max-width:720px){.quote-email-button-row button{width:100%}.quote-sales-tax-select{min-width:140px}}


/* Version 24: quote email + per-line tax controls */
.quote-tax-select {
  min-width: 142px;
  border: 1px solid var(--line-strong, #b7c8bf);
  border-radius: 9px;
  background: #ffffff;
  padding: 8px 10px;
  font-weight: 800;
  color: var(--ink, #13251d);
}
.quote-only-table .quote-tax-select,
.create-quote-table .quote-tax-select {
  width: 100%;
  max-width: 178px;
}
.email-quote-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background: linear-gradient(135deg, #eefcf6, #eef5ff);
  border:1px solid var(--line, #d8e5de);
  margin-bottom:14px;
}
.email-quote-intro strong { display:block; font-size:18px; }
.email-quote-intro span { color: var(--muted, #52685d); font-weight:700; }
.quote-email-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line, #d8e5de);
}
.quote-email-form textarea { min-height: 260px; }
.quote-only-output-card .success-button,
.quote-focus-tool-card .success-button { width:100%; }
@media (max-width: 900px) {
  .quote-tax-select { min-width: 120px; }
  .quote-email-actions { justify-content:stretch; }
  .quote-email-actions button { flex:1 1 180px; }
}

/* Version 25 — customer-facing quote template and direct email sending */
.quote-email-smtp-status{margin:12px 0;padding:12px 14px;border-radius:14px;border:1px solid #d6e3db;background:#f7faf8;color:#203a2f;line-height:1.45}.quote-email-smtp-status strong{display:inline-block;margin-bottom:3px}.quote-email-smtp-status.ready{border-color:#a6dac0;background:#effdf5;color:#0c5132}.quote-email-smtp-status.not-ready{border-color:#ffd0b8;background:#fff6ed;color:#884514}.quote-email-smtp-status.checking{border-color:#cfe0ef;background:#f3f8ff;color:#1d4c7a}.quote-email-button-row .success-button{background:#087a44;border-color:#087a44;color:#fff}.quote-email-button-row .success-button:hover{background:#06663a;border-color:#06663a}

/* Version 29 — BBC pickup-code freight split */
.quote-freight-status.multi {
  display: grid;
  gap: 10px;
}
.quote-freight-routes {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}
.quote-freight-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 13px;
  background: #f7fbff;
}
.quote-freight-route.saved {
  border-color: rgba(5, 122, 85, .25);
  background: #f2fff8;
}
.quote-freight-route.missing {
  border-color: rgba(217, 119, 6, .30);
  background: #fffbeb;
}
.quote-freight-route.needs-review {
  border-left: 5px solid #d97706;
}
.quote-freight-route span,
.quote-freight-route strong,
.quote-freight-route small,
.quote-freight-route em {
  display: block;
}
.quote-freight-route span {
  font-weight: 950;
  color: #123226;
}
.quote-freight-route small {
  margin-top: 3px;
  color: #557064;
  font-weight: 750;
}
.quote-freight-route em {
  margin-top: 5px;
  color: #9a3412;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}
.quote-freight-route > div:last-child {
  min-width: 142px;
  text-align: right;
}
.quote-freight-route .small-button {
  margin-top: 7px;
  min-height: 32px;
  padding: 6px 10px;
}
.pickup-split-note {
  display: block;
  margin-top: 4px;
  color: #315b4e;
  font-weight: 800;
}
@media(max-width: 780px) {
  .quote-freight-route { grid-template-columns: 1fr; }
  .quote-freight-route > div:last-child { text-align: left; }
}

/* Version 29 — clearer multi-pickup freight display on simple quote */
.quote-only-freight-breakdown{
  margin:10px 0 12px;
  display:grid;
  gap:10px;
}
.quote-only-freight-break-total{
  padding:12px 13px;
  border:1px solid #bad2ee;
  border-radius:12px;
  background:#ffffff;
  box-shadow: inset 4px 0 0 #1f5fa7;
}
.quote-only-freight-break-total span,
.quote-only-freight-break-total strong,
.quote-only-freight-break-total small{display:block;}
.quote-only-freight-break-total span{font-size:8px;font-weight:950;text-transform:uppercase;color:#315f83;letter-spacing:.07em;}
.quote-only-freight-break-total strong{margin-top:4px;color:#0d4f92;font-size:18px;font-weight:1000;}
.quote-only-freight-break-total small{margin-top:5px;color:#38596f;font-weight:800;line-height:1.35;}
.quote-only-freight-break-list{display:grid;gap:8px;}
.quote-only-freight-break-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  border:1px solid #bdd7f0;
  background:#f8fbff;
}
.quote-only-freight-break-row.saved{border-color:#8fd4b0;background:#f2fff8;}
.quote-only-freight-break-row.missing{border-color:#f1b983;background:#fff7ed;}
.quote-only-freight-break-row strong,
.quote-only-freight-break-row small,
.quote-only-freight-break-row em,
.quote-only-freight-break-row b{display:block;}
.quote-only-freight-break-row strong{color:#123226;font-weight:1000;font-size:12px;}
.quote-only-freight-break-row small{margin-top:2px;color:#486b83;font-weight:800;font-size:10px;}
.quote-only-freight-break-row em{margin-top:3px;color:#596a75;font-style:normal;font-size:10px;line-height:1.3;}
.quote-only-freight-break-price{text-align:right;min-width:82px;}
.quote-only-freight-break-price b{color:#0d4f92;font-size:14px;font-weight:1000;}
.quote-only-freight-break-price .mini-button{margin-top:5px;padding:5px 8px;min-height:28px;font-size:10px;border-radius:9px;}
.quote-only-freight-cost.empty strong{color:#8a4b13;}
.quote-only-freight-cost.saved strong{color:#0d4f92;}
.quote-only-freight-cost small{display:block;margin-top:6px;color:#38596f;line-height:1.35;font-weight:750;}
@media (max-width: 820px){
  .quote-only-freight-break-row{grid-template-columns:1fr;}
  .quote-only-freight-break-price{text-align:left;}
}


/* Version 29 — compact quote-page display for multiple BBC pickup freight rates */
.quote-only-freight-split { display:block; }
.quote-only-freight-split > small { display:block; margin-top:5px; color:#31506d; font-size:9.5px; line-height:1.35; }
.quote-only-freight-groups { display:grid; gap:8px; margin-top:10px; }
.quote-only-freight-group {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px;
  border:1px solid #bfd8ef;
  border-radius:10px;
  background:#f8fbff;
}
.quote-only-freight-group.saved { border-color:#a8dcc2; background:#f2fff8; }
.quote-only-freight-group.missing { border-color:#f0c783; background:#fffaf0; }
.quote-only-freight-group.needs-review { border-left:4px solid #d97706; }
.quote-only-freight-group strong,
.quote-only-freight-group small,
.quote-only-freight-group span,
.quote-only-freight-group em,
.quote-only-freight-group b { display:block; }
.quote-only-freight-group strong { color:#14362a; font-size:10.5px; font-weight:950; }
.quote-only-freight-group b { color:#134e7a; font-size:13px; font-weight:950; text-align:right; }
.quote-only-freight-group small { margin-top:2px; color:#567167; font-size:8.5px; line-height:1.3; }
.quote-only-freight-group span { margin-top:3px; color:#41584f; font-size:8.5px; line-height:1.35; }
.quote-only-freight-group em { margin-top:3px; color:#9a3412; font-style:normal; font-size:8.5px; line-height:1.25; font-weight:850; }
.quote-only-freight-group .small-button { margin-top:5px; min-height:28px; padding:5px 9px; font-size:8.5px; }
@media(max-width: 760px){ .quote-only-freight-group{grid-template-columns:1fr}.quote-only-freight-group b{text-align:left} }


/* Version 29 — simple quote freight group display and calculator repair */
.quote-only-freight-cost.multi {
  display: grid;
  gap: 9px;
}
.quote-only-freight-cost.multi > small,
.quote-only-freight-cost.empty > small,
.quote-only-freight-cost.has-rate > small {
  display: block;
  margin-top: 5px;
  color: #365d76;
  font-size: 10px;
  line-height: 1.45;
}
.quote-only-freight-group-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.quote-only-freight-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #c7ddf3;
  border-radius: 11px;
  background: #ffffff;
}
.quote-only-freight-group-row.saved {
  border-color: #9fd4b7;
  background: #f2fff8;
}
.quote-only-freight-group-row.missing {
  border-color: #f1c383;
  background: #fffaf0;
}
.quote-only-freight-group-row.needs-review {
  border-left: 5px solid #d97706;
}
.quote-only-freight-group-row strong,
.quote-only-freight-group-row span,
.quote-only-freight-group-row small,
.quote-only-freight-group-row em,
.quote-only-freight-group-row b {
  display: block;
}
.quote-only-freight-group-row strong {
  color: #153c64;
  font-size: 11px;
  font-weight: 950;
}
.quote-only-freight-group-row span,
.quote-only-freight-group-row small {
  margin-top: 2px;
  color: #496a7f;
  font-size: 9.5px;
  line-height: 1.35;
}
.quote-only-freight-group-row em {
  margin-top: 4px;
  color: #9a3412;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.quote-only-freight-group-row > div:last-child {
  min-width: 105px;
  text-align: right;
}
.quote-only-freight-group-row b {
  color: #0d5c38;
  font-size: 13px;
  font-weight: 950;
}
.tiny-button {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 9px;
  margin-top: 6px;
}
@media (max-width: 760px) {
  .quote-only-freight-group-row { grid-template-columns: 1fr; }
  .quote-only-freight-group-row > div:last-child { text-align: left; }
}

/* Version 29 — repaired calculator routing and clearer multi-pickup freight display on quote page */
.quote-only-freight-card-v29 .quote-only-freight-breakdown{display:grid;gap:10px;margin:10px 0 12px}.quote-only-freight-card-v29 .quote-freight-status{box-shadow:none;border-radius:12px;padding:12px;background:#fff}.quote-only-freight-card-v29 .quote-freight-status.multi>strong{font-size:20px;color:#104b86}.quote-only-freight-card-v29 .quote-freight-status.multi>small{font-size:11px;color:#31536c}.quote-only-freight-card-v29 .quote-freight-routes{margin-top:8px;gap:8px}.quote-only-freight-card-v29 .quote-freight-route{grid-template-columns:1fr;gap:8px;padding:10px;border-radius:12px}.quote-only-freight-card-v29 .quote-freight-route>div:last-child{text-align:left;min-width:0}.quote-only-freight-card-v29 .quote-freight-route strong{font-size:16px;color:#0f5132}.quote-only-freight-card-v29 .quote-freight-route.missing strong{color:#9a3412}.quote-only-freight-card-v29 .quote-freight-route .small-button{width:auto;justify-self:start}.quote-only-freight-card-v29 .job-freight-button.full-button{margin-top:4px}.quote-only-freight-card-v29 small{font-weight:750}


/* Version 29 repair — style the grouped freight rows used by the quote page */
.quote-only-freight-group-list { display:grid; gap:8px; margin-top:10px; }
.quote-only-freight-group-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #c5dbef;
  border-radius:11px;
  background:#f8fbff;
}
.quote-only-freight-group-row.saved { border-color:#98d5b4; background:#f2fff8; }
.quote-only-freight-group-row.missing { border-color:#efbd82; background:#fff7ed; }
.quote-only-freight-group-row.needs-review { box-shadow:inset 4px 0 0 #d97706; }
.quote-only-freight-group-row strong,
.quote-only-freight-group-row span,
.quote-only-freight-group-row small,
.quote-only-freight-group-row em,
.quote-only-freight-group-row b { display:block; }
.quote-only-freight-group-row strong { color:#123226; font-size:10.5px; font-weight:1000; }
.quote-only-freight-group-row span { margin-top:3px; color:#376073; font-size:9px; font-weight:850; }
.quote-only-freight-group-row small { margin-top:2px; color:#587066; font-size:8.5px; line-height:1.3; }
.quote-only-freight-group-row em { margin-top:4px; color:#9a3412; font-size:8.5px; line-height:1.25; font-style:normal; font-weight:850; }
.quote-only-freight-group-row > div:last-child { min-width:92px; text-align:right; }
.quote-only-freight-group-row b { color:#0d4f92; font-size:13px; font-weight:1000; }
.quote-only-freight-group-row .tiny-button { margin-top:5px; min-height:27px; padding:5px 8px; border-radius:8px; font-size:8.5px; }
.quote-only-freight-cost.multi strong { line-height:1.25; }
@media(max-width:760px){.quote-only-freight-group-row{grid-template-columns:1fr}.quote-only-freight-group-row>div:last-child{text-align:left}}

/* v29 pickup-choice controls for BBC pickup-code freight groups */
.pickup-choice-control {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px dashed #93c5fd;
  background: #eff6ff;
  color: #0f315c;
}
.pickup-choice-control span {
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pickup-choice-control select {
  width: 100%;
  min-height: 30px;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: #fff;
  color: #103f65;
  font-weight: 850;
  font-size: 11px;
  padding: 5px 7px;
}
.pickup-choice-warning {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid #f97316;
  background: #fff7ed;
  color: #9a3412;
}
.pickup-choice-warning strong {
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pickup-choice-warning span {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 750;
}

/* ---- Work Viewing filter (top bar) ---------------------------------------
   Two reps share one dataset, so each needs to control whose work their lists
   show. Kept in the top bar rather than Settings because it gets flipped
   several times a day when covering for each other -- and because it must stay
   visible, so an intentionally filtered list is never mistaken for lost data. */
.work-view { position: relative; }

.work-view-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  transition: border-color .15s ease, background .15s ease;
}
.work-view-button:hover { border-color: var(--brand-600); }
.work-view-button:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.work-view-eyebrow {
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft, #5B6470);
  font-weight: 700;
}
.work-view-button strong { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.work-view-caret { font-size: 9px; color: var(--ink-soft, #5B6470); }

.work-view-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 60;
  min-width: 262px;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 14px 38px rgba(16, 20, 26, .17);
}
.work-view-panel.hidden { display: none; }
.work-view-title {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft, #5B6470);
  font-weight: 750;
}
.work-view-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.work-view-row:hover { background: var(--surface-2, rgba(0, 0, 0, .035)); }
.work-view-row input { width: 15px; height: 15px; accent-color: var(--brand-600); cursor: pointer; flex: 0 0 auto; }
.work-view-row span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.work-view-row strong { font-size: 12.5px; font-weight: 650; }
.work-view-row small { font-size: 10.5px; color: var(--ink-soft, #5B6470); }
.work-view-mine {
  margin-left: auto;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--brand-600);
  background: var(--brand-50, rgba(237, 28, 36, .09));
  padding: 2px 6px;
  border-radius: 999px;
}
.work-view-note,
.work-view-empty {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-soft, #5B6470);
}
.work-view-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

/* Owner initials badge shown on job cards/rows so a mixed list is readable. */
.owner-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-2, rgba(0, 0, 0, .05));
  color: var(--ink-soft, #5B6470);
  border: 1px solid var(--line);
}
.owner-tag.is-mine { color: var(--brand-600); border-color: var(--brand-600); background: var(--brand-50, rgba(237, 28, 36, .08)); }
.owner-tag.is-unassigned { color: #8a6d1f; border-color: #e3c877; background: rgba(240, 200, 90, .16); }

/* On a narrow screen the label collapses to just the initials. */
@media (max-width: 760px) {
  .work-view-eyebrow { display: none; }
  .work-view-panel { min-width: 232px; }
}

/* Filter hint on the Jobs page -- makes a deliberately short list obvious. */
.work-view-hint {
  margin: 9px 0 0;
  padding: 7px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft, #5B6470);
  background: var(--surface-2, rgba(0, 0, 0, .035));
  border-left: 3px solid var(--brand-600);
  border-radius: 0 8px 8px 0;
}
.work-view-hint strong { color: var(--ink); }
.work-view-hint .text-button { font-size: 11.5px; }

/* --- Product catalog: update from spreadsheet ------------------------------ */
.catalog-upload-panel { margin-top: 16px; border-color: var(--line-strong); }
.catalog-upload-drop {
  display: block; padding: 22px 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--canvas); transition: border-color .15s ease, background .15s ease;
}
.catalog-upload-drop:hover { border-color: var(--brand-600); background: var(--brand-50); }
.catalog-upload-drop strong { display: block; font-size: 15px; color: var(--ink); }
.catalog-upload-drop span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.catalog-upload-result { margin-top: 14px; }
.catalog-upload-result:empty { margin-top: 0; }
.catalog-upload-busy, .catalog-upload-note, .catalog-upload-error,
.catalog-upload-warning, .catalog-upload-success, .catalog-upload-filename {
  padding: 10px 13px; border-radius: var(--radius); font-size: 13px; margin-bottom: 10px;
  border: 1px solid var(--line); background: var(--canvas); color: var(--ink);
}
.catalog-upload-busy { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.catalog-upload-error { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.catalog-upload-warning { border-color: var(--yellow); background: var(--yellow-soft); color: var(--yellow); }
.catalog-upload-success { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.catalog-diff-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.catalog-diff-total {
  padding: 12px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); text-align: center;
}
.catalog-diff-total strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.catalog-diff-total span { display: block; margin-top: 3px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.catalog-diff-total.add { border-color: var(--success); background: var(--success-soft); }
.catalog-diff-total.add strong { color: var(--success); }
.catalog-diff-total.update { border-color: var(--blue); background: var(--blue-soft); }
.catalog-diff-total.update strong { color: var(--blue); }
.catalog-diff-total.remove { border-color: var(--red); background: var(--red-soft); }
.catalog-diff-total.remove strong { color: var(--red); }
.catalog-diff-total.same strong { color: var(--muted); }
.catalog-diff-group { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.catalog-diff-group h5 {
  margin: 0; padding: 9px 13px; font-size: 12.5px; font-weight: 600;
  background: var(--canvas); border-bottom: 1px solid var(--line);
}
.catalog-diff-group h5 span { float: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.catalog-diff-group.add h5 { background: var(--success-soft); color: var(--success); }
.catalog-diff-group.update h5 { background: var(--blue-soft); color: var(--blue); }
.catalog-diff-group.remove h5 { background: var(--red-soft); color: var(--red); }
.catalog-diff-group ul { margin: 0; padding: 8px 13px; list-style: none; max-height: 260px; overflow-y: auto; }
.catalog-diff-group li { padding: 3px 0; font-size: 12.5px; color: var(--ink); }
.catalog-diff-group li code { font-size: 12px; color: var(--muted); margin-right: 6px; }
.catalog-diff-group li em { font-size: 11.5px; color: var(--blue); font-style: normal; }
.catalog-diff-more { margin: 0; padding: 6px 13px 10px; font-size: 12px; color: var(--muted); }
.catalog-upload-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }

/* ============================================================================
   JOB ACTION CENTER redesign (v53)
   Scoped entirely to .job-action-center-drawer so the simple-quote view and
   every other drawer keep their existing look. Design rules for this page:
   - one brand color (deep pine) in the masthead and primary actions only
   - color otherwise means STATUS: rust = overdue, amber = due soon
   - the main column is a numbered workflow rail (01-06) a new employee can
     follow top to bottom; the station chip inherits urgency
   ========================================================================== */
.job-action-center-drawer {
  --jac-pine-950: #0A2C20;
  --jac-pine-900: #0E3B2A;
  --jac-pine-700: #17573F;
  --jac-paper: #F4F4EF;
  --jac-card: #FFFFFF;
  --jac-line: #E3E1D8;
  --jac-line-strong: #CBC9BD;
  --jac-ink: #1A211D;
  --jac-muted: #67716B;
  --jac-brass: #D9A441;
  --jac-brass-ink: #8A6708;
  --jac-brass-soft: #FBF2DD;
  --jac-rust: #B23A28;
  --jac-rust-soft: #FBEFEC;
}
.job-action-center-drawer .drawer-header {
  min-height: 52px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--jac-line);
  background: #fff;
}
.job-action-center-drawer .drawer-header h2 { font-size: 15px; font-weight: 850; letter-spacing: -.01em; color: var(--jac-ink); }
.job-action-center-drawer .drawer-body {
  padding: 20px 24px 36px;
  background: var(--jac-paper);
}

/* ---- masthead -------------------------------------------------------- */
.job-action-center-drawer .jac-masthead {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--jac-pine-950);
  border-radius: 14px;
  background: var(--jac-pine-900);
  box-shadow: 0 10px 26px rgba(10, 44, 32, .18);
}
.job-action-center-drawer .jac-mast-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px 0;
}
.job-action-center-drawer .jac-back {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.job-action-center-drawer .jac-back:hover { background: rgba(255,255,255,.17); }
.job-action-center-drawer .jac-mast-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.job-action-center-drawer .jac-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #EAF2ED;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
}
.job-action-center-drawer .jac-chip.jac-pinned { border-color: rgba(217,164,65,.6); color: #F2CE7F; }
.job-action-center-drawer .jac-chip.jac-priority.critical { border-color: rgba(255,150,132,.62); background: rgba(120,26,14,.55); color: #FFC9BE; }
.job-action-center-drawer .jac-chip.jac-priority.high { border-color: rgba(242,206,127,.55); background: rgba(122,79,8,.42); color: #F6DCA2; }
.job-action-center-drawer .jac-identity { padding: 14px 18px 16px; }
.job-action-center-drawer .jac-eyebrow {
  display: block;
  color: #A8C4B4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.job-action-center-drawer .jac-identity h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.15;
}

/* the register strip: six quiet facts, hairline dividers, tabular figures */
.job-action-center-drawer .jac-facts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--jac-line);
  background: #fff;
}
.job-action-center-drawer .jac-facts > div { min-width: 0; padding: 11px 16px 12px; border-left: 1px solid var(--jac-line); }
.job-action-center-drawer .jac-facts > div:first-child { border-left: 0; }
.job-action-center-drawer .jac-facts span,
.job-action-center-drawer .jac-facts strong,
.job-action-center-drawer .jac-facts small { display: block; }
.job-action-center-drawer .jac-facts span {
  color: var(--jac-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.job-action-center-drawer .jac-facts strong {
  margin-top: 4px;
  color: var(--jac-ink);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.01em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-action-center-drawer .jac-facts small { margin-top: 2px; color: var(--jac-muted); font-size: 10px; }
.job-action-center-drawer .jac-facts strong.drawer-red-stars { color: var(--jac-brass-ink); }
.job-action-center-drawer .jac-facts > .overdue strong,
.job-action-center-drawer .jac-facts > .due-today strong,
.job-action-center-drawer .jac-facts > .overdue small,
.job-action-center-drawer .jac-facts > .due-today small { color: var(--jac-rust); font-weight: 900; }
.job-action-center-drawer .jac-facts > .due-tomorrow strong,
.job-action-center-drawer .jac-facts > .due-soon strong,
.job-action-center-drawer .jac-facts > .due-tomorrow small,
.job-action-center-drawer .jac-facts > .due-soon small { color: var(--jac-brass-ink); font-weight: 900; }

/* ---- toolbar ---------------------------------------------------------- */
.job-action-center-drawer .jac-toolbar {
  position: sticky;
  top: -21px;
  z-index: 8;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid var(--jac-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 24, 21, .07);
}
.job-action-center-drawer .jac-tool-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.job-action-center-drawer .jac-tool-group + .jac-tool-group { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--jac-line); }
.job-action-center-drawer .jac-toolbar button {
  appearance: none;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--jac-line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--jac-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.job-action-center-drawer .jac-toolbar button:hover { background: var(--jac-paper); border-color: var(--jac-line-strong); }
.job-action-center-drawer .jac-toolbar .primary-button { border-color: var(--jac-pine-900); background: var(--jac-pine-900); color: #fff; }
.job-action-center-drawer .jac-toolbar .primary-button:hover { background: var(--jac-pine-700); border-color: var(--jac-pine-700); }
.job-action-center-drawer .jac-toolbar .job-pin-button.active { border-color: var(--jac-brass); background: var(--jac-brass-soft); color: var(--jac-brass-ink); }

/* ---- view controls ---------------------------------------------------- */
.job-action-center-drawer .job-workspace-view-controls {
  margin: 0 2px 14px;
  padding: 0;
  border: 0;
  background: transparent;
}
.job-action-center-drawer .job-workspace-view-controls strong { color: var(--jac-ink); font-size: 11px; font-weight: 850; }
.job-action-center-drawer .job-workspace-view-controls span { color: var(--jac-muted); font-size: 10px; }
.job-action-center-drawer .job-workspace-view-controls .secondary-button {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--jac-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--jac-muted);
  font-size: 10px;
  font-weight: 850;
}
.job-action-center-drawer .job-workspace-view-controls .secondary-button:hover { color: var(--jac-ink); background: var(--jac-paper); }

/* ---- the workflow rail ------------------------------------------------ */
.job-action-center-drawer .quote-workspace-main {
  position: relative;
  counter-reset: station;
  padding-left: 46px;
}
.job-action-center-drawer .quote-workspace-main::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--jac-line-strong);
}
.job-action-center-drawer .quote-workspace-main > .section-card { position: relative; counter-increment: station; }
.job-action-center-drawer .quote-workspace-main > .section-card::before {
  content: counter(station, decimal-leading-zero);
  position: absolute;
  left: -46px;
  top: 13px;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 164, 65, .55);
  border-radius: 9px;
  background: var(--jac-pine-900);
  color: #F2CE7F;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.job-action-center-drawer .quote-workspace-main > .section-due.overdue::before,
.job-action-center-drawer .quote-workspace-main > .section-due.due-today::before { border-color: rgba(178,58,40,.55); background: var(--jac-rust); color: #fff; }
.job-action-center-drawer .quote-workspace-main > .section-due.due-tomorrow::before,
.job-action-center-drawer .quote-workspace-main > .section-due.due-soon::before { border-color: rgba(138,103,8,.5); background: #96660A; color: #fff; }

/* ---- cards: one quiet standard --------------------------------------- */
.job-action-center-drawer .job-detail-card,
.job-action-center-drawer .job-detail-card.section-card {
  border: 1px solid var(--jac-line);
  border-left: 1px solid var(--jac-line);
  border-radius: 12px;
  background: var(--jac-card);
  box-shadow: 0 1px 2px rgba(20, 24, 21, .04);
}
.job-action-center-drawer .job-detail-card.customer-action-detail,
.job-action-center-drawer .job-detail-card.customer-action-detail.overdue,
.job-action-center-drawer .job-detail-card.customer-action-detail.due-today,
.job-action-center-drawer .job-detail-card.customer-action-detail.due-tomorrow,
.job-action-center-drawer .job-detail-card.customer-action-detail.due-soon {
  border-color: var(--jac-line);
  border-left-color: var(--jac-line);
  background: var(--jac-card);
}
.job-action-center-drawer .job-detail-card.section-card > .job-detail-card-header {
  margin: 0 0 12px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--jac-line);
  background: transparent;
}
.job-action-center-drawer .job-detail-card.section-card > .job-detail-card-header > div:first-child { padding-left: 0; }
.job-action-center-drawer .job-detail-card.section-card > .job-detail-card-header > div:first-child::before { content: none; }
.job-action-center-drawer .section-kicker {
  color: var(--jac-muted);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.job-action-center-drawer .job-detail-card.section-card .section-kicker { color: var(--jac-muted); }
.job-action-center-drawer .job-detail-card.section-card .job-detail-card-header h3 { margin-top: 3px; color: var(--jac-ink); font-size: 15px; font-weight: 850; letter-spacing: -.015em; }
.job-action-center-drawer .job-detail-card.section-card .job-detail-card-header p { color: var(--jac-muted); font-size: 10.5px; }
.job-action-center-drawer .quote-builder-card.section-card > .quote-builder-header { padding: 15px 17px 12px; border-bottom: 1px solid var(--jac-line); }
.job-action-center-drawer .quote-builder-card.section-card > .quote-builder-header > div:first-child { padding-left: 0; }

/* next step: typography carries the urgency, not a colored wash */
.job-action-center-drawer .job-next-action-large strong { color: var(--jac-ink); font-size: 20px; font-weight: 950; letter-spacing: -.02em; }
.job-action-center-drawer .job-next-action-large > span { color: var(--jac-muted); font-weight: 850; }
.job-action-center-drawer .job-next-action-large p { color: #47524B; }
.job-action-center-drawer .customer-action-detail.overdue .job-next-action-large > span,
.job-action-center-drawer .customer-action-detail.due-today .job-next-action-large > span { color: var(--jac-rust); }
.job-action-center-drawer .customer-action-detail.due-tomorrow .job-next-action-large > span,
.job-action-center-drawer .customer-action-detail.due-soon .job-next-action-large > span { color: var(--jac-brass-ink); }
.job-action-center-drawer .customer-action-detail.overdue .job-next-action-large strong,
.job-action-center-drawer .customer-action-detail.due-today .job-next-action-large strong,
.job-action-center-drawer .customer-action-detail.due-tomorrow .job-next-action-large strong,
.job-action-center-drawer .customer-action-detail.due-soon .job-next-action-large strong { color: var(--jac-ink); }
.job-action-center-drawer .job-due-pill { border-color: var(--jac-line-strong); background: var(--jac-paper); color: var(--jac-muted); }
.job-action-center-drawer .job-due-pill.overdue,
.job-action-center-drawer .job-due-pill.due-today { border-color: #E5B4AB; background: var(--jac-rust-soft); color: var(--jac-rust); }
.job-action-center-drawer .job-due-pill.due-tomorrow,
.job-action-center-drawer .job-due-pill.due-soon { border-color: #E4CD9A; background: var(--jac-brass-soft); color: var(--jac-brass-ink); }

/* task rows */
.job-action-center-drawer .job-important-task-row { border: 1px solid var(--jac-line); border-radius: 9px; background: #fff; }
.job-action-center-drawer .job-important-task-row.overdue,
.job-action-center-drawer .job-important-task-row.due-today { border-color: #E5B4AB; background: var(--jac-rust-soft); }
.job-action-center-drawer .job-important-task-row.due-tomorrow,
.job-action-center-drawer .job-important-task-row.due-soon { border-color: #E4CD9A; background: var(--jac-brass-soft); }
.job-action-center-drawer .important-work-clear { border: 1px dashed var(--jac-line-strong); border-radius: 10px; background: var(--jac-paper); }
.job-action-center-drawer .important-work-clear span { color: var(--jac-pine-700); }

/* quote table */
.job-action-center-drawer .quote-line-table thead th {
  background: var(--jac-paper);
  color: var(--jac-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.job-action-center-drawer .quote-line-table tbody tr:nth-child(even) { background: transparent; }
.job-action-center-drawer .quote-line-table td { border-color: var(--jac-line); }
.job-action-center-drawer .quote-number-cell { font-variant-numeric: tabular-nums; }
.job-action-center-drawer .quote-line-total { font-weight: 900; color: var(--jac-ink); }
.job-action-center-drawer .quote-line-table .badge { border: 1px solid var(--jac-line-strong); background: #fff; color: var(--jac-muted); }
.job-action-center-drawer .quote-line-table .badge.green { border-color: #BFD6C8; background: #F0F6F2; color: var(--jac-pine-700); }

/* freight helper + totals: quiet panels, the grand total is the loud number */
.job-action-center-drawer .quote-freight-helper { border: 1px solid var(--jac-line); background: var(--jac-paper); }
.job-action-center-drawer .quote-total-panel { border: 1px solid var(--jac-line); background: #fff; }
.job-action-center-drawer .quote-total-panel strong { font-variant-numeric: tabular-nums; }
.job-action-center-drawer .quote-total-grand strong { color: var(--jac-pine-900); font-size: 16px; font-weight: 950; }

/* collapsed sections + toggle */
.job-action-center-drawer .job-collapsible-section.is-collapsed { background: #fff; }
.job-action-center-drawer .job-collapsible-section.is-collapsed:hover { background: #FBFBF8; }
.job-action-center-drawer .job-section-collapsed-summary .collapsed-section-icon { border: 1px solid var(--jac-line); border-radius: 9px; background: var(--jac-paper); color: var(--jac-pine-700); }
.job-action-center-drawer .job-section-collapsed-summary strong { color: var(--jac-ink); }
.job-action-center-drawer .job-section-collapsed-summary small { color: var(--jac-muted); }
.job-action-center-drawer .job-section-toggle { border: 1px solid var(--jac-line-strong); border-radius: 999px; background: #fff; color: var(--jac-muted); }
.job-action-center-drawer .job-section-toggle:hover { background: var(--jac-paper); color: var(--jac-ink); }

/* badges used in section headers, quiet outline forms */
.job-action-center-drawer .section-card .badge { border: 1px solid var(--jac-line-strong); background: #fff; color: var(--jac-muted); }
.job-action-center-drawer .section-card .badge.green { border-color: #BFD6C8; background: #F0F6F2; color: var(--jac-pine-700); }
.job-action-center-drawer .section-card .badge.orange { border-color: #E4CD9A; background: var(--jac-brass-soft); color: var(--jac-brass-ink); }
.job-action-center-drawer .section-card .badge.red { border-color: #E5B4AB; background: var(--jac-rust-soft); color: var(--jac-rust); }
.job-action-center-drawer .section-card .badge.purple,
.job-action-center-drawer .section-card .badge.blue { border-color: var(--jac-line-strong); background: var(--jac-paper); color: var(--jac-muted); }
.job-action-center-drawer .status-badge { border: 1px solid var(--jac-line-strong); background: #fff; }

/* side column: same quiet card, slightly tighter */
.job-action-center-drawer .quote-workspace-side .job-detail-card { box-shadow: none; }
.job-action-center-drawer .quote-side-facts strong { font-variant-numeric: tabular-nums; }
.job-action-center-drawer .priority-reasons .reason-chip { border: 1px solid var(--jac-line-strong); border-radius: 999px; background: var(--jac-paper); color: #47524B; }
.job-action-center-drawer .drawer-red-stars { color: var(--jac-brass-ink); }

/* bottom actions */
.job-action-center-drawer .job-drawer-bottom-actions { border-top: 1px solid var(--jac-line-strong); }

/* focus + motion discipline */
.job-action-center-drawer :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--jac-brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .job-action-center-drawer .jac-toolbar button { transition: none; }
}

/* responsive */
@media (max-width: 1240px) {
  .job-action-center-drawer .jac-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job-action-center-drawer .jac-facts > div { border-top: 1px solid var(--jac-line); }
  .job-action-center-drawer .jac-facts > div:nth-child(-n+3) { border-top: 0; }
  .job-action-center-drawer .jac-facts > div:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 1080px) {
  .job-action-center-drawer .quote-workspace-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .job-action-center-drawer .drawer-body { padding: 12px 12px 28px; }
  .job-action-center-drawer .jac-identity h2 { font-size: 18px; }
  .job-action-center-drawer .jac-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-action-center-drawer .jac-facts > div:nth-child(-n+3) { border-top: 1px solid var(--jac-line); }
  .job-action-center-drawer .jac-facts > div:nth-child(-n+2) { border-top: 0; }
  .job-action-center-drawer .jac-facts > div:nth-child(3n+1) { border-left: 1px solid var(--jac-line); }
  .job-action-center-drawer .jac-facts > div:nth-child(2n+1) { border-left: 0; }
  .job-action-center-drawer .quote-workspace-main { padding-left: 38px; }
  .job-action-center-drawer .quote-workspace-main::before { left: 12px; }
  .job-action-center-drawer .quote-workspace-main > .section-card::before { left: -38px; width: 26px; height: 26px; font-size: 11px; }
  .job-action-center-drawer .jac-toolbar { position: static; }
  .job-action-center-drawer .jac-tool-group + .jac-tool-group { margin-left: 0; padding-left: 0; border-left: 0; }
  .job-action-center-drawer .jac-toolbar button { flex: 1 1 46%; }
}

/* ---- fixes after first render: legacy !important rules that bled through -- */
.job-action-center-drawer .drawer-red-stars,
.job-action-center-drawer .jac-facts strong.drawer-red-stars { color: var(--jac-brass-ink) !important; letter-spacing: 0; }
.job-action-center-drawer .jac-toolbar .job-calculator-button {
  border-color: var(--jac-line-strong) !important;
  background: #fff !important;
  color: var(--jac-ink) !important;
  font-weight: 800 !important;
  box-shadow: none;
}
.job-action-center-drawer .jac-toolbar .job-calculator-button:hover { background: var(--jac-paper) !important; border-color: var(--jac-line-strong) !important; color: var(--jac-ink) !important; }
.job-action-center-drawer .jac-toolbar .job-pin-button { color: var(--jac-muted) !important; font-size: 11px !important; }
.job-action-center-drawer .jac-toolbar .job-pin-button.active { border-color: var(--jac-brass) !important; background: var(--jac-brass-soft) !important; color: var(--jac-brass-ink) !important; }

/* buttons living inside section headers stay quiet as well */
.job-action-center-drawer .section-card .call-note-toolbar-button,
.job-action-center-drawer .section-card .callback-button {
  border: 1px solid var(--jac-line-strong);
  background: #fff;
  color: var(--jac-ink);
  box-shadow: none;
}
.job-action-center-drawer .section-card .call-note-toolbar-button:hover,
.job-action-center-drawer .section-card .callback-button:hover { background: var(--jac-paper); color: var(--jac-ink); transform: none; }

/* side quote facts: one quiet register, no tinted tiles */
.job-action-center-drawer .quote-side-facts > div,
.job-action-center-drawer .quote-side-facts .quote-created-fact,
.job-action-center-drawer .quote-side-facts .quote-freight-fact,
.job-action-center-drawer .quote-side-facts .quote-freight-fact.empty { border: 1px solid var(--jac-line); background: #fff; }
.job-action-center-drawer .quote-side-facts .quote-created-fact span,
.job-action-center-drawer .quote-side-facts .quote-created-fact strong { color: inherit; }
.job-action-center-drawer .quote-side-facts span { color: var(--jac-muted); }
.job-action-center-drawer .quote-side-facts strong { color: var(--jac-ink); }

/* ---- fixes, round 2 --------------------------------------------------- */
/* Station chips 03/04 were clipped: those cards carry overflow:hidden.    */
.job-action-center-drawer .quote-workspace-main > .section-card { overflow: visible; }

/* The freight band collapsed into 90px towers: the old two-column helper
   left the status boxes ~200px wide. Stack it instead so the pickup rows
   get the full card width. */
.job-action-center-drawer .quote-builder-bottom { border-top: 1px solid var(--jac-line); background: #fff; }
.job-action-center-drawer .quote-freight-helper {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--jac-line);
  background: var(--jac-paper);
}
.job-action-center-drawer .quote-freight-helper.has-saved-rate { border-color: var(--jac-line); background: var(--jac-paper); }
.job-action-center-drawer .quote-freight-copy strong { color: var(--jac-ink); font-size: 12px; font-weight: 900; }
.job-action-center-drawer .quote-freight-copy span { color: var(--jac-muted); }
.job-action-center-drawer .quote-freight-status {
  border: 1px solid var(--jac-line);
  background: #fff;
  box-shadow: none;
}
.job-action-center-drawer .quote-freight-status span { color: var(--jac-muted); letter-spacing: .08em; }
.job-action-center-drawer .quote-freight-status strong { color: var(--jac-ink); font-size: 15px; letter-spacing: -.01em; }
.job-action-center-drawer .quote-freight-status b { color: var(--jac-ink); font-size: 12px; }
.job-action-center-drawer .quote-freight-status small { color: var(--jac-muted); }
.job-action-center-drawer .quote-freight-status.empty,
.job-action-center-drawer .quote-freight-status.has-rate { border-color: var(--jac-line); background: #fff; }
.job-action-center-drawer .quote-freight-status.empty strong { color: var(--jac-ink); font-size: 14px; }
.job-action-center-drawer .quote-freight-status.has-rate strong { color: var(--jac-pine-900); }
.job-action-center-drawer .quote-freight-route {
  grid-template-columns: minmax(0, 1.35fr) minmax(160px, auto);
  border: 1px solid var(--jac-line);
  border-radius: 10px;
  background: #fff;
}
.job-action-center-drawer .quote-freight-route.saved { border-color: #BFD6C8; background: #fff; }
.job-action-center-drawer .quote-freight-route.missing { border-color: #E4CD9A; background: #fff; }
.job-action-center-drawer .quote-freight-route.needs-review { border-left: 1px solid #E4CD9A; background: var(--jac-brass-soft); }
.job-action-center-drawer .quote-freight-route span { color: var(--jac-ink); }
.job-action-center-drawer .quote-freight-route small { color: var(--jac-muted); }
.job-action-center-drawer .quote-freight-route em { color: var(--jac-brass-ink); }
.job-action-center-drawer .pickup-choice-warning strong { color: var(--jac-brass-ink); }

/* Freight Rate AI keeps its blue affordance everywhere ("the blue button
   copies..." is taught in the helper copy), including the toolbar copy.  */
.job-action-center-drawer .jac-toolbar .job-freight-button {
  border-color: #1d5fa8 !important;
  background: #1d5fa8 !important;
  color: #fff !important;
}
.job-action-center-drawer .jac-toolbar .job-freight-button:hover { background: #174d89 !important; border-color: #174d89 !important; }

/* legacy !important tints on the side freight fact */
.job-action-center-drawer .quote-side-facts .quote-freight-fact,
.job-action-center-drawer .quote-side-facts .quote-freight-fact.empty { border-color: var(--jac-line) !important; background: #fff !important; }
.job-action-center-drawer .quote-side-facts .quote-freight-fact strong,
.job-action-center-drawer .quote-side-facts .quote-freight-fact.empty strong { color: var(--jac-ink) !important; }

/* side next-callback card: quiet paper, status only when urgent */
.job-action-center-drawer .next-callback-card {
  border: 1px solid var(--jac-line);
  border-radius: 10px;
  background: var(--jac-paper);
}
.job-action-center-drawer .next-callback-card.empty { border-style: dashed; background: var(--jac-paper); }
.job-action-center-drawer .next-callback-card.overdue,
.job-action-center-drawer .next-callback-card.due-today { border-color: #E5B4AB; background: var(--jac-rust-soft); }
.job-action-center-drawer .next-callback-card span { color: var(--jac-muted); }
.job-action-center-drawer .next-callback-card strong { color: var(--jac-ink); }
.job-action-center-drawer .quote-total-panel { align-content: start; border-color: var(--jac-line); }
.job-action-center-drawer .quote-total-grand { border-top-color: var(--jac-pine-900); }

/* ---- density pass (v54): the whole page readable without scrolling ------ */
/* column rhythm + card padding */
.job-action-center-drawer .drawer-body { padding: 16px 20px 30px; }
.job-action-center-drawer .quote-workspace-layout { gap: 14px; }
.job-action-center-drawer .quote-workspace-main,
.job-action-center-drawer .quote-workspace-side { gap: 12px; }
.job-action-center-drawer .job-detail-card,
.job-action-center-drawer .job-detail-card.section-card { padding: 13px 15px; }
.job-action-center-drawer .quote-builder-card.section-card { padding: 0; }
.job-action-center-drawer .job-detail-card.section-card > .job-detail-card-header { margin: 0 0 9px; padding: 0 0 8px; }
.job-action-center-drawer .quote-builder-card.section-card > .quote-builder-header { padding: 12px 15px 9px; }
.job-action-center-drawer .job-detail-card.section-card .job-detail-card-header h3 { font-size: 14px; }
.job-action-center-drawer .job-detail-card.section-card .job-detail-card-header p { margin-top: 2px; }

/* masthead + toolbar tighten */
.job-action-center-drawer .jac-masthead { margin-bottom: 10px; }
.job-action-center-drawer .jac-mast-top { padding: 11px 16px 0; }
.job-action-center-drawer .jac-identity { padding: 10px 16px 12px; }
.job-action-center-drawer .jac-identity h2 { font-size: 20px; }
.job-action-center-drawer .jac-facts > div { padding: 9px 14px 10px; }
.job-action-center-drawer .jac-facts strong { font-size: 14px; margin-top: 3px; }
.job-action-center-drawer .jac-toolbar { margin-bottom: 10px; padding: 7px 8px; }
.job-action-center-drawer .jac-toolbar button { min-height: 31px; padding: 6px 11px; }
.job-action-center-drawer .job-workspace-view-controls { margin: 0 2px 10px; }

/* rail follows the tighter rhythm */
.job-action-center-drawer .quote-workspace-main::before { top: 10px; bottom: 10px; }
.job-action-center-drawer .quote-workspace-main > .section-card::before { top: 11px; width: 28px; height: 28px; font-size: 11px; }

/* next step + tasks */
.job-action-center-drawer .job-next-action-large strong { font-size: 17px; }
.job-action-center-drawer .job-next-action-large > span { margin-top: 3px; }
.job-action-center-drawer .job-next-action-large p { margin: 5px 0 0; line-height: 1.5; }
.job-action-center-drawer .job-important-task-list { gap: 6px; }
.job-action-center-drawer .job-important-task-row { padding: 6px 8px; }
.job-action-center-drawer .important-work-clear { min-height: 0; padding: 10px; }
.job-action-center-drawer .drawer-task-list.detailed { gap: 6px; margin-top: 0; }
.job-action-center-drawer .drawer-task-detail { padding: 7px 9px; }
.job-action-center-drawer .drawer-task-detail > p { margin-top: 4px; }

/* quote table + freight + totals */
.job-action-center-drawer .quote-line-table th { padding: 7px 10px; }
.job-action-center-drawer .quote-line-table td { padding: 7px 10px; }
.job-action-center-drawer .quote-builder-bottom { padding: 12px 15px 14px; gap: 12px; }
.job-action-center-drawer .quote-freight-helper { padding: 11px; gap: 9px; }
.job-action-center-drawer .quote-freight-status { padding: 10px 12px; gap: 4px; }
.job-action-center-drawer .quote-freight-route { padding: 8px 10px; }
.job-action-center-drawer .quote-freight-routes { gap: 7px; margin-top: 7px; }
.job-action-center-drawer .quote-total-panel { padding: 11px 13px; gap: 6px; }

/* side column */
.job-action-center-drawer .quote-side-facts { gap: 7px; margin-bottom: 9px; }
.job-action-center-drawer .quote-side-facts > div { padding: 8px 9px; }
.job-action-center-drawer .job-section-collapsed-summary { min-height: 42px; }
.job-action-center-drawer .job-section-collapsed-summary .collapsed-section-icon { width: 28px; height: 28px; font-size: 13px; }
.job-action-center-drawer .job-contact-card { padding: 9px 10px; }
.job-action-center-drawer .next-callback-card { padding: 9px 10px; }
.job-action-center-drawer .job-drawer-bottom-actions { margin-top: 12px; padding-top: 10px; }

/* ---- sales roadmap: same information, half the height ------------------- */
.job-action-center-drawer .sales-roadmap-shell { gap: 8px; }
.job-action-center-drawer .sales-roadmap-stagebar { padding: 6px; gap: 5px; border-color: var(--jac-line); background: var(--jac-paper); }
.job-action-center-drawer .sales-roadmap-stage { min-height: 0; padding: 5px 7px; }
.job-action-center-drawer .sales-roadmap-stage span { width: 21px; height: 21px; font-size: 9px; }
.job-action-center-drawer .sales-roadmap-stage strong { font-size: 8.5px; }
.job-action-center-drawer .sales-roadmap-current {
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--jac-line);
  border-left: 4px solid var(--roadmap-color);
  border-radius: 0 10px 10px 0;
  background: #fff;
  box-shadow: none;
}
.job-action-center-drawer .sales-roadmap-current-top span { font-size: 8.5px; }
.job-action-center-drawer .sales-roadmap-current h4 { margin-top: 2px; font-size: 15px; line-height: 1.2; }
.job-action-center-drawer .sales-roadmap-current > p { margin: 2px 0 0; font-size: 11px; line-height: 1.45; }
.job-action-center-drawer .sales-roadmap-due { min-width: 0; padding: 5px 9px; border-radius: 8px; }
.job-action-center-drawer .sales-roadmap-due span { font-size: 7px; }
.job-action-center-drawer .sales-roadmap-due strong { margin-top: 1px; font-size: 10px; }
.job-action-center-drawer .sales-roadmap-stats { gap: 5px; }
.job-action-center-drawer .roadmap-stat { padding: 3px 8px; font-size: 9px; }
.job-action-center-drawer .sales-roadmap-choice-grid { gap: 7px; }
.job-action-center-drawer .sales-roadmap-choice {
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  gap: 9px;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 9px;
}
.job-action-center-drawer .sales-roadmap-choice-check { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.job-action-center-drawer .sales-roadmap-choice-copy strong { font-size: 11.5px; line-height: 1.25; }
.job-action-center-drawer .sales-roadmap-choice-copy small { margin-top: 1px; font-size: 10px; line-height: 1.35; }
.job-action-center-drawer .sales-roadmap-choice-arrow { font-size: 14px; }
.job-action-center-drawer .sales-roadmap-final { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
.job-action-center-drawer .sales-roadmap-final > span { width: 36px; height: 36px; font-size: 15px; }
.job-action-center-drawer .sales-roadmap-final strong { font-size: 13px; }
.job-action-center-drawer .sales-roadmap-final small { font-size: 10.5px; }
.job-action-center-drawer .sales-roadmap-tip { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 7px 10px; }
.job-action-center-drawer .sales-roadmap-tip > span { width: 22px; height: 22px; font-size: 10px; }
.job-action-center-drawer .sales-roadmap-tip strong { font-size: 10.5px; }
.job-action-center-drawer .sales-roadmap-tip p { margin: 1px 0 0; font-size: 9.5px; }
.job-action-center-drawer .sales-roadmap-history summary { padding: 7px 11px; font-size: 10px; }
.job-action-center-drawer .sales-roadmap-history-list { padding: 6px 11px 9px; }
.job-action-center-drawer .sales-roadmap-history-item { padding: 5px 0; gap: 8px; }
.job-action-center-drawer .roadmap-back-button { min-height: 30px; padding: 6px 10px; }

/* ---- Interchangeable product groups (Settings) -------------------------- */
.substitution-editor { display: grid; gap: 12px; }
.substitution-editor .data-action-list { display: grid; gap: 8px; }
.substitution-editor .warning-box ul,
.substitution-editor .info-box ul { margin: 6px 0 0; padding-left: 18px; }
.substitution-editor .warning-box li,
.substitution-editor .info-box li { font-size: 11px; line-height: 1.5; }
.substitution-member-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.substitution-member-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; font-size: 11px; }
.substitution-member-list code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--canvas);
  font-size: 10.5px;
}
.substitution-status { font-style: normal; font-size: 10.5px; font-weight: 800; }
.substitution-status.green { color: var(--success); }
.substitution-status.orange { color: var(--orange); }
.substitution-status.red { color: var(--red); }
.substitution-member-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
@media (max-width: 620px) {
  .substitution-member-editor { grid-template-columns: 1fr; }
}

/* ---- Warehouse matching: size list, fit table (v57) --------------------- */
.substitution-size-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.substitution-size-toolbar input[type="search"] {
  flex: 1 1 260px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
}
.substitution-size-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.substitution-size-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.substitution-size-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--canvas);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}
.substitution-size-table td { padding: 5px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.substitution-size-table tr:last-child td { border-bottom: 0; }
.substitution-size-table code { font-size: 10.5px; white-space: nowrap; }
.substitution-size-input {
  width: 110px;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
}
/* A size read off the SKU rather than typed by hand: shown, but visibly not
   an answer anyone has confirmed. */
.substitution-size-input.is-derived { color: var(--muted); font-weight: 600; background: var(--canvas); }
.substitution-size-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

.substitution-fit-list { display: grid; gap: 8px; max-height: 48vh; overflow: auto; }
.substitution-fit-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.substitution-fit-label { display: grid; gap: 2px; }
.substitution-fit-label strong { font-size: 12.5px; }
.substitution-fit-options { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.substitution-fit-option { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 620px) {
  .substitution-fit-row { grid-template-columns: 1fr; }
}

/* ---- Warehouse Rules page (v58) ----------------------------------------- */
.warehouse-rules-explainer { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
.warehouse-rules-explainer li { font-size: 12px; line-height: 1.6; color: var(--ink); }
.warehouse-rules-explainer strong { color: var(--brand-700); }

/* Bases-per-table count on the fit table (v62). */
.substitution-fit-count { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 800; }
.substitution-fit-count input { width: 46px; min-height: 24px; padding: 2px 5px; border: 1px solid var(--line-strong); border-radius: 5px; font: inherit; font-size: 11px; font-weight: 800; text-align: center; }

/* client quote list (v65) -- the per-client quote archive on the client drawer.
   Scoped to .client-quote-* so nothing else picks these up. */
.client-quote-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 10px; }
.client-quote-toolbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.client-quote-toolbar select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; background: #fff; }
/* data-table carries min-width:800px, which would push the drawer sideways. */
.client-quote-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
/* No min-width floor: data-table sets 800px, which overflows even the wide
   drawer once a closed row carries three buttons and pushes Reopen off-screen. */
.client-quote-table { min-width: 0; }
/* Dates, quote numbers and money must never wrap -- a QT number broken across
   two lines is unreadable at a glance, which is the whole point of the ledger. */
.client-quote-table td:nth-child(1), .client-quote-table td:nth-child(2),
.client-quote-table td:nth-child(6) { white-space: nowrap; }
.client-quote-table td:nth-child(3) { min-width: 110px; }
.client-quote-table td, .client-quote-table th { padding: 9px 11px; }
.client-quote-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.client-quote-flag { display: block; margin-top: 2px; font-size: 10px; font-style: normal; font-weight: 700; color: #B23A28; }
.client-quote-muted { color: var(--muted); }
/* A declined or cancelled quote stays readable but stops competing with live
   work for attention -- it is history, not a task. */
.client-quote-row.is-closed td { opacity: .62; }
.client-quote-row.is-closed:hover td { opacity: 1; }
.client-quote-actions { white-space: nowrap; text-align: right; }
.client-quote-actions button { margin-left: 3px; padding: 3px 7px; font-size: 10px; min-height: 24px; }
.client-quote-table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 800; background: #fbfbfc; }
.client-quote-hidden-note { margin: 7px 2px 0; font-size: 11px; color: var(--muted); }

/* All Quotes page (v67) -- the global ledger. Reuses the .client-quote-* cell
   rules; only the extra Client column and the toolbar total are new. */
.all-quotes-table td:nth-child(3) { min-width: 120px; font-weight: 700; }
.all-quotes-table td:nth-child(4) { min-width: 140px; }
.all-quotes-table td:nth-child(7) { white-space: nowrap; }
.all-quotes-total { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* "How this price was worked out" (v68) -- the saved calculator working. */
.jac-pricing-working { min-height: 34px; font-size: 10px; font-weight: 900; }
.price-breakdown { display: grid; gap: 12px; }
.price-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.price-settings > div { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fbfbfc; }
.price-settings span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.price-settings strong { display: block; margin-top: 3px; font-size: 14px; font-variant-numeric: tabular-nums; }
.price-line { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.price-line header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #f6f7f8; border-bottom: 1px solid var(--line); }
.price-line header span { font-size: 12px; font-variant-numeric: tabular-nums; }
/* One rung per row so the ladder reads top to bottom, the way it was worked. */
.price-steps { display: grid; }
.price-step { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 7px 12px; border-bottom: 1px solid #f0f1f2; }
.price-step:last-child { border-bottom: 0; background: #fbfdfc; }
.price-step span { font-size: 11px; color: #435f52; }
.price-step strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.price-step small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.price-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 11px; background: #fbfbfc; }
.price-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }

/* Broker freight-rate review (v71). */
.fr-summary { margin: 0 0 12px; font-size: 12px; color: var(--muted); font-weight: 700; }
.fr-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: #fff; }
/* A row the scanner could not fully read is marked, because approving one of
   those is how a lane that does not exist gets into the estimator. */
.fr-card.has-gap { border-left: 5px solid #B23A28; }
.fr-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.fr-card header small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.fr-money { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; margin: 10px 0; }
.fr-field span { display: block; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.fr-field input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.fr-field.is-missing input { border-color: #B23A28; background: #fff6f5; }
.fr-flags { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; font-size: 12px; }
.fr-notes { margin: 6px 0; font-size: 11px; color: var(--muted); }
.fr-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ==========================================================================
   Compact quote list on the Jobs page (Jack, 2026-08-25)
   "if i had 20 quotes id have to scroll allot" -- so the list opens as one
   line per quote and the full detail card folds away behind the chevron.

   The row is a ledger line: quote number and money are set in tabular figures
   so the columns align straight down the page. That alignment is the reason a
   list of twenty scans faster than twenty cards, and it is why these two
   columns get a different face from everything else.
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Rows sit flush against each other -- the gap the old cards needed would
   undo the density we are buying here. */
.job-worklist.job-month-list { display: block; gap: 0; padding: 0; background: var(--panel); }

.job-row-head,
.job-row {
  display: grid;
  /* Company widened once the contact name joined it (Jack, 2026-08-26); the
     next-step column gives up the difference, since it truncates gracefully and
     the full text is on the row's tooltip and in the expanded card. */
  grid-template-columns: 4px 92px minmax(0, 1.95fr) 104px minmax(0, 1.7fr) 34px;
  align-items: center;
  gap: 14px;
}

.job-row-head {
  padding: 7px 14px 7px 0;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.job-row-head > span:nth-child(4) { text-align: right; }

.job-row-wrap + .job-row-wrap .job-row { border-top: 1px solid var(--line); }

.job-row {
  padding: 0 14px 0 0;
  min-height: 38px;
  cursor: pointer;
  background: var(--panel);
  transition: background .12s ease;
}
.job-row:hover { background: #f8fafc; }
.job-row-wrap.is-open .job-row { background: var(--brand-50); }

/* The spine is the only colour in the row: it carries how urgent the next
   step is, using the same values the detail card already uses. */
.job-row-spine { align-self: stretch; background: transparent; }
.job-row.overdue .job-row-spine,
.job-row.due-today .job-row-spine { background: #bd2d2a; }
.job-row.due-tomorrow .job-row-spine,
.job-row.due-soon .job-row-spine { background: #d97813; }

.job-row-quote {
  font: 600 12.5px/1 ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--blue);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .12s ease;
}
.job-row-quote:hover { text-decoration-color: currentColor; }
.job-row-quote:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

.job-row-company {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-row-pin { color: var(--brand-600); font-size: 11px; }

.job-row-cost {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}

.job-row-next {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-row.overdue .job-row-next,
.job-row.due-today .job-row-next { color: #9b2522; font-weight: 600; }
.job-row.due-tomorrow .job-row-next,
.job-row.due-soon .job-row-next { color: #8a4d0c; }

.job-row-toggle {
  justify-self: end;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.job-row-toggle:hover { border-color: var(--line-strong); background: var(--panel); color: var(--ink); }
.job-row-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* The detail card is unchanged -- it is only inset so it reads as belonging to
   the row above it rather than as a sibling of the other rows. */
.job-row-detail {
  padding: 10px 14px 16px 14px;
  background: var(--canvas);
  border-top: 1px solid var(--line);
}
.job-row-detail .job-work-card { margin: 0; }

@media (max-width: 880px) {
  /* Job cost moves under the company name; the next step keeps its own line so
     it never gets truncated to uselessness on a phone. */
  .job-row-head { display: none; }
  .job-row {
    grid-template-columns: 4px 1fr 34px;
    grid-template-areas: "spine quote toggle" "spine company toggle" "spine cost toggle" "spine next toggle";
    gap: 2px 12px;
    padding: 8px 12px 10px 0;
  }
  .job-row-spine { grid-area: spine; }
  .job-row-quote { grid-area: quote; }
  .job-row-company { grid-area: company; }
  .job-row-cost { grid-area: cost; text-align: left; }
  .job-row-next { grid-area: next; white-space: normal; }
  .job-row-toggle { grid-area: toggle; align-self: start; }
}

/* ==========================================================================
   Integrated-app page header (Jack, 2026-08-25)
   He circled this block: the Command Center's own wrapper above an embedded
   tool -- big title, a line of standing boilerplate, the context chip and the
   Back / Reload / Open full screen buttons. On the Furniture Freight Calculator
   it was ~134px before you reached the calculator itself.

   Scoped to .integrated-page-intro so every other page keeps its full-size
   intro; this only affects the embedded-tool pages, where the title is
   duplicated by the tool's own header right underneath it.
   ========================================================================== */
.page-intro.integrated-page-intro {
  padding: 9px 14px;
  margin-bottom: 10px;
  align-items: center;
}
.page-intro.integrated-page-intro h2 {
  font-size: 17px;
  letter-spacing: -.02em;
  margin: 0;
}
/* Standing boilerplate -- the same sentence on every visit. Kept, at a size
   that matches how often it needs reading. */
.page-intro.integrated-page-intro p {
  font-size: 11.5px;
  line-height: 1.3;
  margin: 1px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-intro.integrated-page-intro .integrated-context-row { margin-top: 4px; }
.page-intro.integrated-page-intro .integrated-context-chip {
  font-size: 10.5px;
  padding: 3px 8px;
}
.page-intro.integrated-page-intro .page-intro-actions { gap: 6px; }
.page-intro.integrated-page-intro .page-intro-actions button,
.page-intro.integrated-page-intro .page-intro-actions .link-button {
  padding: 6px 11px;
  font-size: 12px;
}

/* The status strip directly beneath it is one line of reassurance, not 39px of it. */
.integrated-tool-status { min-height: 26px; padding: 5px 12px; font-size: 10.5px; }

/* The three buttons were wrapping onto two rows, which was the real 84px --
   the shared button rule sets min-height: 39px, so shrinking the padding alone
   did nothing. Override the height and keep them on one line. */
.page-intro.integrated-page-intro .page-intro-actions {
  flex-wrap: nowrap;
  align-items: center;
}
.page-intro.integrated-page-intro .page-intro-actions button,
.page-intro.integrated-page-intro .page-intro-actions .link-button {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11.5px;
  white-space: nowrap;
}
.page-intro.integrated-page-intro .integrated-context-row { margin-top: 3px; }
.page-intro.integrated-page-intro h2 { line-height: 1.15; }

/* The contact's name sits after the company on each quote row (Jack,
   2026-08-26). Muted and lighter so the company still reads first -- the row is
   scanned by company, then acted on by person. */
.job-row-contact {
  margin-left: 7px;
  color: var(--muted);
  font-weight: 500;
}
.job-row-contact::before {
  content: "·";
  margin-right: 7px;
  color: var(--line-strong);
}
}

/* v=89: a quote line with no sales tax choice blocks printing and sending, so
   say it on the page rather than only in a toast after he has already clicked. */
.quote-tax-missing {
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid #e5b8a6;
  border-left: 3px solid #c1502e;
  border-radius: 10px;
  background: #fdf2ee;
  color: #7d2f16;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
}

/* Quote attachments (2026-09-08). Photos/PDFs kept with a quote; the Send tick
   decides what reaches the customer, and it is off until it is set. */
.hidden-file-input { display: none; }
.quote-attachments-list { margin: 10px 0 12px; display: grid; gap: 6px; }
.quote-attachments-empty,
.quote-attachments-summary {
  margin: 0;
  font-size: 11.5px;
  color: #5a6b64;
}
.quote-attachments-summary { margin-top: 4px; }
.quote-attachment-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto 22px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #d8e4dd;
  border-radius: 9px;
  background: #fff;
  font-size: 12px;
}
.quote-attachment-row.sending {
  border-color: #9dcbb0;
  background: #f2fbf6;
}
.quote-attachment-row .qa-icon { color: #0f6a42; }
.quote-attachment-row .qa-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #17362a;
  font-weight: 700;
  text-decoration: none;
}
.quote-attachment-row .qa-name:hover { text-decoration: underline; }
.quote-attachment-row .qa-size { color: #6b7f77; font-size: 11px; white-space: nowrap; }
.quote-attachment-row .qa-send {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #23543f;
  white-space: nowrap;
  cursor: pointer;
}
.quote-attachment-row .qa-remove {
  border: 0;
  background: none;
  color: #a4443a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.quote-attachment-row .qa-remove:hover { color: #7d2f16; }
.quote-attachments-hint { display: block; margin-top: 8px; color: #5a6b64; line-height: 1.4; }

/* On the send screen: exactly what the customer is about to receive. */
.quote-email-attachments { margin: 10px 0 4px; }
.quote-email-attachments-none {
  font-size: 12px;
  color: #5a6b64;
  padding: 8px 10px;
  border: 1px dashed #cfdcd6;
  border-radius: 10px;
}
.quote-email-attachments-list {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid #9dcbb0;
  border-radius: 10px;
  background: #f2fbf6;
  font-size: 12px;
  color: #17362a;
}
.quote-email-attachments-list strong { color: #0f6a42; }

/* Sales roadmap yellow (2026-09-10). Jack's updated Lucidchart colour-codes the
   flow: red = the quote closes, green = it becomes an invoice, yellow = a
   decision or a holding state. The step cards now follow that, so the screen
   reads like the chart on his wall. Yellow existed only for dashboard
   shortcuts, so the roadmap selectors needed their own. */
.sales-roadmap-current.tone-yellow { --roadmap-color: #a17a10; --roadmap-tint: #fff8e2; }
.sales-roadmap-choice.tone-yellow { --choice-color: #a17a10; --choice-tint: #fff8e2; }
.sales-roadmap-history-item.tone-yellow { --history-color: #a17a10; }
.sales-roadmap-final.tone-yellow { --final-color: #a17a10; }
.roadmap-form-intro.tone-yellow { --form-color: #a17a10; --form-tint: #fff8e2; }