/* ============================================================================
   simple.css — Flat "Simple Design" layer (2026-06-XX)

   A single global override that flattens the entire app: every page, the
   sidebar, the topbar, panels, cards, buttons, modals, and widgets.

   How it works
   ------------
   • Loaded LAST in header.php so its rules win the cascade.
   • Gated behind  html[data-design="simple"]  — set by the pre-paint script
     from the `land_design` cookie (defaults to "simple").
   • To revert globally: set cookie land_design=default, or remove the
     <link> in header.php. Nothing in app.css is modified, so it's 100%
     reversible.

   Design intent
   -------------
   Calm, clean, content-first. Hairline borders instead of heavy elevation;
   solid surfaces instead of decorative gradients; one consistent corner
   radius. Brand colour is kept for accents/actions, just used sparingly.
   ============================================================================ */

/* ── 1. Token overrides — instantly reshape everything token-driven ──────── */
html[data-design="simple"] {
  /* Flatten elevation to subtle hairline shadows */
  --shadow-xs:   none;
  --shadow-sm:   0 1px 2px rgba(13,27,46,.045);
  --shadow:      0 1px 2px rgba(13,27,46,.05);
  --shadow-md:   0 2px 6px rgba(13,27,46,.07);
  --shadow-lg:   0 4px 14px rgba(13,27,46,.09);
  --shadow-xl:   0 8px 22px rgba(13,27,46,.11);
  --shadow-brand:0 1px 2px rgba(37,99,235,.14);

  /* One calm, consistent radius family */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
}

html[data-design="simple"][data-theme="dark"] {
  --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --shadow:      0 1px 2px rgba(0,0,0,.45);
  --shadow-md:   0 2px 6px rgba(0,0,0,.5);
  --shadow-lg:   0 4px 14px rgba(0,0,0,.55);
  --shadow-xl:   0 8px 22px rgba(0,0,0,.6);
}

/* ── 2. Surfaces — solid backgrounds, hairline borders, minimal lift ─────── */
html[data-design="simple"] .card,
html[data-design="simple"] .panel,
html[data-design="simple"] .widget,
html[data-design="simple"] .kpi,
html[data-design="simple"] .kpi-card,
html[data-design="simple"] .stat-card,
html[data-design="simple"] .sp-card,
html[data-design="simple"] .team-card,
html[data-design="simple"] .legal-content,
html[data-design="simple"] .legal-toc {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background-image: none !important;
}

/* Tame hover lift — keep a hint of interactivity, drop the big jump */
html[data-design="simple"] .card:hover,
html[data-design="simple"] .card--lift:hover,
html[data-design="simple"] .kpi:hover,
html[data-design="simple"] .kpi-card:hover {
  transform: none !important;
  box-shadow: var(--shadow) !important;
}

/* ── 3. Page hero — flat tinted band, no multi-stop gradient or orbs ──────── */
html[data-design="simple"] .page-hero {
  background: var(--bg-muted) !important;
  background-image: none !important;
  border: 1px solid var(--border);
  box-shadow: none !important;
}
html[data-design="simple"] .hero__orb,
html[data-design="simple"] .page-hero .hero__orb { display: none !important; }

html[data-design="simple"] .page-hero__icon {
  background: var(--brand) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Gradient text headings → solid, readable colour */
html[data-design="simple"] h1,
html[data-design="simple"] .page-hero__title,
html[data-design="simple"] .section-header h2 {
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
}

/* ── 4. Sidebar — flat panel, clean active state ─────────────────────────── */
html[data-design="simple"] .sidebar {
  background: var(--bg-elev) !important;
  background-image: none !important;
  border-right: 1px solid var(--border);
  box-shadow: none !important;
}
html[data-design="simple"] .sidebar__brand,
html[data-design="simple"] .sidebar__link,
html[data-design="simple"] .sidebar__profile-link {
  background-image: none !important;
  box-shadow: none !important;
}
html[data-design="simple"] .sidebar__link.is-active {
  background: var(--brand-50) !important;
  box-shadow: inset 3px 0 0 var(--brand) !important;
}

/* ── 5. Topbar — flat, hairline bottom border ────────────────────────────── */
html[data-design="simple"] .topbar {
  background: var(--bg-elev) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html[data-design="simple"] .topbar__user-dropdown {
  box-shadow: var(--shadow-lg) !important;
  background-image: none !important;
}

/* ── 6. Buttons — flat fills, no gradients or glow ───────────────────────── */
html[data-design="simple"] .btn,
html[data-design="simple"] .btn-primary,
html[data-design="simple"] .btn-auth-submit,
html[data-design="simple"] .btn--primary {
  background-image: none !important;
  box-shadow: none !important;
}
html[data-design="simple"] .btn-primary,
html[data-design="simple"] .btn-auth-submit,
html[data-design="simple"] .btn--primary {
  background: var(--brand) !important;
  color: #fff !important;
}
html[data-design="simple"] .btn-primary:hover,
html[data-design="simple"] .btn-auth-submit:hover,
html[data-design="simple"] .btn--primary:hover {
  background: var(--brand-600) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── 7. Tabs / pills — flat, underline-style active ──────────────────────── */
html[data-design="simple"] .page-tabs {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
html[data-design="simple"] .page-tabs__item.is-active {
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--brand) !important;
  color: var(--brand) !important;
}

/* ── 8. Badges / chips — flat tints ──────────────────────────────────────── */
html[data-design="simple"] .badge,
html[data-design="simple"] .chip {
  background-image: none !important;
  box-shadow: none !important;
}

/* ── 9. Modals / dropdowns / popovers — single soft shadow, no gradient ──── */
html[data-design="simple"] .modal,
html[data-design="simple"] .modal__panel,
html[data-design="simple"] .dropdown-menu,
html[data-design="simple"] .popover {
  background: var(--bg-elev) !important;
  background-image: none !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border);
}

/* ── 10. Inputs — clean, consistent focus ring ───────────────────────────── */
html[data-design="simple"] .form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15) !important;
}

/* ── 11. Forms / tables — quiet separators ───────────────────────────────── */
html[data-design="simple"] .table thead th {
  background: var(--bg-muted) !important;
  background-image: none !important;
}

/* ── 12. Respect reduced-motion users (belt and braces) ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-design="simple"] * { animation-duration: .001ms !important; }
}