/* ═══════════════════════════════════════════════════════════════
   L2 Berserk — Theme Override pro ACM
   ----------------------------------------------------------------
   Não toca em PHP, JS, controllers ou business logic. Só sobrescreve
   classes do Bootstrap 4 + SB Admin 2 que o ACM usa, fazendo o
   visual bater com o site (https://l2bersek.com).

   Carregar DEPOIS do style.css e custom.css originais (a ordem
   importa, !important é usado em pontos críticos pra vencer
   especificidade do tema antigo).

   Tokens copiados de website/frontend/src/index.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── L2 Berserk — Dark Fantasy Premium ── */
  --background: 0 0% 3%;
  --foreground: 30 18% 96%;

  --card: 0 0% 5%;
  --card-foreground: 30 18% 96%;

  --popover: 0 0% 4%;
  --popover-foreground: 30 18% 96%;

  --primary: 0 82% 45%;
  --primary-foreground: 30 20% 96%;
  --primary-glow: 0 95% 58%;

  --secondary: 0 0% 8%;
  --secondary-foreground: 30 18% 96%;

  --muted: 0 0% 7%;
  --muted-foreground: 30 12% 75%;

  --accent: 0 70% 58%;
  --accent-foreground: 0 0% 5%;

  --destructive: 0 84% 50%;
  --destructive-foreground: 30 20% 96%;

  --border: 0 0% 18%;
  --input: 0 0% 10%;
  --ring: 0 82% 45%;

  --radius: 1rem;

  --blood: 0 85% 42%;
  --blood-deep: 0 80% 22%;
  --blood-light: 0 75% 60%;

  --gradient-blood: linear-gradient(135deg, hsl(var(--blood)) 0%, hsl(var(--blood-deep)) 100%);
  --gradient-fantasy: linear-gradient(135deg, hsl(0 0% 4%) 0%, hsl(0 70% 28%) 55%, hsl(0 85% 45%) 100%);
  --gradient-fantasy-soft: linear-gradient(135deg, hsl(0 0% 6%) 0%, hsl(0 55% 18%) 60%, hsl(0 65% 32%) 100%);
  --gradient-royal: linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 65% 24%) 45%, hsl(0 0% 5%) 100%);
  --gradient-fire: linear-gradient(180deg, hsl(0 80% 45% / 0.35) 0%, hsl(0 75% 30% / 0.18) 50%, transparent 100%);
  --gradient-ember-line: linear-gradient(90deg, transparent, hsl(var(--blood-deep) / 0.8) 20%, hsl(var(--blood)) 50%, hsl(var(--blood-deep) / 0.8) 80%, transparent);

  --shadow-blood: 0 16px 40px -22px hsl(0 80% 30% / 0.45);
  --shadow-glow: 0 0 24px hsl(0 85% 45% / 0.22);
  --shadow-fire: 0 0 28px hsl(0 85% 42% / 0.22), 0 0 14px hsl(0 80% 30% / 0.18);
  --shadow-deep: 0 30px 80px -30px hsl(0 0% 0% / 0.9);

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ─── Base ───────────────────────────────────────────── */

html, body {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-body) !important;
}

body.bg-gradient-primary {
  background: hsl(var(--background)) !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, hsl(0 85% 28% / 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, hsl(0 80% 22% / 0.18) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.02em;
  color: hsl(var(--foreground));
}

a { color: hsl(var(--accent)); transition: color .2s ease; }
a:hover { color: hsl(var(--primary-glow)); text-decoration: none; }

hr, .sidebar-divider {
  border: none !important;
  height: 1px !important;
  background: var(--gradient-ember-line) !important;
  opacity: 0.4;
  margin: 1rem 0 !important;
}

/* ─── Sidebar ────────────────────────────────────────── */

.sidebar.bg-gradient-primary,
.sidebar {
  background: hsl(var(--background)) !important;
  border-right: 1px solid hsl(var(--border));
  box-shadow: 4px 0 24px hsl(0 0% 0% / 0.5);
}

.sidebar-brand,
.sidebar-brand-text {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: hsl(var(--primary)) !important;
  text-shadow: 0 0 12px hsl(var(--primary) / 0.4);
}

.sidebar .nav-item .nav-link,
.sidebar .nav-link {
  color: hsl(var(--muted-foreground)) !important;
  border-left: 2px solid transparent;
  transition: all .2s ease;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-link:hover {
  color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.06);
  border-left-color: hsl(var(--primary));
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link[aria-expanded="true"] {
  color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.1);
  border-left-color: hsl(var(--primary));
}

.sidebar .nav-link i {
  color: hsl(var(--primary)) !important;
  opacity: 0.85;
}

.sidebar-heading {
  color: hsl(var(--muted-foreground)) !important;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

.sidebar .collapse-inner.bg-white,
.sidebar .collapse-inner {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 6px);
}

.sidebar .collapse-item {
  color: hsl(var(--muted-foreground)) !important;
}

.sidebar .collapse-item:hover {
  background: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--primary)) !important;
}

.sidebar .collapse-item.active {
  background: hsl(var(--primary) / 0.15) !important;
  color: hsl(var(--primary)) !important;
}

#sidebarToggle, #sidebarToggleTop {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

#sidebarToggle:hover, #sidebarToggleTop:hover {
  background: hsl(var(--primary)) !important;
}

.status .nav-link span { color: hsl(var(--muted-foreground)); }

/* ─── Topbar ─────────────────────────────────────────── */

.topbar.navbar-light.bg-white,
.topbar {
  background: hsl(var(--background) / 0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: 0 2px 16px hsl(0 0% 0% / 0.4) !important;
}

.topbar .navbar-nav .nav-link {
  color: hsl(var(--foreground)) !important;
}

.topbar .text-gray-400,
.topbar .text-gray-600 {
  color: hsl(var(--muted-foreground)) !important;
}

.topbar img.main-logo {
  max-height: 38px;
  filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.4));
}

/* ─── Content & Cards ────────────────────────────────── */

#content-wrapper {
  background: transparent !important;
}

#content {
  background: transparent !important;
}

.card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-deep);
  color: hsl(var(--card-foreground));
}

.card-header {
  background: hsl(var(--secondary)) !important;
  border-bottom: 1px solid hsl(var(--border));
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: hsl(var(--foreground)) !important;
}

.card-body { color: hsl(var(--card-foreground)); }

.card.o-hidden.border-0.shadow-lg {
  box-shadow: var(--shadow-deep), 0 0 40px hsl(var(--primary) / 0.08) !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* Login: lado esquerdo (imagem do dark elf) ──────────────────
   A imagem real fica em /img/login-bg.jpg. Aplicamos:
     - cover + center pra ela ocupar todo o painel
     - overlay radial preto nas bordas (vinheta) pra fundir com o
       card do formulário
     - linha de "ember" no canto direito alinhando com a borda */
.bg-login-image {
  background-color: hsl(var(--background)) !important;
  background-image:
    /* vinheta superior + bordas */
    radial-gradient(ellipse at 50% 50%, transparent 40%, hsl(var(--background) / 0.85) 100%),
    /* leve tinta vermelha no topo (combina com brasas da imagem) */
    linear-gradient(180deg, hsl(0 70% 25% / 0.18) 0%, transparent 40%),
    url('../img/login-bg.jpg') !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  position: relative;
  border-right: 1px solid hsl(var(--blood) / 0.3);
}

/* Fina linha de fogo na borda direita do painel da imagem,
   servindo de "costura" com o card do formulário. */
.bg-login-image::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
  width: 1px;
  background: var(--gradient-ember-line);
  opacity: 0.7;
}

/* ─── Buttons ────────────────────────────────────────── */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: calc(var(--radius) - 4px) !important;
  transition: all .25s ease;
}

.btn-primary,
.btn-primary.btn-user {
  background: var(--gradient-blood) !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: var(--shadow-blood);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.btn-user:hover {
  background: hsl(var(--primary)) !important;
  box-shadow: var(--shadow-fire) !important;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-secondary.btn-user {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

.btn-secondary:hover {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.bordered-btn {
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

.btn-success { background: hsl(140 60% 35%) !important; border-color: hsl(140 60% 35%) !important; }
.btn-danger  { background: hsl(var(--destructive)) !important; border-color: hsl(var(--destructive)) !important; }
.btn-warning { background: hsl(40 80% 50%) !important; border-color: hsl(40 80% 50%) !important; color: hsl(0 0% 8%) !important; }
.btn-info    { background: hsl(200 70% 45%) !important; border-color: hsl(200 70% 45%) !important; }

.btn-link { color: hsl(var(--accent)) !important; }
.btn-link:hover { color: hsl(var(--primary-glow)) !important; }

/* ─── Forms / Inputs ─────────────────────────────────── */

.form-control,
.form-control-user,
.form-select,
input.form-control,
textarea.form-control,
select.form-control {
  background: hsl(var(--input)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: calc(var(--radius) - 4px) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-control-user:focus {
  background: hsl(var(--input)) !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18) !important;
  color: hsl(var(--foreground)) !important;
  outline: none;
}

.form-control::placeholder { color: hsl(var(--muted-foreground)) !important; opacity: 0.6; }

label, .form-label { color: hsl(var(--muted-foreground)); font-weight: 500; }

.custom-control-label { color: hsl(var(--foreground)); }
.custom-control-input:checked ~ .custom-control-label::before {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}
.custom-control-label::before {
  background: hsl(var(--input)) !important;
  border-color: hsl(var(--border)) !important;
}

/* Input groups (busca etc.) */
.input-group-text {
  background: hsl(var(--secondary)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ─── Alerts ─────────────────────────────────────────── */

.alert {
  border-radius: calc(var(--radius) - 4px) !important;
  border: 1px solid hsl(var(--border));
  font-weight: 500;
}

.alert-success {
  background: hsl(140 40% 12%) !important;
  border-color: hsl(140 50% 25%) !important;
  color: hsl(140 60% 75%) !important;
}

.alert-danger {
  background: hsl(var(--blood-deep) / 0.3) !important;
  border-color: hsl(var(--blood) / 0.5) !important;
  color: hsl(var(--blood-light)) !important;
}

.alert-warning {
  background: hsl(40 60% 12%) !important;
  border-color: hsl(40 60% 28%) !important;
  color: hsl(40 90% 70%) !important;
}

.alert-info {
  background: hsl(200 50% 12%) !important;
  border-color: hsl(200 50% 28%) !important;
  color: hsl(200 80% 75%) !important;
}

.alert-box .alert {
  background: hsl(var(--blood-deep) / 0.4) !important;
  border-color: hsl(var(--blood)) !important;
  color: hsl(var(--blood-light)) !important;
  box-shadow: var(--shadow-fire);
}

/* ─── Tables ─────────────────────────────────────────── */

.table {
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.table thead th {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-color: hsl(var(--border)) !important;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.table tbody td {
  border-color: hsl(var(--border)) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: hsl(var(--card)) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background: hsl(var(--background)) !important;
}

.table-hover tbody tr:hover {
  background: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--foreground)) !important;
}

/* DataTables (se ACM usa) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: hsl(var(--muted-foreground)) !important;
}

.dataTables_wrapper .paginate_button {
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
}

.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* ─── Dropdowns / Modals ─────────────────────────────── */

.dropdown-menu {
  background: hsl(var(--popover)) !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: var(--shadow-deep);
  border-radius: calc(var(--radius) - 4px) !important;
}

.dropdown-item {
  color: hsl(var(--foreground)) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: hsl(var(--primary) / 0.12) !important;
  color: hsl(var(--primary)) !important;
}

.dropdown-divider {
  border-color: hsl(var(--border)) !important;
}

.modal-content {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-deep);
  color: hsl(var(--card-foreground)) !important;
}

.modal-header, .modal-footer {
  border-color: hsl(var(--border)) !important;
}

.close {
  color: hsl(var(--foreground)) !important;
  text-shadow: none;
  opacity: 0.7;
}
.close:hover { color: hsl(var(--primary)) !important; opacity: 1; }

/* ─── Badges & Pills ─────────────────────────────────── */

.badge { border-radius: calc(var(--radius) - 8px) !important; font-weight: 600; }
.badge-primary   { background: var(--gradient-blood) !important; color: hsl(var(--primary-foreground)) !important; }
.badge-secondary { background: hsl(var(--secondary)) !important; color: hsl(var(--foreground)) !important; }
.badge-success   { background: hsl(140 50% 30%) !important; }
.badge-danger    { background: hsl(var(--destructive)) !important; }
.badge-warning   { background: hsl(40 80% 50%) !important; color: hsl(0 0% 8%) !important; }
.badge-info      { background: hsl(200 70% 40%) !important; }

/* ─── Text utilities (overrides cor) ─────────────────── */

.text-primary   { color: hsl(var(--primary)) !important; }
.text-success   { color: hsl(140 60% 70%) !important; }
.text-danger    { color: hsl(var(--blood-light)) !important; }
.text-warning   { color: hsl(40 90% 70%) !important; }
.text-info      { color: hsl(200 80% 75%) !important; }
.text-muted     { color: hsl(var(--muted-foreground)) !important; }
.text-white     { color: hsl(var(--foreground)) !important; }
.text-dark      { color: hsl(var(--foreground)) !important; }
.text-gray-100,
.text-gray-200,
.text-gray-300  { color: hsl(var(--foreground)) !important; }
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900  { color: hsl(var(--muted-foreground)) !important; }

/* Backgrounds utilitários do SB Admin */
.bg-white      { background: hsl(var(--card)) !important; }
.bg-light      { background: hsl(var(--secondary)) !important; }
.bg-dark       { background: hsl(var(--background)) !important; }

/* ─── Páginas específicas ────────────────────────────── */

/* Login / Register / Reset (login.php) */
#login-div, #register-div, #reset-div {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

#login-div h1, #register-div h1, #reset-div h1 {
  font-family: var(--font-display) !important;
  color: hsl(var(--primary)) !important;
  text-shadow: 0 0 16px hsl(var(--primary) / 0.4);
}

/* Footer "Back to main website" link no login */
body.bg-gradient-primary a.text-white {
  color: hsl(var(--muted-foreground)) !important;
  transition: color .2s ease;
}
body.bg-gradient-primary a.text-white:hover {
  color: hsl(var(--primary)) !important;
}

/* ─── Scrollbar custom (combina com tema) ────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--primary) / 0.4) hsl(var(--background));
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: hsl(var(--background)); }
*::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.4);
  border-radius: 6px;
  border: 2px solid hsl(var(--background));
}
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); }

/* ─── Misc / fixes finais ────────────────────────────── */

.shadow, .shadow-sm, .shadow-lg {
  box-shadow: var(--shadow-deep) !important;
}

.rounded, .rounded-circle {
  border-radius: var(--radius) !important;
}

footer.sticky-footer,
.sticky-footer {
  background: hsl(var(--background)) !important;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}

::selection {
  background: hsl(var(--primary) / 0.4);
  color: hsl(var(--foreground));
}