/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — Gestão de Pagamentos
   Dark moderno · glassmorphism · micro-animações
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Superfícies em camadas */
  --bg:        #07090f;
  --bg-card:   #0e1220;
  --bg-card2:  #141a2c;
  --bg-input:  #0a0e18;
  --sidebar:   #05070d;
  --sidebar-w: 240px;

  /* Bordas */
  --border:    #1a2138;
  --border-md: #242e4c;

  /* Texto */
  --txt:  #e2e8f4;
  --txt2: #8290ac;
  --txt3: #4a5670;

  /* Marca */
  --brand:      #f97316;
  --brand-2:    #fb923c;
  --brand-glow: rgba(249,115,22,.35);

  /* Raios e sombras */
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.7);
  --ease: cubic-bezier(.4,0,.2,1);
}

[x-cloak] { display:none !important; }

/* ── Base ─────────────────────────────────────────── */
html { scroll-behavior:smooth; }
html, body {
  background-color:var(--bg);
  color:var(--txt);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body { background-image:radial-gradient(ellipse 80% 50% at 50% -20%, rgba(249,115,22,.06), transparent); }

::selection { background:rgba(249,115,22,.3); color:#fff; }

/* Scrollbars globais */
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover { background:rgba(249,115,22,.35); }
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent; }

/* Entrada suave de página */
main { animation:pageIn .3s var(--ease); }
@keyframes pageIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}

/* ── SIDEBAR ──────────────────────────────────────── */
aside {
  background:linear-gradient(180deg, #060910 0%, #05070d 100%) !important;
  border-right:1px solid rgba(255,255,255,.05);
  width:var(--sidebar-w);
  backdrop-filter:blur(20px);
}
.nav-section {
  font-size:.59rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#232f47; padding:.85rem 1rem .28rem 1.1rem;
}
.sidebar-link {
  display:flex; align-items:center; gap:10px; padding:6px 8px 6px 10px;
  border-radius:11px; font-size:13px; font-weight:500;
  transition:all .18s var(--ease); color:#71829e;
  position:relative; margin:1.5px 4px; text-decoration:none;
  border:1px solid transparent;
}
.sidebar-link .s-icon {
  width:30px; height:30px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:all .18s var(--ease);
  background:rgba(255,255,255,.04); font-size:15px; color:#5f7490;
}
.sidebar-link:hover { color:#dde5f2; background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.07); transform:translateX(2px); }
.sidebar-link:hover .s-icon { background:rgba(255,255,255,.1); color:#dde5f2; }
.sidebar-link.active {
  color:#fff; font-weight:600;
  background:linear-gradient(135deg, rgba(249,115,22,.2), rgba(234,88,12,.08));
  border-color:rgba(249,115,22,.28);
  box-shadow:0 2px 18px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.06);
}
.sidebar-link.active .s-icon { background:rgba(249,115,22,.22); color:var(--brand-2); }
.sidebar-link.active::before {
  content:''; position:absolute; left:-4px; top:22%; bottom:22%; width:3px;
  border-radius:3px; background:linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow:0 0 10px var(--brand-glow);
}

/* Sidebar scrollbar mais fino */
aside nav::-webkit-scrollbar { width:4px; }
aside nav::-webkit-scrollbar-thumb { background:rgba(249,115,22,.22); border-radius:4px; }
aside nav::-webkit-scrollbar-thumb:hover { background:rgba(249,115,22,.45); }

/* ── ACCORDION NAV ────────────────────────────────── */
.acc-trigger { cursor:pointer; user-select:none; }
.acc-trigger .acc-arrow { transition:transform .2s var(--ease); flex-shrink:0; opacity:.35; }
.acc-trigger.open .acc-arrow { transform:rotate(90deg); opacity:.8; }
.acc-panel { display:none; }
.acc-panel.open { display:block; animation:accIn .18s var(--ease); }
@keyframes accIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:none; }
}
.acc-panel-inner {
  margin:2px 4px 4px 14px; padding-left:10px;
  border-left:1px solid rgba(255,255,255,.07);
}
.acc-item {
  display:flex; align-items:center; gap:9px; padding:5px 8px;
  border-radius:9px; font-size:12.5px; font-weight:500; color:#71829e;
  text-decoration:none; transition:all .14s var(--ease); cursor:pointer;
  margin:1px 0; border:1px solid transparent;
}
.acc-item:hover { color:#dde5f2; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.06); transform:translateX(2px); }
.acc-item.acc-active {
  color:#fff; font-weight:600;
  background:linear-gradient(135deg, rgba(249,115,22,.16), rgba(234,88,12,.07));
  border-color:rgba(249,115,22,.22);
}
.acc-item .ai {
  width:24px; height:24px; border-radius:7px; display:flex; align-items:center;
  justify-content:center; font-size:13px; flex-shrink:0;
  background:rgba(255,255,255,.04); transition:background .14s;
}
.acc-item:hover .ai { background:rgba(255,255,255,.09); }
.acc-item.acc-active .ai { background:rgba(249,115,22,.18); }
.acc-divider { height:1px; background:rgba(255,255,255,.05); margin:4px 2px; }

/* ── OVERRIDES DARK (compat com classes gray) ─────── */
.bg-white        { background-color:var(--bg-card)  !important; }
.bg-gray-50      { background-color:var(--bg)       !important; }
.bg-gray-100     { background-color:var(--bg-card2) !important; }
.bg-gray-200     { background-color:#1d2540         !important; }
.hover\:bg-gray-50:hover  { background-color:var(--bg-card2) !important; }
.hover\:bg-gray-100:hover { background-color:#1a2138         !important; }
.hover\:bg-gray-200:hover { background-color:#242e50         !important; }
.border-gray-100 { border-color:var(--border)    !important; }
.border-gray-200 { border-color:var(--border-md) !important; }
.border-gray-300 { border-color:var(--border-md) !important; }
.divide-gray-100 > * + * { border-color:var(--border) !important; }
.divide-gray-200 > * + * { border-color:var(--border-md) !important; }
.text-gray-900 { color:var(--txt)  !important; }
.text-gray-800 { color:#cad4e4     !important; }
.text-gray-700 { color:#a5b0c4     !important; }
.text-gray-600 { color:#8898b0     !important; }
.text-gray-500 { color:var(--txt2) !important; }
.text-gray-400 { color:var(--txt3) !important; }

/* Cards brancos → glass cards */
.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg,
.bg-white.shadow, .bg-white.shadow-sm, .bg-white.shadow-md {
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) , var(--bg-card) !important;
  border:1px solid rgba(255,255,255,.055);
  box-shadow:var(--shadow-card) !important;
}

/* Inputs */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"],
input[type="month"], select, textarea {
  background-color:var(--bg-input) !important;
  border-color:var(--border-md)    !important;
  color:var(--txt)                 !important;
  border-radius:10px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color:rgba(249,115,22,.5) !important;
  box-shadow:0 0 0 3px rgba(249,115,22,.12) !important;
  outline:none !important;
}
input::placeholder, textarea::placeholder { color:var(--txt3) !important; }
select option { background:var(--bg-card); color:var(--txt); }
input[type="checkbox"], input[type="radio"] { accent-color:var(--brand); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter:invert(.6); cursor:pointer; }

/* Tints coloridos */
.bg-orange-50  { background-color:rgba(249,115,22,.12) !important; }
.bg-amber-50   { background-color:rgba(245,158,11,.10) !important; }
.bg-amber-100  { background-color:rgba(245,158,11,.14) !important; }
.bg-amber-200  { background-color:rgba(245,158,11,.16) !important; }
.bg-green-50   { background-color:rgba(74,222,128,.10) !important; }
.bg-green-100  { background-color:rgba(74,222,128,.14) !important; }
.bg-red-50     { background-color:rgba(248,113,113,.10)!important; }
.bg-red-100    { background-color:rgba(248,113,113,.15)!important; }
.bg-blue-50    { background-color:rgba(96,165,250,.10) !important; }
.bg-blue-100   { background-color:rgba(96,165,250,.14) !important; }
.bg-purple-50  { background-color:rgba(167,139,250,.10)!important; }
.bg-indigo-50  { background-color:rgba(129,140,248,.10)!important; }
.bg-emerald-50 { background-color:rgba(52,211,153,.10) !important; }
.border-amber-200 { border-color:rgba(245,158,11,.25)  !important; }
.border-green-200 { border-color:rgba(74,222,128,.25)  !important; }
.border-red-200   { border-color:rgba(248,113,113,.25) !important; }
.border-blue-200  { border-color:rgba(96,165,250,.25)  !important; }

/* Textos coloridos mais legíveis no dark */
.text-green-800, .text-green-700 { color:#4ade80 !important; }
.text-red-800, .text-red-700     { color:#f87171 !important; }
.text-amber-800, .text-amber-700 { color:#fbbf24 !important; }
.text-blue-800, .text-blue-700   { color:#60a5fa !important; }

/* Sombras */
.shadow-sm  { box-shadow:0 1px 4px rgba(0,0,0,.5)   !important; }
.shadow-md  { box-shadow:0 4px 12px rgba(0,0,0,.6)  !important; }
.shadow-lg  { box-shadow:0 10px 30px rgba(0,0,0,.6) !important; }
.shadow-xl  { box-shadow:0 20px 50px rgba(0,0,0,.7) !important; }
.shadow-2xl { box-shadow:0 25px 60px rgba(0,0,0,.8) !important; }
.bg-black\/50 { background-color:rgba(2,4,10,.78) !important; backdrop-filter:blur(4px); }
.bg-gray-100.p-1 { background-color:rgba(255,255,255,.05) !important; }
.focus\:ring-brand:focus { --tw-ring-color:rgba(249,115,22,.4) !important; }

/* ── BOTÕES ───────────────────────────────────────── */
button, .btn, a[class*="bg-brand"], button[class*="bg-brand"] { transition:all .16s var(--ease); }
.bg-brand, .bg-orange-500, .bg-orange-600 {
  background:linear-gradient(135deg, #fb923c, #ea580c) !important;
  box-shadow:0 4px 14px rgba(249,115,22,.25);
}
.bg-brand:hover, .hover\:bg-brand-dark:hover, .bg-orange-500:hover, .bg-orange-600:hover {
  filter:brightness(1.08);
  box-shadow:0 6px 20px rgba(249,115,22,.4);
  transform:translateY(-1px);
}
button:active, .btn:active { transform:translateY(0) scale(.98); }

/* Tabelas */
table { border-collapse:separate; border-spacing:0; }
thead th { font-size:.68rem !important; letter-spacing:.08em; text-transform:uppercase; color:var(--txt3) !important; font-weight:700; }
tbody tr { transition:background .12s var(--ease); }
tbody tr:hover { background:rgba(255,255,255,.025); }

/* Modais */
[x-show][class*="fixed"][class*="inset-0"] > div[class*="rounded"] { animation:modalIn .22s var(--ease); }
@keyframes modalIn {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:none; }
}

/* Skeleton shimmer (para uso futuro) */
.skeleton {
  background:linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:8px;
}
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ── ANIMAÇÕES DO CHAT/EXTRAS (usadas pelo base) ──── */
@keyframes td-bounce {
  0%,80%,100% { transform:translateY(0); opacity:.4; }
  40%          { transform:translateY(-5px); opacity:1; }
}
@keyframes chat-pulse {
  0%   { box-shadow:0 0 0 0    rgba(249,115,22,.7), 0 8px 32px rgba(249,115,22,.5); }
  70%  { box-shadow:0 0 0 14px rgba(249,115,22,0),  0 8px 32px rgba(249,115,22,.5); }
  100% { box-shadow:0 0 0 0    rgba(249,115,22,0),  0 8px 32px rgba(249,115,22,.5); }
}
#chat-toggle { animation:chat-pulse 2.5s ease-out infinite; }
#chat-toggle.has-unread { animation:chat-pulse .9s ease-out infinite; }
@keyframes chat-slide-up {
  from { opacity:0; transform:translateY(12px) scale(.96); }
  to   { opacity:1; transform:none; }
}
#chat-panel.open { animation:chat-slide-up .2s var(--ease); }

/* Acessibilidade: reduz animações se o usuário preferir */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}