/* ═══════════════════════════════════════════════════════════════════
   Ray Go Solar — Luxury Minimalist UI
   Palette:
     Ink     #0F0F14 (primary surface dark)
     Cream   #FAFAF7 (primary surface light)
     Orange  #FF6200 (accent)
     Greys   #374151 strong · #4B5563 body · #6B7280 caption  (all AA on cream)
   ═══════════════════════════════════════════════════════════════════ */

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

:root {
  --ink:        #0F0F14;
  --ink-soft:   #1C1C26;
  --cream:      #FAFAF7;
  --cream-dark: #F0EFE9;
  --orange:     #FF6200;
  --orange-h:   #E55500;

  /* Text greys — three tiers, all WCAG-AA on cream (#FAFAF7).
     slate-strong : ~10.5:1  (headers, important labels)
     slate        : ~ 7.0:1  (body secondary)
     slate-lt     : ~ 4.6:1  (tertiary, small caps, captions)
     Previous slate-lt (#9CA3AF) failed AA on white at 3.2:1. */
  --slate-strong: #374151;
  --slate:        #4B5563;
  --slate-lt:     #6B7280;

  /* On-dark text tiers (white over ink/orange) */
  --on-dark-1:  rgba(255,255,255,.94);  /* primary */
  --on-dark-2:  rgba(255,255,255,.74);  /* secondary */
  --on-dark-3:  rgba(255,255,255,.58);  /* tertiary, captions */

  --border:     #E5E4DF;
  --white:      #FFFFFF;
  --green:      #16A34A;
  --red:        #DC2626;
  --radius:     14px;
  --radius-lg:  22px;
  --shadow:     0 2px 16px rgba(15,15,20,.07);
  --shadow-md:  0 6px 32px rgba(15,15,20,.12);
  --shadow-lg:  0 16px 64px rgba(15,15,20,.18);
  --font:       'Inter', system-ui, sans-serif;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  min-width: 0;
}
a { color: inherit; text-decoration: none; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 10px; }

/* ══════════════════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════════════════ */
.rgs-nav {
  background: var(--ink);
  border-bottom: 2px solid var(--orange);
  padding: 0 2rem;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
  transition: transform .3s ease;
}
/* Auto-hide: slides up out of view when scrolling down, back in when scrolling up */
.rgs-nav.nav-hidden { transform: translateY(-100%); }
.rgs-nav .nav-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}
.rgs-nav .nav-brand .brand-text { white-space: nowrap; }
.rgs-nav .nav-brand .brand-go { color: var(--orange); }
.rgs-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  min-width: 0;
  flex-shrink: 1;
}
.rgs-nav .nav-link {
  color: var(--on-dark-2);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.rgs-nav .nav-link:hover { color: var(--white); }
.rgs-nav .nav-user-link {
  color: var(--on-dark-3);
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.rgs-nav .nav-user-link:hover { color: var(--white); }
.rgs-nav .nav-cta { flex-shrink: 0; }

/* ── Mobile (≤640 px) — keep navbar single-row, no overflow ─────── */
@media (max-width: 640px) {
  .rgs-nav {
    padding: 0 .9rem;
    height: 54px;
  }
  .rgs-nav .nav-brand {
    font-size: .92rem;
    gap: .45rem;
  }
  .rgs-nav .nav-brand svg { width: 18px; height: 18px; }
  .rgs-nav .nav-actions { gap: .55rem; }
  /* Hide the secondary text links on phone (logo still navigates to Dashboard) */
  .rgs-nav .nav-link-secondary { display: none; }
  /* New Proposal becomes icon-only */
  .rgs-nav .nav-cta {
    padding: .5rem .6rem;
    font-size: .8rem;
    gap: 0;
    box-shadow: 0 2px 8px rgba(255,98,0,.3);
  }
  .rgs-nav .nav-cta-text { display: none; }
  .rgs-nav .nav-cta svg { width: 15px; height: 15px; }
  /* User-name text hides; the ↗ stays as the visible log-out target */
  .rgs-nav .nav-user-link .nav-user-name { display: none; }
  .rgs-nav .nav-user-link {
    font-size: .95rem;
    padding: .35rem .4rem;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
  }
}

/* ── Very small phones (≤380 px) — extra-tight layout ───────────── */
@media (max-width: 380px) {
  .rgs-nav { padding: 0 .65rem; }
  .rgs-nav .brand-text {
    /* shorten "Ray Go Solar" → "RGS" via CSS-only trick */
    font-size: 0;
  }
  .rgs-nav .brand-text::before {
    content: "RGS";
    font-size: 1rem;
    letter-spacing: .04em;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--radius);
  transition: all .2s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  letter-spacing: -.01em;
}

/* Primary — Orange fill */
.btn-primary-rgs {
  background: var(--orange);
  color: var(--white);
  padding: .85rem 2rem;
  font-size: 1rem;
  box-shadow: 0 4px 20px rgba(255,98,0,.35);
}
.btn-primary-rgs:hover {
  background: var(--orange-h);
  box-shadow: 0 6px 28px rgba(255,98,0,.45);
  transform: translateY(-1px);
  color: var(--white);
}
.btn-primary-rgs:active { transform: translateY(0); }

/* Secondary — Ink fill */
.btn-secondary-rgs {
  background: var(--ink);
  color: var(--white);
  padding: .85rem 2rem;
  font-size: 1rem;
}
.btn-secondary-rgs:hover {
  background: var(--ink-soft);
  color: var(--white);
  transform: translateY(-1px);
}

/* Ghost — outlined */
.btn-ghost-rgs {
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
  padding: .75rem 1.75rem;
  font-size: .9rem;
}
.btn-ghost-rgs:hover {
  background: var(--orange);
  color: var(--white);
}

/* Small utility */
.btn-sm-rgs {
  padding: .45rem 1rem;
  font-size: .8rem;
  border-radius: 8px;
}

/* Medium — midpoint between btn-sm-rgs and default primary size */
.btn-mid-rgs {
  padding: .65rem 1.5rem;
  font-size: .9rem;
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════ */
.card-rgs {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-rgs .card-header-rgs {
  background: var(--ink);
  color: var(--white);
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.card-rgs .card-header-rgs .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.card-body-rgs { padding: 1.75rem; }

/* ══════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════════ */
.login-screen {
  min-height: 100vh;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.login-screen::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,98,0,.15) 0%, transparent 70%);
  top: -100px; right: -100px;
  pointer-events: none;
}
.login-screen::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,98,0,.08) 0%, transparent 70%);
  bottom: -50px; left: -50px;
  pointer-events: none;
}
.login-box {
  background: var(--white);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.login-logo {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.login-logo img { width: 200px; max-width: 70%; height: auto; display: block; }
/* Navbar brand logo */
.brand-logo { height: 30px; width: auto; display: block; }
.login-box h1 {
  font-size: 1.6rem; font-weight: 800;
  text-align: center; margin-bottom: .3rem;
  letter-spacing: -.03em;
}
.login-box .subtitle {
  text-align: center; color: var(--slate);
  font-size: .9rem; margin-bottom: 2rem;
}
.form-label-rgs {
  font-size: .8rem; font-weight: 600;
  color: var(--slate); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: .4rem;
  display: block;
}
.form-input-rgs {
  width: 100%;
  background: var(--cream-dark);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  font-family: var(--font);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-input-rgs:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,98,0,.12);
  background: var(--white);
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD PAGE
   ══════════════════════════════════════════════════════════════════ */
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}
.page-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.04em;
}
.page-sub { color: var(--slate); font-size: .95rem; margin-top: .2rem; }

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.stat-card .s-label { font-size: .75rem; font-weight: 700; color: var(--slate-strong); text-transform: uppercase; letter-spacing: .04em; }
.stat-card .s-val   { font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; margin: .3rem 0; }
.stat-card .s-sub   { font-size: .8rem; color: rgba(255,255,255,.85); }
.stat-card.accent   { background: var(--ink); color: var(--white); border-color: var(--ink); }
.stat-card.accent .s-label { color: var(--on-dark-1); }
.stat-card.accent .s-sub   { color: var(--on-dark-2); }
.stat-card.orange   { background: var(--orange); color: var(--white); border-color: var(--orange); }
.stat-card.orange .s-label { color: var(--white); }
.stat-card.orange .s-sub   { color: rgba(255,255,255,.85); }


/* Proposals table */
.proposals-table { width: 100%; border-collapse: collapse; }
.proposals-table thead th {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--slate-strong);
  padding: .9rem 1.2rem;
  border-bottom: 2px solid var(--border);
  background: var(--cream-dark);
  text-align: left;
}
.proposals-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.proposals-table tbody tr:hover { background: var(--cream-dark); }
.proposals-table tbody td {
  padding: 1rem 1.2rem;
  font-size: .875rem;
  vertical-align: middle;
}
.badge-rgs {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.badge-ink    { background: var(--ink);    color: var(--white); }
.badge-orange { background: rgba(255,98,0,.12); color: var(--orange); }
.badge-green  { background: rgba(22,163,74,.12); color: var(--green); }

/* ══════════════════════════════════════════════════════════════════
   NEW PROPOSAL PAGE  (2-column)
   ══════════════════════════════════════════════════════════════════ */
.proposal-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) { .proposal-layout { grid-template-columns: 1fr; } }

/* Map panel */
.map-panel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.map-viewport { position: relative; }
#map { height: 480px; width: 100%; display: block; }
#map3d { height: 480px; width: 100%; display: block; }

/* Live status strip overlaid on map while drawing */
.draw-status {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(15,15,20,.88);
  color: var(--white);
  font-size: .78rem;
  font-weight: 500;
  padding: .4rem .55rem .4rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  pointer-events: auto;
  letter-spacing: .01em;
  white-space: nowrap;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.draw-status .draw-status-text { pointer-events: none; }
.draw-status strong { color: var(--orange); font-weight: 700; }
.draw-status .draw-cancel {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border: none;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .28rem .65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.draw-status .draw-cancel:hover { background: rgba(255,255,255,.22); }

/* 3D / 2D toggle button in the map search bar */
.map-3d-toggle {
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .5rem .85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  min-width: 44px;
  text-align: center;
}
.map-3d-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.map-3d-toggle.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.map-3d-toggle.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════
   WORKBOOK — editable spreadsheet on the proposal view
   ══════════════════════════════════════════════════════════════════ */
.workbook {
  max-width: 1280px;
  margin: 1.25rem auto 0;
  padding: 0 1.5rem;
}
.workbook-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  color: var(--white);
  padding: .85rem 1.2rem;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--ink);
}
.workbook[open] .workbook-summary {
  border-radius: 12px 12px 0 0;
}
.workbook-summary::-webkit-details-marker { display: none; }
.workbook-summary::before {
  content: '▸';
  display: inline-block;
  color: var(--orange);
  margin-right: .4rem;
  transition: transform .15s;
  font-size: .85rem;
}
.workbook[open] .workbook-summary::before { transform: rotate(90deg); }
.workbook .wb-title {
  font-size: .9rem; font-weight: 700; letter-spacing: -.01em;
  flex: 1;
}
.workbook .wb-status {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  white-space: nowrap;
}
.workbook .wb-status-loading { color: var(--orange); background: rgba(255,98,0,.15); }
.workbook .wb-status-unsaved { color: #fbbf24; background: rgba(251,191,36,.15); }
.workbook .wb-status-saved   { color: #4ade80; background: rgba(74,222,128,.15); }
.workbook .wb-status-error   { color: #f87171; background: rgba(248,113,113,.18); }

/* ── Workbook modal (Edit Numbers popup) ─────────────────────────────────── */
.wb-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,12,16,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: wbFade .15s ease-out;
}
.wb-modal-backdrop[hidden] { display: none; }
@keyframes wbFade { from { opacity: 0; } to { opacity: 1; } }

.wb-modal {
  position: relative;
  background: var(--white);
  width: 100%; max-width: 760px;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: wbPop .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes wbPop { from { transform: translateY(12px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }

.wb-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem;
  background: var(--ink); color: var(--white);
  flex-shrink: 0;
}
.wb-modal-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--white); }
.wb-modal-hint  { display: block; font-size: .78rem; color: var(--on-dark-2); margin-top: .25rem; max-width: 46ch; }
.wb-modal-close {
  background: rgba(255,255,255,.12); color: #fff; border: none;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: .95rem; font-weight: 700; flex-shrink: 0; line-height: 1;
  transition: background .15s;
}
.wb-modal-close:hover { background: rgba(255,255,255,.28); }

/* status pill inside the dark modal header */
.wb-modal .wb-status {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-dark-2); padding: .25rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.1); white-space: nowrap;
}
.wb-modal .wb-status-loading { color: #ffb27a; background: rgba(255,98,0,.2); }
.wb-modal .wb-status-unsaved { color: #fbbf24; background: rgba(251,191,36,.2); }
.wb-modal .wb-status-saved   { color: #4ade80; background: rgba(74,222,128,.2); }
.wb-modal .wb-status-error   { color: #f87171; background: rgba(248,113,113,.22); }

.wb-modal-body {
  padding: 1.4rem;
  overflow-y: auto;
  flex: 1;
}
.wb-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--cream, #FAF7F2);
  flex-shrink: 0;
}

/* Unsaved-changes confirmation (nested over the modal) */
.wb-confirm {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(10,12,16,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.wb-confirm[hidden] { display: none; }
.wb-confirm-box {
  background: var(--white); border-radius: 14px; padding: 1.5rem;
  max-width: 400px; width: 100%; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.wb-confirm-title { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.wb-confirm-text  { font-size: .875rem; color: var(--slate); line-height: 1.55; margin-bottom: 1.25rem; }
.wb-confirm-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

.workbook-body {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1.1rem 1.25rem 1rem;
  box-shadow: var(--shadow);
}
.wb-section { margin-bottom: 1rem; }
.wb-section-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-strong);
  margin-bottom: .55rem;
  display: flex; align-items: baseline; gap: .55rem;
}
.wb-section-sub {
  font-size: .65rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--slate-lt);
}
.wb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .65rem;
}
.wb-cell {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.wb-cell:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,98,0,.12);
  background: var(--white);
}
.wb-cell-lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--slate);
}
.wb-cell-meta {
  font-size: .8rem; font-weight: 700; color: var(--ink);
  min-width: 36px; text-align: right;
}

/* Panel-spec / terms grid inside the per-package override block */
.wb-spec-head {
  margin: .9rem 0 .5rem; font-size: .78rem; font-weight: 700; color: var(--ink);
}
.wb-spec-head .wb-section-sub { display: block; margin-top: .15rem; }
.wb-spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .55rem;
}
/* Custom-value indicator: an orange dot that appears when a field is overridden */
.wb-custom-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); margin-left: .35rem; vertical-align: middle;
  opacity: 0; transition: opacity .15s; cursor: pointer;
}
.wb-spec-cell.altered { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
.wb-spec-cell.altered .wb-custom-dot { opacity: 1; }
.wb-spec-cell.altered .wb-cell-lbl { color: var(--orange); }
.wb-spec-note { font-size: .68rem; font-weight: 600; color: var(--slate); margin-top: .1rem; }
.wb-spec-note b { color: var(--ink); }
.wb-input {
  border: none; background: transparent; outline: none;
  font-family: var(--font); font-size: .95rem; font-weight: 600;
  color: var(--ink); padding: 0; width: 100%;
}
.wb-input::placeholder { color: var(--slate-lt); font-weight: 500; }
.wb-input-range { flex: 1; accent-color: var(--orange); padding: .25rem 0; }

/* PDF section picker */
.sec-list { display: flex; flex-direction: column; gap: .1rem; }
.sec-item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
  border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--ink);
}
.sec-item:hover { background: rgba(0,0,0,.04); }
.sec-item input { width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; }

/* Version history list */
.ver-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ver-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: var(--white);
}
.ver-item.ver-current { border-color: var(--orange); background: rgba(255,98,0,.05); }
.ver-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ver-label { font-size: .9rem; font-weight: 700; color: var(--ink); }
.ver-meta { font-size: .75rem; color: var(--slate); }
.ver-badge {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--orange); white-space: nowrap;
}
.ver-restore { font-size: .78rem; padding: .4rem .9rem; white-space: nowrap; }

/* Proposal header meta (company / address / date / validity) */
.proposal-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 2rem; max-width: 1100px; margin: 1.25rem auto 0; padding: 1.1rem 1.4rem;
  background: var(--white); border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
}
.pm-item { display: flex; flex-direction: column; gap: .2rem; }
.pm-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.pm-value { font-size: .95rem; font-weight: 600; color: var(--ink); }
/* Apple-style scroll-wheel date picker */
.date-picker {
  background: var(--white); border-radius: 18px; padding: 1.25rem 1.25rem 1rem;
  width: 320px; max-width: 92vw; box-shadow: 0 24px 60px rgba(15,23,42,.35);
}
.dp-title { text-align: center; font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: .9rem; }
.dp-wheels {
  position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr;
  height: 180px; overflow: hidden;                        /* 5 rows × 36px */
}
.dp-wheel {
  height: 180px; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; text-align: center; padding: 72px 0;   /* 2 rows top/bottom so ends centre */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
}
.dp-wheel::-webkit-scrollbar { display: none; }
.dp-item {
  height: 36px; line-height: 36px; scroll-snap-align: center;
  font-size: 1.05rem; font-weight: 600; color: var(--slate-lt);
  transition: color .12s, transform .12s;
}
.dp-item.dp-on { color: var(--ink); transform: scale(1.08); }
.dp-selband {
  position: absolute; left: 0; right: 0; top: 72px; height: 36px; pointer-events: none;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(255,98,0,.06);
}
.dp-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.dp-actions .wb-btn { flex: 1; justify-content: center; }

/* Finder-style editable header fields: look like plain text until double-clicked */
.pm-edit {
  font-family: var(--font); border: none; background: transparent; outline: none;
  padding: .15rem .3rem; margin: -.15rem -.3rem; border-radius: 6px; width: 100%;
  cursor: default; text-overflow: ellipsis;
}
.pm-edit[readonly]:hover { background: rgba(0,0,0,.05); }
.pm-edit.pm-editing {
  cursor: text; background: var(--white);
  box-shadow: 0 0 0 2px var(--orange);
}
.pm-edit::placeholder { color: var(--slate-lt); font-weight: 500; }

/* Finder-style package name: plain text until double-clicked, editable box after */
.wb-pkg-name-static { cursor: default; border-radius: 5px; padding: .1rem .3rem; margin: -.1rem -.3rem; }
.wb-pkg-name-static:hover { background: rgba(0,0,0,.05); }
.wb-pkg-name-editing {
  cursor: text; background: var(--white);
  box-shadow: 0 0 0 2px var(--orange); border-radius: 5px;
}
.wb-input[type="number"]::-webkit-outer-spin-button,
.wb-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wb-section-pkg .wb-section-title { color: var(--orange); }

.wb-actions {
  display: flex; justify-content: flex-end; gap: .55rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.wb-btn {
  font-family: var(--font);
  font-size: .82rem; font-weight: 700;
  padding: .55rem 1.1rem;
  border: none; border-radius: 9px;
  cursor: pointer;
  transition: background .15s, transform .08s, box-shadow .15s;
}
.wb-btn-primary {
  background: var(--orange);
  color: var(--white);
}
.wb-btn-primary:hover  { background: var(--orange-h); box-shadow: 0 4px 14px rgba(255,98,0,.35); }
.wb-btn-primary:active { transform: translateY(1px); }
.wb-btn-ghost {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--border);
}
.wb-btn-ghost:hover { background: var(--cream-dark); color: var(--ink); }

@media (max-width: 640px) {
  .workbook { padding: 0 .85rem; }
  .wb-grid { grid-template-columns: 1fr 1fr; }
  .wb-actions .wb-btn { flex: 1; }
}

/* ── Building info popup (top-right of map) ───────────────────── */
.building-info {
  position: absolute;
  top: 12px; right: 12px;
  width: min(300px, calc(100% - 24px));
  background: rgba(15,15,20,.92);
  color: var(--white);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: .8rem .95rem .85rem;
  z-index: 7;
  font-size: .82rem;
  display: none;
  animation: infoPopupIn .25s ease-out both;
}
.bi-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .4rem;
}
.bi-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--orange);
}
.bi-tag-err { color: #f87171; }
.bi-close {
  background: rgba(255,255,255,.1); border: none; color: var(--white);
  width: 22px; height: 22px; line-height: 18px; padding: 0;
  font-size: 1.05rem; font-weight: 700; border-radius: 6px; cursor: pointer;
}
.bi-close:hover { background: rgba(255,255,255,.22); }
.bi-loading {
  padding: .8rem 0; text-align: center;
}
.bi-name {
  font-size: .95rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.3; margin-bottom: .25rem;
}
.bi-addr {
  font-size: .76rem; color: rgba(255,255,255,.68);
  line-height: 1.4; margin-bottom: .55rem;
}
.bi-types {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem;
}
.bi-chip {
  font-size: .65rem; font-weight: 600; letter-spacing: .04em;
  background: rgba(255,98,0,.16); color: var(--orange);
  border: 1px solid rgba(255,98,0,.28);
  padding: .2rem .5rem; border-radius: 999px;
  text-transform: capitalize;
}
.bi-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem; padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.bi-row-lbl { color: rgba(255,255,255,.62); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .65rem; }
.bi-row-val { color: var(--orange); font-weight: 700; }
.bi-row-warn { color: rgba(255,255,255,.7); font-style: italic; font-size: .74rem; }

/* ─────────────  Light entrance animations  ───────────── */
@keyframes drawStatusIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.draw-status { animation: drawStatusIn .22s ease-out both; }

@keyframes infoPopupIn {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Search marker drop is handled by google.maps.Animation.DROP.
   The 3D pin uses Map3DElement defaults. */

/* Google Places autocomplete dropdown — themed to match the app */
.pac-container {
  margin-top: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  font-family: var(--font);
  overflow: hidden;
  z-index: 2000;
}
.pac-item {
  padding: .55rem .85rem;
  font-size: .82rem;
  border-top: 1px solid rgba(0,0,0,.04);
  cursor: pointer;
  line-height: 1.4;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected { background: rgba(255,98,0,.08); }
.pac-icon { display: none; }                /* hide Google's default left icon */
.pac-item-query { color: var(--ink); font-weight: 600; }
.pac-matched   { color: var(--orange); }
.pac-item span:not(.pac-item-query) { color: var(--slate); }

.map-search {
  background: var(--ink);
  padding: 1.2rem 1.5rem;
  display: flex;
  gap: .75rem;
  align-items: center;
}
.map-search input {
  flex: 1;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: .75rem 1rem;
  color: white;
  font-size: .9rem;
  font-family: var(--font);
  outline: none;
  transition: border-color .2s;
}
.map-search input::placeholder { color: var(--on-dark-3); }
.map-search input:focus { border-color: var(--orange); }

.roof-tally {
  background: var(--ink-soft);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.roof-tally .tally-label { color: var(--on-dark-2); font-size: .8rem; }
.roof-tally .tally-val   { color: var(--white); font-size: 1.4rem; font-weight: 800; }
.roof-tally .tally-sub   { color: var(--orange); font-size: .8rem; font-weight: 600; }

/* Roof list */
.roof-section-list { padding: 0 1.5rem 1.2rem; background: var(--ink-soft); }
.roof-section-item {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: .6rem 1rem;
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--on-dark-1);
}
.roof-section-item .area { color: var(--orange); font-weight: 700; }
.btn-remove {
  background: rgba(255,255,255,.1); border: none; border-radius: 6px;
  color: var(--on-dark-2); cursor: pointer; padding: .2rem .5rem;
  font-size: .75rem; transition: all .2s;
}
.btn-remove:hover { background: rgba(220,38,38,.3); color: #f87171; }

/* Manual roof entry */
.manual-measure {
  background: var(--ink-soft);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1rem 1.5rem;
}
.manual-measure-title {
  color: var(--on-dark-2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .65rem;
  text-transform: uppercase;
}
.manual-measure-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, minmax(86px, .7fr)) auto;
  gap: .55rem;
}
.manual-measure input {
  min-width: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: white;
  font-family: var(--font);
  font-size: .78rem;
  outline: none;
  padding: .55rem .7rem;
}
.manual-measure input::placeholder { color: var(--on-dark-3); }
.manual-measure input:focus { border-color: var(--orange); }
@media (max-width: 760px) {
  .manual-measure-grid { grid-template-columns: 1fr 1fr; }
  .manual-measure-grid .btn { justify-content: center; }
}

/* Form panel */
.form-panel { display: flex; flex-direction: column; gap: 1.25rem; }

.form-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.form-section-header {
  background: var(--ink);
  padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700;
  color: var(--on-dark-1);
  text-transform: uppercase; letter-spacing: .05em;
}
.form-section-header .num {
  width: 22px; height: 22px;
  background: var(--orange); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: white; font-weight: 800;
  flex-shrink: 0;
}
.form-section-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* Select styling */
.form-select-rgs {
  width: 100%;
  background: var(--cream-dark);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-family: var(--font); font-size: .875rem;
  color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-select-rgs:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,98,0,.1);
}

/* Ratio display */
.ratio-bar {
  background: var(--cream-dark);
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
  margin-top: .3rem;
}
.ratio-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 10px;
  transition: width .4s;
}
/* SMP (export) bar — distinct colour so the two halves read as a 100% split */
.ratio-fill-smp { background: var(--ink); }

/* Tariff chip */
.tariff-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,98,0,.08);
  border: 1px solid rgba(255,98,0,.25);
  border-radius: 8px;
  padding: .45rem .9rem;
  font-size: .8rem;
  color: var(--orange);
}
.tariff-chip strong { font-weight: 700; }

/* Preview box */
.preview-result {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: white;
}
.preview-pkg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .75rem;
}
.preview-pkg-card {
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.1);
}
.preview-pkg-card .pkg-name { font-size: .7rem; color: var(--on-dark-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.preview-pkg-card .pkg-val  { font-size: 1.5rem; font-weight: 800; color: var(--orange); }
.preview-pkg-card .pkg-sub  { font-size: .75rem; color: var(--on-dark-3); }

/* Generate button area */
/* Manual roof measurement input */
.manual-measure {
  background: var(--ink-soft);
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.manual-measure-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--on-dark-2);
  margin-bottom: .65rem;
}
.manual-measure-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: .5rem;
  align-items: center;
}
.manual-measure-grid input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .55rem .75rem;
  color: white;
  font-size: .82rem;
  font-family: var(--font);
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
.manual-measure-grid input::placeholder { color: var(--on-dark-3); }
.manual-measure-grid input:focus { border-color: var(--orange); }
@media (max-width: 640px) {
  .manual-measure-grid { grid-template-columns: 1fr 1fr; }
}

.generate-area {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  border: 2px dashed rgba(255,98,0,.35);
}
.generate-area h4 { color: white; font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.generate-area p  { color: var(--on-dark-2); font-size: .82rem; margin-bottom: 1.25rem; }

/* Status message */
.status-msg { font-size: .875rem; margin-top: 1rem; }
.status-msg.success { color: #4ade80; }
.status-msg.error   { color: #f87171; }

/* ══════════════════════════════════════════════════════════════════
   FINANCIAL DASHBOARD (view_proposal.html)
   ══════════════════════════════════════════════════════════════════ */
.fin-dashboard { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem; }

/* Hero KPIs */
.kpi-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
/* All KPI hero cards share one look: ink background, orange value,
   white label, dim-white sub. The `.dark` modifier is kept as a no-op
   for backward compatibility with templates that still apply it. */
.kpi-hero-card,
.kpi-hero-card.dark {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.kpi-hero-card::before,
.kpi-hero-card.dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}
.kpi-hero-card .kh-label,
.kpi-hero-card.dark .kh-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--on-dark-1);
  margin-bottom: .5rem;
}
.kpi-hero-card .kh-val,
.kpi-hero-card.dark .kh-val {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--orange);
}
.kpi-hero-card .kh-sub,
.kpi-hero-card.dark .kh-sub {
  font-size: .8rem;
  color: var(--on-dark-2);
  margin-top: .4rem;
}

/* Package toggle */
.pkg-toggle {
  display: flex;
  gap: .5rem;
  background: var(--cream-dark);
  border-radius: 12px;
  padding: .3rem;
  width: fit-content;
  margin-bottom: 2rem;
}
.pkg-toggle .pkg-tab {
  padding: .6rem 1.5rem;
  border-radius: 9px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--slate);
  transition: all .2s;
  font-family: var(--font);
}
.pkg-toggle .pkg-tab.active {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow);
}

/* Investment breakdown grid */
.inv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) { .inv-grid { grid-template-columns: 1fr; } }

/* Investment breakdown table */
.inv-table { width: 100%; }
.inv-table tr td { padding: .7rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.inv-table tr:last-child td { border-bottom: none; }
.inv-table .inv-label { color: var(--slate); }
.inv-table .inv-val   { text-align: right; font-weight: 600; }
.inv-table .inv-val.minus { color: #DC2626; }
.inv-table .inv-val.total { color: var(--orange); font-size: 1.05rem; font-weight: 800; }
.inv-divider { border-top: 2px solid var(--ink) !important; }

/* CA schedule */
.ca-table { width: 100%; border-collapse: collapse; }
.ca-table th {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-dark-1); padding: .6rem .9rem;
  text-align: left; background: var(--ink);
}
.ca-table th:first-child  { border-radius: 8px 0 0 0; }
.ca-table th:last-child   { border-radius: 0 8px 0 0; }
.ca-table td { padding: .65rem .9rem; font-size: .85rem; border-bottom: 1px solid var(--border); }
.ca-table tr:last-child td { border-bottom: none; }
.ca-table td:last-child { font-weight: 600; color: var(--green); }

/* ROI chart (pure CSS bar) */
.roi-bar-chart { margin-bottom: 1.5rem; }
.roi-bar-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}
.roi-bar-yr  { font-size: .72rem; font-weight: 600; color: var(--slate); width: 36px; flex-shrink: 0; }
.roi-bar-bg  { flex: 1; background: var(--cream-dark); border-radius: 4px; height: 14px; overflow: hidden; }
.roi-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
.roi-bar-fill.positive { background: var(--orange); }
.roi-bar-fill.achieved { background: var(--green); }
.roi-bar-amt { font-size: .72rem; color: var(--slate); width: 90px; text-align: right; flex-shrink: 0; font-weight: 600; }

/* 25-yr Cashflow table */
.cf-table { width: 100%; border-collapse: collapse; }
.cf-table thead th {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-dark-1); padding: .75rem 1rem;
  background: var(--ink); text-align: right;
}
.cf-table thead th:first-child { text-align: left; }
.cf-table tbody td { padding: .6rem 1rem; font-size: .82rem; border-bottom: 1px solid var(--border); text-align: right; }
.cf-table tbody td:first-child { text-align: left; font-weight: 600; }
.cf-table tbody tr:hover { background: var(--cream-dark); }
.cf-table .export-stop { color: var(--slate-lt); }
/* Payback line — bold orange dashed marker on the first year cumulative cashflow turns positive */
.cf-table .payback-line td { border-top: 3px dashed var(--orange); }
/* Pastel-green band on the two rows straddling the payback line (year above + below) */
.cf-table .pay-band td { background: #d6f5e3; }
.cf-table .pay-band:hover td { background: #c8f0d8; }
/* Column totals row */
.cf-table .cf-totals td {
  background: #c9ced6;      /* medium grey */
  color: #000;              /* bold black text */
  font-weight: 800;
  font-size: .82rem;
  border-bottom: none;
  padding: .7rem 1rem;
}
.cf-table .cf-totals:hover td { background: #c9ced6; }

/* Cash-flow summary badges (capacity · IRR · payback) */
.cf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}
.cf-badge {
  flex: 1;
  min-width: 130px;
  text-align: center;
  padding: .85rem 1rem;
  border: 2px solid var(--orange);
  border-radius: 14px;
  background: rgba(255,98,0,.04);
}
.cf-badge-val { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.cf-badge-lbl { font-size: .8rem; color: var(--slate); margin-top: .2rem; }

/* ── Site & Roof media (drawn screenshots / uploads) ─────────────────────── */
/* Upload button sits on the dark ink card header — needs a light, high-contrast look */
.roof-upload-btn {
  cursor: pointer;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  padding: .4rem .8rem;
  margin: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  transition: background .15s, border-color .15s;
}
.roof-upload-btn:hover { background: var(--orange); border-color: var(--orange); }

.roof-swiper { position: relative; }
.roof-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0;
  border-radius: var(--radius);
  scrollbar-width: none;               /* Firefox */
  height: 280px;                       /* JS resizes this to the current image */
}
.roof-track::-webkit-scrollbar { display: none; }   /* WebKit */
.roof-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: var(--cream-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Preserve the image's own aspect ratio — never stretch or crop. The track height
   is set (per current image) so the image fills it exactly; contain is a safety net. */
.roof-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Fallback overlay shown ONLY when the image fails. Note the div also carries the
   .roof-placeholder class (display:flex), so the hide rule needs higher specificity
   than a bare .roof-placeholder to win — otherwise the overlay covers a good image. */
.roof-fallback { position: absolute; inset: 0; }
.roof-slide .roof-fallback { display: none; }
.roof-slide.img-failed .roof-img { display: none; }
.roof-slide.img-failed .roof-fallback { display: flex; }
.roof-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .8rem;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  color: #fff; font-size: .8rem; font-weight: 600;
}
.roof-del {
  background: rgba(220,38,38,.9); color: #fff; border: none;
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-weight: 700; line-height: 1;
}
.roof-del:hover { background: #b91c1c; }
.roof-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(15,15,20,.72); color: #fff; font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.roof-nav:hover { background: rgba(15,15,20,.9); }
.roof-prev { left: 10px; } .roof-next { right: 10px; }
.roof-count { text-align: center; font-size: .75rem; color: var(--slate); margin-top: .6rem; }
/* Placeholder card (manual entry / no image / failed preview) */
.roof-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .35rem; min-height: 220px; height: 100%;
  padding: 1.5rem; background: var(--cream-dark); border-radius: var(--radius);
  border: 2px dashed var(--border);
}
.roof-ph-icon  { font-size: 2.2rem; }
.roof-ph-title { font-weight: 700; color: var(--ink); }
.roof-ph-sub   { font-size: .8rem; color: var(--slate); max-width: 340px; }

/* CO2 section */
.co2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.co2-card {
  background: linear-gradient(135deg, var(--ink) 0%, #0f2416 100%);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: white;
  text-align: center;
}
.co2-card .co2-icon { font-size: 2rem; margin-bottom: .75rem; }
.co2-card .co2-val  { font-size: 1.6rem; font-weight: 800; color: #4ade80; }
.co2-card .co2-lbl  { font-size: .78rem; color: var(--on-dark-2); margin-top: .3rem; }

/* Payment schedule */
.payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .payment-grid { grid-template-columns: 1fr; } }
.payment-milestones { list-style: none; }
.payment-milestones li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
  font-size: .875rem;
}
.payment-milestones li:last-child { border-bottom: none; }
.payment-milestones .milestone-name { color: var(--slate); }
.payment-milestones .milestone-pct  { font-size: .75rem; color: var(--slate-lt); }
.payment-milestones .milestone-amt  { font-weight: 700; }

/* Section divider */
.section-divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Download bar (sticky) */
.download-bar {
  position: sticky;
  top: 60px;
  background: var(--ink);
  border-bottom: 2px solid var(--orange);
  padding: .9rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 900;
}
.download-bar .db-title { color: var(--white); font-size: .95rem; font-weight: 700; }
.download-bar .db-sub   { color: var(--on-dark-2); font-size: .78rem; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }

/* Alerts */
.alert-rgs {
  border-radius: var(--radius);
  padding: .9rem 1.2rem;
  font-size: .875rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.alert-rgs.danger  { background: rgba(220,38,38,.08);  border-color: rgba(220,38,38,.2);  color: var(--red); }
.alert-rgs.success { background: rgba(22,163,74,.08);  border-color: rgba(22,163,74,.2);  color: var(--green); }
.alert-rgs.info    { background: rgba(255,98,0,.08);   border-color: rgba(255,98,0,.2);   color: var(--orange); }

/* Flash messages (top-of-page toasts on authenticated views) */
.flash-stack {
  max-width: 1300px;
  margin: 1rem auto 0;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.flash-msg {
  border-radius: 10px;
  padding: .75rem 1.1rem;
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.flash-danger,  .flash-warning { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: #b91c1c; }
.flash-success { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); color: #15803d; }
.flash-info,    .flash-message { background: rgba(255,98,0,.08);  border-color: rgba(255,98,0,.25);  color: #c2410c; }

/* Empty state */
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--slate); }
.empty-icon  { font-size: 3.5rem; opacity: .3; margin-bottom: 1rem; }

/* Utility */
.text-orange  { color: var(--orange) !important; }
.text-slate   { color: var(--slate); }
.fw-800       { font-weight: 800; }
.ls-tight     { letter-spacing: -.04em; }