/* ══ HERMES v3 — Estilos Base + Sistema de Temas ══ */

/* ── Correções Tailwind para Dark Mode (classes hardcoded bg-white/*, border-white/*) ── */
[data-theme="dark"] .bg-white\/10 { background-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .bg-white\/20 { background-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .bg-white\/30 { background-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .bg-white\/40 { background-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .bg-white\/50 { background-color: rgba(255,255,255,0.09) !important; }
[data-theme="dark"] .bg-white\/60 { background-color: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .bg-white\/80 { background-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .bg-white    { background-color: var(--surface-container-high) !important; }

[data-theme="dark"] .border-white\/20 { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .border-white\/40 { border-color: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .border-white\/50 { border-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .border-white\/60 { border-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .border-white     { border-color: rgba(255,255,255,0.12) !important; }

/* hover states */
[data-theme="dark"] .hover\:bg-white\/40:hover { background-color: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .hover\:bg-white\/50:hover { background-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .hover\:bg-white\/80:hover { background-color: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .hover\:bg-white:hover     { background-color: var(--surface-container-highest) !important; }

/* Financeiro sub-tabs: pill container */
[data-theme="dark"] .bg-white\/40.backdrop-blur-md {
  background-color: rgba(255,255,255,0.06) !important;
}

/* Nav items hover */
[data-theme="dark"] .nav-item:hover { color: var(--primary) !important; }
[data-theme="dark"] .nav-item.bg-primary-container {
  background-color: var(--primary-container) !important;
  color: var(--on-primary-container) !important;
}

/* Glass card hover em dark */
[data-theme="dark"] .glass-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Tabela row hover */
[data-theme="dark"] .hover\:bg-white\/40:hover,
[data-theme="dark"] tr.hover\:bg-white\/40:hover { background-color: rgba(255,255,255,0.06) !important; }

/* Textos que podem sumir */
[data-theme="dark"] .text-on-surface { color: var(--on-surface) !important; }
[data-theme="dark"] .text-on-surface-variant { color: var(--on-surface-variant) !important; }

/* Avatar / profile area na sidebar */
[data-theme="dark"] nav a.bg-white\/30 {
  background-color: rgba(255,255,255,0.07) !important;
}

/* Modal cards */
[data-theme="dark"] .glass-card.rounded-3xl,
[data-theme="dark"] .glass-card.rounded-2xl {
  background: var(--glass-card-bg) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Info box primary/10 em dark */
[data-theme="dark"] .bg-primary\/10 { background-color: rgba(196,192,255,0.12) !important; }
[data-theme="dark"] .border-primary\/20 { border-color: rgba(196,192,255,0.20) !important; }

/* Permissions box */
[data-theme="dark"] .bg-white\/40.border-white\/60 {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Inputs modal cancel buttons */
[data-theme="dark"] button.bg-white\/50 {
  background-color: rgba(255,255,255,0.09) !important;
  color: var(--on-surface) !important;
}

/* Caixa border-l status bars — keep them visible */
[data-theme="dark"] .border-l-status-success { border-left-color: var(--status-success) !important; }
[data-theme="dark"] .border-l-\[#F59F00\]    { border-left-color: #F59F00 !important; }


/* ── Variáveis de Tema (Light) ── */
:root {
  --bg: #fcf8ff;
  --surface: #fcf8ff;
  --surface-container: #f1ecf3;
  --surface-container-low: #f7f2f9;
  --surface-container-high: #ebe7ee;
  --surface-container-highest: #e5e1e8;
  --surface-variant: #e5e1e8;
  --on-surface: #1c1b20;
  --on-surface-variant: #474553;
  --outline: #777585;
  --outline-variant: #c8c4d5;
  --primary: #544dc5;
  --primary-container: #8a84ff;
  --on-primary: #ffffff;
  --on-primary-container: #1e0593;
  --secondary: #5f5985;
  --secondary-container: #d4cbff;
  --on-secondary: #ffffff;
  --on-secondary-container: #5b5481;
  --tertiary: #635b6e;
  --tertiary-container: #988fa4;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #2f2939;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error: #ffffff;
  --on-error-container: #93000a;
  --inverse-surface: #313035;
  --inverse-on-surface: #f4eff6;
  --status-success: #51CF66;
  --status-error: #FF6B6B;
  --glass-card-bg: rgba(255, 255, 255, 0.7);
  --glass-card-border: rgba(255, 255, 255, 0.5);
  --glass-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --nav-bg: rgba(255, 255, 255, 0.6);
  --nav-border: rgba(255, 255, 255, 0.5);
  --input-bg: #f7f2f9;
  --input-focus-bg: #ffffff;
  --scrollbar-thumb: rgba(138, 132, 255, 0.2);
  --body-gradient-1: rgba(138, 132, 255, 0.1);
  --body-gradient-2: rgba(212, 203, 255, 0.15);
}

/* ── Tema Escuro ── */
[data-theme="dark"] {
  --bg: #131218;
  --surface: #131218;
  --surface-container: #1e1d23;
  --surface-container-low: #181620;
  --surface-container-high: #29282f;
  --surface-container-highest: #34323a;
  --surface-variant: #46444f;
  --on-surface: #e6e1e9;
  --on-surface-variant: #c9c4d0;
  --outline: #938f99;
  --outline-variant: #46444f;
  --primary: #c4c0ff;
  --primary-container: #3c34b5;
  --on-primary: #150e68;
  --on-primary-container: #e2dfff;
  --secondary: #cac3ec;
  --secondary-container: #484270;
  --on-secondary: #312c56;
  --on-secondary-container: #e5deff;
  --tertiary: #d3c6de;
  --tertiary-container: #504a5b;
  --on-tertiary: #3a3344;
  --on-tertiary-container: #efe3fb;
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error: #690005;
  --on-error-container: #ffdad6;
  --inverse-surface: #e6e1e9;
  --inverse-on-surface: #313035;
  --status-success: #4ade80;
  --status-error: #f87171;
  --glass-card-bg: rgba(30, 29, 35, 0.85);
  --glass-card-border: rgba(255, 255, 255, 0.08);
  --glass-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --nav-bg: rgba(19, 18, 24, 0.92);
  --nav-border: rgba(255, 255, 255, 0.06);
  --input-bg: #29282f;
  --input-focus-bg: #34323a;
  --scrollbar-thumb: rgba(196, 192, 255, 0.2);
  --body-gradient-1: rgba(84, 77, 197, 0.08);
  --body-gradient-2: rgba(100, 90, 200, 0.06);
}

/* ── Body Background ── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at top right, var(--body-gradient-1) 0%, transparent 40%),
    radial-gradient(circle at bottom left, var(--body-gradient-2) 0%, transparent 40%);
  background-attachment: fixed;
  color: var(--on-surface);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Transição suave de tema ── */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Mas não animar transforms e opacity por performance */
.glass-card:hover,
.nav-item,
button {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease,
              transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(138, 132, 255, 0.4); }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Glassmorphism ── */
.glass-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-card-border);
  box-shadow: var(--glass-card-shadow);
}
.glass-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.glass-panel {
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--nav-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.nav-rail-glass {
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--nav-border);
  box-shadow: 4px 0 24px rgba(84, 77, 197, 0.05);
}

.glass-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--nav-border);
}

/* ── Inputs ── */
.input-glass {
  background-color: var(--input-bg);
  border: 1px solid transparent;
  color: var(--on-surface);
  transition: all 0.2s ease;
}
.input-glass:focus {
  background-color: var(--input-focus-bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(84, 77, 197, 0.15);
  outline: none;
}
.input-glass::placeholder { color: var(--outline); opacity: 0.8; }

select.input-glass option {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* ── Toasts ── */
#toast-container > div {
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Modal ── */
.modal-overlay {
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

/* ── Avatar com Foto ── */
.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Chip Badges do Financeiro ── */
.chip-paga    { background: rgba(81,207,102,0.15); color: #2f9e44; }
.chip-avencer { background: rgba(249,151,0,0.15);  color: #e67700; }
.chip-aberta  { background: rgba(84,77,197,0.12);  color: #544dc5; }
.chip-vencida { background: rgba(186,26,26,0.12);  color: #ba1a1a; }

[data-theme="dark"] .chip-paga    { color: #4ade80; }
[data-theme="dark"] .chip-avencer { color: #fb923c; }
[data-theme="dark"] .chip-aberta  { color: #c4c0ff; }
[data-theme="dark"] .chip-vencida { color: #ffb4ab; }

/* ── Cor de Destaque Dinâmica (accent) ── */
:root { --accent: var(--primary); }

/* ── Utilitários extras ── */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 16px); }

/* ── Animações ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }