/* Dark mode overrides — clean monochrome black/gray */

/* Light-mode default text color. Anything without an explicit color inherits
   near-black in light mode (never white), no matter the browser's color scheme. */
body { color: #111111; }
body[data-theme="dark"] { background: #0A0A0A !important; color: #FFFFFF; }

body[data-theme="dark"] {
  --color-primary: #FFFFFF;
  --color-primary-dark: #F3F4F6;
  --color-accent: #9CA3AF;
  --color-canvas: #0A0A0A;
  --color-surface: #1C1C1E;
  --color-surface-light: #2C2C2E;
  --color-surface-lighter: #3A3A3D;
  --color-on-primary: #0A0A0A;
}

/* Text overrides: light uses #111 -> dark uses #FFF */
body[data-theme="dark"] .text-\[\#111111\] { color: #FFFFFF !important; }
body[data-theme="dark"] .text-\[\#111111\]\/20 { color: rgba(255,255,255,0.22) !important; }
body[data-theme="dark"] .text-\[\#111111\]\/30 { color: rgba(255,255,255,0.32) !important; }
body[data-theme="dark"] .text-\[\#111111\]\/40 { color: rgba(255,255,255,0.45) !important; }
body[data-theme="dark"] .text-\[\#111111\]\/50 { color: rgba(255,255,255,0.55) !important; }
body[data-theme="dark"] .text-\[\#111111\]\/60 { color: rgba(255,255,255,0.65) !important; }
body[data-theme="dark"] .text-\[\#111111\]\/70 { color: rgba(255,255,255,0.75) !important; }

/* Invert on-primary (white text -> near-black in dark) */
body[data-theme="dark"] .text-\[\#FFFFFF\] { color: #0A0A0A !important; }

/* Background overrides */
body[data-theme="dark"] .bg-\[\#111111\] { background-color: #FFFFFF !important; }
body[data-theme="dark"] .bg-\[\#111111\]\/40 { background-color: rgba(255,255,255,0.4) !important; }
body[data-theme="dark"] .bg-\[\#111111\]\/20 { background-color: rgba(255,255,255,0.2) !important; }
body[data-theme="dark"] .bg-\[\#111111\]\/5 { background-color: rgba(255,255,255,0.06) !important; }
body[data-theme="dark"] .bg-\[\#111111\]\/\[0\.03\] { background-color: rgba(255,255,255,0.04) !important; }
body[data-theme="dark"] .bg-\[\#111111\]\/\[0\.04\] { background-color: rgba(255,255,255,0.05) !important; }

/* Borders */
body[data-theme="dark"] .border-\[\#111111\]\/5 { border-color: rgba(255,255,255,0.08) !important; }
body[data-theme="dark"] .border-\[\#111111\]\/10 { border-color: rgba(255,255,255,0.12) !important; }
body[data-theme="dark"] .border-\[\#111111\]\/15 { border-color: rgba(255,255,255,0.14) !important; }
body[data-theme="dark"] .border-\[\#111111\]\/20 { border-color: rgba(255,255,255,0.18) !important; }

body[data-theme="dark"] .bg-canvas\/90 { background-color: rgba(10,10,10,0.9) !important; }

/* Steps */
body[data-theme="dark"] .step-active { background: #FFFFFF !important; color: #0A0A0A !important; }
body[data-theme="dark"] .step-done { background: #FFFFFF !important; color: #0A0A0A !important; }
body[data-theme="dark"] .step-pending { background: #2C2C2E !important; color: rgba(255,255,255,0.3) !important; }
body[data-theme="dark"] .time-slot:hover, body[data-theme="dark"] .time-slot.selected { background: rgba(255,255,255,0.08) !important; border-color: #FFFFFF !important; color: #FFFFFF !important; }
body[data-theme="dark"] .cal-day:hover, body[data-theme="dark"] .cal-day.selected { background: #FFFFFF !important; color: #0A0A0A !important; }
body[data-theme="dark"] .cal-day.today { border-color: #FFFFFF !important; }

/* Gold text accent on hero → keep bright off-white for visibility (not colored) */
.gold-text { color: #FFFFFF !important; }
body[data-theme="dark"] .gold-text { color: #FFFFFF !important; }

/* Modals */
body[data-theme="dark"] .modal-content { background: #1C1C1E !important; }
body[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7) !important; }

/* Inputs */
body[data-theme="dark"] input, body[data-theme="dark"] textarea, body[data-theme="dark"] select {
  background-color: #2C2C2E !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

body[data-theme="dark"] .bg-primary.text-\[\#FFFFFF\] { background-color: #FFFFFF !important; color: #0A0A0A !important; }

body[data-theme="dark"] .theme-toggle-btn { background-color: #FFFFFF !important; color: #0A0A0A !important; border-color: #FFFFFF !important; }

/* Status colors (red/green/yellow stay) */
body[data-theme="dark"] .text-green-400, body[data-theme="dark"] .text-green-500 { color: #4ADE80 !important; }
body[data-theme="dark"] .text-red-400, body[data-theme="dark"] .text-red-500 { color: #F87171 !important; }
body[data-theme="dark"] .text-yellow-400, body[data-theme="dark"] .text-yellow-500,
body[data-theme="dark"] .text-amber-400, body[data-theme="dark"] .text-amber-500 { color: #FACC15 !important; }
body[data-theme="dark"] .text-blue-400, body[data-theme="dark"] .text-blue-500 { color: #60A5FA !important; }
body[data-theme="dark"] .bg-red-500\/10 { background-color: rgba(248,113,113,0.1) !important; }
body[data-theme="dark"] .bg-red-500\/20 { background-color: rgba(248,113,113,0.15) !important; }
body[data-theme="dark"] .border-red-500\/20 { border-color: rgba(248,113,113,0.2) !important; }
body[data-theme="dark"] .border-red-500\/15 { border-color: rgba(248,113,113,0.15) !important; }
body[data-theme="dark"] .bg-green-500\/5, body[data-theme="dark"] .bg-green-500\/10 { background-color: rgba(74,222,128,0.12) !important; }
body[data-theme="dark"] .border-green-500\/15 { border-color: rgba(74,222,128,0.25) !important; }
body[data-theme="dark"] .text-green-500 { color: #4ADE80 !important; }
body[data-theme="dark"] .border-green-500 { border-color: rgba(74,222,128,0.3) !important; }

img { box-shadow: none !important; }

/* ZarinPal payment card stays white in both modes */
.pay-card { background-color: #FFFFFF !important; color: #111111 !important; }
.pay-card .text-\[\#111111\] { color: #111111 !important; }
.pay-card .text-\[\#111111\]\/40 { color: rgba(17,17,17,0.4) !important; }
.pay-card .text-\[\#111111\]\/50 { color: rgba(17,17,17,0.5) !important; }
.pay-card .border-\[\#111111\]\/5 { border-color: rgba(17,17,17,0.06) !important; }
.pay-card .bg-\[\#111111\]\/\[0\.04\] { background-color: rgba(17,17,17,0.04) !important; }
#payBtn { background-color: #111111 !important; }
#payBtn:hover { background-color: #000000 !important; }

/* ---------- Audit fixes: missing dark-mode overrides ---------- */

/* Dividers / translucent dark fills that had no dark variant */
body[data-theme="dark"] .bg-\[\#111111\]\/10 { background-color: rgba(255,255,255,0.12) !important; }
body[data-theme="dark"] .bg-\[\#111111\]\/30 { background-color: rgba(255,255,255,0.32) !important; }
body[data-theme="dark"] .bg-\[\#111111\]\/\[0\.02\] { background-color: rgba(255,255,255,0.03) !important; }
body[data-theme="dark"] .text-\[\#111111\]\/80 { color: rgba(255,255,255,0.85) !important; }

/* Toggle "on" knob: white knob on a primary track. The track turns white in
   dark mode, so the knob must turn dark. Scoped to the toggle track size so
   unrelated .bg-white elements (ZarinPal card/badge) are never affected. */
body[data-theme="dark"] .w-11.h-6.bg-primary.rounded-full > .absolute.bg-white { background-color: #0A0A0A !important; }
/* (Toggle "off" knobs use bg-[\#111111]/30, covered by the global override above.) */

/* Photo-overlay icon buttons (service-detail hero): the pill sits on a photo,
   so it stays dark in dark mode while the icon inverts to white — same idea
   as the home hero overlay, which intentionally never inverts. */
body[data-theme="dark"] a.bg-\[\#111111\]\/40, body[data-theme="dark"] button.bg-\[\#111111\]\/40 { background-color: rgba(0,0,0,0.45) !important; }

/* ZarinPal card dark-mode guards: these must beat the body[data-theme="dark"]
   utility overrides on specificity so the card truly stays light in dark mode. */
body[data-theme="dark"] .pay-card .text-\[\#111111\] { color: #111111 !important; }
body[data-theme="dark"] .pay-card .text-\[\#111111\]\/40 { color: rgba(17,17,17,0.4) !important; }
body[data-theme="dark"] .pay-card .text-\[\#111111\]\/50 { color: rgba(17,17,17,0.5) !important; }
body[data-theme="dark"] .pay-card .border-\[\#111111\]\/5 { border-color: rgba(17,17,17,0.06) !important; }
body[data-theme="dark"] .pay-card .bg-\[\#111111\]\/\[0\.04\] { background-color: rgba(17,17,17,0.04) !important; }
/* #payBtn background is pinned dark in both modes, so its label must stay white in dark mode. */
body[data-theme="dark"] #payBtn { color: #FFFFFF !important; }

/* Status colors stay the same hue in dark mode (visibility boost only, same as red/green) */
body[data-theme="dark"] .text-purple-400, body[data-theme="dark"] .text-purple-500 { color: #C084FC !important; }
body[data-theme="dark"] .bg-red-500\/5 { background-color: rgba(248,113,113,0.1) !important; }
body[data-theme="dark"] .bg-yellow-500\/5, body[data-theme="dark"] .bg-yellow-500\/10 { background-color: rgba(234,179,8,0.12) !important; }
body[data-theme="dark"] .bg-blue-500\/10 { background-color: rgba(59,130,246,0.12) !important; }
body[data-theme="dark"] .bg-purple-500\/10 { background-color: rgba(168,85,247,0.12) !important; }
body[data-theme="dark"] .bg-amber-500\/10 { background-color: rgba(245,158,11,0.12) !important; }

/* CTA shadow keeps depth in dark mode (near-black shadow instead of invisible #111/25) */
body[data-theme="dark"] .shadow-\[\#111111\]\/25 { --tw-shadow-color: rgba(0,0,0,0.5) !important; }

/* Shimmer sweep stays visible on dark cards */
body[data-theme="dark"] .shimmer::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent) !important; }

/* Honor native hidden states even when a Tailwind display utility is present. */
[hidden] { display: none !important; }