/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --template-bg: #F8F9FA;
  --template-dark: #1A531A;
  --template-primary: #004D40;
  --template-action: #00C853;
  --template-nav-border: #CBD5E1;
  --template-nav-surface: #FFFFFF;
  --template-chip-surface: #FFFFFF;
  --template-chip-text: #475569;
  --template-radius: 999px;
  --template-content: #0F172A;
  --template-surface: #FFFFFF;
  --template-surface-muted: #F8FAFC;
  --template-border: #E2E8F0;
  --template-text-muted: #475569;
  --template-success-bg: #DCFCE7;
  --template-success-text: #166534;
  --template-success-border: #86EFAC;
  --template-warning-bg: #FEF3C7;
  --template-warning-text: #92400E;
  --template-warning-border: #FCD34D;
  --template-danger-bg: #FEE2E2;
  --template-danger-text: #B91C1C;
  --template-danger-border: #FCA5A5;
}

html[data-template="light"] {
  color-scheme: light;
  --template-bg: oklch(100% 0 0);
  --template-dark: oklch(21% 0.006 285.885);
  --template-primary: oklch(45% 0.24 277.023);
  --template-action: oklch(77% 0.152 181.912);
  --template-nav-border: oklch(95% 0 0);
  --template-nav-surface: oklch(100% 0 0);
  --template-chip-surface: oklch(98% 0 0);
  --template-chip-text: oklch(21% 0.006 285.885);
  --template-radius: 0.5rem;
  --template-content: oklch(21% 0.006 285.885);
  --template-surface: oklch(100% 0 0);
  --template-surface-muted: oklch(98% 0 0);
  --template-border: oklch(95% 0 0);
  --template-text-muted: oklch(44% 0.03 256);
  --template-success-bg: oklch(95% 0.06 156);
  --template-success-text: oklch(38% 0.08 165);
  --template-success-border: oklch(86% 0.1 157);
  --template-warning-bg: oklch(96% 0.08 87);
  --template-warning-text: oklch(46% 0.1 60);
  --template-warning-border: oklch(88% 0.12 83);
  --template-danger-bg: oklch(94% 0.06 24);
  --template-danger-text: oklch(45% 0.14 27);
  --template-danger-border: oklch(83% 0.12 25);
}

html[data-template="dark"] {
  color-scheme: dark;
  --template-bg: oklch(25.33% 0.016 252.42);
  --template-dark: oklch(97.807% 0.029 256.847);
  --template-primary: oklch(58% 0.233 277.117);
  --template-action: oklch(58% 0.233 277.117);
  --template-nav-border: oklch(21.15% 0.012 254.09);
  --template-nav-surface: oklch(23.26% 0.014 253.1);
  --template-chip-surface: oklch(21.15% 0.012 254.09);
  --template-chip-text: oklch(97.807% 0.029 256.847);
  --template-radius: 0.5rem;
  --template-content: oklch(97.807% 0.029 256.847);
  --template-surface: oklch(23.26% 0.014 253.1);
  --template-surface-muted: oklch(21.15% 0.012 254.09);
  --template-border: oklch(34% 0.02 252);
  --template-text-muted: oklch(80% 0.02 256);
  --template-success-bg: oklch(35% 0.08 158);
  --template-success-text: oklch(90% 0.05 157);
  --template-success-border: oklch(50% 0.1 158);
  --template-warning-bg: oklch(41% 0.1 75);
  --template-warning-text: oklch(92% 0.04 85);
  --template-warning-border: oklch(56% 0.12 80);
  --template-danger-bg: oklch(37% 0.1 24);
  --template-danger-text: oklch(92% 0.03 22);
  --template-danger-border: oklch(53% 0.12 24);
}

html[data-template="retro"] {
  color-scheme: light;
  --template-bg: oklch(91.637% 0.034 90.515);
  --template-dark: oklch(41% 0.112 45.904);
  --template-primary: oklch(80% 0.114 19.571);
  --template-action: oklch(68% 0.162 75.834);
  --template-nav-border: oklch(84.133% 0.065 90.856);
  --template-nav-surface: oklch(91.637% 0.034 90.515);
  --template-chip-surface: oklch(88.272% 0.049 91.774);
  --template-chip-text: oklch(41% 0.112 45.904);
  --template-radius: 0.25rem;
  --template-content: oklch(41% 0.112 45.904);
  --template-surface: oklch(95% 0.02 90);
  --template-surface-muted: oklch(90% 0.04 91);
  --template-border: oklch(84.133% 0.065 90.856);
  --template-text-muted: oklch(48% 0.09 46);
  --template-success-bg: oklch(92% 0.06 154);
  --template-success-text: oklch(35% 0.1 151);
  --template-success-border: oklch(80% 0.11 150);
  --template-warning-bg: oklch(92% 0.09 76);
  --template-warning-text: oklch(41% 0.112 45.904);
  --template-warning-border: oklch(78% 0.14 74);
  --template-danger-bg: oklch(90% 0.08 23);
  --template-danger-text: oklch(40% 0.123 38.172);
  --template-danger-border: oklch(77% 0.11 24);
}

html[data-template="blue_horizon"] {
  color-scheme: dark;
  --template-bg: #00171f;
  --template-dark: #ffffff;
  --template-primary: #00a7e1;
  --template-action: #007ea7;
  --template-nav-border: #003459;
  --template-nav-surface: #001e34;
  --template-chip-surface: #003459;
  --template-chip-text: #c6f1ff;
  --template-radius: 0.5rem;
  --template-content: #ffffff;
  --template-surface: #003459;
  --template-surface-muted: #002845;
  --template-border: #004c65;
  --template-text-muted: #aadcff;
  --template-success-bg: #003243;
  --template-success-text: #76ddff;
  --template-success-border: #007ea7;
  --template-warning-bg: #00435a;
  --template-warning-text: #8de2ff;
  --template-warning-border: #00a7e1;
  --template-danger-bg: #001423;
  --template-danger-text: #c6f1ff;
  --template-danger-border: #0064ab;
}

html[data-template="orange_sunset_sky"] {
  color-scheme: dark;
  --template-bg: #000e12;
  --template-dark: #ffffff;
  --template-primary: #32ccff;
  --template-action: #00a7e1;
  --template-nav-border: #003243;
  --template-nav-surface: #001423;
  --template-chip-surface: #002845;
  --template-chip-text: #c6f1ff;
  --template-radius: 0.5rem;
  --template-content: #ffffff;
  --template-surface: #001e34;
  --template-surface-muted: #002845;
  --template-border: #004c65;
  --template-text-muted: #aadcff;
  --template-success-bg: #003243;
  --template-success-text: #76ddff;
  --template-success-border: #007ea7;
  --template-warning-bg: #004c65;
  --template-warning-text: #bbeeff;
  --template-warning-border: #00b1ed;
  --template-danger-bg: #001922;
  --template-danger-text: #8de2ff;
  --template-danger-border: #006587;
}

html[data-template="mellow_morning_toast"] {
  color-scheme: light;
  --template-bg: #fffaf0;
  --template-dark: #00005a;
  --template-primary: #086788;
  --template-action: #dab94f;
  --template-nav-border: #cfd0d7;
  --template-nav-surface: #f3f0f8;
  --template-chip-surface: #fdf3f4;
  --template-chip-text: #00005a;
  --template-radius: 0.5rem;
  --template-content: #00005a;
  --template-surface: #fffafa;
  --template-surface-muted: #f3f0f8;
  --template-border: #cfd0d7;
  --template-text-muted: #636776;
  --template-success-bg: #baebfb;
  --template-success-text: #06536c;
  --template-success-border: #74d6f7;
  --template-warning-bg: #fffaf0;
  --template-warning-text: #c09926;
  --template-warning-border: #ead594;
  --template-danger-bg: #fdf3f4;
  --template-danger-text: #a91d2b;
  --template-danger-border: #ee9da5;
}

.template-body {
  background-color: var(--template-bg);
  color: var(--template-content);
}

.template-nav {
  border-color: var(--template-nav-border);
  background-color: var(--template-nav-surface);
}

.template-chip {
  background-color: var(--template-chip-surface);
  border-radius: var(--template-radius);
  color: var(--template-chip-text);
}

.theme-brand-chip {
  background-color: var(--template-chip-surface);
  border: 1px solid var(--template-nav-border);
  border-radius: calc(var(--template-radius) * 0.5);
  color: var(--template-chip-text);
}

.template-select {
  border-radius: calc(var(--template-radius) * 0.5);
}

/* Semantic theme utilities for reusable components */
.theme-surface {
  background-color: var(--template-surface);
  border-color: var(--template-border);
}

.theme-btn-primary {
  background-color: var(--template-action);
  color: #fff;
}

.theme-btn-primary:hover {
  filter: brightness(0.95);
}

.theme-btn-outline {
  background-color: var(--template-surface);
  border-color: var(--template-border);
  color: var(--template-text-muted);
}

.theme-btn-outline:hover {
  background-color: var(--template-surface-muted);
}

.theme-btn-action-outline {
  background-color: var(--template-surface);
  border-color: color-mix(in oklab, var(--template-action) 70%, var(--template-border));
  color: var(--template-action);
}

.theme-btn-action-outline:hover {
  background-color: color-mix(in oklab, var(--template-action) 10%, var(--template-surface));
}

.theme-surface-active {
  background-color: color-mix(in oklab, var(--template-action) 12%, var(--template-surface));
  border-color: color-mix(in oklab, var(--template-action) 55%, var(--template-border));
}

.theme-badge-active {
  background-color: color-mix(in oklab, var(--template-action) 24%, var(--template-surface));
  border-color: color-mix(in oklab, var(--template-action) 70%, var(--template-border));
  color: var(--template-content);
}

.theme-callout-accent {
  background-color: color-mix(in oklab, var(--template-action) 8%, var(--template-surface));
  border-color: color-mix(in oklab, var(--template-action) 55%, var(--template-border));
  color: var(--template-content);
}

.theme-hero-radial {
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--template-action) 18%, transparent), transparent 45%),
    radial-gradient(circle at bottom left, color-mix(in oklab, var(--template-primary) 16%, transparent), transparent 42%);
}

.theme-shadow-action {
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--template-action) 45%, transparent);
}

.theme-shadow-surface {
  box-shadow: 0 10px 40px -10px color-mix(in oklab, var(--template-surface) 35%, transparent);
}

.theme-status-success {
  background-color: var(--template-success-bg);
  border-color: var(--template-success-border);
  color: var(--template-success-text);
}

.theme-status-warning {
  background-color: var(--template-warning-bg);
  border-color: var(--template-warning-border);
  color: var(--template-warning-text);
}

.theme-surface-warning {
  background-color: color-mix(in oklab, var(--template-warning-bg) 35%, var(--template-surface));
  border-color: var(--template-warning-border);
}

.theme-badge-warning {
  background-color: color-mix(in oklab, var(--template-warning-bg) 75%, var(--template-surface));
  border-color: var(--template-warning-border);
  color: var(--template-warning-text);
}

.theme-badge-success {
  background-color: color-mix(in oklab, var(--template-success-bg) 75%, var(--template-surface));
  border-color: var(--template-success-border);
  color: var(--template-success-text);
}

.theme-callout-warning {
  background-color: color-mix(in oklab, var(--template-warning-bg) 88%, transparent);
  border-color: var(--template-warning-border);
  color: var(--template-warning-text);
}

.theme-callout-success {
  background-color: color-mix(in oklab, var(--template-success-bg) 88%, transparent);
  border-color: var(--template-success-border);
  color: var(--template-success-text);
}

.theme-status-danger {
  background-color: var(--template-danger-bg);
  border-color: var(--template-danger-border);
  color: var(--template-danger-text);
}

.theme-status-neutral {
  background-color: var(--template-surface-muted);
  border-color: var(--template-border);
  color: var(--template-text-muted);
}

.bg-dsop-gray-light {
  background-color: var(--template-bg);
}

.text-dsop-green-dark {
  color: var(--template-dark);
}

.text-dsop-green-primary {
  color: var(--template-primary);
}

.text-dsop-green-action {
  color: var(--template-action);
}

.bg-dsop-green-action {
  background-color: var(--template-action);
}

.bg-dsop-green-primary {
  background-color: var(--template-primary);
}

.border-dsop-green-action {
  border-color: var(--template-action);
}

.hover\:text-dsop-green-primary:hover {
  color: var(--template-primary);
}

.hover\:text-dsop-green-action:hover {
  color: var(--template-action);
}

/* Global overrides for most used Tailwind utility shades in this project */
.bg-white {
  background-color: var(--template-surface);
}

.bg-white\/90 {
  background-color: color-mix(in oklab, var(--template-surface) 90%, transparent);
}

.bg-white\/95 {
  background-color: color-mix(in oklab, var(--template-surface) 95%, transparent);
}

.from-white {
  --tw-gradient-from: var(--template-surface) var(--tw-gradient-from-position);
  --tw-gradient-to: color-mix(in oklab, var(--template-surface) 0%, transparent) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-via: var(--template-surface) var(--tw-gradient-via-position);
  --tw-gradient-via-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.to-white {
  --tw-gradient-to: var(--template-surface) var(--tw-gradient-to-position);
}

.bg-slate-50,
.bg-slate-50\/60,
.bg-slate-50\/70,
.bg-slate-50\/40,
.bg-slate-50\/80,
.hover\:bg-slate-50\/60:hover,
.hover\:bg-slate-50\/70:hover,
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover {
  background-color: var(--template-surface-muted);
}

.bg-slate-100 {
  background-color: var(--template-surface-muted);
}

.bg-slate-200 {
  background-color: color-mix(in oklab, var(--template-border) 85%, var(--template-surface));
}

.bg-slate-900 {
  background-color: color-mix(in oklab, var(--template-primary) 55%, var(--template-content));
}

.border-slate-100,
.border-slate-200,
.border-slate-300 {
  border-color: var(--template-border);
}

.border-slate-900 {
  border-color: color-mix(in oklab, var(--template-content) 75%, var(--template-border));
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--template-border);
}

.text-slate-400,
.text-slate-500,
.text-slate-600 {
  color: var(--template-text-muted);
}

.text-slate-700,
.text-slate-800,
.text-slate-900 {
  color: var(--template-content);
}

.text-slate-100 {
  color: color-mix(in oklab, var(--template-surface) 94%, var(--template-content));
}

.bg-blue-50 {
  background-color: color-mix(in oklab, var(--template-primary) 12%, white);
}

.bg-gray-50 {
  background-color: color-mix(in oklab, var(--template-surface-muted) 88%, var(--template-surface));
}

.border-blue-200 {
  border-color: color-mix(in oklab, var(--template-primary) 30%, white);
}

.border-blue-100 {
  border-color: color-mix(in oklab, var(--template-primary) 22%, white);
}

.border-blue-500 {
  border-color: color-mix(in oklab, var(--template-action) 60%, var(--template-border));
}

.text-blue-600,
.text-blue-700,
.text-blue-800 {
  color: var(--template-primary);
}

.text-blue-900 {
  color: color-mix(in oklab, var(--template-primary) 82%, var(--template-content));
}

.text-blue-100,
.text-blue-100\/60 {
  color: color-mix(in oklab, var(--template-surface) 90%, var(--template-primary));
}

.bg-blue-600,
.bg-blue-700,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-500:hover {
  background-color: var(--template-action);
}

.bg-blue-100,
.hover\:bg-blue-100:hover {
  background-color: color-mix(in oklab, var(--template-primary) 15%, var(--template-surface));
}

.focus\:border-blue-500:focus {
  border-color: var(--template-action);
}

.focus\:outline-blue-600:focus {
  outline-color: var(--template-action);
}

.focus\:outline-red-600:focus {
  outline-color: var(--template-danger-text);
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: color-mix(in oklab, var(--template-action) 35%, white);
}

.ring-blue-500 {
  --tw-ring-color: color-mix(in oklab, var(--template-action) 35%, white);
}

.focus\:ring-emerald-100:focus {
  --tw-ring-color: color-mix(in oklab, var(--template-action) 22%, var(--template-surface));
}

.bg-green-50 {
  background-color: var(--template-success-bg);
}

.bg-green-100 {
  background-color: color-mix(in oklab, var(--template-success-bg) 75%, white);
}

.border-green-200,
.border-green-300 {
  border-color: var(--template-success-border);
}

.border-green-600 {
  border-color: var(--template-success-text);
}

.text-green-600,
.text-green-700 {
  color: var(--template-success-text);
}

.text-green-500 {
  color: var(--template-success-text);
}

.text-green-800 {
  color: color-mix(in oklab, var(--template-success-text) 85%, black);
}

.text-green-300 {
  color: color-mix(in oklab, var(--template-success-text) 70%, var(--template-surface));
}

.bg-green-600 {
  background-color: var(--template-success-text);
}

.bg-red-50 {
  background-color: var(--template-danger-bg);
}

.border-red-200,
.border-red-300 {
  border-color: var(--template-danger-border);
}

.text-red-600,
.text-red-700 {
  color: var(--template-danger-text);
}

.bg-red-600 {
  background-color: var(--template-danger-text);
}

.bg-rose-50 {
  background-color: var(--template-danger-bg);
}

.border-rose-200,
.border-rose-300 {
  border-color: var(--template-danger-border);
}

.text-rose-700 {
  color: var(--template-danger-text);
}

.bg-amber-50 {
  background-color: var(--template-warning-bg);
}

.bg-amber-100 {
  background-color: color-mix(in oklab, var(--template-warning-bg) 75%, var(--template-surface));
}

.border-amber-200 {
  border-color: var(--template-warning-border);
}

.border-amber-300 {
  border-color: color-mix(in oklab, var(--template-warning-border) 82%, var(--template-border));
}

.text-amber-700 {
  color: var(--template-warning-text);
}

.text-amber-600,
.text-amber-800,
.text-amber-900 {
  color: var(--template-warning-text);
}

.bg-yellow-50 {
  background-color: var(--template-warning-bg);
}

.text-yellow-300,
.text-yellow-700 {
  color: var(--template-warning-text);
}

.bg-orange-50,
.bg-orange-50\/70,
.hover\:bg-orange-100:hover,
.hover\:bg-orange-50:hover {
  background-color: var(--template-warning-bg);
}

.border-orange-200,
.border-orange-300 {
  border-color: var(--template-warning-border);
}

.border-orange-100 {
  border-color: color-mix(in oklab, var(--template-warning-border) 70%, var(--template-border));
}

.text-orange-700 {
  color: var(--template-warning-text);
}

.text-orange-600 {
  color: var(--template-warning-text);
}

.bg-emerald-50 {
  background-color: var(--template-success-bg);
}

.bg-emerald-50\/40 {
  background-color: color-mix(in oklab, var(--template-success-bg) 40%, transparent);
}

.bg-emerald-50\/60 {
  background-color: color-mix(in oklab, var(--template-success-bg) 60%, transparent);
}

.border-emerald-100,
.border-emerald-300 {
  border-color: var(--template-success-border);
}

.border-emerald-200 {
  border-color: color-mix(in oklab, var(--template-success-border) 85%, var(--template-border));
}

.text-emerald-700,
.text-emerald-800 {
  color: var(--template-success-text);
}

.hover\:text-green-700:hover,
.hover\:text-emerald-800:hover,
.hover\:text-red-500:hover,
.hover\:text-red-700:hover,
.hover\:text-blue-900:hover {
  color: var(--template-primary);
}

.hover\:bg-emerald-50:hover {
  background-color: color-mix(in oklab, var(--template-success-bg) 80%, var(--template-surface));
}

.bg-gray-100 {
  background-color: var(--template-surface-muted);
}

.border-gray-400 {
  border-color: color-mix(in oklab, var(--template-border) 70%, var(--template-text-muted));
}

.text-gray-600 {
  color: var(--template-text-muted);
}

.hover\:bg-gray-50:hover {
  background-color: color-mix(in oklab, var(--template-surface-muted) 90%, var(--template-surface));
}

.bg-indigo-500 {
  background-color: var(--template-primary);
}

.border-indigo-300 {
  border-color: color-mix(in oklab, var(--template-primary) 35%, var(--template-border));
}

.text-indigo-600,
.text-indigo-700 {
  color: var(--template-primary);
}

.ring-indigo-200 {
  --tw-ring-color: color-mix(in oklab, var(--template-primary) 22%, var(--template-surface));
}

.hover\:bg-indigo-50:hover {
  background-color: color-mix(in oklab, var(--template-primary) 10%, var(--template-surface));
}

.bg-purple-100 {
  background-color: color-mix(in oklab, var(--template-primary) 18%, var(--template-surface));
}

.text-purple-600 {
  color: var(--template-primary);
}

.bg-red-100 {
  background-color: color-mix(in oklab, var(--template-danger-bg) 72%, var(--template-surface));
}

.border-red-400 {
  border-color: color-mix(in oklab, var(--template-danger-border) 78%, var(--template-border));
}

.text-red-400,
.text-red-500 {
  color: var(--template-danger-text);
}

.hover\:bg-red-500:hover {
  background-color: var(--template-danger-text);
}

.bg-rose-500 {
  background-color: var(--template-danger-text);
}

.bg-sky-50,
.bg-sky-50\/40 {
  background-color: color-mix(in oklab, var(--template-primary) 10%, var(--template-surface));
}

.border-sky-100,
.border-sky-200,
.border-sky-300 {
  border-color: color-mix(in oklab, var(--template-primary) 24%, var(--template-border));
}

.text-sky-700,
.text-sky-900 {
  color: var(--template-primary);
}

.bg-yellow-100 {
  background-color: color-mix(in oklab, var(--template-warning-bg) 75%, var(--template-surface));
}

.text-yellow-800 {
  color: var(--template-warning-text);
}

.ring-red-300 {
  --tw-ring-color: color-mix(in oklab, var(--template-danger-border) 72%, var(--template-border));
}

.from-blue-400,
.from-teal-700 {
  --tw-gradient-from: color-mix(in oklab, var(--template-primary) 70%, var(--template-action)) var(--tw-gradient-from-position);
  --tw-gradient-to: color-mix(in oklab, var(--template-primary) 0%, transparent) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-teal-800,
.via-emerald-50 {
  --tw-gradient-via: color-mix(in oklab, var(--template-primary) 55%, var(--template-action)) var(--tw-gradient-via-position);
  --tw-gradient-via-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.to-amber-900 {
  --tw-gradient-to: color-mix(in oklab, var(--template-dark) 80%, var(--template-primary)) var(--tw-gradient-to-position);
}

/* Native form controls should follow active template */
select {
  background-color: var(--template-surface);
  border-color: var(--template-border);
  color: var(--template-content);
}

option {
  background-color: var(--template-surface);
  color: var(--template-content);
}