/*
 * 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 {
  color-scheme: light;
  --liquid-bg: #eaf3ef;
  --liquid-bg-2: #f7fbff;
  --liquid-phone: rgba(251, 253, 249, 0.78);
  --liquid-surface: rgba(255, 255, 255, 0.62);
  --liquid-surface-strong: rgba(255, 255, 255, 0.82);
  --liquid-surface-soft: rgba(247, 251, 255, 0.46);
  --liquid-border: rgba(255, 255, 255, 0.72);
  --liquid-border-strong: rgba(84, 123, 107, 0.24);
  --liquid-text: #0c1f18;
  --liquid-muted: #64736e;
  --liquid-accent: #0f7a5f;
  --liquid-accent-2: #31b58f;
  --liquid-danger: #e11d48;
  --liquid-warning: #b45309;
  --liquid-shadow: 0 22px 70px rgba(42, 71, 60, 0.18);
  --liquid-inner: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --liquid-bg: #08110f;
  --liquid-bg-2: #111827;
  --liquid-phone: rgba(9, 18, 18, 0.82);
  --liquid-surface: rgba(18, 31, 33, 0.64);
  --liquid-surface-strong: rgba(22, 37, 40, 0.86);
  --liquid-surface-soft: rgba(33, 48, 52, 0.52);
  --liquid-border: rgba(255, 255, 255, 0.12);
  --liquid-border-strong: rgba(178, 245, 221, 0.18);
  --liquid-text: #eefaf5;
  --liquid-muted: #a7bbb4;
  --liquid-accent: #58d6ad;
  --liquid-accent-2: #2db78f;
  --liquid-danger: #fb7185;
  --liquid-warning: #fbbf24;
  --liquid-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  --liquid-inner: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

html {
  background: var(--liquid-bg);
}

.liquid-app {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(180deg, var(--liquid-bg), var(--liquid-bg-2));
  color: var(--liquid-text);
}

.liquid-stage {
  background:
    linear-gradient(115deg, rgba(15, 122, 95, 0.14), transparent 34%),
    linear-gradient(245deg, rgba(56, 189, 248, 0.12), transparent 36%);
}

.liquid-phone {
  background: var(--liquid-phone);
  border: 1px solid var(--liquid-border);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
}

.liquid-aurora {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.38), transparent 28%),
    linear-gradient(22deg, transparent 45%, rgba(49, 181, 143, 0.14) 64%, transparent 84%);
}

.liquid-content {
  color: var(--liquid-text);
}

.liquid-header {
  color: var(--liquid-text);
}

.liquid-title,
.liquid-content h1,
.liquid-content h2,
.liquid-content legend {
  color: var(--liquid-text) !important;
}

.liquid-content p,
.liquid-content li,
.liquid-content label,
.liquid-content span {
  color: inherit;
}

.liquid-content .text-slate-500,
.liquid-content .text-slate-700,
.liquid-menu-panel .text-slate-500,
.liquid-content [class*="text-slate-"] {
  color: var(--liquid-muted) !important;
}

.liquid-content .text-green-700,
.liquid-content .text-green-800,
.liquid-content .text-green-900,
.liquid-content .text-green-950,
.liquid-menu-panel .text-green-700,
.liquid-title {
  color: var(--liquid-accent) !important;
}

.liquid-content .text-red-700,
.liquid-content .text-red-800,
.liquid-content .text-red-900 {
  color: var(--liquid-danger) !important;
}

.liquid-content .text-amber-700,
.liquid-content .text-amber-900 {
  color: var(--liquid-warning) !important;
}

.liquid-content :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-green-50, .bg-sky-50, .bg-orange-50, .bg-amber-50, .bg-red-50),
.liquid-menu-panel,
.liquid-alert {
  background: var(--liquid-surface) !important;
  border-color: var(--liquid-border-strong) !important;
  box-shadow: var(--liquid-inner), 0 14px 34px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(22px) saturate(1.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
}

.liquid-content :is(.rounded-2xl, .rounded-xl) {
  border-color: var(--liquid-border-strong) !important;
}

.liquid-content :is(.bg-green-50, .bg-sky-50, .bg-orange-50, .bg-amber-50) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.38), transparent),
    var(--liquid-surface-soft) !important;
}

.liquid-content .bg-gradient-to-r {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(120deg, #0c6f59, #32c190) !important;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 18px 44px rgba(15, 122, 95, 0.24), var(--liquid-inner) !important;
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}

.liquid-content input,
.liquid-content select,
.liquid-content textarea {
  background: var(--liquid-surface-strong) !important;
  border-color: var(--liquid-border-strong) !important;
  color: var(--liquid-text) !important;
  box-shadow: var(--liquid-inner);
  outline: none;
}

.liquid-content input:focus,
.liquid-content select:focus,
.liquid-content textarea:focus {
  border-color: color-mix(in srgb, var(--liquid-accent) 58%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--liquid-accent) 18%, transparent), var(--liquid-inner);
}

.liquid-content ::placeholder {
  color: color-mix(in srgb, var(--liquid-muted) 72%, transparent);
}

.liquid-content :is(.bg-green-600, .bg-green-700),
.liquid-primary-button,
.liquid-install {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 45%),
    linear-gradient(135deg, var(--liquid-accent), var(--liquid-accent-2)) !important;
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(15, 122, 95, 0.28), var(--liquid-inner) !important;
}

.liquid-icon-button {
  background: var(--liquid-surface) !important;
  border: 1px solid var(--liquid-border-strong) !important;
  color: var(--liquid-text) !important;
  box-shadow: var(--liquid-inner), 0 10px 26px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.liquid-icon-button span {
  background: linear-gradient(135deg, var(--liquid-accent), var(--liquid-accent-2));
}

.liquid-header-action {
  background: color-mix(in srgb, var(--liquid-surface-strong) 42%, transparent);
  border: 0;
  color: var(--liquid-text);
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.liquid-header-action span {
  background: linear-gradient(135deg, var(--liquid-accent), var(--liquid-accent-2));
}

.liquid-menu-panel {
  border-right: 1px solid var(--liquid-border-strong);
  color: var(--liquid-text);
}

.liquid-menu-link {
  color: var(--liquid-text);
  transition: background 160ms ease, transform 160ms ease;
}

.liquid-menu-link:hover {
  background: var(--liquid-surface-soft);
  transform: translateX(2px);
}

.liquid-emergency {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(135deg, #e11d48, #fb7185);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 16px 36px rgba(225, 29, 72, 0.28), var(--liquid-inner);
}

.liquid-alert-success {
  color: var(--liquid-accent);
}

.liquid-alert-danger {
  color: var(--liquid-danger);
}

.liquid-content .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.liquid-content .border-slate-100,
.liquid-content .border-slate-200,
.liquid-content .border-green-100,
.liquid-content .border-red-100,
.liquid-content .border-amber-100 {
  border-color: var(--liquid-border-strong) !important;
}

.liquid-content .has-\[\:checked\]\:bg-green-50:has(:checked) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent),
    color-mix(in srgb, var(--liquid-accent) 18%, var(--liquid-surface)) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .liquid-content a,
  .liquid-content button,
  .liquid-icon-button,
  .liquid-header-action {
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .liquid-content a:active,
  .liquid-content button:active,
  .liquid-icon-button:active,
  .liquid-header-action:active {
    transform: scale(0.98);
  }
}