/* ==========================================================================
   UnbillOS v3.8 — Cohesive Light & Dark Theme Stylesheet
   Uses exact [class~="..."] selectors so # and [] never suffer backslash-escaping bugs
   and always win cleanly over runtime Tailwind CDN styles when html.dark is active.
   ========================================================================== */

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background-color: #FAF7F9;
  color: #32161F;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ==========================================================================
   DARK MODE (html.dark) — Layered Obsidian-Plum & Luminous Teal/Mint System
   ========================================================================== */
html.dark {
  color-scheme: dark;
}

/* Layer 0: Outer Page Canvas */
html.dark body,
html.dark div[class~="min-h-screen"][class~="bg-[#FAF7F9]"] {
  background-color: #11090E !important;
  color: #FAF2F7 !important;
}

/* Layer 1: Primary Elevated Cards, Modals & Footer */
html.dark [class~="bg-white"],
html.dark [class~="bg-white/70"],
html.dark div[class~="max-h-[86dvh]"][class~="bg-[#FAF7F9]"],
html.dark div[class~="shrink-0"][class~="bg-[#FAF7F9]"] {
  background-color: #1B1016 !important;
  border-color: rgba(234, 148, 190, 0.22) !important;
}

/* Layer 2: Inner Tiles, Brand Grid Cards, Task Rows & Sub-Panels Inside Cards/Modals */
html.dark [class~="bg-white"] [class~="bg-[#FAF7F9]"],
html.dark div[class~="max-h-[86dvh]"] [class~="bg-[#FAF7F9]"] {
  background-color: #26161F !important;
  border-color: rgba(234, 148, 190, 0.25) !important;
}

/* Standalone bg-[#FAF7F9] elements outside cards */
html.dark main > div > [class~="bg-[#FAF7F9]"] {
  background-color: #1B1016 !important;
}

/* Layer 3: Interactive White Buttons & Pills (e.g. + Chase, Restore Sample, Routine Pills, Edit) */
html.dark button[class~="bg-white"],
html.dark a[class~="bg-white"] {
  background-color: #321C28 !important;
  color: #FFF7FB !important;
  border-color: rgba(234, 148, 190, 0.38) !important;
}
html.dark button[class~="bg-white"]:hover,
html.dark a[class~="bg-white"]:hover,
html.dark button[class~="bg-[#FAF7F9]"]:hover {
  background-color: #422535 !important;
}

/* Layer 4: Soft Blush Surfaces -> Deep Berry-Plum Surface in Dark Mode */
html.dark [class~="bg-[#FFEAFE]"],
html.dark [class~="bg-[#FFEAFE]/45"],
html.dark [class~="bg-[#FFEAFE]/50"],
html.dark [class~="bg-[#FFEAFE]/55"],
html.dark [class~="bg-[#FFEAFE]/60"],
html.dark [class~="bg-[#FFEAFE]/70"],
html.dark [class~="bg-[#FFEAFE]/80"],
html.dark [class~="bg-[#FFEAFE]/90"] {
  background-color: #2E1824 !important;
  border-color: rgba(234, 148, 190, 0.32) !important;
}

/* Layer 5: Translucent Mint Callouts (e.g., Reclaimed Savings Card, Cash Saved Card) */
html.dark [class~="bg-[#A3E4AE]/20"],
html.dark [class~="bg-[#A3E4AE]/25"],
html.dark [class~="bg-[#A3E4AE]/30"],
html.dark [class~="bg-[#A3E4AE]/35"],
html.dark [class~="bg-[#A3E4AE]/40"],
html.dark [class~="bg-[#A3E4AE]/50"] {
  background-color: rgba(16, 98, 88, 0.36) !important;
  border-color: rgba(163, 228, 174, 0.38) !important;
}

/* Layer 6: Dark Hero / Feature Callout Cards & Header */
html.dark header[class~="bg-[#32161F]"] {
  background-color: #170B11 !important;
  border-bottom-color: rgba(234, 148, 190, 0.24) !important;
}
html.dark div[class~="bg-[#32161F]"],
html.dark section[class~="bg-[#32161F]"] {
  background: linear-gradient(145deg, #2A1421 0%, #152528 100%) !important;
  border: 1px solid rgba(76, 224, 235, 0.28) !important;
}
html.dark button[class~="bg-[#32161F]"],
html.dark a[class~="bg-[#32161F]"] {
  background-color: #3A1E2C !important;
  color: #FFF7FB !important;
  border: 1px solid rgba(255, 234, 254, 0.26) !important;
}
html.dark button[class~="bg-[#32161F]"]:hover,
html.dark a[class~="bg-[#32161F]"]:hover {
  background-color: #4C273A !important;
}

/* Typography Contrast Remapping */
html.dark [class~="text-[#32161F]"] {
  color: #FFF7FB !important;
}
html.dark [class~="text-[#32161F]/85"],
html.dark [class~="text-[#32161F]/80"],
html.dark [class~="text-[#32161F]/75"],
html.dark [class~="text-[#32161F]/70"] {
  color: #E4CEDB !important;
}
html.dark [class~="text-[#32161F]/65"],
html.dark [class~="text-[#32161F]/60"],
html.dark [class~="text-[#32161F]/55"],
html.dark [class~="text-[#32161F]/45"],
html.dark [class~="text-[#32161F]/40"] {
  color: #BFA3B3 !important;
}

/* Luminous Brand Teal & Rose Labels on Dark Surfaces */
html.dark [class~="text-[#096B72]"] {
  color: #4CE0EB !important;
}
html.dark [class~="text-[#A8577E]"] {
  color: #F09AC3 !important;
}
html.dark [class~="bg-[#096B72]/10"] {
  background-color: rgba(76, 224, 235, 0.16) !important;
}

/* Hover States in Dark Mode */
html.dark [class~="hover:bg-[#FAF7F9]"]:hover,
html.dark [class~="hover:bg-[#FFEAFE]"]:hover,
html.dark [class~="hover:bg-[#FFEAFE]/50"]:hover,
html.dark [class~="hover:bg-[#FFEAFE]/60"]:hover,
html.dark [class~="hover:bg-[#FFEAFE]/90"]:hover {
  background-color: #351C2A !important;
}
html.dark [class~="hover:text-[#32161F]"]:hover {
  color: #FFF7FB !important;
}
html.dark [class~="hover:text-[#096B72]"]:hover {
  color: #4CE0EB !important;
}

/* Inputs, Selects & Textareas */
html.dark input:not([type="range"]):not([type="checkbox"]),
html.dark select,
html.dark textarea {
  background-color: #130A0F !important;
  color: #FFF7FB !important;
  border-color: rgba(234, 148, 190, 0.35) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #A38596 !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #4CE0EB !important;
}

/* Solid Bright Mint (#A3E4AE) & Spotify Green (#1DB954) MUST Keep Crisp Dark Ink! */
html.dark [class~="bg-[#A3E4AE]"],
html.dark [class~="bg-[#A3E4AE]"][class~="text-[#32161F]"],
html.dark [class~="bg-[#A3E4AE]"] [class~="text-[#32161F]"],
html.dark [class~="bg-[#1DB954]"],
html.dark [class~="bg-[#1DB954]"][class~="text-[#32161F]"] {
  background-color: #A3E4AE;
  color: #170A10 !important;
}
html.dark [class~="bg-[#1DB954]"] {
  background-color: #1DB954 !important;
}
html.dark [class~="hover:bg-[#A3E4AE]"]:hover {
  background-color: #A3E4AE !important;
  color: #170A10 !important;
}