/* ═══════════════════════════════════════════════════════════════════
   PlumbingProtect — Commercial portal "2026 Premium" UI layer
   ───────────────────────────────────────────────────────────────────
   A single, shared visual-polish layer loaded on every commercial page
   (portal, plumber sub-portal and the standalone auth pages). It exists
   purely to elevate the look-and-feel toward a luxury / premium SaaS
   product while staying 100% consistent across pages.

   Design principles followed here:
     • UI ONLY — no markup contracts changed, no JS, no API/backend.
     • Additive & defensive — every rule either targets a surface that
       is identical on every page (background, scrollbars, selection,
       focus, the shared sidebar) or uses a higher-specificity hook
       (`body.cshell-body` / `body.pshell-body`) so it can refine a
       page's own `body { … }` background WITHOUT needing per-page edits
       and WITHOUT disturbing bespoke page layouts.
     • Brand-true — navy (#0B1F3A) + gold (#C8A96A) are kept as the
       single source of brand truth; this layer just deepens, refines
       and harmonises their use.
     • Accessible — honours `prefers-reduced-motion`, keeps contrast,
       and adds visible gold `:focus-visible` rings for keyboard users.

   Load order: this file is linked AFTER `shell.css` and BEFORE each
   page's inline <style>, so its `body.cshell-body` selectors (0,1,1)
   still win over a page's plain `body { … }` rule (0,0,1).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand truth (kept identical to the existing system) */
  --pp-navy:        #0B1F3A;
  --pp-navy-deep:   #071428;
  --pp-navy-2:      #0e2545;
  --pp-gold:        #C8A96A;
  --pp-gold-deep:   #b8955a;
  --pp-gold-soft:   rgba(200, 169, 106, 0.14);

  /* Refined premium surface + elevation scale.
     Softer, more diffused shadows read as "expensive" vs. hard drops. */
  --pp-ink:         #0B1F3A;
  --pp-line:        #e7e9f0;
  --pp-line-strong: #d8dbe6;
  --pp-shadow-xs:   0 1px 2px rgba(11, 31, 58, 0.04);
  --pp-shadow-sm:   0 1px 2px rgba(11, 31, 58, 0.04), 0 2px 6px rgba(11, 31, 58, 0.04);
  --pp-shadow-md:   0 2px 4px rgba(11, 31, 58, 0.04), 0 10px 28px -10px rgba(11, 31, 58, 0.16);
  --pp-shadow-lg:   0 4px 8px rgba(11, 31, 58, 0.05), 0 24px 60px -20px rgba(11, 31, 58, 0.24);
  --pp-ring:        0 0 0 3px rgba(200, 169, 106, 0.28);

  --pp-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --pp-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* ── Premium typographic rendering ──────────────────────────────────
   The system already ships Inter. We add optical sizing + tabular/
   contextual feature settings and a hair of negative tracking — the
   small refinements that make modern SaaS type feel deliberate and
   high-end. Applied broadly because every commercial page links this. */
html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01", "calt", "kern";
  letter-spacing: -0.006em;
}

/* Tighten and balance headings for a confident, premium hierarchy.
   Scoped to the shell bodies so the public/auth pages keep their own
   carefully-tuned hero type. */
body.cshell-body h1, body.pshell-body h1,
body.cshell-body h2, body.pshell-body h2,
body.cshell-body h3, body.pshell-body h3 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ── Unified luxury backdrop ────────────────────────────────────────
   One cohesive, layered backdrop shared by every portal page so the
   product reads as a single premium surface rather than a set of
   slightly-different pages. `body.cshell-body` (0,1,1) overrides each
   page's plain `body { background }` (0,0,1) without per-page edits.
   A whisper-fine grain adds material depth without visual noise. */
body.cshell-body,
body.pshell-body {
  background-color: #f5f6fb;
  background-image:
    radial-gradient(1200px 600px at 6% -12%, rgba(200, 169, 106, 0.12) 0%, transparent 58%),
    radial-gradient(1000px 520px at 102% 4%,  rgba(11, 31, 58, 0.07) 0%, transparent 60%),
    radial-gradient(820px 480px at 50% 124%,  rgba(200, 169, 106, 0.06) 0%, transparent 68%),
    linear-gradient(180deg, #f7f8fc 0%, #f3f4f9 100%);
  background-attachment: fixed;
  color: var(--pp-ink);
}
/* Ultra-subtle grain overlay — fixed, non-interactive, print-safe. */
body.cshell-body::before,
body.pshell-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* Keep page content above the grain layer. The shared shells render
   their content as direct children of <body>; lift them above ::before
   while leaving the fixed sidebar (its own stacking context) intact.
   modal-overlay elements are position:fixed and must not be overridden. */
body.cshell-body > *:not(.cshell-sidebar):not(.modal-overlay),
body.pshell-body > *:not(.pshell-sidebar):not(.modal-overlay) {
  position: relative;
  z-index: 1;
}

/* ── Sidebar — quiet luxury refinement ──────────────────────────────
   The sidebar already looks good; we deepen the navy into a richer
   vertical gradient, add a hairline gold top-edge highlight and a soft
   right-edge shadow so it reads as a premium anchored rail. Purely
   additive — layout, widths and the hover-expand behaviour are
   untouched. */
.cshell-sidebar,
.pshell-sidebar {
  background:
    linear-gradient(180deg, #0c2342 0%, #0a1d38 52%, #081831 100%) !important;
  border-right: 1px solid rgba(200, 169, 106, 0.12) !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.03), 8px 0 32px -16px rgba(0, 0, 0, 0.28);
}
.cshell-sidebar::after,
.pshell-sidebar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 169, 106, 0.45), transparent);
  pointer-events: none;
}
/* Refined active item — a touch more presence + a soft inner glow. */
.cshell-nav a.cshell-nav-active,
.pshell-nav a.pshell-nav-active {
  background: linear-gradient(90deg, rgba(200, 169, 106, 0.20), rgba(200, 169, 106, 0.08)) !important;
  box-shadow: inset 3px 0 0 var(--pp-gold), 0 1px 10px -4px rgba(200, 169, 106, 0.35) !important;
}

/* ── Refined gold eyebrows ──────────────────────────────────────────
   The recurring "eyebrow" label above page titles is a signature
   accent. Give it a subtle gold gradient fill + a short lead rule for a
   more crafted, editorial feel. Enumerated by their real class names so
   this is precise and cannot affect unrelated elements. */
.dash-eyebrow, .props-eyebrow, .codes-eyebrow,
.gen-eyebrow, .qr-eyebrow, .reports-eyebrow {
  background: linear-gradient(90deg, var(--pp-gold-deep), var(--pp-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.16em;
}

/* ── Gentle elevation of recurring card surfaces ────────────────────
   Refine the default + hover elevation of the clearly card-like
   surfaces shared across pages. Shadow/transition only (no radius,
   size or layout changes), scoped under the shell bodies so it can't
   leak onto the public site. Low-risk, purely cosmetic depth. */
body.cshell-body .stat-card,
body.cshell-body .detail-card,
body.cshell-body .billing-card,
body.cshell-body .statement-card,
body.cshell-body .work-bucket-card,
body.cshell-body .reports-table-card,
body.cshell-body .card {
  box-shadow: var(--pp-shadow-sm);
  transition: box-shadow 0.25s var(--pp-ease), transform 0.25s var(--pp-ease), border-color 0.25s var(--pp-ease);
}
body.cshell-body .stat-card:hover,
body.cshell-body .detail-card:hover,
body.cshell-body .billing-card:hover,
body.cshell-body .work-bucket-card:hover {
  box-shadow: var(--pp-shadow-md);
}

/* ── Premium custom scrollbars ──────────────────────────────────────
   Slim, brand-tinted scrollbars instead of the chunky OS default —
   a small detail that signals craft. Works on light + dark surfaces. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 31, 58, 0.28) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11, 31, 58, 0.24);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(200, 169, 106, 0.6); background-clip: content-box; }

/* ── Brand-gold text selection ──────────────────────────────────────*/
::selection { background: rgba(200, 169, 106, 0.30); color: var(--pp-navy); }

/* ── Accessible gold focus-visible ring ─────────────────────────────
   Keyboard users get a clear, on-brand focus indicator. Pointer clicks
   stay clean because we only target :focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--pp-ring);
  border-radius: 8px;
}

/* ── Motion & print safety ──────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.cshell-body .stat-card,
  body.cshell-body .detail-card,
  body.cshell-body .billing-card,
  body.cshell-body .statement-card,
  body.cshell-body .work-bucket-card,
  body.cshell-body .reports-table-card,
  body.cshell-body .card { transition: none; }
}

@media print {
  /* Never print the decorative backdrop, grain or sidebar shadow. */
  body.cshell-body, body.pshell-body {
    background: #fff !important;
  }
  body.cshell-body::before,
  body.pshell-body::before { display: none !important; }
  .cshell-sidebar, .pshell-sidebar { box-shadow: none !important; }
}