/* ============================================================
   RINGREADY DESIGN SYSTEM — MARKETING / APP PRIMITIVES
   ------------------------------------------------------------
   Companion stylesheet to main.css. Holds the ds-* component
   primitives used by the redesigned pages (Phase 1+).

   Reference: /admin/design-system
   Conventions: see "Implementation kit" sections 1, 8–10.

   Loading order:
     1. main.css           (existing tokens, global resets)
     2. marketing.css      (this file — ds-* primitives)
     3. <page-specific>    (inline <style> for rs-* one-offs)
   ============================================================ */


/* ============================================================
   GLOBAL ACCESSIBILITY + IMPLEMENTATION OVERRIDES
   Mirrors the Phase 0 block in main.css — duplicated here so
   pages that load marketing.css but not main.css (e.g. auth
   pages with their own <head>) still get them.
   ============================================================ */

/* Predictable sizing for every element — auth pages don't load main.css */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important; /* staggered reveals become instant too */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

.ds-skip-link {
  position: fixed !important;
  top: -50px;
  left: 0.5rem;
  z-index: 2147483647;
  padding: 0.6rem 1rem;
  background: #0f172a !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-skip-link:focus,
.ds-skip-link:focus-visible {
  top: 0 !important;
  color: white !important;
  outline: 2px solid var(--violet-vivid);
  outline-offset: 2px;
}

.ds-truncate {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media print {
  .navbar, nav, footer,
  .modern-navbar, .modern-footer,
  .ds-app__nav, .ds-app__drawer, .ds-app__filter,
  .ds-pm__head, .ds-toast, .ds-skip-link {
    display: none !important;
  }
  body {
    background: white !important;
    color: #000 !important;
    padding-top: 0 !important;
  }
  .card, .ds-app__panel, .ds-em__frame {
    border: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after { content: ""; }
  h1, h2, h3 { page-break-after: avoid; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}


/* ============================================================
   DESIGN TOKENS (DS v2)

   ARCHITECTURE
   ------------
   Tokens are split into three groups:

   1. CORE — invariant across palettes (slate text scale, hairlines,
      motion). Never override these per-theme.

   2. PRIMARY — the indigo "primary" color used for links, focus rings,
      active nav, etc. Held constant across palettes by design — keeps
      the brand identity recognizable when only the accent swaps.

   3. PALETTE-SWAPPABLE — `--kick`, `--kick-rgb`, the section gradient
      ramp (`--warm-*`), and the tinted accent washes. Override via
      `body[data-theme="…"]` to swap palettes.

   CURRENT DEFAULT: Coral (#f43f5e). Alternatives: Fuchsia, Cyan, Mint.

   HOW TO SWITCH PALETTE
   ---------------------
   Two ways:
     a) Apply `<body data-theme="fuchsia">` (etc.) for a single page.
     b) Permanently: change the values in :root below.

   To add a brand new palette: copy any body[data-theme="…"] block
   and edit the values.

   IMPORTANT: never reintroduce hardcoded #6366f1/#8b5cf6/#f43f5e in
   templates. Always use var(--violet-vivid) / var(--kick) /
   rgb(var(--kick-rgb) / X) so palette swaps cascade properly.
   ============================================================ */

:root {
  /* === CORE — invariant across palettes === */
  --slate-900: #0f172a;
  --slate-700: #1e293b;
  --text-body: #475569;
  --text-muted: #64748b;
  --text-fine: #94a3b8;
  --hairline: rgba(15, 23, 42, 0.08);

  /* Motion */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 120ms;
  --dur-quick: 180ms;
  --dur-medium: 320ms;
  --dur-slow: 600ms;

  /* === PRIMARY — cool indigo-violet, invariant across palettes ===
     Matches design_system.html --violet-vivid (#5048e5). *-rgb tokens are
     SPACE-separated so they slot into rgb() / rgba() slash-alpha syntax
     (rgb(var(--kick-rgb) / 0.32)). Comma-separated values would silently
     break the gradient. */
  --violet-vivid: #5048e5;
  --violet-vivid-rgb: 80 72 229;
  --violet-vivid-hover: #3f3bb5;
  --violet-glow: #818cf8;

  /* === PALETTE-SWAPPABLE — Fuchsia by default (DS canonical) === */
  --kick: #d946ef;
  --kick-rgb: 217 70 239;
  --kick-hot: #c026d3;
  --kick-hot-rgb: 192 38 211;
  --kick-soft: #f0abfc;
  --kick-soft-rgb: 240 171 252;
  --lavender-edge: rgb(var(--kick-rgb) / 0.14);
  --lavender-wash: #f7f8ff;
  --warm-A: #ffffff;
  --warm-B: #f7f8ff;
  --warm-C: #ebedff;
  --warm-D: #dde0fa;

  /* === CTA band (dark gradient with kick/violet overlay) ===
     Used as `background: var(--cta-band-bg)` on the final CTA section
     of every marketing pillar page. Re-themable by overriding this one
     token instead of editing every page. */
  --cta-band-bg:
    radial-gradient(circle at 88% 12%, rgb(var(--kick-soft-rgb) / 0.5) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(129, 140, 248, 0.45) 0%, transparent 50%),
    linear-gradient(135deg, #0e1145 0%, #2c2db8 45%, #6d28d9 75%, var(--kick-hot) 100%);
  --cta-band-shadow: 0 40px 80px -40px rgb(var(--violet-vivid-rgb) / 0.55);
  --cta-band-radius: 28px;
  /* CTA band gradient-clipped em text — the white-to-kick highlight used
     on `<em>` inside CTA titles. */
  --cta-band-em-gradient: linear-gradient(90deg, var(--kick-soft) 0%, #ffffff 100%);
}

/* === Alternative palettes (apply via <body data-theme="…">) ===
   Each block redefines only the palette-swappable subset. Add new
   palettes by copying any of these blocks. */

body[data-theme="fuchsia"] {
  /* Same as default :root — kept for explicit declarations. */
  --kick: #d946ef;
  --kick-rgb: 217 70 239;
  --kick-hot: #c026d3;
  --kick-soft: #f0abfc;
  --lavender-edge: rgb(var(--kick-rgb) / 0.14);
  --lavender-wash: #f7f8ff;
  --warm-B: #f7f8ff;
  --warm-C: #ebedff;
  --warm-D: #dde0fa;
}

body[data-theme="cyan"] {
  --kick: #06b6d4;
  --kick-rgb: 6 182 212;
  --lavender-edge: rgb(var(--kick-rgb) / 0.14);
  --lavender-wash: #f5fbfd;
  --warm-B: #f5fbfd;
  --warm-C: #e6f5f9;
  --warm-D: #d4eef5;
}

body[data-theme="mint"] {
  --kick: #10b981;
  --kick-rgb: 16 185 129;
  --lavender-edge: rgb(var(--kick-rgb) / 0.14);
  --lavender-wash: #f5fbf8;
  --warm-B: #f5fbf8;
  --warm-C: #e6f5ed;
  --warm-D: #d4eedc;
}

body[data-theme="coral"] {
  /* Same as default — kept for explicit declarations. */
  --kick: #f43f5e;
  --kick-rgb: 244 63 94;
  --lavender-edge: rgb(var(--kick-rgb) / 0.14);
  --lavender-wash: #fff5f7;
  --warm-B: #fff5f7;
  --warm-C: #ffe9ee;
  --warm-D: #ffd9e0;
}


/* ============================================================
   FOCUS STATES — applies to every focusable element
   ============================================================ */
.ds-focusable:focus-visible,
.ds-app__btn:focus-visible,
.ds-pf__field input:focus-visible,
.ds-pf__field textarea:focus-visible,
.ds-pf__field select:focus-visible,
.ds-auth__google:focus-visible,
.ds-auth__small-link:focus-visible {
  outline: 2px solid var(--violet-vivid);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(var(--kick-rgb) / 0.18);
}


/* ============================================================
   BUTTONS — .ds-app__btn (slate primary, ghost, danger)
   ============================================================ */
.ds-app__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 9px;
  font-size: 0.825rem;
  font-weight: 600;
  background: var(--slate-900);
  color: white;
  border: 1px solid var(--slate-900);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-quick) var(--ease-snap);
  font-family: inherit;
}
.ds-app__btn:hover {
  background: var(--slate-700);
  color: white;
  border-color: var(--slate-700);
}
.ds-app__btn--ghost {
  background: white;
  color: var(--slate-900);
  border-color: var(--hairline);
}
.ds-app__btn--ghost:hover {
  background: var(--lavender-wash);
  border-color: rgb(var(--kick-rgb) / 0.4);
  color: var(--slate-900);
}
.ds-app__btn--danger {
  background: white;
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
}
.ds-app__btn--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}


/* ============================================================
   FORM FIELDS — .ds-pf__field
   ============================================================ */
.ds-pf__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.ds-pf__field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate-900);
}
.ds-pf__field input,
.ds-pf__field textarea,
.ds-pf__field select {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--slate-900);
  background: white;
  transition: border-color var(--dur-instant), box-shadow var(--dur-instant);
  font-family: inherit;
}
.ds-pf__field input:focus,
.ds-pf__field textarea:focus,
.ds-pf__field select:focus {
  outline: 0;
  border-color: var(--violet-vivid);
  box-shadow: 0 0 0 3px rgb(var(--kick-rgb) / 0.15);
}
.ds-pf__field input:disabled,
.ds-pf__field textarea:disabled {
  background: var(--lavender-wash);
  color: var(--text-muted);
  cursor: not-allowed;
}
.ds-pf__hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.ds-pf__hint--right { align-self: flex-end; }
.ds-pf__error {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #b91c1c;
  font-weight: 600;
}
.ds-pf__field--error input,
.ds-pf__field--error textarea {
  border-color: #dc2626;
  background: #fef2f2;
}
.ds-pf__field--error input:focus,
.ds-pf__field--error textarea:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.ds-pf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 720px) { .ds-pf__row { grid-template-columns: 1fr; } }


/* ============================================================
   AUTH SHELL — sign in / sign up / forgot / reset / verify
   ============================================================ */
.ds-auth {
  max-width: 460px;
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.ds-auth--wide { max-width: 520px; }
.ds-auth__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--slate-900);
}
.ds-auth__brand img { width: 40px; height: 40px; object-fit: contain; }
.ds-auth__card {
  width: 100%;
  background: white;
  border: 1px solid var(--lavender-edge);
  border-radius: 18px;
  padding: 2.25rem 2rem;
  box-shadow: 0 30px 60px -40px rgb(15 23 42 / 0.18);
}
.ds-auth__card h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--slate-900);
  margin: 0 0 0.4rem;
}
.ds-auth__sub {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}
.ds-auth__form { display: flex; flex-direction: column; gap: 1rem; }
.ds-auth__pw-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.ds-auth__small-link {
  font-size: 0.78rem;
  color: var(--violet-vivid);
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
}
.ds-auth__submit {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}
.ds-auth__switch {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-body);
}
.ds-auth__switch a {
  color: var(--violet-vivid);
  font-weight: 600;
  text-decoration: none;
}
.ds-auth__legal {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}
.ds-auth__legal a { color: var(--text-body); text-decoration: underline; }

/* Inline alert banner — top of an auth form (server-side error / flash success) */
.ds-auth__alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.ds-auth__alert svg { flex-shrink: 0; margin-top: 1px; }
.ds-auth__alert--err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.ds-auth__alert--ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.ds-auth__divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ds-auth__divider::before,
.ds-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.ds-auth__divider span { padding: 0 0.25rem; }

.ds-auth__google {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.8rem 1rem;
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--slate-900);
  transition: all var(--dur-instant);
  font-family: inherit;
}
.ds-auth__google:hover {
  border-color: rgb(var(--kick-rgb) / 0.4);
  background: var(--lavender-wash);
  color: var(--slate-900);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgb(15 23 42 / 0.15);
}
.ds-auth__google svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}

/* Password strength bar (shown under new-password fields) */
.ds-auth__pw-strength {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.ds-auth__pw-bar {
  flex: 1;
  height: 4px;
  background: var(--lavender-wash);
  border-radius: 999px;
  overflow: hidden;
}
.ds-auth__pw-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet-vivid), var(--kick));
  border-radius: 999px;
  transition: width var(--dur-quick) var(--ease-snap);
}
.ds-auth__pw-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Captcha row */
.ds-auth__captcha {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  background: var(--lavender-wash);
  border: 1px solid var(--lavender-edge);
  border-radius: 10px;
}
.ds-auth__captcha-q {
  font-size: 0.95rem;
  color: var(--slate-900);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ds-auth__captcha-q strong { color: var(--violet-vivid); }
@media (max-width: 760px) {
  /* Stack: question on its own row, answer + refresh below — the single row
     can't fit question + 140px input + refresh on phones and wraps raggedly. */
  .ds-auth__captcha { flex-wrap: wrap; }
  .ds-auth__captcha-q { flex-basis: 100%; }
}


/* ============================================================
   ERROR PAGES — .ds-err (404 / 500 / generic)
   ============================================================ */
.ds-err {
  max-width: 580px;
  margin: 0 auto;
  padding: 3.5rem 1rem 2rem;
  text-align: center;
}
.ds-err__code {
  font-size: 5.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(120deg, var(--violet-vivid), var(--kick));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}
.ds-err__code--coral {
  background: linear-gradient(120deg, #f97316, #ef4444);
  -webkit-background-clip: text;
  background-clip: text;
}
.ds-err h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--slate-900);
  margin: 0 0 0.85rem;
}
.ds-err p {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}
.ds-err__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  background: var(--lavender-wash);
  border: 1px solid var(--lavender-edge);
  border-radius: 12px;
  padding: 1.25rem 1.75rem;
  margin: 0 auto 1.5rem;
  max-width: 320px;
  text-align: left;
}
.ds-err__links a {
  color: var(--violet-vivid);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.ds-err__links a:hover { text-decoration: underline; }
.ds-err__support { font-size: 0.85rem; color: var(--text-muted); }
.ds-err__support a {
  color: var(--violet-vivid);
  text-decoration: none;
  font-weight: 600;
}


/* ============================================================
   VERIFY-EMAIL RESULT — .ds-verify (success / expired)
   ============================================================ */
.ds-verify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 2rem;
  background: linear-gradient(180deg, var(--lavender-wash), white);
}
@media (max-width: 760px) { .ds-verify-grid { grid-template-columns: 1fr; } }
.ds-verify {
  background: white;
  border: 1px solid var(--lavender-edge);
  border-radius: 18px;
  padding: 2.25rem 2rem;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 60px -40px rgb(15 23 42 / 0.18);
}
.ds-verify__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.ds-verify__tag--mint { background: rgba(16, 185, 129, 0.14); color: #047857; }
.ds-verify__tag--coral { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.ds-verify__icon {
  width: 72px; height: 72px;
  border-radius: 22px;
  margin: 1rem auto 1.5rem;
  display: grid;
  place-items: center;
}
.ds-verify__icon--success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.22));
  color: #047857;
}
.ds-verify__icon--coral {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.22));
  color: #b91c1c;
}
.ds-verify h1 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 0.5rem;
}
.ds-verify p {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}


/* ============================================================
   TOASTS — .ds-toast (auto-dismiss notification stack)
   ============================================================ */
.ds-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid var(--lavender-edge);
  border-radius: 10px;
  box-shadow: 0 18px 36px -20px rgb(15 23 42 / 0.18);
  max-width: 360px;
}
.ds-toast > div { flex: 1; line-height: 1.4; }
.ds-toast strong { font-weight: 700; color: var(--slate-900); }
.ds-toast span { color: var(--text-body); font-size: 0.8rem; }
.ds-toast__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ds-toast__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}
.ds-toast__close:hover { color: var(--slate-900); }

.ds-toast--ok { background: #ecfdf5; border-color: #a7f3d0; }
.ds-toast--ok .ds-toast__icon { background: #10b981; color: white; }
.ds-toast--err { background: #fef2f2; border-color: #fecaca; }
.ds-toast--err .ds-toast__icon { background: #dc2626; color: white; }
.ds-toast--err strong { color: #991b1b; }
.ds-toast--info { background: white; border-color: var(--lavender-edge); }
.ds-toast--info .ds-toast__icon { background: var(--violet-vivid); color: white; }

.ds-toast-stack {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}
.ds-toast-stack > * { pointer-events: auto; }


/* ============================================================
   APP NAV (top_menu.html) — sticky-top auth nav with avatar
   dropdown + mobile drawer.
   ============================================================ */
.ds-app__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: white;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Phone auto-hide: scrolling down tucks the bar away (the nav script
   toggles the class); scrolling up or nearing the page top brings it
   back. Elements stuck below the nav can track var(--ds-nav-offset) —
   the nav's currently VISIBLE height (0 while tucked), maintained by
   the same script on every auth page. */
@media (max-width: 760px) {
  .ds-app__nav { transition: transform 0.22s var(--ease-snap); }
  .ds-app__nav--tucked { transform: translateY(-100%); }
}
.ds-app__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  text-decoration: none;
  margin-right: 0.75rem;
}
.ds-app__brand:hover { color: var(--slate-900); text-decoration: none; }
.ds-app__brand-logo {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
}
.ds-app__brand-text { color: var(--slate-900); }

.ds-app__nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}
.ds-app__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--dur-instant), color var(--dur-instant);
  font-family: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ds-app__nav-link:hover { background: var(--lavender-wash); color: var(--slate-900); text-decoration: none; }
.ds-app__nav-link--active {
  background: var(--lavender-wash);
  color: var(--violet-vivid);
  font-weight: 600;
}
.ds-app__nav-link--active:hover { color: var(--violet-vivid); }
.ds-app__nav-link svg { color: currentColor; flex-shrink: 0; }

.ds-app__nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.ds-app__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-vivid), var(--kick));
  color: white;
  border: 0;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
  position: relative;
}
.ds-app__avatar:focus-visible {
  outline: 2px solid var(--violet-vivid);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(var(--kick-rgb) / 0.18);
}

.ds-app__hamburger {
  display: none;
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--slate-900);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.ds-app__hamburger:hover { background: var(--lavender-wash); color: var(--violet-vivid); }
.ds-app__hamburger--open { color: var(--violet-vivid); }

/* Avatar dropdown (desktop) */
.ds-app__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 1.5rem;
  min-width: 240px;
  background: white;
  border: 1px solid var(--lavender-edge);
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgb(15 23 42 / 0.25);
  padding: 0.5rem;
  z-index: 200;
  animation: ds-menu-in 0.16s var(--ease-snap);
}
.ds-app__menu[hidden] { display: none; }
@keyframes ds-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ds-app__menu-head {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0.35rem;
}
.ds-app__menu-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-900);
}
.ds-app__menu-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  word-break: break-all;
}
.ds-app__menu-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: var(--slate-900);
  text-decoration: none;
  border-radius: 8px;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.ds-app__menu-link:hover { background: var(--lavender-wash); color: var(--slate-900); text-decoration: none; }
.ds-app__menu-link svg { color: var(--text-muted); flex-shrink: 0; }
.ds-app__menu-link--danger { color: #b91c1c; }
.ds-app__menu-link--danger svg { color: #b91c1c; }
.ds-app__menu-link--danger:hover { background: rgba(239, 68, 68, 0.08); color: #b91c1c; }
.ds-app__menu-divider {
  height: 1px;
  background: var(--hairline);
  margin: 0.35rem 0;
}

/* Admin dropdown (desktop) — same panel pattern as avatar menu */
.ds-app__nav-link--has-menu {
  padding-right: 0.6rem;
}
.ds-app__nav-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 240px;
  background: white;
  border: 1px solid var(--lavender-edge);
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgb(15 23 42 / 0.25);
  padding: 0.5rem;
  z-index: 200;
  animation: ds-menu-in 0.16s var(--ease-snap);
  max-height: 70vh;
  overflow-y: auto;
}
.ds-app__nav-menu[hidden] { display: none; }
.ds-app__nav-menu-wrap { position: relative; }

/* Mobile drawer — fixed to the viewport, anchored under the sticky nav.
   It used to sit in document flow, so opening it while scrolled down
   rendered it at the top of the DOCUMENT (out of view) and shoved the page
   content down. The nav toggle JS sets --ds-drawer-top from the nav's live
   bounding rect at open time; 57px is the nav's default rendered height. */
.ds-app__drawer {
  display: none;
  position: fixed;
  top: var(--ds-drawer-top, 57px);
  left: 0;
  right: 0;
  z-index: 99; /* under the nav (100), above page content */
  max-height: calc(100vh - var(--ds-drawer-top, 57px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: white;
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.28);
  padding: 0.5rem 0.85rem 0.85rem;
  animation: ds-drawer-in 0.18s var(--ease-snap);
}
.ds-app__drawer[data-open="true"] { display: block; }
@keyframes ds-drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Staggered item reveal — the same cascade as the guest mobile menu.
   Animations (not transitions) because the drawer toggles display:none,
   which restarts them on every open; `backwards` holds each item invisible
   until its delay starts. The admin drawer runs ~20 links, so the cascade
   covers the first 8 children and everything after joins as one group —
   a full-length stagger there would take over a second. */
.ds-app__drawer > * {
  animation: ds-drawer-item-in 0.25s var(--ease-out) backwards;
}
.ds-app__drawer > :nth-child(1) { animation-delay: 0.05s; }
.ds-app__drawer > :nth-child(2) { animation-delay: 0.1s; }
.ds-app__drawer > :nth-child(3) { animation-delay: 0.15s; }
.ds-app__drawer > :nth-child(4) { animation-delay: 0.2s; }
.ds-app__drawer > :nth-child(5) { animation-delay: 0.25s; }
.ds-app__drawer > :nth-child(6) { animation-delay: 0.3s; }
.ds-app__drawer > :nth-child(7) { animation-delay: 0.35s; }
.ds-app__drawer > :nth-child(8) { animation-delay: 0.4s; }
.ds-app__drawer > :nth-child(n+9) { animation-delay: 0.45s; }
@keyframes ds-drawer-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ds-app__drawer-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--slate-900);
  font-weight: 500;
  font-size: 0.95rem;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.ds-app__drawer-link:hover { background: var(--lavender-wash); color: var(--slate-900); text-decoration: none; }
.ds-app__drawer-link--active {
  background: var(--lavender-wash);
  color: var(--violet-vivid);
  font-weight: 600;
}
.ds-app__drawer-link svg { color: var(--text-muted); flex-shrink: 0; }
.ds-app__drawer-link--active svg { color: var(--violet-vivid); }
.ds-app__drawer-link--danger { color: #b91c1c; }
.ds-app__drawer-link--danger svg { color: #b91c1c; }
.ds-app__drawer-section {
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-app__drawer-footer {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ds-app__drawer-footer strong {
  display: block;
  color: var(--slate-900);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* Responsive switch */
@media (max-width: 760px) {
  .ds-app__nav { padding: 0.6rem 1rem; }
  .ds-app__nav-links { display: none; }
  .ds-app__hamburger { display: inline-flex; }
}


/* ============================================================
   APP SHELL — page heading, banners, metric cards
   Used by /dashboard, /view-call, /profile, /my-agents.
   ============================================================ */

/* Page heading row (above the filter / above the metric cards) */
.ds-app__page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.ds-app__page-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 0.2rem;
}
.ds-app__page-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* Inline banner (success / trial / warn / danger) */
.ds-app__banner {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgb(var(--kick-rgb) / 0.06), rgb(var(--kick-rgb) / 0.12));
  border: 1px solid var(--lavender-edge);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.ds-app__banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(var(--kick-rgb) / 0.18);
  color: var(--violet-vivid);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ds-app__banner-body strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 0.1rem;
}
.ds-app__banner-body p {
  margin: 0;
  font-size: 0.825rem;
  color: var(--text-body);
  line-height: 1.5;
}
.ds-app__banner-body a {
  color: var(--violet-vivid);
  font-weight: 600;
  text-decoration: none;
}
.ds-app__banner-body a:hover { text-decoration: underline; }

.ds-app__banner--danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.12));
  border-color: rgba(239, 68, 68, 0.3);
}
.ds-app__banner--danger .ds-app__banner-icon {
  background: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}
.ds-app__banner--danger .ds-app__banner-body strong { color: #b91c1c; }

/* Metric cards grid */
.ds-app__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}
@media (max-width: 980px) { .ds-app__metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ds-app__metrics { grid-template-columns: 1fr; } }

/* Condensed metric card: value top-left, small icon top-right, label below.
   Grid-template-areas lets us preserve the existing HTML order (icon, label,
   value) — JS hooks the value span and skeleton by ID, so we can't reshuffle. */
.ds-app-metric {
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "value icon"
    "label label";
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.25rem;
}
.ds-app-metric__icon {
  grid-area: icon;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin: 0;
}
.ds-app-metric__icon svg { width: 15px; height: 15px; }
.ds-app-metric__icon--violet { background: rgb(var(--kick-rgb) / 0.14); color: var(--violet-vivid); }
.ds-app-metric__icon--mint   { background: rgba(16, 185, 129, 0.14); color: #047857; }
.ds-app-metric__icon--amber  { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.ds-app-metric__icon--coral  { background: rgba(244, 114, 75, 0.14); color: #c2410c; }

.ds-app-metric__value {
  grid-area: value;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--slate-900);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ds-app-metric__label {
  grid-area: label;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* Status badges (rendered by dashboard.html JS into .call-row tds) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1.3;
}
/* Variant rules also redeclare the typographic baseline so they win the
   specificity fight against Bootstrap's global .lead utility (font-size:
   1.25rem; font-weight: 300) which would otherwise enlarge .status-badge.lead. */
.status-badge.lead,
.status-badge.completed,
.status-badge.failed,
.status-badge.in-progress,
.status-badge.abandoned {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.status-badge.lead        { background: rgba(16, 185, 129, 0.14); color: #047857; }
.status-badge.completed   { background: rgb(var(--kick-rgb) / 0.14); color: var(--violet-vivid); }
.status-badge.failed      { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.status-badge.in-progress { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.status-badge.abandoned   { background: rgba(100, 116, 139, 0.14); color: #475569; }


/* ============================================================
   PAGINATION — .ds-pagination
   ============================================================ */
.ds-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.ds-pagination__btn,
.ds-pagination__page {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--hairline);
  background: white;
  color: var(--slate-900);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-instant), border-color var(--dur-instant);
  font-family: inherit;
}
.ds-pagination__btn:hover:not(:disabled),
.ds-pagination__page:hover {
  background: var(--lavender-wash);
  border-color: rgb(var(--kick-rgb) / 0.4);
}
.ds-pagination__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ds-pagination__page {
  min-width: 38px;
  justify-content: center;
}
.ds-pagination__page--active {
  background: var(--slate-900);
  color: white;
  border-color: var(--slate-900);
}
.ds-pagination__page--active:hover {
  background: var(--slate-700);
  color: white;
  border-color: var(--slate-700);
}
.ds-pagination__ellipsis { padding: 0 0.5rem; color: var(--text-muted); }
.ds-pagination--compact {
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 0.35rem;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.ds-pagination__count { padding: 0 0.5rem; font-size: 0.85rem; color: var(--text-body); }
.ds-pagination__count strong { color: var(--slate-900); }


/* ============================================================
   LOADING SKELETONS — .ds-skel
   ============================================================ */
.ds-skel {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.04) 0%,
    rgba(15, 23, 42, 0.08) 50%,
    rgba(15, 23, 42, 0.04) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: ds-shimmer 1.4s ease-in-out infinite;
}
@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ds-skel--icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 0.85rem; }
.ds-skel--label { width: 60%; height: 9px; margin-bottom: 0.65rem; }
.ds-skel--value { width: 40%; height: 26px; margin-bottom: 0.6rem; }
.ds-skel--meta { width: 50%; height: 10px; }
.ds-skel--row { width: 100%; height: 18px; margin: 0.3rem 0; }
