/* =====================================================================
 * PaggOnline — Visual BSPay / Hub (dark + emerald)
 * Overlay visual: não altera lógica, só aparência.
 * ===================================================================== */

:root {
  /* Emerald fintech (BSPay-like) — vars --op-green* mantidas por compatibilidade */
  --op-green-50:  #ECFDF5;
  --op-green-100: #D1FAE5;
  --op-green-200: #A7F3D0;
  --op-green-300: #6EE7B7;
  --op-green-400: #34D399;
  --op-green-500: #10B981;
  --op-green-600: #059669;
  --op-green-700: #047857;
  --op-green-800: #065F46;
  --op-green-900: #064E3B;
  --op-green-rgb: 16, 185, 129;

  --color-primary:     var(--op-green-500);
  --color-primary-rgb: var(--op-green-rgb);
  --color-success:     var(--op-green-500);

  --bg-base:      #0B0B0B;
  --bg-surface:   #111111;
  --bg-elevated:  #161616;
  --bg-overlay:   rgba(11, 11, 11, 0.92);

  --border:        rgba(16, 185, 129, 0.14);
  --border-strong: rgba(16, 185, 129, 0.35);
  --border-subtle: #1A1A1A;

  --text:         #F5F5F5;
  --text-strong:  #FFFFFF;
  --text-muted:   #A3A3A3;
  --text-dim:     #737373;

  --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.18);
  --r: 12px;
  --r2: 16px;
}

html[data-theme="light"] {
  --bg-base: #F4F6F5;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --border: rgba(16, 185, 129, 0.18);
  --border-strong: rgba(5, 150, 105, 0.35);
  --border-subtle: #E5E7EB;
  --text: #111827;
  --text-strong: #0B0B0B;
  --text-muted: #6B7280;
}

/* Sidebar — estilo painel hub */
.op-sidebar {
  background: #0F0F0F !important;
  border-right: 1px solid #1A1A1A !important;
}
.op-nav__item {
  border-radius: 999px !important;
  color: #D4D4D4 !important;
  margin: 2px 8px !important;
  padding: 10px 14px !important;
  gap: 10px !important;
  font-weight: 500 !important;
}
.op-nav__item:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #fff !important;
}
.op-nav__item.is-active,
.op-nav__item[aria-current="page"] {
  background: #10B981 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.28) !important;
}
.op-nav__item.is-active .icon,
.op-nav__item[aria-current="page"] .icon {
  stroke: #fff !important;
}

/* Cards / stats */
.op-card {
  background: #141414 !important;
  border: 1px solid #222 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.op-card--emerald {
  border-color: rgba(16, 185, 129, 0.22) !important;
}

/* Buttons */
.op-btn--primary {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.28) !important;
}
.op-btn--primary:hover {
  filter: brightness(1.06);
}
.op-btn--ghost {
  border: 1px solid #2A2A2A !important;
  background: transparent !important;
  color: #E5E5E5 !important;
  border-radius: 12px !important;
}
.op-btn--danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
}

/* Inputs */
.op-input, input.op-input, select.op-input, textarea.op-input,
.op-field input, .op-field select, .op-field textarea {
  background: #0F0F0F !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  color: #fff !important;
}
.op-input:focus, input.op-input:focus, select.op-input:focus, textarea.op-input:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
  outline: none !important;
}

/* Login / register card */
.op-login {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(16, 185, 129, 0.16), transparent 55%),
    #0B0B0B !important;
}
.op-login__card {
  background: #141414 !important;
  border: 1px solid #242424 !important;
  border-radius: 18px !important;
}
.op-login__sub { color: #A3A3A3 !important; }

/* Page chrome */
.op-main, main.op-main {
  background: #0B0B0B !important;
}
.op-pagehead h1 { color: #fff !important; letter-spacing: -0.02em; }
.op-table th { color: #A3A3A3 !important; font-weight: 600 !important; }
.op-table td { border-color: #1F1F1F !important; }

/* Mobile bar */
#opMobileBar {
  background: #0F0F0F !important;
  border-bottom: 1px solid #1A1A1A !important;
}

/* Alerts / badges */
.op-alert--success { border-color: rgba(16,185,129,.35) !important; background: rgba(16,185,129,.08) !important; }
.op-badge--ok, .op-status--ok { color: #34D399 !important; }

/* Links */
a { color: #34D399; }
a:hover { color: #6EE7B7; }