/* ============================================================
   BeautyFlow — tema com contraste e linhas marcantes
   Claro: fundo acinzentado + cards brancos com borda
   Escuro: base Linear/GitHub (fundo profundo, superfícies elevadas)
   ============================================================ */

/* ---------- MODO CLARO: tira o branco total ---------- */
:root {
  --background: 220 20% 96.5%;
  --foreground: 222 32% 12%;
  --card: 0 0% 100%;
  --card-foreground: 222 32% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 32% 12%;
  --muted: 220 16% 93%;
  --muted-foreground: 220 10% 40%;
  --secondary: 220 16% 93%;
  --secondary-foreground: 222 32% 15%;
  --border: 220 14% 84%;
  --input: 220 14% 82%;
  --ring: 330 81% 55%;
}

/* ---------- MODO ESCURO ---------- */
.dark {
  --background: 222 28% 6%;
  --foreground: 220 25% 98%;
  --card: 222 22% 9.5%;
  --card-foreground: 220 22% 96%;
  --popover: 222 24% 11%;
  --popover-foreground: 220 22% 96%;
  --muted: 222 18% 15%;
  --muted-foreground: 220 16% 82%;
  --secondary: 222 18% 15%;
  --secondary-foreground: 220 22% 96%;
  --border: 220 14% 21%;
  --input: 220 14% 24%;
  --ring: 330 81% 62%;
  --sidebar-background: 222 26% 7.5%;
  --sidebar-foreground: 220 18% 88%;
  --sidebar-border: 220 14% 19%;
  --sidebar-accent: 222 18% 14%;
  --sidebar-accent-foreground: 220 22% 96%;
}

/* ---------- SUPERFÍCIES: borda + profundidade ---------- */
.bg-white.rounded-xl,
.bg-white.rounded-lg,
.bg-white.rounded-2xl,
.bg-white.rounded-3xl {
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
}
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-lg,
.dark .bg-white.rounded-2xl,
.dark .bg-white.rounded-3xl {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* linhas divisórias mais visíveis */
.dark .border-slate-100, .dark .border-slate-200,
.dark .border-gray-100, .dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
.dark .divide-slate-100 > * + *, .dark .divide-slate-200 > * + * { border-color: hsl(var(--border)) !important; }

/* ---------- MODO ESCURO: substitui cores fixas ---------- */
.dark .bg-white, .dark .bg-white\/80, .dark .bg-white\/90, .dark .bg-white\/95 {
  background-color: hsl(var(--card)) !important;
}
.dark .bg-slate-50, .dark .bg-slate-100, .dark .bg-gray-50, .dark .bg-gray-100 {
  background-color: hsl(var(--muted)) !important;
}
.dark .bg-slate-200, .dark .bg-gray-200 { background-color: hsl(var(--border)) !important; }

/* textos */
.dark .text-slate-900, .dark .text-slate-800, .dark .text-slate-700,
.dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700 { color: hsl(var(--foreground)) !important; }
.dark .text-slate-600, .dark .text-slate-500, .dark .text-gray-600, .dark .text-gray-500 {
  color: hsl(var(--muted-foreground)) !important;
}

/* etiquetas de status coloridas */
.dark .bg-pink-50, .dark .bg-pink-50\/20, .dark .bg-pink-50\/30,
.dark .bg-pink-50\/40, .dark .bg-pink-50\/50, .dark .bg-pink-100 {
  background-color: rgba(236, 72, 153, .16) !important;
}
.dark .bg-blue-50, .dark .bg-blue-100 { background-color: rgba(59, 130, 246, .18) !important; }
.dark .bg-green-50, .dark .bg-green-100,
.dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .18) !important; }
.dark .bg-red-50, .dark .bg-red-100 { background-color: rgba(239, 68, 68, .18) !important; }
.dark .bg-yellow-50, .dark .bg-yellow-100,
.dark .bg-amber-50, .dark .bg-amber-100 { background-color: rgba(245, 158, 11, .18) !important; }
.dark .bg-purple-50, .dark .bg-purple-100 { background-color: rgba(168, 85, 247, .18) !important; }
.dark .bg-orange-50, .dark .bg-orange-100 { background-color: rgba(249, 115, 22, .18) !important; }
.dark .bg-indigo-50, .dark .bg-indigo-100 { background-color: rgba(99, 102, 241, .18) !important; }
.dark .bg-sky-50, .dark .bg-sky-100 { background-color: rgba(14, 165, 233, .18) !important; }
.dark .bg-teal-50, .dark .bg-teal-100 { background-color: rgba(20, 184, 166, .18) !important; }
.dark .bg-rose-50, .dark .bg-rose-100 { background-color: rgba(244, 63, 94, .18) !important; }
.dark .bg-violet-50, .dark .bg-violet-100 { background-color: rgba(139, 92, 246, .18) !important; }
.dark .bg-cyan-50, .dark .bg-cyan-100 { background-color: rgba(6, 182, 212, .18) !important; }
.dark .bg-lime-50, .dark .bg-lime-100 { background-color: rgba(132, 204, 22, .18) !important; }

/* texto colorido fica legível no escuro */
.dark .text-pink-600, .dark .text-pink-700 { color: #f472b6 !important; }
.dark .text-blue-600, .dark .text-blue-700 { color: #60a5fa !important; }
.dark .text-green-600, .dark .text-green-700,
.dark .text-emerald-600, .dark .text-emerald-700 { color: #34d399 !important; }
.dark .text-red-600, .dark .text-red-700 { color: #f87171 !important; }
.dark .text-yellow-600, .dark .text-yellow-700,
.dark .text-amber-600, .dark .text-amber-700 { color: #fbbf24 !important; }
.dark .text-purple-600, .dark .text-purple-700 { color: #c084fc !important; }
.dark .text-orange-600, .dark .text-orange-700 { color: #fb923c !important; }
.dark .text-slate-400, .dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }

/* bordas coloridas suavizadas */
.dark .border-pink-100, .dark .border-pink-200 { border-color: rgba(236, 72, 153, .35) !important; }
.dark .border-blue-100, .dark .border-blue-200 { border-color: rgba(59, 130, 246, .35) !important; }
.dark .border-green-100, .dark .border-green-200 { border-color: rgba(16, 185, 129, .35) !important; }
.dark .border-red-100, .dark .border-red-200 { border-color: rgba(239, 68, 68, .35) !important; }
.dark .border-yellow-100, .dark .border-yellow-200 { border-color: rgba(245, 158, 11, .35) !important; }

/* entradas e tabelas */
.dark input, .dark textarea, .dark select {
  background-color: hsl(var(--card));
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
}
.dark input::placeholder, .dark textarea::placeholder { color: hsl(var(--muted-foreground)); }
.dark table thead tr { border-color: hsl(var(--border)); }
.dark table tbody tr:hover { background-color: hsl(var(--muted)); }

/* gráficos (recharts) legíveis */
.dark .recharts-cartesian-axis-tick text,
.dark .recharts-legend-item-text { fill: hsl(var(--muted-foreground)) !important; color: hsl(var(--muted-foreground)) !important; }
.dark .recharts-cartesian-grid line { stroke: hsl(var(--border)) !important; }
.dark .recharts-default-tooltip {
  background-color: hsl(var(--popover)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

/* botão do tema */
#bf-theme-toggle {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2147483000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  opacity: .95; transition: transform .15s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent; padding: 0;
}
#bf-theme-toggle:hover { transform: scale(1.06); opacity: 1; }
#bf-theme-toggle:active { transform: scale(.94); }
#bf-theme-toggle svg { width: 22px; height: 22px; display: block; }
@media print { #bf-theme-toggle { display: none !important; } }

/* ---------- remove os gradientes claros no escuro ---------- */
.dark [class*="from-pink-50"],
.dark [class*="from-purple-50"],
.dark [class*="from-rose-50"],
.dark [class*="via-purple-50"],
.dark [class*="to-purple-50"],
.dark [class*="to-rose-50"] { background-image: none !important; }

/* o wrapper do layout volta a ser o fundo do tema (nao rosa) */
.dark [class*="min-h-screen"][class*="from-pink-50"],
.dark [class*="min-h-screen"][class*="from-purple-50"] {
  background-color: hsl(var(--background)) !important;
}

/* menu ativo: rosa translucido, letra clara */
.dark a[class*="from-pink-50"],
.dark a[class*="bg-gradient-to-r"] {
  background-color: rgba(236, 72, 153, .16) !important;
  border-color: rgba(236, 72, 153, .38) !important;
  color: #ffd0e6 !important;
}

/* sidebar no escuro */
.dark aside, .dark [class*="bg-white/95"], .dark [class*="lg:bg-white/80"] {
  background-color: hsl(var(--sidebar-background)) !important;
  border-right-color: hsl(var(--sidebar-border)) !important;
}
.dark aside a, .dark aside span, .dark aside button { color: hsl(var(--sidebar-foreground)) !important; }

/* cartoes do sistema */
.beauty-card { border-color: hsl(var(--border)); }
.dark .beauty-card {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ---------- TEXTO NO ESCURO: SEMPRE CLARO ---------- */
.dark { color-scheme: dark; }
.dark, .dark p, .dark span, .dark div, .dark li, .dark td, .dark th, .dark label, .dark h1, .dark h2, .dark h3, .dark h4 {
  --tw-text-opacity: 1;
}
/* qualquer cinza escuro do Tailwind sobe para cinza claro */
.dark [class*="text-slate-4"], .dark [class*="text-slate-5"], .dark [class*="text-slate-6"],
.dark [class*="text-gray-4"], .dark [class*="text-gray-5"], .dark [class*="text-gray-6"],
.dark [class*="text-zinc-4"], .dark [class*="text-zinc-5"], .dark [class*="text-zinc-6"],
.dark [class*="text-neutral-4"], .dark [class*="text-neutral-5"], .dark [class*="text-neutral-6"],
.dark [class*="text-stone-4"], .dark [class*="text-stone-5"], .dark [class*="text-stone-6"] {
  color: #cfd6e2 !important;
}
.dark [class*="text-slate-7"], .dark [class*="text-slate-8"], .dark [class*="text-slate-9"],
.dark [class*="text-gray-7"], .dark [class*="text-gray-8"], .dark [class*="text-gray-9"],
.dark [class*="text-zinc-7"], .dark [class*="text-zinc-8"], .dark [class*="text-zinc-9"],
.dark [class*="text-neutral-7"], .dark [class*="text-neutral-8"], .dark [class*="text-neutral-9"] {
  color: #f3f6fb !important;
}
/* textos do sistema shadcn */
.dark .text-muted-foreground { color: #cfd6e2 !important; }
.dark .text-foreground, .dark .text-card-foreground { color: #f7f9fc !important; }
/* tabelas e listas */
.dark table, .dark table th, .dark table td { color: #e9eef6 !important; }
/* placeholders e ajudas */
.dark input::placeholder, .dark textarea::placeholder { color: #aab3c2 !important; }
.dark .text-xs, .dark .text-sm { opacity: 1; }