/* ==========================================================================
   Raddad - theme layer.

   Dark remains the product default. Light mode is an additive token override:
   the existing layout, component hierarchy and interaction states remain the
   same, while the material palette, text contrast and form surfaces change.

   Loaded from the shared favicon/head partial before page CSS. Light selectors
   intentionally carry higher specificity than the dark token definitions they
   override, so page-specific styles stay untouched and the theme layer remains
   additive rather than becoming a second design system.
   ========================================================================== */

:root {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Theme flips change background/border/shadow on nearly every glass surface.
   Suppress those transitions for two animation frames (theme.js) so the switch
   feels immediate instead of smearing every panel at once. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

html[data-theme="light"] body.dashboard-page {
  background: #FBF8F4;
}

html[data-theme="light"] .raddad-dashboard {
  /* ---- Canvas: soft indigo -> ivory dawn wash ---- */
  --d-bg: #FBF8F4;
  --d-bg-navy: #E3E8FD;
  --d-bg-deep: #FBF8F4;

  /* ---- Glass ----
     Ordinary surfaces are deliberately near-neutral - a cool slate-blue
     tint, not violet - per design review: "iOS Liquid Glass with Raddad/
     Instagram personality, not generic purple glassmorphism." Color is
     reserved for primary actions, the active nav state and brand moments
     (--d-grad, .rail-item.active, .brand-name); ordinary cards, borders
     and nested rows stay cool and quiet so those accents still read as
     deliberate rather than competing with the whole UI. */
  --d-glass: linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(248, 250, 253, .74));
  --d-glass-raised: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(250, 252, 255, .87));
  --d-panel: rgba(255, 255, 255, .80);
  --d-panel-2: rgba(255, 255, 255, .93);
  --d-nested: rgba(100, 116, 139, .06);
  --d-nested-border: rgba(100, 116, 139, .14);
  --d-inset: rgba(241, 244, 248, .72);
  --d-fill: rgba(100, 116, 139, .06);
  --d-fill-hover: rgba(100, 116, 139, .11);

  --d-border: rgba(100, 116, 139, .22);
  --d-border-soft: rgba(100, 116, 139, .14);
  --d-hairline: rgba(100, 116, 139, .16);
  --d-inner-top: rgba(255, 255, 255, .92);
  --d-inner-bloom: inset 0 0 24px rgba(100, 140, 220, .03);
  --d-inner-base: inset 0 -1px 0 rgba(71, 85, 105, .08);

  /* ---- Text: calm indigo, never washed-out grey ---- */
  --d-text: #211B3B;
  --d-text-2: #4B4570;
  --d-muted: #6B6690;
  --d-dim: #777099;

  /* ---- Accents ----
     Vivid blue/violet/pink for primary actions and selected states. Semantic
     status colours stay dark enough for normal-size text on near-white glass. */
  --d-blue: #315FC7;
  --d-cyan: #007896;
  --d-violet: #7040D5;
  --d-teal: #087F70;
  --d-green: #00784E;
  --d-amber: #965400;
  --d-red: #C43F5A;
  --d-grad: linear-gradient(120deg, #315FC7 0%, #7040D5 55%, #C21F69 100%);

  /* ---- Shadows ---- */
  --d-shadow: 0 22px 52px rgba(71, 85, 105, .12);
  --d-shadow-soft: 0 8px 24px rgba(71, 85, 105, .08);
}

html[data-theme="light"] .rd-ui {
  --rd-bg-mid: #F2EFFC;

  --rd-input-bg: rgba(255, 255, 255, .86);
  --rd-input-border: rgba(99, 102, 241, .18);
  --rd-input-border-hover: rgba(112, 64, 213, .30);
  --rd-input-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
  --rd-input-focus-border: rgba(49, 95, 199, .66);
  --rd-input-focus-shadow:
    0 0 0 3px rgba(49, 95, 199, .11),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  --rd-input-error-border: rgba(196, 63, 90, .58);
  --rd-input-placeholder: #777099;
}

/* Dashboard/authenticated canvas. dashboard.css has a literal dark midpoint;
   light mode replaces the entire gradient so that midpoint can never paint a
   navy band across a light page. */
html[data-theme="light"] .raddad-dashboard .page-bg {
  background: linear-gradient(
    172deg,
    #E3E8FD 0%,
    #F2EFFC 32%,
    #FBF8F4 66%
  );
}

/* Auth/error canvas uses the same dawn family, with a soft violet bloom. */
html[data-theme="light"] .rd-auth .rd-bg {
  background:
    radial-gradient(900px 620px at 50% 8%, rgba(112, 64, 213, .14), transparent 68%),
    linear-gradient(172deg, #E7EAFB 0%, #FBF8F4 62%);
}

/* The white transparent brand mark is ideal on dark glass. On light glass the
   colour artwork keeps the identity legible. theme.js also swaps the img src
   after parse as a fallback for engines that do not apply `content` to images. */
html[data-theme="light"] .brand-logo,
html[data-theme="light"] .auth-logo {
  content: url("/static/brand/raddad-logo-color.png");
  filter: none;
}

/* Hardcoded dark-theme values that do not flow through shared text tokens.
   These are the contrast regressions visible in the first light preview. */
html[data-theme="light"] .raddad-dashboard .brand-name {
  color: #211B3B;
  -webkit-text-fill-color: #211B3B;
}

html[data-theme="light"] .raddad-dashboard .brand-by {
  color: #6B6690;
}

html[data-theme="light"] .raddad-dashboard .searchbar {
  box-shadow: inset 0 1px 2px rgba(100, 116, 139, .16);
}

html[data-theme="light"] .raddad-dashboard .search-icon {
  color: #746E99;
}

html[data-theme="light"] .raddad-dashboard .searchbar input[type="search"] {
  color: #362F52;
}

html[data-theme="light"] .raddad-dashboard .searchbar input::placeholder {
  color: #777099;
}

html[data-theme="light"] .raddad-dashboard .rail-item {
  color: #6B6690;
}

html[data-theme="light"] .raddad-dashboard .rail-icon {
  color: #8D87AE;
}

html[data-theme="light"] .raddad-dashboard .rail-item:hover {
  color: #4B4570;
}

html[data-theme="light"] .raddad-dashboard .rail-item:hover .rail-icon {
  color: #6B6690;
}

html[data-theme="light"] .raddad-dashboard .rail-item.active {
  background: linear-gradient(135deg, rgba(49, 95, 199, .16), rgba(112, 64, 213, .14));
  border-color: rgba(112, 64, 213, .30);
  color: #5B3FD6;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .72),
    inset -1px -1px 0 rgba(99, 102, 241, .14);
}

html[data-theme="light"] .raddad-dashboard .rail-item.active .rail-icon {
  color: #5B3FD6;
}

/* V2 UI revision: .platform-switch's active state now carries real visual
   weight (see raddad-shell.css), so - like .rail-item.active above - it
   needs its own light-theme tuning rather than the dark-tinted literal
   colors the shared .subnav-item.active rule uses. Scoped to
   .platform-switch specifically so campaign-subnav's existing (unreported,
   unchanged) light-theme look is not touched by this. */
html[data-theme="light"] .raddad-dashboard .platform-switch .subnav-item.active {
  background: linear-gradient(135deg, rgba(49, 95, 199, .16), rgba(112, 64, 213, .14));
  border-color: rgba(112, 64, 213, .30);
  color: #5B3FD6;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .72),
    inset -1px -1px 0 rgba(99, 102, 241, .14);
}

/* Dark CSS intentionally uses white on hover because its glass is dark. On a
   light surface that turns controls invisible, so inherit the light text. */
html[data-theme="light"] .raddad-dashboard .icon-btn:hover,
html[data-theme="light"] .raddad-dashboard .user-menu a:hover {
  color: var(--d-text);
}

html[data-theme="light"] .raddad-dashboard .card-link:hover {
  color: #5B3FD6;
}

/* A few material details are intentionally literal in the dark stylesheet and
   need a light counterpart. */
html[data-theme="light"] .raddad-dashboard .glass,
html[data-theme="light"] .raddad-dashboard .card,
html[data-theme="light"] .raddad-dashboard .grid > .stat {
  -webkit-backdrop-filter: blur(var(--d-blur)) saturate(112%);
  backdrop-filter: blur(var(--d-blur)) saturate(112%);
}

html[data-theme="light"] .raddad-dashboard code {
  color: #5B3FD6;
}

html[data-theme="light"] .raddad-dashboard .badge-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .94);
}

/* Same literal-dark-ring issue as .badge-dot, on the avatar's Instagram
   badge - was a dark navy ring meant to match a dark canvas; on light it
   read as a dirty halo around the badge. */
html[data-theme="light"] .raddad-dashboard .avatar-badge {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .94);
}

/* Theme control. It deliberately reuses .icon-btn so the top bar gets one
   additional first-class control rather than a new visual pattern. */
.raddad-dashboard .theme-toggle {
  flex: 0 0 auto;
}

.raddad-dashboard .theme-toggle .theme-icon {
  width: 18px;
  height: 18px;
}

html[data-theme="dark"] .theme-icon-moon,
html:not([data-theme]) .theme-icon-moon {
  display: none;
}

html[data-theme="light"] .theme-icon-sun {
  display: none;
}

.rd-auth .auth-theme-toggle {
  position: fixed;
  z-index: 3;
  top: 20px;
  right: 20px;
}

@media (max-width: 480px) {
  .rd-auth .auth-theme-toggle {
    top: 12px;
    right: 12px;
  }
}