/* ============================================================
   FERRAGRID APP LAYER — loads after ferragrid.css on showroom
   pages (login, dashboard, deck, method pages) of any Ferragrid
   demo or client app.

   Two jobs:
   1. Map the legacy variable names the factory pages were written
      with (--teal, --teal-deep, --teal-soft, --ink-soft, --soft,
      --shadow, --font, --green, --amber, --red, --purple, --line)
      onto the Ferragrid tokens, so a page's own layout CSS keeps
      working and simply recolors onto the dark stage.
   2. Provide the shared app chrome: top bar, pills, tabs, tables,
      status chips, inputs, the back link, the Ferragrid footer.

   The client's product (their mock site, their chat widget) does
   NOT load this file. It keeps the client's brand.
   ============================================================ */

:root {
  --teal: var(--signal);
  --teal-deep: #e6edf7;
  --teal-soft: rgba(143, 176, 232, 0.12);
  --ink-soft: var(--ink-2);
  --soft: var(--ink-2);
  --shadow: none;
  --font: var(--font-body);
  --green: var(--ok);
  --amber: var(--accent);
  --red: #f08a8a;
  --purple: #b9a3ff;
  --line: rgba(255, 255, 255, 0.10);
  --surface: #101014;
  --surface-2: #0e1116;
  /* partner portal pages */
  --bg: rgba(255, 255, 255, 0.04);
  --card: #101014;
  --accent-deep: #f0a366;
  --err: #f08a8a;
  --warn: #f0a366;
  --mono: var(--font-mono);
}

/* ---- partner portal chrome: top bar, brand, nav, cards, badges ---- */
body > header { background: rgba(16, 16, 20, 0.92) !important; border-bottom: 1px solid var(--line) !important; }
.brand { color: var(--signal) !important; font-family: var(--font-mono); font-weight: 500 !important; }
header nav a, header nav button { color: #b9c2cd !important; }
header nav a:hover, header nav button:hover { color: #ffffff !important; }
.who { color: var(--muted) !important; } .who b { color: var(--ink) !important; }
main h1 { color: var(--ink); }
main h2 { color: var(--muted) !important; font-family: var(--font-mono); font-weight: 500; }
.card .links a { background: var(--accent) !important; color: #14100b !important; }
.card .links a.soft { background: transparent !important; color: #b9c2cd !important; border: 1px solid var(--line); }
.card .links a.soft:hover { color: #ffffff !important; border-color: var(--signal); }
.badge.on { background: rgba(111, 206, 156, 0.16) !important; color: var(--ok) !important; }
.badge.off { background: rgba(255, 255, 255, 0.06) !important; color: var(--muted) !important; }
.tier { background: transparent !important; border-color: var(--line) !important; color: var(--ink-2) !important; }
.tier.on { border-color: var(--ok) !important; color: var(--ok) !important; }
.tier.off { color: var(--muted) !important; }
.note { background: transparent !important; border: 1px dashed var(--line) !important; color: var(--ink-2) !important; }
.pill.signed { background: rgba(111, 206, 156, 0.16) !important; color: var(--ok) !important; }
.pill.suspended { background: rgba(240, 138, 138, 0.16) !important; color: var(--red) !important; }
.pill.prospect { background: rgba(224, 138, 69, 0.16) !important; color: var(--accent-hover) !important; }
.sw { background: transparent !important; border-color: var(--line) !important; color: var(--muted) !important; }
.sw.on { border-color: var(--ok) !important; color: var(--ok) !important; }
.reveal { background: #0c0f14 !important; border: 1px solid var(--line); color: #f4f6f8 !important; }
.reveal small { color: var(--muted) !important; }
button.soft { background: transparent !important; color: #b9c2cd !important; border: 1px solid var(--line) !important; }
main button:not(.soft):not(.danger):not(.link):not(.sw):not(.mode button), button.go { background: var(--accent) !important; color: #14100b !important; border: 1px solid transparent !important; }
button.go:hover, main button:not(.soft):not(.danger):not(.link):not(.sw):not(.mode button):hover { background: var(--accent-hover) !important; }
button.link { color: var(--signal) !important; }
.mode { background: transparent !important; border: 1px solid var(--line); }
.mode button { background: transparent !important; color: var(--muted) !important; border: 0 !important; box-shadow: none !important; }
.mode button.on { color: #ffffff !important; background: rgba(255, 255, 255, 0.07) !important; }
label { color: var(--muted) !important; }
.msg.ok, .ok { color: var(--ok); } .msg.err, .err { color: var(--red); }
.hint { color: var(--muted) !important; }
.row b { color: var(--muted) !important; }

body { min-height: 100vh; }

/* ---- page headers: the website's hero band must not leak onto app pages ---- */
header.hero, .hero { padding: 0 !important; border-bottom: none !important; }
header.hero { display: flex; align-items: center; gap: 14px; margin: 18px 0 10px; }
header.hero h1, .wrap > h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
p.lede { color: var(--ink-2); }
.wrap { padding-top: 22px; }

/* ---- links and the back link ---- */
a.back { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); text-decoration: none; }
a.back:hover { color: #ffffff; }

/* ---- the client mark: always the client's brand, never ours ---- */
div.mark, .logo { background: linear-gradient(140deg, #152a47, #0f1b2d) !important; box-shadow: none !important; }

/* ---- surfaces ---- */
.card, .gap, details.q, .panel, .cat, .kpi {
  background: var(--surface) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.card h2, .card h3, .gap h3, .cat b, .panel b, h2.cat { color: var(--ink) !important; }
h2 .tag, .kpi .l, .kpi .hint { color: var(--muted) !important; }

/* ---- pills, tabs, ghost buttons ---- */
.pill, .tbtn, button.ghost, .act.ghost, nav.tabs button {
  background: transparent !important;
  color: #b9c2cd !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.pill:hover, .tbtn:hover, button.ghost:hover, nav.tabs button:hover { color: #ffffff !important; border-color: var(--signal) !important; background: rgba(255, 255, 255, 0.04) !important; }
nav.tabs button.on, .mode button.on { color: #ffffff !important; background: rgba(255, 255, 255, 0.07) !important; border-color: var(--line) !important; }

/* ---- the one action per screen: copper ---- */
button.act, .act:not(.ghost):not(.danger), .toolbar button, .closer, a.cta-block {
  background: var(--accent) !important;
  color: #14100b !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 26px rgba(168, 91, 34, 0.35) !important;
}
button.act:hover, .toolbar button:hover { background: var(--accent-hover) !important; filter: none !important; }
button.danger, .act.danger { background: transparent !important; color: var(--red) !important; border: 1px solid rgba(240, 138, 138, 0.5) !important; box-shadow: none !important; }

/* ---- inputs ---- */
input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="date"], input[type="number"], input[type="password"], select, textarea, .status-sel, #q-search {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--signal) !important; outline-offset: 0; border-color: var(--signal) !important; }
::placeholder { color: var(--muted); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }

/* ---- tables ---- */
table th { color: var(--muted) !important; border-bottom-color: var(--line) !important; }
table td { border-bottom-color: var(--line-soft) !important; color: var(--ink-2); }
tr:hover td { background: rgba(255, 255, 255, 0.03) !important; }

/* ---- status chips and badges keep meaning, lose the pastel ---- */
.status.new { background: rgba(143, 176, 232, 0.14) !important; color: #dbe6f7 !important; }
.status.callback_requested { background: rgba(224, 138, 69, 0.16) !important; color: var(--accent-hover) !important; }
.status.contacted { background: rgba(185, 163, 255, 0.16) !important; color: var(--purple) !important; }
.status.booked { background: rgba(111, 206, 156, 0.16) !important; color: var(--ok) !important; }
.badge.orig, .p-wiring, h2.cat .n { background: rgba(143, 176, 232, 0.14) !important; color: #dbe6f7 !important; }
.badge.custom, .p-paper { background: rgba(224, 138, 69, 0.16) !important; color: var(--accent-hover) !important; }
.p-config { background: rgba(111, 206, 156, 0.16) !important; color: var(--ok) !important; }
.p-build { background: rgba(185, 163, 255, 0.16) !important; color: var(--purple) !important; }
.chip.live::after { color: var(--ok) !important; background: rgba(111, 206, 156, 0.16) !important; }
.chip.skip::after { color: var(--accent-hover) !important; background: rgba(224, 138, 69, 0.16) !important; }
.chip.road::after { color: var(--purple) !important; background: rgba(185, 163, 255, 0.16) !important; }
.chip { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important; box-shadow: none !important; }
.chan-tile .st.on { color: var(--ok) !important; background: rgba(111, 206, 156, 0.16) !important; }
.chan-tile .st.off { color: var(--accent-hover) !important; background: rgba(224, 138, 69, 0.16) !important; }
.chan-tile { background: var(--surface-2) !important; border-color: var(--line) !important; }
.evt-row code { background: rgba(143, 176, 232, 0.14) !important; color: #dbe6f7 !important; }
.step .num { background: rgba(143, 176, 232, 0.14) !important; color: #dbe6f7 !important; }
.convo-msg.user { background: rgba(143, 176, 232, 0.14) !important; }
.convo-msg.assistant { background: rgba(255, 255, 255, 0.05) !important; }
.mono, pre.mono, .a code, .col p code, .demo-note code { background: #0c0f14 !important; color: #d7dde6 !important; border: 1px solid var(--line-soft); }
.value-line { background: rgba(111, 206, 156, 0.10); border-color: rgba(111, 206, 156, 0.35); }
.bar-row .track { background: rgba(255, 255, 255, 0.06) !important; }
.bar-row .fill, .funnel-step .bar { background: linear-gradient(90deg, var(--signal), #5f86c4) !important; color: #0c0f14 !important; }
.roi-big { color: var(--accent) !important; }
.kpi .n { color: #ffffff !important; font-family: var(--font-mono); }
.empty, .note, .why, .hint, .count, .legend { color: var(--muted) !important; }
.why { border-top-color: var(--line-soft) !important; }
.assume { border-top-color: var(--line-soft) !important; }
.gov-row, .rep-row, .evt-row { border-bottom-color: var(--line-soft) !important; }
.tree, .leaves, .row::before, details.leaf::before { border-color: var(--line) !important; }
.closer { color: #14100b !important; box-shadow: none !important; }
.closer h2, .closer p { color: #14100b !important; }

/* ---- the Ferragrid footer on every showroom page ---- */
footer, .foot { color: var(--muted) !important; }
footer a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
footer a:hover { color: #ffffff; }