/* ════════════════════════════════════════════════════════════════════════
   EEP — Unified App Shell stylesheet
   ════════════════════════════════════════════════════════════════════════

   ONE source of truth for: layout proportions, color tokens, typography,
   form elements, cards, buttons, tables, dark mode. Every authenticated
   page loads this AFTER its own inline <style> so it wins the cascade
   and produces a consistent look across every tool.

   Imported by:
     • js/app-shell-adapter.js     → injects <link> dynamically
     • dashboard.html / contractor-toolbox.html / etc.  → direct <link>

   Activation:
     • Body must have class .eep-app-mode (added by adapter on auth)
     • Optional class .eep-sidebar-collapsed (toggled by hamburger)
     • Optional class .dark-mode (theme toggle)

   Layout invariants (NEVER violate):
     • Sidebar fixed at left, 228px wide, full height, z-index 50
     • Topbar fixed at top, height 54px, left:228px right:0, z-index 35
     • Body content starts at (228, 54). padding-left:228 + padding-top:54
     • Content max-width 1320px, centered, 24px horizontal gutter
     • No content can render at x<228 or y<54 — both reserved for chrome

   v1.33.0 — entire file wrapped in `@layer legacy { ... }`. The legacy
   layer is registered FIRST in css/eep-app.css so v3 component rules
   beat it. No rule was modified — only nested.
   ════════════════════════════════════════════════════════════════════════ */

@layer legacy {

/* ─── DESIGN TOKENS ─── */
.eep-app-mode {
  /* Brand */
  --eep-blue-700:   #0b5ed7;
  --eep-blue-600:   #1268e8;
  --eep-blue-500:   #2d86ff;
  --eep-blue-100:   #d8e6fb;
  --eep-blue-75:    #f2f7ff;
  --eep-navy-950:   #060f1c;
  --eep-navy-900:   #0c1d35;
  /* Neutrals */
  --eep-text-950:   #0b1929;
  --eep-text-850:   #162542;
  --eep-text-700:   #3a4b65;
  --eep-text-600:   #50637c;
  --eep-text-500:   #6d839e;
  --eep-text-400:   #8fa4bc;
  --eep-line:       #dae0ea;
  --eep-line-soft:  #eaeff6;
  --eep-line-hard:  #c8d2df;
  /* Surface */
  --eep-page-bg:    #f7f9fc;
  --eep-surface:    #ffffff;
  --eep-surface-2:  #eef2f8;
  --eep-surface-3:  #e2e8f1;
  /* Status */
  --eep-green:      #1a7a4d;
  --eep-green-light:#eaf6f0;
  --eep-orange:     #b35b00;
  --eep-orange-light:#fff3e0;
  --eep-red:        #c0392b;
  --eep-red-light:  #fdf0ef;
  /* Shadow */
  --eep-shadow-soft:  0 2px 8px rgba(11,25,55,.06), 0 1px 2px rgba(11,25,55,.04);
  --eep-shadow-card:  0 4px 16px rgba(11,25,55,.08);
  --eep-shadow-blue:  0 8px 24px rgba(12,104,232,.20);
  /* Layout */
  --eep-sidebar-w:    228px;
  --eep-topbar-h:     54px;
  --eep-content-max:  1600px;  /* v1.36.18 — was 1320, widened so dashboard / account / admin look "open" not "compressed in middle" on 1920 viewports */
  --eep-gutter:       24px;
  --eep-radius:       10px;
  --eep-radius-sm:    6px;
}

/* ─── BODY / VIEWPORT INVARIANT ─── */
.eep-app-mode {
  font-family: "Inter","Segoe UI",Roboto,Arial,sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  color: var(--eep-text-950) !important;
  background: var(--eep-page-bg) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.eep-app-mode body {
  margin: 0 !important;
  padding-left: var(--eep-sidebar-w) !important;
  padding-top: var(--eep-topbar-h) !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  background: var(--eep-page-bg) !important;
  min-height: 100vh;
  box-sizing: border-box;
  transition: padding-left 220ms cubic-bezier(.4,0,.2,1);
}
/* v1.35.1 — !important removed. v3 sidebar-mode.css declares
   `body.eep-app-mode[data-eep-sidebar-mode="collapsed"] { padding-left: 60px }`
   in @layer components. With this legacy rule normal, the layered v3
   rule wins via normal cascade (later layer beats earlier when both
   are normal-priority). The !important here was a pre-v3 defense
   against page-specific inline overrides; no longer load-bearing. */
.eep-app-mode.eep-sidebar-collapsed body,
body.eep-app-mode.eep-sidebar-collapsed { padding-left: 0; }

/* ─── CONTENT WRAPPER — every page's first visible block gets max-width ───
 * NOTE: `.tool-shell` is intentionally EXCLUDED from this set. Canvas-style
 * tools (place-on-drawing) use a 3-column grid (palette + canvas + properties)
 * that needs the full viewport width. Capping it at 1320px leaves empty
 * gutters on the sides and squeezes the canvas. The dual-context wrapper
 * pages still pad themselves via their own marketing CSS for unauth views.
 */
/* v1.34.2 — !important removed from the content-wrapper rule. With
   v1.33.0 wrapping this file in @layer legacy, the !important here
   was actively HARMFUL: per CSS spec, !important in an EARLIER layer
   beats !important in a LATER layer (inverted from normal cascade),
   so a v3 component rule in @layer components with !important still
   loses to legacy's !important. Removing !important makes the rule a
   normal layered declaration that v3 components can override cleanly.
   Inside the layer, the rule still wins on its own specificity. */
.eep-app-mode .page-content,
.eep-app-mode .tool-wrap,
.eep-app-mode .tool-layout,
.eep-app-mode .ref-wrap,
.eep-app-mode .content-section,
.eep-app-mode .cs-shell,
.eep-app-mode main {
  max-width: var(--eep-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--eep-gutter);
  padding-right: var(--eep-gutter);
  padding-top: 28px;
  box-sizing: border-box;
}

/* Tool-shell (canvas tools) — full-bleed inside the sidebar+topbar frame. */
.eep-app-mode .tool-shell {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* ─── PLAN-TIER BADGES ─────────────────────────────────────────────
 * Tiny pill that rides alongside a feature/button label and tells the
 * engineer which subscription plan unlocks it after Public Beta. While
 * window.EEP_BETA_FREE_OVERRIDE === true every feature is free for every
 * user, but the badge stays visible so the rollout to paid tiers is not
 * a surprise. Drop it inside a button:
 *   <button>Compliance Report <span class="eep-tier-badge eep-tier-pro">PRO</span></button>
 */
.eep-tier-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: middle;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.eep-tier-free       { background: #ecf9f1; color: #0a7a3e; border: 1px solid #b4e1c9; }
.eep-tier-starter    { background: #eef3ff; color: #0b55c8; border: 1px solid #c2d5fb; }
.eep-tier-pro        { background: linear-gradient(135deg,#f3e8ff,#e9d5ff); color: #6d28d9; border: 1px solid #c4b5fd; }
.eep-tier-enterprise { background: linear-gradient(135deg,#1f2937,#0b1929); color: #ffd166; border: 1px solid #374151; }
.eep-tier-beta       { background: #e6f7f1; color: #0a7a3e; border: 1px solid #b4e1c9; }

/* ─── TYPOGRAPHY ─── */
.eep-app-mode h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--eep-text-950); margin: 0 0 8px; }
.eep-app-mode h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--eep-text-950); margin: 0 0 12px; }
.eep-app-mode h3 { font-size: 15px; font-weight: 700; color: var(--eep-text-950); margin: 0 0 8px; }
.eep-app-mode a  { color: var(--eep-blue-700); text-decoration: none; }
.eep-app-mode a:hover { text-decoration: underline; }

/* ─── CARD / SURFACE ─── */
.eep-app-mode .card,
.eep-app-mode .tool-card,
.eep-app-mode .section-card,
.eep-app-mode .panel {
  background: var(--eep-surface) !important;
  border: 1px solid var(--eep-line) !important;
  border-radius: var(--eep-radius) !important;
  padding: 20px !important;
  box-shadow: var(--eep-shadow-soft) !important;
  color: var(--eep-text-950);
  box-sizing: border-box;
}

/* ─── FORM ELEMENTS — unified across all pages ─── */
.eep-app-mode .form-input,
.eep-app-mode .form-select,
.eep-app-mode .form-textarea,
.eep-app-mode input[type="text"]:not(.search-input),
.eep-app-mode input[type="number"],
.eep-app-mode input[type="email"],
.eep-app-mode input[type="password"],
.eep-app-mode input[type="tel"],
.eep-app-mode input[type="date"],
.eep-app-mode select,
.eep-app-mode textarea {
  width: 100%;
  height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--eep-line);
  border-radius: var(--eep-radius-sm);
  background: var(--eep-surface);
  color: var(--eep-text-950);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color 160ms, box-shadow 160ms;
  box-sizing: border-box;
}
.eep-app-mode textarea { height: auto; min-height: 80px; resize: vertical; }
.eep-app-mode .form-input:focus,
.eep-app-mode .form-select:focus,
.eep-app-mode input:focus,
.eep-app-mode select:focus,
.eep-app-mode textarea:focus {
  outline: none;
  border-color: var(--eep-blue-700);
  box-shadow: 0 0 0 3px rgba(11,94,215,.12);
}
.eep-app-mode .form-label,
.eep-app-mode label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--eep-text-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

/* ─── BUTTONS ─── */
.eep-app-mode .btn,
.eep-app-mode .btn-primary,
.eep-app-mode .btn-secondary,
.eep-app-mode .btn-ghost,
.eep-app-mode .calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--eep-radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms, box-shadow 140ms, background 140ms;
  border: 1px solid transparent;
  text-decoration: none !important;
  box-sizing: border-box;
  white-space: nowrap;
}
.eep-app-mode .btn-primary,
.eep-app-mode .calc-btn {
  background: linear-gradient(135deg, var(--eep-blue-700), var(--eep-blue-500));
  color: #fff;
  border: 0;
  box-shadow: var(--eep-shadow-blue);
}
.eep-app-mode .btn-primary:hover,
.eep-app-mode .calc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(12,104,232,.26);
}
.eep-app-mode .btn-secondary {
  background: var(--eep-blue-75);
  color: var(--eep-blue-700);
  border: 1px solid var(--eep-blue-100);
}
.eep-app-mode .btn-secondary:hover { background: #e2eefc; }
.eep-app-mode .btn-ghost {
  background: transparent;
  color: var(--eep-text-700);
  border: 1px solid var(--eep-line);
}
.eep-app-mode .btn-ghost:hover { background: var(--eep-surface-2); }

/* ─── TABLES ─── */
.eep-app-mode table,
.eep-app-mode .data-tbl,
.eep-app-mode .tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--eep-surface);
  border-radius: var(--eep-radius-sm);
  overflow: hidden;
}
.eep-app-mode table th,
.eep-app-mode .data-tbl th {
  background: var(--eep-surface-2) !important;
  color: var(--eep-text-700) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--eep-line);
}
.eep-app-mode table td,
.eep-app-mode .data-tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--eep-line-soft);
  color: var(--eep-text-850);
}
.eep-app-mode table tr:hover td { background: var(--eep-blue-75); }

/* ─── TRACE / CODE BLOCKS ─── */
.eep-app-mode .trace-box,
.eep-app-mode pre {
  background: var(--eep-surface-2);
  border: 1px solid var(--eep-line);
  border-radius: var(--eep-radius-sm);
  padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--eep-text-700);
  line-height: 1.65;
}
.eep-app-mode .trace-box strong { color: var(--eep-text-950); font-family: inherit; }
.eep-app-mode code,
.eep-app-mode .code-ref {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--eep-blue-75);
  color: var(--eep-blue-700);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}

/* ─── HIDE LEGACY MARKETING CHROME inside app mode ─── */
.eep-app-mode .pub-nav,
.eep-app-mode nav.pub-nav,
.eep-app-mode .pub-header,
.eep-app-mode .pub-footer,
.eep-app-mode .site-header,
.eep-app-mode .tool-hero,
.eep-app-mode .hero,
.eep-app-mode .pub-breadcrumb,
.eep-app-mode body > .breadcrumb,
.eep-app-mode .tier-pill,
.eep-app-mode .tour-banner,
.eep-app-mode .faq-section,
.eep-app-mode .logos-section,
.eep-app-mode .upgrade-cta,
.eep-app-mode .pub-cta,
.eep-app-mode #beta-banner,
.eep-app-mode .eep-beta-bar { display: none !important; }

/* top-header: hide brand + back-link, preserve action buttons */
.eep-app-mode .top-header .brand,
.eep-app-mode .top-header .back-link { display: none !important; }
.eep-app-mode .top-header:not(:has(.top-actions, .top-btn, .pill, button)) { display: none !important; }
.eep-app-mode .top-header {
  padding: 8px var(--eep-gutter) !important;
  background: var(--eep-surface) !important;
  border-bottom: 1px solid var(--eep-line) !important;
}

/* Equipment library specific — collapse its in-page topbar to action bar */
.eep-app-mode .eq-topbar > h1 { display: none !important; }
.eep-app-mode .eq-topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 12px var(--eep-gutter) 0 !important;
  max-width: var(--eep-content-max) !important;
  margin: 0 auto !important;
}

/* ─── DARK MODE — comprehensive variable override ─── */
body.dark-mode.eep-app-mode,
.eep-app-mode.dark-mode {
  --eep-page-bg:    #0b1424;
  --eep-surface:    #18233a;
  --eep-surface-2:  #1f2d48;
  --eep-surface-3:  #243353;
  --eep-text-950:   #f0f4fb;
  --eep-text-850:   #d6e0f0;
  --eep-text-700:   #a7b9d4;
  --eep-text-600:   #87a0c2;
  --eep-text-500:   #6b87ac;
  --eep-text-400:   #51678a;
  --eep-line:       #243353;
  --eep-line-soft:  #1a2640;
  --eep-line-hard:  #2c4070;
  --eep-blue-700:   #6ba5ff;
  --eep-blue-500:   #8bbeff;
  --eep-blue-75:    #142340;
  --eep-blue-100:   #1b2e54;
  --eep-shadow-soft: 0 10px 28px rgba(0,0,0,.45);
  --eep-shadow-card: 0 16px 32px rgba(0,0,0,.55);
  --eep-shadow-blue: 0 12px 30px rgba(107,165,255,.32);
  /* Override OLDER tool-page variables (those tools use --bg, --surface etc. raw) */
  --bg:           #0b1424;
  --surface:      #18233a;
  --surface2:     #1f2d48;
  --white:        #18233a;
  --page-bg:      #0b1424;
  --border:       #243353;
  --line:         #243353;
  --line-soft:    #1a2640;
  --text:         #f0f4fb;
  --text-950:     #f0f4fb;
  --text-850:     #d6e0f0;
  --text-700:     #a7b9d4;
  --text-600:     #87a0c2;
  --text-500:     #6b87ac;
  --muted:        #a7b9d4;
  --accent:       #6ba5ff;
  color-scheme: dark;
}
body.dark-mode.eep-app-mode { color: var(--eep-text-950); background: var(--eep-page-bg) !important; }
body.dark-mode.eep-app-mode::-webkit-scrollbar-track { background: var(--eep-page-bg); }
body.dark-mode.eep-app-mode::-webkit-scrollbar-thumb { background: var(--eep-surface-3); border-radius: 5px; }
body.dark-mode.eep-app-mode ::selection { background: rgba(107,165,255,0.32); color: #fff; }

/* ─── RESPONSIVE ─── */
@media (max-width: 860px) {
  .eep-app-mode body { padding-left: 0 !important; }
  .eep-app-mode #eep-shell-sidebar .sidebar { transform: translateX(-100%); }
  .eep-app-mode .eep-shell-topbar { left: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   v1.36.27 (Issue #3 / #1) — PLATFORM-WIDE SIDEBAR REMOVAL — layout reclaim
   ════════════════════════════════════════════════════════════════════════
   `buildSidebar()` (app.js) now returns '' so NO left sidebar is rendered on
   any page. These rules reclaim the 228px reserve that every layout rule kept
   for it. They live at the END of @layer legacy — the EARLIEST registered
   layer — so for !important declarations they beat BOTH:
     • the unconditional `.eep-app-mode body { padding-left:228px !important }`
       earlier in THIS layer (equal layer → higher specificity + later wins);
     • the @layer components rules (sidebar-mode.css 60/240px body padding;
       status-bar.css 240px left offset) — for !important the earliest layer
       wins, so legacy beats components;
     • the adapter's unlayered NORMAL `.eep-shell-topbar{left:228px}` — any
       !important author rule beats a normal one.
   padding-TOP / the 54px topbar reserve are deliberately UNTOUCHED: the topbar
   still exists (now carries the EEP brand + user pill). Everything is scoped
   under `body.eep-app-mode`, a class workspace-v4 never sets, so the
   self-contained workspace (its own <aside class="sidebar">) is unaffected. */
/* Body padding + adapter topbar offset: their SOURCE rules are scoped to
   `.eep-app-mode`, so these overrides match that scope. */
html body.eep-app-mode              { padding-left: 0 !important; }
body.eep-app-mode .eep-shell-topbar { left: 0 !important; }
/* `.app-main` (legacy app-shell main pane) and `.eep-statusbar` carry an
   UNCONDITIONAL 228/240px left reserve in their source rules (app.css:385,
   status-bar.css:49) — NOT gated on `.eep-app-mode`. So these overrides must
   be unconditional too, otherwise inline-buildSidebar pages that never stamp
   `body.eep-app-mode` (e.g. admin.html) keep a phantom left gap. Safe to do
   globally: workspace-v4 uses neither class (it has its own layout), and the
   sidebar is gone on every page. */
.app-main                           { margin-left: 0 !important; }
.eep-statusbar                      { padding-left: var(--sp-3, 12px) !important; }

/* ─────────────────────────────────────────────────────────────────────
   v1.36.28 (Issue #7) — ONE unified Sign Out control across all three
   topbar render paths (buildTopbar / <eep-topbar> / app-shell-adapter).
   Operator chose the labelled-pill style (icon + "Sign Out" text), to
   match the .btn-secondary pill on the Case Studies page and pair with
   the account pill that already sits beside it. Defined here in
   @layer legacy so a single rule wins on every page; key visual props
   carry !important so it beats any generic/layered button styling that
   a host page might apply. Hover flips to a red "destructive" cue. */
.eep-signout-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px !important;
  margin: 0;
  border: 1px solid #d8e6fb !important;
  border-radius: 8px !important;
  background: #f2f7ff !important;
  color: #0b1929 !important;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-appearance: none;
          appearance: none;
}
.eep-signout-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
.eep-signout-pill:hover,
.eep-signout-pill:focus-visible {
  background: #fdf0ef !important;
  border-color: #f0b4ac !important;
  color: #c0392b !important;
}
/* Dark mode keeps the same "neutral at rest → red on hover" intent. The old
   v3 sign-out adapted via tokens and the old adapter logout had its own dark
   rules; this single block restores correct dark rendering for both paths. */
body.dark-mode .eep-signout-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #c9d6e8 !important;
}
body.dark-mode .eep-signout-pill:hover,
body.dark-mode .eep-signout-pill:focus-visible {
  background: rgba(220, 53, 69, 0.22) !important;
  border-color: rgba(220, 53, 69, 0.42) !important;
  color: #ff9a9a !important;
}

} /* end @layer legacy — v1.33.0 */