/* ==========================================================================
   MarbleSend Theme Engine — Light / Dark / System Themes
   Engineered for seamless switching, zero FOUC, and full responsiveness.
   ========================================================================== */

/* Alpine.js x-cloak: Alpine does NOT ship this rule itself. Without it every x-show modal/drawer marked
   x-cloak is painted visible from first paint until Alpine boots (script is deferred) and hides it,
   which showed up as a modal flashing for ~0.5s on every page navigation. Alpine removes the attribute
   from each element once it initialises, so open/close behaviour is unaffected. Mirrored inline in
   layout.php's <head> so the first paint never depends on this file being fresh in the browser cache. */
[x-cloak] {
    display: none !important;
}

/* Smooth color transitions when toggling themes */
html, body, aside, main, div, input, select, textarea, button {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   LIGHT THEME OVERRIDES (Applied when html has class 'light')
   -------------------------------------------------------------------------- */
html.light body,
html.light .bg-background,
html.light .bg-surface,
html.light .bg-surface-dim {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Sidebar & Containers */
html.light aside,
html.light .bg-surface-container-lowest,
html.light .bg-surface-container,
html.light .bg-surface-container-low,
html.light .bg-surface-container-low\/50,
html.light .bg-surface-container-high,
html.light .bg-surface-container-high\/40,
html.light .bg-surface-container-high\/60,
html.light .bg-surface-container-high\/70 {
    background-color: #ffffff !important;
}

html.light .bg-surface-container-highest,
html.light .bg-surface-variant {
    background-color: #f1f5f9 !important;
}

html.light .bg-surface-bright {
    background-color: #e2e8f0 !important;
}

/* Hover States for Cards, Lists & Table Rows */
html.light .hover\:bg-surface-container-high:hover,
html.light .hover\:bg-surface-container-highest:hover,
html.light .hover\:bg-surface-variant:hover,
html.light .hover\:bg-surface-bright:hover,
html.light tr.hover\:bg-surface-container-high\/60:hover,
html.light tr.hover\:bg-surface-container-high:hover {
    background-color: #f8fafc !important;
}

/* Typography */
html.light .text-white,
html.light .text-on-surface,
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
    color: #0f172a !important;
}

html.light .text-on-surface-variant,
html.light .text-neutral-400,
html.light .text-neutral-300 {
    color: #475569 !important;
}

html.light .text-outline {
    color: #64748b !important;
}

/* Borders & Dividers */
html.light .border-outline-variant,
html.light .border-outline-variant\/20,
html.light .border-outline-variant\/30,
html.light .border-outline-variant\/40,
html.light .border-outline-variant\/50,
html.light .border-outline-variant\/60,
html.light .border-outline-variant\/70,
html.light .border-outline-variant\/80,
html.light .divide-outline-variant > * + *,
html.light .divide-outline-variant\/20 > * + *,
html.light .divide-outline-variant\/30 > * + * {
    border-color: #e2e8f0 !important;
}

/* Sidebar Active Navigation Item */
html.light .bg-\[\#223149\] {
    background-color: #e0ecff !important;
    color: #005ac2 !important;
}

/* Primary Accents & Buttons */
html.light .text-primary {
    color: #005ac2 !important;
}

html.light .bg-primary {
    background-color: #005ac2 !important;
    color: #ffffff !important;
}

html.light .text-on-primary {
    color: #ffffff !important;
}

html.light .bg-primary-container {
    background-color: #d8e2ff !important;
    color: #00285d !important;
}

html.light .text-on-primary-container {
    color: #00285d !important;
}

html.light .border-primary,
html.light .border-primary\/20,
html.light .border-primary\/30,
html.light .border-primary\/40 {
    border-color: #005ac2 !important;
}

/* Status Badges & Accents */
html.light .text-secondary {
    color: #047857 !important;
}

html.light .bg-secondary\/10,
html.light .bg-secondary\/15,
html.light .bg-secondary\/20,
html.light .bg-secondary-container\/20 {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

html.light .text-tertiary {
    color: #b45309 !important;
}

html.light .bg-tertiary\/10,
html.light .bg-tertiary\/15,
html.light .bg-tertiary-container\/60 {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

html.light .text-error {
    color: #b91c1c !important;
}

html.light .bg-error\/10,
html.light .bg-error\/15,
html.light .bg-error-container\/10,
html.light .bg-error-container\/20 {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}

/* Tables */
html.light thead,
html.light thead.bg-surface-container-low,
html.light thead.bg-surface-container {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Form Controls in Light Mode */
html.light select,
html.light select.dark-select,
html.light select.sender-select,
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="number"],
html.light input[type="date"],
html.light textarea:not(.editor-textarea) {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.light select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
    border-color: #005ac2 !important;
    box-shadow: 0 0 0 1px #005ac2 !important;
}

/* Code Editor & Textareas */
html.dark textarea,
html.dark .editor-textarea {
    background-color: #0b0e15 !important;
    color: #e2e8f0 !important;
    caret-color: #adc6ff !important;
}

html.light .editor-pane-dark,
html.light .bg-\[\#0b0e15\] {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html.light .editor-gutter-dark,
html.light .bg-\[\#13161f\] {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}

html.light textarea.editor-textarea,
html.light .editor-textarea {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    caret-color: #005ac2 !important;
}

/* Modal Backdrops in Light Mode */
html.light .bg-black\/70,
html.light .bg-black\/75 {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

/* Glow effects in Light Mode */
html.light .glow-blue {
    box-shadow: 0 0 15px -3px rgba(0, 90, 194, 0.2) !important;
}
html.light .glow-green {
    box-shadow: 0 0 15px -3px rgba(4, 120, 87, 0.2) !important;
}

/* DOCS LIGHT CONTRAST (30 Sept 2026): the docs page uses bright -300/-400 accents and dark gradient panels
   that are only readable on the dark theme. Light theme gets darker accent text and light panel gradients. */
html.light [class*="from-surface-container"],
html.light [class*="via-surface-container"],
html.light [class*="to-surface-container"] {
    background-image: linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #eef6fb 100%) !important;
}
html.light .text-cyan-400,
html.light .text-cyan-300,
html.light .text-cyan-200,
html.light .text-cyan-100\/90,
html.light .text-cyan-400\/80,
html.light .text-\[\#06b6d4\],
html.light .hover\:text-cyan-300:hover,
html.light .hover\:text-\[\#06b6d4\]:hover {
    color: #0e7490 !important;
}
html.light .text-\[\#38bdf8\] {
    color: #0369a1 !important;
}
html.light .text-amber-400,
html.light .text-amber-300,
html.light .text-amber-200,
html.light .text-amber-500,
html.light .text-amber-400\/80,
html.light .text-\[\#f59e0b\],
html.light .hover\:text-amber-300:hover,
html.light .hover\:text-\[\#f59e0b\]:hover {
    color: #b45309 !important;
}
html.light .text-emerald-400 {
    color: #047857 !important;
}
html.light .text-purple-400,
html.light .text-purple-300,
html.light .text-\[\#8b5cf6\],
html.light .text-\[\#8b5cf6\]\/80,
html.light .hover\:text-\[\#8b5cf6\]:hover {
    color: #6d28d9 !important;
}
html.light .text-pink-300,
html.light .text-\[\#ec4899\],
html.light .hover\:text-\[\#ec4899\]:hover {
    color: #be185d !important;
}

/* Opacity variants are not covered by the bare-name rules above: the "Recent Events" panel of the
   live campaign monitor (/campaigns and its docs replica) turned mid-grey with unreadable text in Light. */
html.light .bg-surface-container-highest\/50 {
    background-color: #f1f5f9 !important;
}

/* OPACITY VARIANTS (LIGHT): the bare-name rules above do not match `bg-<dark-token>/NN` utilities, so
   translucent dark panels stayed dark grey with dark text and low-opacity light text vanished on white. Every variant
   the views use is listed here; DocsLightThemeContrastTest fails when a new one is added without an override. */
html.light .bg-surface-container-high\/30,
html.light .bg-surface-container-high\/50,
html.light .bg-surface-container-low\/60,
html.light .bg-surface-container-lowest\/60,
html.light .bg-surface-container-lowest\/80,
html.light .bg-surface-container\/60,
html.light .bg-surface-container\/70 {
    background-color: #ffffff !important;
}
html.light .bg-surface-dim\/80,
html.light .bg-background\/80 {
    background-color: #f8fafc !important;
}
html.light .hover\:bg-surface-container-high\/30:hover,
html.light .hover\:bg-surface-container-high\/40:hover,
html.light .hover\:bg-surface-container-high\/50:hover,
html.light .hover\:bg-surface-container-high\/60:hover,
html.light .hover\:bg-surface-container\/50:hover,
html.light .hover\:bg-surface-variant\/30:hover {
    background-color: #f1f5f9 !important;
}
html.light .text-on-surface-variant\/40,
html.light .text-on-surface-variant\/60,
html.light .text-on-surface-variant\/70,
html.light .text-on-surface-variant\/80 {
    color: #64748b !important;
}
html.light .text-outline-variant\/60,
html.light .text-outline\/40 {
    color: #94a3b8 !important;
}
html.light .text-blue-400 {
    color: #1d4ed8 !important;
}
html.light .text-indigo-400 {
    color: #4338ca !important;
}
html.light .bg-surface-container-lowest\/40 {
    background-color: #ffffff !important;
}
html.light .bg-surface-variant\/40 {
    background-color: #f1f5f9 !important;
}
html.light .text-on-surface-variant\/50 {
    color: #64748b !important;
}
html.light .text-outline\/50 {
    color: #94a3b8 !important;
}

/* Placeholders inherit the dark-theme token (pale on white); make them readable in Light. */
html.light input::placeholder,
html.light textarea::placeholder {
    color: #64748b !important;
    opacity: 1;
}

/* Optimization Tip card (/schedules, /schedules list): keep a soft amber tint in Light instead of the dark gradient. */
html.light #schedules-optimization-tip {
    background-image: linear-gradient(135deg, #fff7ed 0%, #ffffff 55%, #fffbeb 100%) !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
}