/* ============================================================
   Propterra — Dark app-shell foundation  (Phase D7)
   ------------------------------------------------------------
   EVERYTHING here is scoped under `body.pt-dark` (or opt-in
   utility classes). Pages stay light until they add `pt-dark`
   to the body, so this file is safe to load globally and does
   NOT alter existing light pages.

   Activate on a page:
     {% block body_class %}pt-app-shell pt-dark{% endblock %}

   Founder direction: darken the shell all the way through, but
   keep FORMS + DENSE DATA on light surfaces for contrast — wrap
   those in `.pt-surface-light`.
   ============================================================ */

/* ---- Dark tokens + cinematic shell ---- */
body.pt-dark {
  --ptd-bg:        #06120D;
  --ptd-bg-2:      #08160F;
  --ptd-surface:   rgba(255,255,255,0.04);
  --ptd-surface-2: rgba(255,255,255,0.015);
  --ptd-glow:      #34E08C;
  --ptd-ink:       #eaf2ee;
  --ptd-muted:     #9fb0a8;
  --ptd-border:    rgba(52,224,140,0.16);
  --ptd-border-soft: rgba(255,255,255,0.10);

  color: var(--ptd-ink);
  background:
    radial-gradient(circle at 15% -10%, rgba(52,224,140,0.10), transparent 38%),
    linear-gradient(180deg, var(--ptd-bg) 0%, var(--ptd-bg-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---- Header / nav / footer (D7.4) ---- */
body.pt-dark .topbar {
  background: rgba(6,18,13,0.82);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ptd-border);
  position: sticky; top: 0; z-index: 50;
}
body.pt-dark .brand { color: var(--ptd-ink); }
body.pt-dark .topbar .brand img,
body.pt-dark .pt-cobrand-mark { filter: drop-shadow(0 0 10px rgba(52,224,140,0.28)); }
body.pt-dark .nav a { color: var(--ptd-muted); }
body.pt-dark .nav a:hover { color: #fff; }
body.pt-dark .nav .muted { color: var(--ptd-muted); }
body.pt-dark .footer {
  background: transparent;
  color: var(--ptd-muted);
  border-top: 1px solid var(--ptd-border);
}

/* ---- Logo theme-swap helpers (used by base brand + co-brand).
        Display is controlled here (no inline display on the imgs). ---- */
.pt-only-light { display: block; }
.pt-only-dark  { display: none; }
body.pt-dark .pt-only-light { display: none; }
body.pt-dark .pt-only-dark  { display: block; }

/* ---- Co-brand workspace mark on dark ---- */
body.pt-dark .pt-cobrand-name {
  border-left-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}

/* ---- Typography on dark ---- */
body.pt-dark h1, body.pt-dark h2, body.pt-dark h3 { color: #fff; }
body.pt-dark .muted { color: var(--ptd-muted); }
body.pt-dark a { color: var(--ptd-glow); }
body.pt-dark code { background: rgba(255,255,255,0.08); color: #cfe0d6; }
body.pt-dark .kicker, body.pt-dark .pt-kicker {
  color: var(--ptd-glow);
  text-shadow: 0 0 16px rgba(52,224,140,0.4);
}

/* ---- Generic display surfaces become dark glass.
        `:not(.pt-surface-light)` lets a panel opt back into the light style. ---- */
body.pt-dark .card:not(.pt-surface-light),
body.pt-dark .pt-card:not(.pt-surface-light),
body.pt-dark .pt-card-soft:not(.pt-surface-light),
body.pt-dark .quote-card:not(.pt-surface-light),
body.pt-dark .enhancement-card:not(.pt-surface-light) {
  background: linear-gradient(180deg, var(--ptd-surface), var(--ptd-surface-2));
  border: 1px solid var(--ptd-border);
  box-shadow: 0 12px 34px rgba(0,0,0,0.38);
  color: var(--ptd-ink);
}
body.pt-dark .quote-card.pending:not(.pt-surface-light) {
  background: linear-gradient(180deg, rgba(201,138,46,0.10), rgba(255,255,255,0.02));
}
body.pt-dark .empty {
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--ptd-border);
  color: var(--ptd-muted);
}
body.pt-dark blockquote,
body.pt-dark .detail-left blockquote {
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--ptd-glow);
  color: var(--ptd-ink);
}

/* ---- Display tables on dark (dense/editable tables should use a
        .pt-surface-light wrapper instead) ---- */
body.pt-dark table.data {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ptd-border);
  color: var(--ptd-ink);
}
body.pt-dark table.data th {
  background: rgba(52,224,140,0.08);
  color: var(--ptd-glow);
}
body.pt-dark table.data td { border-bottom: 1px solid var(--ptd-border-soft); }
body.pt-dark .why { background: rgba(255,255,255,0.04); }
body.pt-dark .line-items .subtotal-row { background: rgba(52,224,140,0.08); }

/* ---- Tables inside frosted glass panels (e.g. the quote card):
        black header labels on the light header strip, white body copy ---- */
body.pt-dark .pt-surface-glass table.data th {
  color: #0E1714;
}
body.pt-dark .pt-surface-glass table.data td {
  color: #ffffff;
}
body.pt-dark .pt-surface-glass table.data td .muted,
body.pt-dark .pt-surface-glass table.data td.muted {
  color: rgba(255,255,255,0.65);
}
body.pt-dark .pt-surface-glass .line-items .subtotal-row {
  background: rgba(52,224,140,0.16);
}
body.pt-dark .pt-surface-glass .line-items .subtotal-row td {
  color: #ffffff;
  font-weight: 700;
}

/* ============================================================
   D7.2 — Light form / data surface
   A bright panel that sits ON the dark shell so forms, cost
   inputs and dense data stay maximally legible. Works on light
   pages too (just a clean white card).
   ============================================================ */
.pt-surface-light {
  background: #ffffff;
  color: var(--pt-charcoal, #151A18);
  border: 1px solid rgba(15,45,34,0.08);
  border-radius: var(--pt-radius-lg, 20px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.40);
  padding: 28px;
}
/* Re-light everything inside the panel, beating the dark rules above */
body.pt-dark .pt-surface-light,
body.pt-dark .pt-surface-light p { color: var(--pt-charcoal, #151A18); }
body.pt-dark .pt-surface-light h1,
body.pt-dark .pt-surface-light h2,
body.pt-dark .pt-surface-light h3,
body.pt-dark .pt-surface-light legend { color: var(--pt-deep-forest, #0F2D22); }
body.pt-dark .pt-surface-light .muted,
body.pt-dark .pt-surface-light label { color: var(--pt-slate, #59645E); }
body.pt-dark .pt-surface-light a { color: var(--pt-green, #1F7A4D); }
body.pt-dark .pt-surface-light code { background: var(--pt-stone, #E7E4DC); color: var(--pt-charcoal,#151A18); }
/* inputs stay light */
body.pt-dark .pt-surface-light input,
body.pt-dark .pt-surface-light textarea,
body.pt-dark .pt-surface-light select {
  background: #fff;
  color: var(--pt-charcoal, #151A18);
  border: 1px solid var(--pt-stone, #E7E4DC);
}
body.pt-dark .pt-surface-light fieldset { border: 1px solid var(--pt-stone, #E7E4DC); }
/* tables stay light */
body.pt-dark .pt-surface-light table.data {
  background: #fff;
  color: var(--pt-charcoal, #151A18);
  border: 1px solid rgba(15,45,34,0.08);
}
body.pt-dark .pt-surface-light table.data th {
  background: var(--pt-mist, #F7F8F6);
  color: var(--pt-slate, #59645E);
}
body.pt-dark .pt-surface-light table.data td {
  border-bottom: 1px solid var(--pt-stone, #E7E4DC);
  color: var(--pt-charcoal, #151A18);
}
/* nested display elements inside a light panel revert to light */
body.pt-dark .pt-surface-light .enhancement-card {
  background: #fff;
  border: 1px solid var(--pt-stone, #E7E4DC);
  color: var(--pt-charcoal, #151A18);
  box-shadow: var(--pt-shadow-card, 0 10px 30px rgba(15,45,34,0.08));
}
body.pt-dark .pt-surface-light .enhancement-placeholder { background: var(--pt-soft-green, #EAF5EF); }
body.pt-dark .pt-surface-light .why { background: var(--pt-mist, #F7F8F6); }
body.pt-dark .pt-surface-light .why summary { color: var(--pt-slate, #59645E); }
body.pt-dark .pt-surface-light blockquote { background: var(--pt-mist, #F7F8F6); color: var(--pt-charcoal, #151A18); }
body.pt-dark .pt-surface-light .pt-status-pill { color: var(--pt-deep-forest, #0F2D22); }
/* heading on the dark page, above a light panel */
.pt-surface-light--titledark + .pt-surface-light { margin-top: 14px; }

/* ---- Frosted-glass variant: a raised, translucent light-grey pane
        that floats over the dark shell (use with .pt-surface-light) ---- */
.pt-surface-glass,
body.pt-dark .pt-surface-light.pt-surface-glass {
  /* frosted glass — pure white, low opacity, heavy blur */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.40));
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 36px 80px rgba(0,0,0,0.55);
  color: var(--pt-charcoal, #151A18);
}
/* inside a glass panel the table is transparent, so the whole pane reads
   as one uniform sheet of glass (the panel frost is the surface) */
body.pt-dark .pt-surface-glass table.data {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.pt-dark .pt-surface-glass table.data th {
  background: rgba(255,255,255,0.22);
  color: var(--pt-slate, #59645E);
}
body.pt-dark .pt-surface-glass table.data td {
  border-bottom: 1px solid rgba(15,45,34,0.10);
  color: var(--pt-charcoal, #151A18);
}
body.pt-dark .pt-surface-glass table.data tr:hover td { background: rgba(255,255,255,0.25); }

/* high-contrast table on glass: black headers, bright white cell text */
body.pt-dark .pt-table-contrast table.data th { color: #000; }
body.pt-dark .pt-table-contrast table.data td,
body.pt-dark .pt-table-contrast table.data td a {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
body.pt-dark .pt-table-contrast table.data td .muted { color: rgba(255,255,255,0.80); }
/* homeowner name link → core brand green (matches margin %) */
body.pt-dark .pt-table-contrast table.data td a {
  color: var(--pt-green, #1F7A4D);
  text-shadow: 0 0 6px rgba(31,122,77,0.25);
}
body.pt-dark .pt-table-contrast table.data td a:hover { color: #28925a; }

/* ---- Admin console (dark) ---- */
body.pt-dark .admin-nav { margin:1rem 0 1.5rem; display:flex; gap:1.2rem; flex-wrap:wrap; }
body.pt-dark .admin-nav a, body.pt-dark .admin-link { color: var(--ptd-glow); font-weight:600; }
body.pt-dark .admin-nav a:hover, body.pt-dark .admin-link:hover { color:#5cf0a6; }
body.pt-dark .admin-stat {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--ptd-border); border-radius: 12px; padding: 1rem;
}
body.pt-dark .admin-stat .n { font-size:1.8rem; font-weight:800; color: var(--ptd-glow); }
body.pt-dark .admin-stat .l { color: var(--ptd-muted); }

/* ============================================================
   D7.5 — Glowing green button (shared)
   Use class `.pt-btn-glow` anywhere; on dark pages the existing
   <button>/.primary also pick up the glow automatically.
   ============================================================ */
.pt-btn-glow,
body.pt-dark button:not(.secondary),
body.pt-dark button.primary,
body.pt-dark .pt-button-primary {
  display: inline-block;
  background: var(--pt-green, #1F7A4D);
  color: #fff;
  border: 0;
  border-radius: var(--pt-radius-pill, 999px);
  font-weight: 700;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(52,224,140,0.40), 0 14px 34px rgba(31,122,77,0.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pt-btn-glow:hover,
body.pt-dark button:not(.secondary):hover,
body.pt-dark button.primary:hover,
body.pt-dark .pt-button-primary:hover {
  background: #1c9159;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(52,224,140,0.55), 0 16px 40px rgba(31,122,77,0.50);
}
/* Ghost / secondary button for dark backgrounds */
.pt-btn-ghost,
body.pt-dark button.secondary,
body.pt-dark a.secondary {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: var(--pt-radius-pill, 999px);
  padding: 12px 24px;
  font-weight: 700;
  cursor: pointer;
}
.pt-btn-ghost:hover,
body.pt-dark button.secondary:hover,
body.pt-dark a.secondary:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateY(-2px);
}
/* a glowing button INSIDE a light surface keeps the green glow (brand),
   but secondary buttons there revert to the light style */
body.pt-dark .pt-surface-light button.secondary,
body.pt-dark .pt-surface-light a.secondary {
  background: #fff; color: var(--pt-deep-forest,#0F2D22);
  border: 1px solid rgba(15,45,34,0.16);
}

/* ============================================================
   D7.3 — Low-opacity background-image hook
   Drop subtle imagery behind any section:
     <section class="pt-bg-image"
              style="--pt-bg-src:url('/static/hero/hero-dashboard.jpg');
                     --pt-bg-opacity:0.12;">
   ============================================================ */
.pt-bg-image { position: relative; overflow: hidden; }
.pt-bg-image > * { position: relative; z-index: 1; }
.pt-bg-image::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--pt-bg-src);
  background-size: cover;
  background-position: var(--pt-bg-pos, center);
  opacity: var(--pt-bg-opacity, 0.08);
  z-index: 0;
  pointer-events: none;
}
/* watermark variant (contained logo/mark, centered, very faint) */
.pt-bg-watermark { position: relative; overflow: hidden; }
.pt-bg-watermark > * { position: relative; z-index: 1; }
.pt-bg-watermark::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 70%); height: 90%;
  background: var(--pt-wm-src, url('/static/propterra-logo-white.png')) no-repeat center;
  background-size: contain;
  opacity: var(--pt-wm-opacity, 0.025);
  z-index: 0; pointer-events: none;
}

/* ============================================================
   D7.4 — Shared responsive header (mobile parity)
   Condense to logo + primary action under ~640px so the nav
   never overflows. Mark a primary nav action with `.pt-nav-cta`.
   ============================================================ */
@media (max-width: 640px) {
  body.pt-dark .topbar { padding: 12px 16px; }
  body.pt-dark .nav { gap: 12px; }
  /* hide secondary nav links; keep CTAs and the workspace name */
  body.pt-dark .nav a:not(.pt-nav-cta):not(.lp-navcta):not(.pt-btn-glow),
  body.pt-dark .nav .muted { display: none; }
  .pt-surface-light { padding: 20px; }
}

/* ============================================================
   D7.5 — Homeowner portal bright copy (2026-07-20)
   Homeowner dashboard tiles read dark/dim: white glass at ~50%
   over the dark shell turns mid-gray and drowns charcoal copy.
   Scoped to body.pt-home ONLY (all /home pages): flip the tiles
   to dark frosted glass and run ALL copy bright white. Forms
   keep their white inputs (existing input rules still apply).
   Contractor/admin surfaces untouched.
   ============================================================ */
body.pt-home .pt-surface-light.pt-surface-glass {
  background:
    linear-gradient(180deg, rgba(15,45,34,0.62), rgba(10,22,17,0.55));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 18px 50px rgba(0,0,0,0.45);
}
body.pt-home .pt-surface-light,
body.pt-home .pt-surface-light p,
body.pt-home .pt-surface-light li,
body.pt-home .pt-surface-light td { color: #ffffff; }
body.pt-home .pt-surface-light h1,
body.pt-home .pt-surface-light h2,
body.pt-home .pt-surface-light h3,
body.pt-home .pt-surface-light legend,
body.pt-home .pt-surface-light strong { color: #ffffff; }
body.pt-home .pt-surface-light .muted,
body.pt-home .pt-surface-light .hp-empty,
body.pt-home .pt-surface-light label,
body.pt-home .pt-surface-light small { color: rgba(255,255,255,0.72); }
body.pt-home .pt-surface-light a { color: #9FD7B9; }
body.pt-home .pt-surface-light table.data th { color: #9FD7B9; }