/* DMARC Made Easy — design tokens, in the NAH Panel theme.
 *
 * This is the same look as Nah.Panel.Next (admin-portal / client-portal): an
 * aubergine sidebar against a soft warm content well, NAH orange as the one
 * accent, Nunito throughout. The panel ships that palette as shadcn HSL
 * channels on a Tailwind build; this portal is server-rendered PHP with its own
 * token names, so the panel's values are mapped onto the names the views
 * already use rather than renamed across 30 files. The mapping is:
 *
 *   panel --background      -> --bg-page / --bg-app
 *   panel --card            -> --bg-card
 *   panel --muted           -> --bg-elev      (row hover, chip fill)
 *   panel --accent          -> --primary-tint (orange wash)
 *   panel --foreground      -> --ink
 *   panel --muted-foreground-> --ink-3
 *   panel --primary         -> --primary      (fills, rings, sparklines)
 *   panel --accent-foreground -> --primary-ink (accent *text*, see below)
 *   panel --border          -> --line-strong
 *
 * Locked brand values (--nah-*, --sidebar-*) stay put in both skins: the
 * sidebar, the brand mark and the orange CTA are the same colour whether the
 * reader is in light or dark, exactly as they are in the panel.
 */
:root {
  --bg-page: #f8f7fa;
  --bg-app: #f8f7fa;
  --bg-card: #ffffff;
  --bg-elev: #f0eff1;
  --bg-tint: #fbfafc;

  --ink: #2a1730;
  --ink-2: #5c5060;
  /* --ink-3 is the muted ink, and it is the single most-used colour in the
   * views (~300 uses). Set by contrast rather than by eye: it has to clear
   * 4.5:1 on the page, on a card and on --bg-elev, which the softer greys of
   * the old skin did not. */
  --ink-3: #6b626f;
  --ink-4: #b8b0bd;
  --line: rgba(61, 32, 68, 0.08);
  --line-2: rgba(61, 32, 68, 0.04);
  --line-strong: rgba(61, 32, 68, 0.14);

  /* Fills, focus rings and chart strokes: the brand orange itself. */
  --primary: #ff6600;
  --primary-2: #e55b00;
  --primary-soft: #ffe0cc;
  --primary-tint: #fff3eb;
  /* Accent *text*. #ff6600 on white is ~3:1 — fine for a 40px number or a
   * button fill, not for the 12px links and <em>s that make up nearly every
   * var(--primary) in the views. This is the panel's --accent-foreground. */
  --primary-ink: #b34700;

  /* Status colours. The panel skin only fixes "destructive", so these follow
   * the shopfront's NAH-tuned status set — deepened until each clears 4.5:1 on
   * its own soft fill, because that pairing is a .pill: 11.5px bold text, not
   * a swatch. The shopfront's own values are tuned for larger type and land
   * around 2.5–3.7:1 at this size. Keeping --warn well clear of #ff6600 also
   * stops a warning reading as the brand CTA. */
  --good: #25714b;
  --good-soft: #e3f1ea;
  --warn: #8f5a00;
  --warn-soft: #fbedcc;
  --bad: #b8352c;
  --bad-soft: #fbe2e0;

  /* Locked NAH brand palette — identical in both skins. */
  --nah-orange: #ff6600;
  --nah-orange-hover: #e55b00;
  --nah-coral: #e54360;
  --nah-purple: #7b5ea7;
  --nah-aubergine: #3d2044;
  --nah-grey: #999999;
  --grad-warm: linear-gradient(135deg, #ff6600, #e54360);

  --sidebar: #3d2044;
  --sidebar-hover: #4d2d54;
  --sidebar-active: #5d3a64;
  --sidebar-border: #4d2d54;
  --sidebar-ink: #d8d2dc;
  --sidebar-ink-2: rgba(216, 210, 220, 0.62);
  --sidebar-badge: #b8352c;

  /* Panel radius scale: --radius-lg is the panel's 0.6rem, the rest derive. */
  --radius-sm: calc(var(--radius-lg) - 4px);
  --radius: calc(var(--radius-lg) - 2px);
  --radius-lg: 0.6rem;
  --radius-xl: calc(var(--radius-lg) + 4px);

  --theme-bg-canvas: #f8f7fa;
  --dc-bg: #f8f7fa;
  --dc-title: rgba(42, 23, 48, 0.85);
  --dc-subtitle: rgba(42, 23, 48, 0.6);
  --dc-label: rgba(42, 23, 48, 0.7);
  color-scheme: light;

  /* Nunito is the panel font. Proxima Nova Soft is the brand's stated intent
   * but its Adobe licence makes it impractical to self-host, so it stays in
   * the stack only for machines that happen to have it. */
  --font-sans: 'Nunito', 'Proxima Nova Soft', 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --shadow-1: 0 1px 2px rgba(61, 32, 68, 0.05), 0 0 0 1px var(--line);
  --shadow-2: 0 6px 18px rgba(61, 32, 68, 0.08), 0 0 0 1px var(--line);
  --shadow-pop: 0 12px 36px rgba(61, 32, 68, 0.14), 0 0 0 1px var(--line);
}

/* Inside each artboard */
.app {
  width: 100%;
  height: 100%;
  background: var(--bg-app);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'rlig' 1, 'calt' 1;
}

.app * {
  box-sizing: border-box;
}

/* Display type. This was an italic serif in the old skin; the NAH brand has no
 * serif — headlines are the same rounded sans, carried by weight instead. */
.serif { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); }

/* App chrome */
.shell {
  display: grid;
  /* 256px is the panel's w-64 sidebar. The content column keeps its own
     scroller, so the 36px it gives up cannot push a wide table off-page. */
  grid-template-columns: 256px 1fr;
  width: 100%;
  height: 100%;
}

/* Aubergine sidebar — locked to the brand colour in both skins, so the nav
 * inside it is always light-on-dark and cannot use the theme ink tokens. */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-active); border-radius: 2px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--nah-purple); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 22px 8px;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--grad-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.brand-name em { font-style: normal; color: var(--primary-ink); }

/* Panel wordmark: a light "Nutty About" eyebrow over the portal label. */
.brand-stack { display: flex; flex-direction: column; min-width: 0; }
.brand-eyebrow {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* The panel recipe is nah-grey at 70%; at full strength it is the same
     brand grey and clears 4.5:1 on the aubergine instead of 2.9:1. */
  color: var(--nah-grey);
}
.brand-label {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.nav-section {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-ink-2);
  padding: 14px 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--sidebar-ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-item.active {
  background: rgba(255, 102, 0, 0.2);
  color: var(--nah-orange);
}
.nav-item:hover:not(.active) { background: var(--sidebar-hover); color: #fff; }
.nav-item .ico {
  width: 16px;
  height: 16px;
  color: var(--sidebar-ink-2);
  flex: 0 0 auto;
}
.nav-item:hover:not(.active) .ico { color: #fff; }
.nav-item.active .ico { color: var(--nah-orange); }
.nav-item .badge-sm {
  margin-left: auto;
  /* A locked red, not var(--bad): the sidebar is the same aubergine in both
     skins, so anything sitting on it has to be theme-independent too — the
     dark skin's --bad is a pale salmon that would carry white text at 2:1.
     Deeper than brand coral because this is 10px white-on-fill. */
  background: var(--sidebar-badge);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Account row pinned to the bottom of the sidebar. */
.sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 8px 0;
  text-decoration: none;
  color: var(--sidebar-ink);
}
.sidebar-user:hover { color: #fff; }
.sidebar-user .avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.sidebar-user .avatar--anon { background: var(--sidebar-active); }
.sidebar-user .who { font-size: 12.5px; font-weight: 600; min-width: 0; }
.sidebar-user .meta { font-size: 11px; font-weight: 400; color: var(--sidebar-ink-2); }

.workspace {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
  background: var(--bg-app);
}
.topbar .crumbs {
  font-size: 13px;
  color: var(--ink-3);
}
.topbar .crumbs strong {
  color: var(--ink);
  font-weight: 700;
}
.topbar .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 28px;
}

/* Common building blocks */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card-title {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover { background: var(--bg-elev); }
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Locked brand orange — the CTA is the same colour in both skins. */
.btn-primary {
  background: var(--nah-orange);
  color: #fff;
  border-color: transparent;
}
.btn-primary:hover { background: var(--nah-orange-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg-elev); }
.btn-sm { padding: 5px 9px; font-size: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.pill-good { background: var(--good-soft); color: var(--good); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-mute { background: var(--bg-elev); color: var(--ink-2); }
.pill-primary { background: var(--primary-tint); color: var(--primary-ink); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-good { background: var(--good); }
.dot-warn { background: var(--warn); }
.dot-bad { background: var(--bad); }
.dot-mute { background: var(--ink-4); }

.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: var(--bg-elev);
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Health ring is rendered via SVG, but we share label style */
.metric-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.metric-label {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Form-y bits */
.input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.field-label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 6px;
  font-weight: 700;
}

/* Toggle switch */
.switch {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--ink-4);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(14px); }

/* Sparkline */
.sparkline { display: block; }

/* Scrollbars */
.content::-webkit-scrollbar { width: 6px; height: 6px; }
.content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }
.content::-webkit-scrollbar-track { background: transparent; }

/* Striped placeholder */
.placeholder-img {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26, 24, 20, 0.05),
    rgba(26, 24, 20, 0.05) 6px,
    rgba(26, 24, 20, 0.02) 6px,
    rgba(26, 24, 20, 0.02) 12px
  );
  background-color: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* Animated checkmark */
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.draw { stroke-dasharray: 100; animation: draw .8s ease forwards; }

/* Soft fade enter */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.fade-up { animation: fadeUp .35s ease both; }

/* ── Dark theme ──────────────────────────────────────────────────────────
   Aubergine-toned, per the panel's dark skin. The page well sits a shade
   below the sidebar so the sidebar reads as the raised surface it is in
   light mode too — the sidebar colour itself never changes.
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page: #23132a;
  --bg-app: #2a1730;
  --bg-card: #351f3c;
  --bg-elev: #3d2e42;
  --bg-tint: #2f1b36;

  --ink: #eceae9;
  --ink-2: #c3b9c8;
  --ink-3: #a6a6a6;
  --ink-4: #6d5f73;
  --line: rgba(236, 234, 233, 0.09);
  --line-2: rgba(236, 234, 233, 0.05);
  --line-strong: rgba(236, 234, 233, 0.18);

  --primary: #ff751a;
  --primary-2: #ff8c40;
  --primary-soft: #5a3116;
  --primary-tint: #46280f;
  --primary-ink: #ffa366;

  --good: #5fbf94;
  --good-soft: #1f3a2e;
  --warn: #e6a647;
  --warn-soft: #3f2f14;
  --bad: #f08a80;
  --bad-soft: #4a2320;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line);
  --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line);

  --dc-bg: #23132a;
  --dc-title: rgba(236, 234, 233, 0.9);
  --dc-subtitle: rgba(236, 234, 233, 0.5);
  --dc-label: rgba(236, 234, 233, 0.6);

  color-scheme: dark;
}

/* The sidebar is already brand aubergine; in dark it needs a visible edge
   against the near-identical page behind it. */
[data-theme="dark"] .sidebar { border-right-color: var(--line-strong); }

/* Force white-on-X elements to adapt in dark — those use literal '#fff' bg */
[data-theme="dark"] .placeholder-img {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(236, 234, 233, 0.05),
    rgba(236, 234, 233, 0.05) 6px,
    rgba(236, 234, 233, 0.02) 6px,
    rgba(236, 234, 233, 0.02) 12px
  );
}

/* Theme toggle (floating top-right) */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: 700 12.5px var(--font-sans);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(61, 32, 68, 0.1);
  transition: background .15s, color .15s;
}
[data-theme="dark"] .theme-toggle {
  background: rgba(53, 31, 60, 0.85);
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   Production overrides — the design prototype framed each screen as a fixed
   artboard on a pan/zoom canvas. In the real portal a single .app fills the
   viewport and the content column scrolls.
   ═══════════════════════════════════════════════════════════════════════ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-page);
}
/* The font/ink live on .app, which not every fragment is inside — an error
   handler that echoes after the shell has closed, for one. Without this the
   browser default (Times) shows through. The panel sets these on body too. */
body {
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.app.app--full {
  height: 100vh;
}
a { color: inherit; }