/* ============================================================
   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-iteration-count: 1 !important;
    transition-duration: 0.01ms !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); }


/* ============================================================
   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;
}
.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 */
.ds-app__drawer {
  display: none;
  background: white;
  border-bottom: 1px solid var(--hairline);
  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); }
}
.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; }
