/* ============================================
   4x8 CONSTRUCTION — BID PROPOSAL PROGRAM
   Custom styles (supplements Tailwind CDN)
   ============================================ */

/* --- Dark Mode Color Variables --- */
:root {
  --navy: #0c1929;
  --navy-light: #1a2d42;
  --navy-muted: #64748b;
  --navy-pale: #94a3b8;
  --navy-bg: #080f1a;
  --brand-red: #ef4444;
  --surface: #0e1a2b;
  --surface-light: #132238;
  --surface-card: #11203a;
  --surface-border: rgba(100,160,255,0.08);
  --accent: #38bdf8;
  --accent-dim: rgba(56,189,248,0.12);
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
}

/* --- Base --- */
body {
  font-family: 'Inter', 'Calibri', 'Carlito', 'Helvetica Neue', Arial, sans-serif;
  background: var(--navy-bg);
  color: var(--text-primary);
}

/* --- Sidebar active state --- */
.nav-link.active {
  background: rgba(46, 109, 164, 0.3);
  border-left: 3px solid #fff;
  padding-left: 13px;
  font-weight: 600;
}

.nav-link {
  border-left: 3px solid transparent;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--navy-pale);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--navy-muted);
}

/* --- Card styles --- */
.card {
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(56,189,248,0.15);
  font-weight: 800;
  color: var(--accent);  /* sky-blue — readable on the dark card surface */
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, rgba(56,189,248,0.12) 0%, rgba(56,189,248,0.04) 100%);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-body {
  padding: 16px;
}

/* --- Status badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-sent {
  background: #dcfce7;
  color: #166534;
}

.badge-pending {
  background: #fef9c3;
  color: #854d0e;
}

.badge-draft {
  background: #dbeafe;
  color: #1e40af;
}

.badge-na {
  background: #f3f4f6;
  color: #6b7280;
}

.badge-received {
  background: #ede9fe;
  color: #5b21b6;
}

/* --- Scope Builder: Live Preview (matches Stone/Countertops V2 PDF) --- */
.bid-preview {
  background: #ffffff !important;
  border: 1px solid #d1d5db;
  color: #333 !important;
  border-radius: 4px;
  padding: 28px 24px;
  font-family: 'Calibri', 'Carlito', sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: #333;
  min-height: 700px;
}

/* Header — logo centered, title, subtitle */
.bid-preview .preview-header {
  text-align: center;
  margin-bottom: 12px;
}

.bid-preview .preview-logo-img {
  max-width: 100px;
  height: auto;
  margin: 0 auto 6px;
  display: block;
}

.bid-preview .preview-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}

.bid-preview .preview-title .trade-name {
  color: var(--navy-light);
}

.bid-preview .preview-title .bid-notes {
  color: var(--navy);
}

.bid-preview .preview-subtitle {
  color: #666;
  font-size: 10px;
  margin-bottom: 10px;
}

/* Info Grid — 3 rows x 4 columns (label, value, label, value) */
.bid-preview .preview-info-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  border-top: 1px solid #999;
  margin-bottom: 14px;
  font-size: 10px;
}

.bid-preview .preview-info-grid .info-row {
  display: contents;
}

.bid-preview .preview-info-grid .info-label {
  font-weight: 700;
  color: #000;
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
}

.bid-preview .preview-info-grid .info-value {
  padding: 3px 16px 3px 4px;
  border-bottom: 1px solid #ccc;
  color: #333;
}

/* Section header bar — full width navy, white text, numbered */
.bid-preview .preview-section {
  margin-bottom: 10px;
}

.bid-preview .preview-section-header {
  background: var(--navy-light);
  color: white;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  margin-bottom: 0;
}

/* Section body — no border box, just content below the bar */
.bid-preview .preview-section-body {
  padding: 6px 4px 6px 4px;
}

.bid-preview .preview-section-body .sub-header {
  font-weight: 700;
  color: #000;
  font-size: 10.5px;
  margin-top: 6px;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.bid-preview * {
  color: #333 !important;
}
.bid-preview .preview-title .trade-name { color: #1a2d42 !important; }
.bid-preview .preview-title .bid-notes { color: #0c1929 !important; }
.bid-preview .preview-subtitle { color: #666 !important; }
.bid-preview .preview-section-header { color: white !important; }
.bid-preview .red-text, .bid-preview .red-text * { color: #ef4444 !important; }

.bid-preview .preview-section-body .scope-bullet {
  padding-left: 16px;
  position: relative;
  margin-bottom: 2px;
  font-size: 10px;
  line-height: 1.45;
}

.bid-preview .preview-section-body .scope-bullet::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  color: #333;
}

.bid-preview .red-text {
  color: var(--brand-red) !important;
}

.bid-preview .red-text::before {
  color: var(--brand-red) !important;
}

/* Checklist heading */
.bid-preview .checklist-heading {
  font-weight: 700;
  font-size: 10.5px;
  color: #000;
  margin-top: 6px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* Checklist two-column */
.bid-preview .checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 16px;
  font-size: 10px;
}

.bid-preview .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.bid-preview .checklist-item .checkbox {
  width: 10px;
  height: 10px;
  border: 1px solid #666;
  border-radius: 1px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Disclaimer */
.bid-preview .preview-disclaimer {
  font-style: italic;
  font-size: 8px;
  color: #666;
  text-align: left;
  margin-top: 20px;
  padding: 0 4px;
  line-height: 1.4;
}

/* --- Form inputs (scope builder) --- */
.form-input {
  width: 100%;
  border: 1px solid rgba(56,189,248,0.1);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 14px;
  transition: all 0.2s;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  color: var(--text-primary);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* Date input: native picker icon is black-on-dark by default and
   effectively invisible. color-scheme:dark switches the icon (and
   the picker popup) to a light-on-dark rendering in Chromium/Edge;
   the webkit indicator filter is the Safari/older-Chromium fallback
   that brightens the SVG indicator regardless of color-scheme support. */
/* Global — calendar-picker indicator rendered as a custom white SVG
   background-image overlay on every date/time input. The native
   indicator is made transparent (opacity:0) but kept in normal flow
   so clicks open the picker. This is more reliable than the
   filter:invert + color-scheme:dark combo which double-inverted on
   Vince's Windows desktop and produced a BLACK icon. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  padding-right: 30px !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}
/* Tame the bright cyan focus highlight Chrome paints on the active
   month/day/year segment of a date input — defaults to system-color
   which looks like an "overlay" on our dark pill background. Replace
   with a subtle sky-blue tint that blends with the theme. */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="week"]::-webkit-datetime-edit {
  color: #e2e8f0;
}
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="month"]::-webkit-datetime-edit-month-field:focus,
input[type="month"]::-webkit-datetime-edit-year-field:focus {
  background-color: rgba(56, 189, 248, 0.18);
  color: #e2e8f0;
  outline: none;
  border-radius: 3px;
}

/* === Vince's no-tiny-text rule (2026-05-12) ===
   Minimum font size on the site is 14px. Any leftover text-xs (12px)
   from older HTML gets bumped to the floor here so we don't have to
   chase every occurrence by hand. text-[10px] / text-[11px] /
   text-[12px] / text-[13px] arbitrary classes get the same treatment. */
.text-xs,
.text-\[10px\],
.text-\[11px\],
.text-\[12px\],
.text-\[13px\] {
  font-size: 14px !important;
}

.form-select {
  width: 100%;
  border: 1px solid rgba(56,189,248,0.1);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  background: #0e1a2b;
  color: var(--text-primary);
  cursor: pointer;
}

.form-select option {
  background: #0e1a2b;
  color: #e2e8f0;
}

.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, rgba(56,189,248,0.2) 0%, rgba(56,189,248,0.08) 100%);
  color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.25);
  backdrop-filter: blur(8px);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(56,189,248,0.3) 0%, rgba(56,189,248,0.15) 100%);
  box-shadow: 0 0 16px rgba(56,189,248,0.15);
  border-color: rgba(56,189,248,0.4);
}

/* Neutral / navigation buttons — sky-blue scheme site-wide (Vince
   2026-06-05), kept a touch more muted than .btn-primary so a modal's
   primary action still reads as the brighter one. Red (.btn-danger) and
   green inline buttons keep their semantic colors. */
.btn-secondary {
  background: linear-gradient(135deg, rgba(56,189,248,0.10) 0%, rgba(56,189,248,0.04) 100%);
  color: #7dd3fc;
  border: 1px solid rgba(56,189,248,0.28);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: linear-gradient(135deg, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0.08) 100%);
  border-color: rgba(56,189,248,0.45);
}

.btn-danger {
  background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.08) 100%);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.2);
}
.btn-danger:hover {
  background: linear-gradient(135deg, rgba(239,68,68,0.3) 0%, rgba(239,68,68,0.15) 100%);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 14px;
}

/* --- Drag handle --- */
.drag-handle {
  cursor: grab;
  color: var(--navy-pale);
  padding: 2px;
}
.drag-handle:active {
  cursor: grabbing;
}

.sortable-ghost {
  opacity: 0.4;
  background: #dbeafe;
}

.sortable-chosen {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* --- Scope item row --- */
.scope-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.15s;
}

.scope-item-row:hover {
  border-color: #e5e7eb;
  background: #fafafa;
}

.scope-item-row .item-text {
  flex: 1;
  min-width: 0;
}

.scope-item-row .item-text input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 2px 0;
}
.scope-item-row .item-text input:focus {
  outline: none;
  background: white;
  border-bottom: 1px solid var(--navy-light);
}

.scope-item-row .item-text input.subheader-input {
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  font-size: 12px;
}

/* --- Budget table --- */
.budget-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.2;
  table-layout: auto;
}

.budget-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.budget-table th {
  background: #0e1a2b;
  color: var(--accent);
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(56,189,248,0.15);
  border-bottom: 1px solid rgba(56,189,248,0.18);
}

.budget-table td {
  padding: 8px 12px;
  border-right: 1px solid rgba(100,160,255,0.18);
  border-bottom: 1px solid rgba(100,160,255,0.18);
  color: var(--text-primary);
}


.sortable-drag, .sortable-fallback, .sortable-chosen {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.budget-table tr:hover td {
  background: rgba(34,211,238,0.04);
}

.budget-table .row-sent { border-left: 3px solid #22c55e; }
.budget-table .row-pending { border-left: 3px solid #eab308; }
.budget-table .row-draft { border-left: 3px solid #3b82f6; }
.budget-table .row-na { border-left: 3px solid #d1d5db; }

/* --- Notes column textarea --- */
.notes-input {
  font-family: inherit;
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none;
  outline: none;
  overflow: hidden;
}
.notes-input:focus {
  color: #fff !important;
  background: rgba(56,189,248,0.06) !important;
}

/* --- Save button blink --- */
.save-blink {
  animation: save-blink 1.5s ease-in-out infinite;
}
@keyframes save-blink {
  0%, 100% { background: #0f1923; }
  50% { background: #162332; }
}

/* --- SAVE button green slow flash --- */
/* Text-only pulse (Vince 2026-06-11 de-boxing pass) — the unsaved-
   changes signal stays, but as a green TEXT pulse instead of a glowing
   green pill. */
.save-btn-flash {
  animation: save-green-flash 2.6s ease-in-out infinite;
}
@keyframes save-green-flash {
  0%, 100% { color: rgba(34,197,94,0.55); }
  50%      { color: rgba(34,197,94,1); }
}
.save-btn-flash:hover {
  animation: none;
  color: #22c55e !important;
}

/* --- Dark Mode Global Overrides --- */
.bg-white { background: var(--surface) !important; }
.bg-gray-50 { background: var(--surface) !important; }
.bg-blue-50 { background: rgba(56,189,248,0.08) !important; }
.bg-green-50 { background: rgba(34,197,94,0.08) !important; }
.bg-red-50 { background: rgba(239,68,68,0.08) !important; }
.bg-gray-100 { background: transparent !important; }
.bg-gray-200 { background: transparent !important; }

/* Force ALL selects, options, inputs, dropdowns to dark mode — NO white or grey anywhere.
   Use background-color (not the shorthand) so we don't wipe background-image on selects. */
select, select option, .form-select, .form-select option, .form-input {
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
}
/* ═══ Estimator Sheet view — clean three-tier palette + 14px font floor ═══
   Applied only to the .estimator-sky-theme wrapper (the Estimator Sheet branch
   of sub-estimate render — the Client Estimate preview stays untouched).

   Tier 1 — primary text (body, numbers, values, category rows): slate-200
   Tier 2 — muted/secondary (notes, units, helper text):         slate-400
   Tier 3 — accent (section headers, +Add, key highlights):      sky-400

   Minimum font size = 14px (matches the Category row text size so nothing
   in the Estimator is smaller than that). */

/* Tier 1: rewire "dark-theme" Tailwind utilities to bright slate on dark */
.estimator-sky-theme {
  color: #e2e8f0;
}
.estimator-sky-theme .text-white,
.estimator-sky-theme .text-navy,
.estimator-sky-theme .text-navy-light,
.estimator-sky-theme .text-gray-700,
.estimator-sky-theme .text-gray-800,
.estimator-sky-theme .text-gray-900 {
  color: #e2e8f0 !important;
}
/* Tier 2: muted labels */
.estimator-sky-theme .text-navy-muted,
.estimator-sky-theme .text-navy-pale,
.estimator-sky-theme .text-gray-400,
.estimator-sky-theme .text-gray-500,
.estimator-sky-theme .text-gray-600,
.estimator-sky-theme .text-white\/40,
.estimator-sky-theme .text-white\/50,
.estimator-sky-theme .text-white\/60,
.estimator-sky-theme .text-white\/70,
.estimator-sky-theme .text-white\/80 {
  color: #94a3b8 !important;
}
/* Tier 3 (.text-sky-* / .text-sky-400 / inline #38bdf8) intentionally left to
   whatever the element itself specified — stays sky-400 for accents. */

/* Red delete buttons keep their red so destructive actions stay recognizable */
.estimator-sky-theme .text-red-400,
.estimator-sky-theme .text-red-500,
.estimator-sky-theme .text-red-600,
.estimator-sky-theme .hover\:text-red-600:hover {
  color: revert !important;
}

/* Font-size floor: nothing below 14px (category-row size) */
.estimator-sky-theme .text-xs,
.estimator-sky-theme .text-\[10px\],
.estimator-sky-theme .text-\[11px\],
.estimator-sky-theme .text-\[12px\],
.estimator-sky-theme .text-\[13px\],
.estimator-sky-theme [style*="font-size:10px"],
.estimator-sky-theme [style*="font-size:11px"],
.estimator-sky-theme [style*="font-size:12px"],
.estimator-sky-theme [style*="font-size:13px"],
.estimator-sky-theme [style*="font-size: 10px"],
.estimator-sky-theme [style*="font-size: 11px"],
.estimator-sky-theme [style*="font-size: 12px"],
.estimator-sky-theme [style*="font-size: 13px"] {
  font-size: 14px !important;
}

/* Pill-box action buttons for the Estimator toolbar (+ Foundation, + Flatwork, etc.)
   Sized to match the per-estimate Estimator N / View Estimate N pill
   buttons in the left zone — same 12px uppercase font, same line-height,
   same vertical padding so the heights line up exactly. Net effect:
   three rows of item buttons fit in the right zone without overflowing
   past the left zone's stacked button height.

   Important — `.calc-add-btn` was previously 8×20 with default
   line-height (~1.4), which rendered each pill at ~32px tall. Pinning
   line-height:1 brings it down to ~28px and matches the left-zone
   pills exactly. */
.calc-add-btn {
  padding: 5px 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 14px;
  border: 1px solid rgba(56,189,248,0.35);
  /* Cool sky-blue gradient — diagonal sweep from a brighter top-left
     corner to a deeper bottom-right. Same hue family as the rest of
     the UI accents but with subtle depth so the pill reads as a
     button at a glance. */
  background: linear-gradient(135deg, rgba(56,189,248,0.28) 0%, rgba(14,165,233,0.10) 100%);
  color: #7dd3fc;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 22px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.calc-add-btn:hover {
  /* Hover lifts the gradient brighter and adds a soft sky-blue glow.
     Slight Y-translate makes the pill feel pressable. */
  background: linear-gradient(135deg, rgba(125,211,252,0.45) 0%, rgba(56,189,248,0.20) 100%);
  border-color: rgba(125,211,252,0.65);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(56,189,248,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.calc-add-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 1px 2px rgba(0,0,0,0.25);
}

/* Smaller sibling of .calc-add-btn — used for per-row +Footing/+Demo/+Custom
   Forming buttons inside the right-side calculator panels. Same pill look at
   ~50% of the full-size button height. */
.calc-add-btn-sm {
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 20px;
  border: 1px solid rgba(56,189,248,0.25);
  background: rgba(56,189,248,0.08);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}
.calc-add-btn-sm:hover {
  background: linear-gradient(135deg, rgba(56,189,248,0.3) 0%, rgba(56,189,248,0.15) 100%);
  border-color: rgba(56,189,248,0.45);
  color: #7dd3fc;
}

/* Billing section pill-toggles: inline "GC | Home Owner" choice on one row
   with the "Billing:" label. Matches the app's pill-box aesthetic. */
.billing-pill {
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,0.25);
  background: rgba(56,189,248,0.04);
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.billing-pill:hover {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
}
.billing-pill.active {
  background: linear-gradient(135deg, rgba(56,189,248,0.3) 0%, rgba(56,189,248,0.15) 100%);
  border-color: rgba(56,189,248,0.5);
  color: #38bdf8;
}
/* Exempt .calc-add-btn-sm from the 14px font floor so the "50% height" target
   is actually reachable — this class is the one intentional exception. */
.estimator-sky-theme .calc-add-btn-sm {
  font-size: 11px !important;
}

/* Estimator: solid dark bg on every form input — no white flash on hover/focus
   Some browsers (and the Tailwind gradient override) were letting a white
   background leak through on the budget-manual / budget-unit-rate inputs
   (RENTALS, DEMO, MISC, SEEDING MATERIAL rows). Force a consistent dark tint. */
.estimator-sky-theme input.form-input,
.estimator-sky-theme textarea.form-input,
.estimator-sky-theme select.form-input,
.estimator-sky-theme input[type="number"],
.estimator-sky-theme input[type="text"]:not(.cat-name-edit):not(.cat-notes-edit),
.estimator-sky-theme input[type="date"] {
  background: rgba(15, 23, 42, 0.55) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}
.estimator-sky-theme input.form-input:focus,
.estimator-sky-theme textarea.form-input:focus,
.estimator-sky-theme select.form-input:focus,
.estimator-sky-theme input[type="number"]:focus,
.estimator-sky-theme input[type="text"]:not(.cat-name-edit):not(.cat-notes-edit):focus,
.estimator-sky-theme input[type="date"]:focus {
  background: rgba(56, 189, 248, 0.12) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
}
/* Cat-name / Cat-notes inline editors stay transparent — they sit inside
   already-styled budget rows and the table bg shows through */
.estimator-sky-theme input.cat-name-edit,
.estimator-sky-theme input.cat-notes-edit {
  background: transparent !important;
  background-image: none !important;
}

/* Unified summary-table column widths for the right-side calculator panels.
   Every slab/wall/pip/footing/demo/custom-forming table inside
   .estimator-sky-theme applies these widths via table-layout:fixed so rows
   align across parent cards and their indented sub-items. */
.estimator-sky-theme .summary-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

/* Compact row layout — per Vince (2026-04-23) the default py-1.5 on every
   summary row + py-2 on the sub-add bar felt spacious. Tighten vertical
   padding across the right-side panel so more rows fit on screen without
   touching horizontal padding. Horizontal px-2/px-3/px-4 from the inline
   classes still wins — only vertical is overridden. */
.estimator-sky-theme .summary-table td,
.estimator-sky-theme .summary-table th {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.25;
}
.estimator-sky-theme .parent-card {
  /* 14px = Tailwind text-sm, matching the FOUNDATION SLAB / FLATWORK /
     section-header font size so the slab / footing / demo rows read at
     the same weight as the parent header above them. Previously was
     12.5px which made child rows feel like fine-print. */
  font-size: 14px;
}
/* Sub-add bar (+ Footing / + Demo / + Custom Forming). Was py-2 (8px) —
   drop to 3px so the strip doesn't feel like a separate block. */
.estimator-sky-theme .parent-card > .flex.gap-2.py-2 {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
/* The add buttons themselves have their own vertical padding that made
   the bar taller than the rows above it — shave a couple pixels. */
.estimator-sky-theme .calc-add-btn-sm {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Hide the native up/down spinner arrows on every number input across the
   app. Per Vince — the arrows next to the Hardware (Foundation) 2.8 field
   (and every other numeric input in the Estimator sheet, budget table,
   popup modals, calculators) were visual noise. Values are still
   editable by typing and by scroll-wheel. Safari / Chrome / Firefox all
   covered. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Kill native select styling that renders grey on Windows + add chevron dropdown indicator */
select, .form-select, select.form-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  padding-right: 30px !important;
  background-color: var(--surface) !important;
}
select option {
  background: #0e1a2b !important;
  color: #e2e8f0 !important;
}
input, textarea {
  color: var(--text-primary) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}
/* Focus state — subtle blue glow, never white/grey */
input:focus, textarea:focus, select:focus, .form-input:focus {
  background: rgba(56,189,248,0.06) !important;
  border-color: var(--accent) !important;
}
/* Kill the white/yellow background Chrome/Edge slap onto inputs
   that have a remembered/autofilled value. Uses the inset box-
   shadow trick because browsers ignore background-color overrides
   on autofilled inputs. text-fill-color keeps the typed text in
   our normal color instead of the forced dark autofill text. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(56,189,248,0.06) inset !important;
  box-shadow: 0 0 0 1000px rgba(56,189,248,0.06) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}
/* Modal form section backgrounds */
.bg-gray-50 select, .bg-blue-50 select, .bg-green-50 select,
.bg-gray-50 input, .bg-blue-50 input, .bg-green-50 input {
  background-color: var(--surface) !important;
}
/* Schedule of Payment editable inputs sit on the white printed-page
   surface of the Client Estimate preview. The dark-theme defaults
   (input:focus override above + the autofill inset box-shadow trick
   below) would paint them dark. The selectors below use the input
   element prefix to bump specificity above other class-only rules,
   and explicitly null the -webkit-box-shadow to defeat the autofill
   ghost. Forces white bg + black text so the row reads like the
   rest of the doc whether focused, hovered, or autofilled. */
input.schedule-percent,
input.schedule-label,
input.schedule-percent:focus,
input.schedule-label:focus,
input.schedule-percent:hover,
input.schedule-label:hover,
input.schedule-percent:-webkit-autofill,
input.schedule-label:-webkit-autofill {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0a0a0a !important;
  box-shadow: none !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0a0a0a !important;
}
/* Dropdown menus */
[class*="dropdown"] {
  background: #132238 !important;
}
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--surface-border) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-600 { color: var(--text-secondary) !important; }
.text-gray-700 { color: var(--text-secondary) !important; }
.border-gray-200, .border-gray-100 { border-color: rgba(100,160,255,0.1) !important; }
.border-green-400 { border-color: rgba(34,197,94,0.3) !important; }
.text-navy { color: var(--text-primary) !important; }
.text-navy-muted { color: var(--text-secondary) !important; }
.text-navy-pale { color: var(--text-muted) !important; }
.text-navy-light { color: var(--accent) !important; }
.hover\:bg-gray-50:hover { background: rgba(56,189,248,0.04) !important; }
.hover\:bg-gray-100:hover { background: rgba(56,189,248,0.06) !important; }
.hover\:bg-blue-50:hover { background: rgba(56,189,248,0.06) !important; }
.bg-navy { background: rgba(56,189,248,0.15) !important; }
.hover\:bg-navy-light:hover { background: rgba(56,189,248,0.25) !important; }
.bg-navy\/10 { background: rgba(56,189,248,0.08) !important; }

/* --- Editable category name inputs --- */
.cat-name-edit:hover {
  background: #f0f4ff !important;
  cursor: text;
}
.cat-name-edit:focus {
  background: #f0f4ff !important;
  border-bottom: 2px solid var(--navy-light) !important;
}
.cat-notes-edit:hover {
  background: #f0f4ff !important;
  cursor: text;
}
.cat-notes-edit:focus {
  background: #f0f4ff !important;
  border-bottom: 2px solid var(--navy-light) !important;
}

/* --- Save button border blink (matches active tab) --- */
@keyframes save-border-blink {
  0%, 100% { border-color: #1B3A6B; }
  50% { border-color: #2E6DA4; }
}

/* --- Email draft cards --- */
.email-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.email-card-header {
  background: var(--surface-light);
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
  font-size: 12px;
}

.email-card-body {
  padding: 14px;
  font-size: 13px;
}

.email-card-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--surface-border);
  background: var(--surface-light);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Toast notifications --- */
.toast {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: toast-in 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
}

.toast-success {
  background: #166534;
  color: white;
}

.toast-error {
  background: #991b1b;
  color: white;
}

.toast-info {
  background: var(--navy);
  color: white;
}

/* Toasts live top-right under the header now (Vince 2026-06-10) —
   slide in/out toward the right edge instead of bobbing vertically. */
@keyframes toast-in {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(30px); opacity: 0; }
}

/* --- Stat cards (dashboard) --- */
.stat-card {
  background: linear-gradient(135deg, rgba(56,189,248,0.06) 0%, rgba(56,189,248,0.02) 100%);
  border-radius: 12px;
  border: 1px solid rgba(56,189,248,0.08);
  margin: 4px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.stat-card:last-child {
  border-right: none;
}

.stat-card .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* --- Toggle switch --- */
.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle.active {
  background: var(--navy-light);
}

.toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle.active::after {
  transform: translateX(16px);
}

/* --- Empty state --- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--navy-muted);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  opacity: 0.4;
}

.empty-state .empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}

.empty-state .empty-desc {
  font-size: 13px;
}

/* --- Print / PDF preview page sizing --- */
@media print {
  #sidebar, header, #toast-container { display: none !important; }
  main { margin: 0; padding: 0; }
}

/* --- Estimator budget table — compact rows so the whole table
       fits in the viewport without scrolling. Data rows match the
       SUBTOTAL row's height so the table reads as one consistent
       block. Aggressive overrides via !important because the base
       .form-input rule was winning in some browsers due to import
       order. --- */
.estimator-budget-table tbody td {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  vertical-align: middle;
}
.estimator-budget-table .form-input {
  padding: 0 6px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  height: 22px !important;
  line-height: 22px !important;
  box-sizing: border-box;
}
.estimator-budget-table input[type="text"].cat-name-edit,
.estimator-budget-table input[type="text"].cat-notes-edit {
  padding: 0 !important;
  font-size: 13px !important;
  height: 22px !important;
  line-height: 22px !important;
  border: none !important;
  background: transparent !important;
}

/* ── Numeric inputs right-aligned, site-wide (Vince 2026-06-06) ──────
   Dollar amounts (and numbers generally) read better right-aligned, and
   Vince wants it standard everywhere. Scoped to page content + modals so
   it doesn't touch top-bar chrome. !important overrides the per-call-site
   inline text-align:center/left some inputs still carry. */
#content input[type="number"],
#modal-content input[type="number"] {
  text-align: right !important;
}

/* Text selection guarantee (Vince 2026-08-31: "we should always be
   able to highlight and copy text from an estimate/screen"). Sortable
   drag states above still opt out during an active drag. */
body { -webkit-user-select: text; user-select: text; }