/*
 * CloudBooth colour themes.
 * The existing palette is preserved verbatim as dark mode. Light mode changes tokens first,
 * then normalises a small set of historic hard-coded zinc utilities while those templates are
 * progressively migrated to semantic colour tokens.
 */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --background: 0 0% 94%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --app-scrollbar-track: hsl(var(--background));
  --app-scrollbar-thumb: hsl(240 5% 75%);
  --app-scrollbar-thumb-hover: hsl(240 4% 55%);
}

html[data-theme="light"],
html[data-theme="light"] body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Existing pages still contain a number of fixed dark Tailwind utilities. These compatibility
   rules make those surfaces theme-aware without changing modal backdrops or media overlays. */
html[data-theme="light"] .text-white { color: hsl(var(--foreground)) !important; }
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-zinc-300 { color: hsl(240 5.9% 20%) !important; }
html[data-theme="light"] .text-zinc-400 { color: hsl(240 3.8% 38%) !important; }
html[data-theme="light"] .text-zinc-500 { color: hsl(240 3.8% 46.1%) !important; }
html[data-theme="light"] .text-zinc-600,
html[data-theme="light"] .text-zinc-700 { color: hsl(240 4% 40%) !important; }
html[data-theme="light"] .bg-zinc-950,
html[data-theme="light"] .bg-zinc-950\/50,
html[data-theme="light"] .bg-zinc-950\/60 { background-color: hsl(0 0% 100% / .96) !important; }
html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .bg-zinc-900\/60 { background-color: hsl(240 4.8% 95.9% / .96) !important; }
html[data-theme="light"] .bg-zinc-800,
html[data-theme="light"] .bg-zinc-800\/50 { background-color: hsl(240 5% 91% / .96) !important; }
html[data-theme="light"] .bg-zinc-700 { background-color: hsl(240 5% 84%) !important; }
html[data-theme="light"] .border-zinc-800,
html[data-theme="light"] .border-zinc-800\/50,
html[data-theme="light"] .border-zinc-700 { border-color: hsl(var(--border)) !important; }
html[data-theme="light"] .divide-zinc-800 > :not(:last-child) { border-color: hsl(var(--border)) !important; }

[data-theme-toggle] [data-theme-icon="light"] { display: none; }
html[data-theme="light"] [data-theme-toggle] [data-theme-icon="dark"] { display: none; }
html[data-theme="light"] [data-theme-toggle] [data-theme-icon="light"] { display: inline-block; }

/* Public marketing surfaces use their own semantic tokens on top of the application palette. */
html[data-theme="light"] {
  --site-bg: #fafafa;
  --site-card: #ffffff;
  --site-card-hover: #f4f4f5;
  --site-border: rgba(24,24,27,.12);
  --site-muted: #52525b;
  --site-soft: #f4f4f5;
}
html[data-theme="light"] .public-shell {
  background: radial-gradient(circle at 50% -10%, rgba(124,58,237,.10), transparent 34rem), var(--site-bg);
}
html[data-theme="light"] .site-nav {
  background: rgba(250,250,250,.88);
}
html[data-theme="light"] .site-card {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,244,245,.82));
}
html[data-theme="light"] .site-card:hover { border-color: rgba(24,24,27,.22); }
html[data-theme="light"] .site-button-primary { background: #18181b; color: #fafafa !important; }
html[data-theme="light"] .site-button-primary:hover { background: #27272a; }
html[data-theme="light"] .site-button-secondary { color: #18181b; background: rgba(255,255,255,.7); }
html[data-theme="light"] .site-kicker { color: #3f3f46; background: rgba(24,24,27,.035); }
html[data-theme="light"] .site-footer a { color: #52525b; }
html[data-theme="light"] .site-footer a:hover { color: #18181b; }
html[data-theme="light"] .public-shell [class~="border-white/10"],
html[data-theme="light"] .public-shell [class~="border-white/5"],
html[data-theme="light"] .public-shell [class~="border-white/15"],
html[data-theme="light"] .public-shell [class~="border-white/20"] { border-color: var(--site-border) !important; }
html[data-theme="light"] .public-shell [class~="bg-white/5"],
html[data-theme="light"] .public-shell [class~="bg-white/[0.035]"],
html[data-theme="light"] .public-shell [class~="bg-white/[0.025]"],
html[data-theme="light"] .public-shell [class~="bg-white/[0.02]"] { background-color: rgba(24,24,27,.035) !important; }
html[data-theme="light"] .public-shell [class~="hover:bg-white/5"]:hover,
html[data-theme="light"] .public-shell [class~="hover:bg-white/10"]:hover { background-color: rgba(24,24,27,.06) !important; }


/* Header and mobile navigation should follow the selected theme without recolouring media overlays. */
html[data-theme="light"] #app-header.bg-black,
html[data-theme="light"] .public-shell [data-mobile-menu] {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Preserve white labels on intentional coloured controls after the historic text-white compatibility rule. */
html[data-theme="light"] .text-white[class*="bg-blue-"],
html[data-theme="light"] .text-white[class*="bg-violet-"],
html[data-theme="light"] .text-white[class*="bg-red-"],
html[data-theme="light"] .text-white[class*="bg-emerald-"],
html[data-theme="light"] .text-white[class*="bg-indigo-"],
html[data-theme="light"] .text-white[class*="bg-purple-"] {
  color: #fff !important;
}


/* Light-only legacy utility reconciliation. Dark mode remains exactly as authored in templates. */
html[data-theme="light"] .settings-modal-shell .bg-black\/20,
html[data-theme="light"] .settings-modal-shell .bg-black\/30,
html[data-theme="light"] .settings-modal-shell .bg-black\/40,
html[data-theme="light"] .settings-modal-shell .bg-black\/50,
html[data-theme="light"] .settings-modal-shell .bg-black,
html[data-theme="light"] .admin-page .bg-black\/20,
html[data-theme="light"] .admin-page .bg-black\/30,
html[data-theme="light"] .admin-page .bg-black\/40,
html[data-theme="light"] .admin-page .bg-black\/50 {
  background-color: hsl(var(--muted) / .72) !important;
}
html[data-theme="light"] .settings-modal-shell [class~="hover:bg-white/5"]:hover,
html[data-theme="light"] .admin-page [class~="hover:bg-white/5"]:hover,
html[data-theme="light"] .admin-page [class~="hover:bg-zinc-800"]:hover,
html[data-theme="light"] .settings-modal-shell [class~="hover:bg-zinc-800"]:hover {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}
html[data-theme="light"] .settings-modal-shell .from-primary\/15.via-zinc-950,
html[data-theme="light"] .admin-page .from-primary\/15.via-zinc-950 {
  --tw-gradient-via: hsl(var(--card)) var(--tw-gradient-via-position) !important;
  --tw-gradient-to: hsl(var(--muted) / .72) var(--tw-gradient-to-position) !important;
}
html[data-theme="light"] .settings-modal-shell .settings-intentional-dark,
html[data-theme="light"] .settings-modal-shell .settings-intentional-dark .text-white,
html[data-theme="light"] .media-dark-surface,
html[data-theme="light"] .media-dark-surface .text-white {
  color: #fff !important;
}
html[data-theme="light"] .settings-modal-shell .settings-intentional-dark,
html[data-theme="light"] .media-dark-surface { background:#09090b !important; }
html[data-theme="light"] .status-light-success { color:#047857 !important; }
html[data-theme="light"] .status-light-warning { color:#a16207 !important; }
html[data-theme="light"] .status-light-danger { color:#b91c1c !important; }
html[data-theme="light"] .status-light-info { color:#1d4ed8 !important; }

/* Standalone authentication/error screens share the same light palette. */
html[data-theme="light"] body.bg-black { background-color:hsl(var(--background)) !important; color:hsl(var(--foreground)) !important; }
html[data-theme="light"] body [class~="focus:bg-zinc-900"]:focus { background-color:hsl(var(--card)) !important; }
html[data-theme="light"] body [class~="placeholder-zinc-600"]::placeholder { color:hsl(var(--muted-foreground)) !important; }

/* Light-theme contrast pass for legacy status and interaction utilities. */
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200,
html[data-theme="light"] .text-gray-300 { color:hsl(240 5.9% 20%) !important; }
html[data-theme="light"] .text-gray-400 { color:hsl(240 3.8% 38%) !important; }
html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-400 { color:#047857 !important; }
html[data-theme="light"] .text-green-300,
html[data-theme="light"] .text-green-400 { color:#15803d !important; }
html[data-theme="light"] .text-red-300,
html[data-theme="light"] .text-red-400 { color:#b91c1c !important; }
html[data-theme="light"] .text-amber-300,
html[data-theme="light"] .text-amber-400,
html[data-theme="light"] .text-yellow-300,
html[data-theme="light"] .text-yellow-400 { color:#a16207 !important; }
html[data-theme="light"] .text-blue-300,
html[data-theme="light"] .text-blue-400 { color:#1d4ed8 !important; }
html[data-theme="light"] .text-violet-300,
html[data-theme="light"] .text-violet-400,
html[data-theme="light"] .text-purple-300,
html[data-theme="light"] .text-purple-400,
html[data-theme="light"] .text-indigo-300,
html[data-theme="light"] .text-indigo-400 { color:#6d28d9 !important; }
html[data-theme="light"] #app-header [class~="border-white/10"],
html[data-theme="light"] .settings-modal-shell [class~="border-white/10"],
html[data-theme="light"] .admin-page [class~="border-white/10"] { border-color:hsl(var(--border)) !important; }
html[data-theme="light"] .settings-modal-shell [class~="hover:text-white"]:hover,
html[data-theme="light"] .admin-page [class~="hover:text-white"]:hover,
html[data-theme="light"] #app-header [class~="hover:text-white"]:hover { color:hsl(var(--foreground)) !important; }
html[data-theme="light"] body [class~="bg-white"][class~="text-black"] {
  background-color:#18181b !important;
  color:#fff !important;
}
/* Restore light-on-colour text where the preceding status pass intentionally darkened it. */
html[data-theme="light"] [class*="bg-emerald-500"].text-emerald-300,
html[data-theme="light"] [class*="bg-emerald-600"].text-emerald-300,
html[data-theme="light"] [class*="bg-red-600"].text-red-300,
html[data-theme="light"] [class*="bg-blue-600"].text-blue-300,
html[data-theme="light"] [class*="bg-violet-600"].text-violet-300 { color:#fff !important; }

/* Public light surfaces should not retain decorative black panels; actual video stays black. */
html[data-theme="light"] .public-shell .bg-black,
html[data-theme="light"] .public-shell .bg-black\/20,
html[data-theme="light"] .public-shell .bg-black\/40,
html[data-theme="light"] .public-shell .bg-black\/50,
html[data-theme="light"] .public-shell .bg-black\/85 {
  background-color:hsl(var(--card) / .96) !important;
  border-color:hsl(var(--border)) !important;
}
html[data-theme="light"] .public-shell video.bg-black { background:#000 !important; }

/* Photo/video/code viewers are deliberately dark in either theme. */
html[data-theme="light"] .media-dark-surface,
html[data-theme="light"] .modal-overlay--media {
  color:#fff !important;
}
html[data-theme="light"] .media-dark-surface .text-white,
html[data-theme="light"] .modal-overlay--media .text-white { color:#fff !important; }
html[data-theme="light"] .media-dark-surface .text-zinc-100,
html[data-theme="light"] .media-dark-surface .text-zinc-200,
html[data-theme="light"] .media-dark-surface .text-zinc-300,
html[data-theme="light"] .modal-overlay--media .text-zinc-100,
html[data-theme="light"] .modal-overlay--media .text-zinc-200,
html[data-theme="light"] .modal-overlay--media .text-zinc-300 { color:#e4e4e7 !important; }
html[data-theme="light"] .media-dark-surface .text-zinc-400,
html[data-theme="light"] .modal-overlay--media .text-zinc-400 { color:#a1a1aa !important; }
html[data-theme="light"] .media-dark-surface .text-zinc-500,
html[data-theme="light"] .modal-overlay--media .text-zinc-500 { color:#71717a !important; }

/* Light-theme form controls and editor surfaces must not inherit legacy dark fills. */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .property-input,
html[data-theme="light"] .settings-input {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--input)) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: hsl(var(--muted-foreground)) !important; opacity: .82; }
html[data-theme="light"] #timeline-grid-wrapper { background: hsl(var(--background)) !important; }
html[data-theme="light"] .settings-tab-active {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px rgb(0 0 0 / .06) !important;
}


/* Settings light-theme polish: legacy translucent zinc utilities should read as one coherent card system. */
html[data-theme="light"] .settings-modal-shell .bg-zinc-950\/40,
html[data-theme="light"] .settings-modal-shell .bg-zinc-950\/30,
html[data-theme="light"] .settings-modal-shell .bg-zinc-900\/50,
html[data-theme="light"] .settings-modal-shell .bg-zinc-900\/30 {
  background-color: hsl(var(--card)) !important;
}
html[data-theme="light"] .settings-modal-shell .bg-zinc-950\/50,
html[data-theme="light"] .settings-modal-shell .bg-zinc-950\/60 {
  background-color: hsl(var(--card)) !important;
}
html[data-theme="light"] .settings-modal-shell label[class*="bg-zinc-950"]:hover,
html[data-theme="light"] .settings-modal-shell .role-permission-card:hover {
  background-color: hsl(var(--muted) / .55) !important;
  border-color: hsl(var(--border)) !important;
}
html[data-theme="light"] .settings-modal-shell .role-permission-card {
  color: hsl(var(--foreground)) !important;
}
html[data-theme="light"] .settings-consistent-modal .modal-surface,
html[data-theme="light"] .settings-consistent-modal [class~="bg-zinc-900/50"],
html[data-theme="light"] .settings-consistent-modal [class~="bg-zinc-900/30"] {
  background-color: hsl(var(--card)) !important;
}
html[data-theme="light"] .settings-consistent-modal [class~="border-zinc-800"] {
  border-color: hsl(var(--border)) !important;
}
html[data-theme="light"] .settings-consistent-modal [class~="bg-zinc-900"] {
  background-color: hsl(var(--muted)) !important;
}
/* Billing/alert preference tiles stay distinguishable without dark-theme blocks. */
html[data-theme="light"] #tab-notifications label[class*="bg-zinc-950"] {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}
html[data-theme="light"] #tab-notifications label[class*="bg-zinc-950"]:hover {
  background-color: hsl(var(--muted) / .5) !important;
}
/* The administration log terminal is a readable light surface; media/code viewers can remain intentionally dark elsewhere. */
html[data-theme="light"] #log-terminal {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}
html[data-theme="light"] #log-terminal .text-zinc-300 { color: hsl(var(--foreground)) !important; }
html[data-theme="light"] #log-terminal .text-zinc-600 { color: hsl(var(--muted-foreground)) !important; }

/* Complete Settings light-surface compatibility for legacy utility variants. */
html[data-theme="light"] .settings-modal-shell .bg-zinc-800\/20,
html[data-theme="light"] .settings-modal-shell .bg-zinc-800\/50,
html[data-theme="light"] .settings-modal-shell .bg-zinc-800\/80,
html[data-theme="light"] .settings-modal-shell .bg-zinc-700\/50,
html[data-theme="light"] .settings-modal-shell .bg-black\/20,
html[data-theme="light"] .settings-modal-shell .bg-black {
  background-color: hsl(var(--muted) / .55) !important;
  color: hsl(var(--foreground)) !important;
}
html[data-theme="light"] .settings-modal-shell .bg-zinc-900,
html[data-theme="light"] .settings-modal-shell .bg-zinc-800 {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}
html[data-theme="light"] .settings-modal-shell .border-zinc-700,
html[data-theme="light"] .settings-modal-shell .border-zinc-800,
html[data-theme="light"] .settings-modal-shell [class*="border-gray-"] { border-color: hsl(var(--border)) !important; }
html[data-theme="light"] .settings-modal-shell [class*="text-zinc-"],
html[data-theme="light"] .settings-modal-shell [class*="text-gray-"] { color: hsl(var(--muted-foreground)) !important; }
html[data-theme="light"] .settings-modal-shell h1,
html[data-theme="light"] .settings-modal-shell h2,
html[data-theme="light"] .settings-modal-shell h3,
html[data-theme="light"] .settings-modal-shell h4,
html[data-theme="light"] .settings-modal-shell h5,
html[data-theme="light"] .settings-modal-shell h6,
html[data-theme="light"] .settings-modal-shell .font-semibold,
html[data-theme="light"] .settings-modal-shell .font-bold { color: hsl(var(--foreground)); }


/* Development environment identity. Keep this separate from warning/limit amber states. */
.development-environment-marker { background-color: oklch(0.58 0.15 351 / 1) !important; color: white !important; border-color: color-mix(in oklab, oklch(0.58 0.15 351 / 1) 55%, white 15%) !important; }
.development-environment-marker-dot { background-color: oklch(0.82 0.10 351 / 1) !important; }