/* ============================================================================
   hotpink.css — "Design 2 · Hot Pink (Bold & Stylish)" theme.
   Loaded ONLY on branded client subdomains (see customer templates:
   {% if brand.brand_color %}). Pure CSS layered over the existing v2 markup —
   NO markup, JS, API or functionality changes. The primary pink comes from
   --hp-accent (set per-tenant by the small inline block in the template);
   the neutral design colors are fixed constants from the brief.
   ============================================================================ */

:root {
  /* pink primary (overridden per-tenant by the template's inline block) */
  --hp-accent:      #ff007a;
  --hp-accent-2:    #ff3b9d;
  --hp-accent-deep: #d10064;
  --hp-accent-rgb:  255, 0, 122;
  /* fixed design neutrals (from the brief) */
  --hp-bg:      #fff0f7;
  --hp-card:    #ffffff;
  --hp-ink:     #17213b;
  --hp-ink-2:   #64708a;
  --hp-border:  #f3dce8;
  --hp-shadow:    0 10px 35px rgba(255, 0, 122, 0.10);
  --hp-shadow-sm: 0 4px 16px rgba(255, 0, 122, 0.08);
  --hp-cta-shadow: 0 10px 24px -6px rgba(255, 0, 122, 0.50);
}

/* Re-point the v2 design tokens so every component adopts the pink/navy palette.
   All three theme states are targeted (style.css redefines some of these at
   html[data-theme="light"] specificity, which a bare :root would lose to). */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --bg:            var(--hp-bg);
  --bg-elevated:   #ffffff;
  --card:          #ffffff;
  --card-hover:    #fff4f9;
  --card-active:   #ffe9f3;
  --border:        var(--hp-border);
  --border-strong: #ffb9dd;
  --text:          var(--hp-ink);
  --text-muted:    var(--hp-ink-2);
  --text-subtle:   #8a94a8;
  --text-faint:    #b9c0cf;
  --accent:        var(--hp-accent);
  --accent-hover:  var(--hp-accent-2);
  --accent-soft:   rgba(var(--hp-accent-rgb), 0.12);
  --accent-glow:   rgba(var(--hp-accent-rgb), 0.20);
  --success:       var(--hp-accent);
  --success-soft:  rgba(var(--hp-accent-rgb), 0.12);
}

/* ---------- Page canvas: very soft pink gradient + extremely subtle shapes ---------- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background:
    /* large soft pink "bubble" discs framing BOTH side gutters (clearly visible) */
    radial-gradient(circle 380px at -3% 44%, #ffc4e4 0%, #ffc4e4 36%, transparent 72%),
    radial-gradient(circle 210px at 10% 90%, #ffd6ec 0%, #ffd6ec 44%, transparent 76%),
    radial-gradient(circle 170px at 4% 15%, #ffd6ec 0%, #ffd6ec 44%, transparent 76%),
    radial-gradient(circle 360px at 103% 32%, #ffc4e4 0%, #ffc4e4 36%, transparent 72%),
    radial-gradient(circle 210px at 95% 85%, #ffd6ec 0%, #ffd6ec 44%, transparent 76%),
    radial-gradient(circle 160px at 90% 8%, #ffd6ec 0%, #ffd6ec 44%, transparent 76%),
    linear-gradient(180deg, #fff6fb 0%, var(--hp-bg) 100%) !important;
  background-attachment: fixed !important;
  color: var(--hp-ink) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
html, body { max-width: 100%; overflow-x: hidden; }

/* Tailwind .text-white only auto-flips in light mode — force it for dark-mode viewers. */
.text-white { color: var(--hp-ink) !important; }

/* ---------- Content width (centered, not excessively wide) ---------- */
.v2-main       { max-width: 980px !important; }
.v2-topbar,
.v2-bottom-nav { max-width: 980px !important; }

/* ---------- Top account bar (hot-pink gradient header) ---------- */
.v2-topbar {
  background: linear-gradient(135deg, var(--hp-accent) 0%, var(--hp-accent-2) 100%) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px -8px rgba(var(--hp-accent-rgb), 0.45) !important;
}
.v2-topbar-row,
.v2-topbar-row span,
.v2-topbar-row .v2-theme-toggle { color: #fff !important; }
.v2-topbar-row [title="Connected"] { background: #fff !important; box-shadow: 0 0 8px rgba(255,255,255,0.85) !important; }
.v2-topbar-row [title="Offline"]   { background: #ffe3ea !important; }
.v2-subheader { border-top: none !important; }

/* ---------- LATEST CODE card ---------- */
.v2-stat-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fff4f9 100%) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--hp-shadow-sm) !important;
}
.v2-stat-hero .v2-stat-label {
  color: var(--hp-accent) !important;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700 !important;
}
.v2-stat-hero .v2-stat-value { color: var(--hp-accent) !important; }
.v2-stat-hero .v2-stat-meta  { color: var(--hp-ink-2) !important; }

/* ---------- Search ---------- */
.v2-search input {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--hp-shadow-sm) !important;
  color: var(--hp-ink) !important;
  min-height: 52px !important;
}
.v2-search svg { color: var(--hp-ink-2) !important; }
.v2-search input:focus { border-color: var(--hp-accent) !important; box-shadow: 0 0 0 4px rgba(var(--hp-accent-rgb), 0.12) !important; }

/* ---------- Inbox header ---------- */
.v2-section-title { color: var(--hp-ink) !important; letter-spacing: 0.06em; }
.v2-section-aside { color: var(--hp-ink-2) !important; }

/* ---------- Inbox card + empty state ---------- */
.v2-list {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--hp-shadow) !important;
}
.v2-empty-icon  { background: rgba(var(--hp-accent-rgb), 0.10) !important; color: var(--hp-accent) !important; }
.v2-empty-title { color: var(--hp-ink) !important; }
.v2-empty-text  { color: var(--hp-ink-2) !important; }

/* email rows (when present) */
.v2-row         { background: #fff !important; border-color: var(--hp-border) !important; }
.v2-row-name    { color: var(--hp-ink) !important; }
.v2-row-subject,
.v2-row-time    { color: var(--hp-ink-2) !important; }
.v2-row-otp     { color: var(--hp-accent) !important; background: rgba(var(--hp-accent-rgb), 0.10) !important; }

/* ---------- Bottom action bar ---------- */
.v2-bottom-nav {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--hp-shadow) !important;
}
.v2-bottom-nav-item      { color: var(--hp-ink) !important; }
.v2-bottom-nav-item svg  { color: var(--hp-ink) !important; }

/* Refresh — primary CTA */
.v2-bottom-nav-item.active,
.v2-bottom-nav-item.primary {
  background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 15px !important;
  min-height: 54px !important;
  box-shadow: var(--hp-cta-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.v2-bottom-nav-item.active svg { color: #fff !important; }
.v2-bottom-nav-item.active:hover  { transform: translateY(-1px); box-shadow: 0 14px 30px -6px rgba(var(--hp-accent-rgb), 0.55) !important; }
.v2-bottom-nav-item.active:active { transform: scale(.98); }

/* ---------- Subtle entrance ---------- */
@keyframes hpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.v2-topbar, .v2-stat-hero, .v2-list, .v2-bottom-nav { animation: hpFade .35s ease both; }

/* ---------- Drawer / auth / error surfaces ---------- */
.v2-drawer, .adm-drawer, .v2-auth-card { background: #fff !important; }
.v2-auth-brand-icon { background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)) !important; }
.v2-btn-primary {
  background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)) !important;
  border: none !important; color: #fff !important;
  box-shadow: var(--hp-cta-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.v2-btn-primary:hover  { transform: translateY(-1px); }
.v2-btn-primary:active { transform: scale(.98); }

/* ============================ MOBILE (< 768px) ============================ */
@media (max-width: 767px) {
  .v2-main { padding-left: 15px !important; padding-right: 15px !important; }
  .v2-topbar { border-radius: 18px !important; }

  /* Bottom nav lets the floating Refresh circle stick out above it. */
  .v2-bottom-nav { overflow: visible !important; align-items: center !important; }

  /* Refresh → prominent circular floating button overlapping the bar. */
  .v2-bottom-nav-item.active {
    position: relative !important;
    flex: 0 0 66px !important;
    width: 66px !important; height: 66px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transform: translateY(-24px) !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-shadow: 0 12px 26px -6px rgba(var(--hp-accent-rgb), 0.55) !important;
  }
  .v2-bottom-nav-item.active svg { width: 24px !important; height: 24px !important; }
  .v2-bottom-nav-item.active .v2-keep {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 4px; font-size: 11px; font-weight: 600;
    color: var(--hp-accent) !important; white-space: nowrap;
  }
  .v2-bottom-nav-item.active:active { transform: translateY(-24px) scale(.96) !important; }
}

@media (max-width: 480px) {
  .v2-main { padding-left: 12px !important; padding-right: 12px !important; }
}