/* =========================
   VARIÁVEIS (DARK DEFAULT)
========================= */
:root {
  --bg: #0f1115;
  --card: #1c1f24;
  --text: #ffffff;
  --muted: #adb5bd;
  --border: #2c3036;
  --overlay: rgba(0,0,0,0.6);
  --btn: #0dcaf0;
  --btn-text: #000;
}

/* =========================
   LIGHT MODE
========================= */
.light-mode {
  --bg: #f1f3f5;
  --card: #ffffff;
  --text: #212529;
  --muted: #6c757d;
  --border: #dee2e6;
  --overlay: rgba(0,0,0,0.2);
  --btn: #0d6efd;
  --btn-text: #fff;
}

/* =========================
   BODY
========================= */
body {
  background: var(--bg);
  color: var(--text);
  transition: 0.3s;
}

/* =========================
   HERO BACKGROUND (mantém imagem)
========================= */
body.bg-image {
  background: url('https://images.ctfassets.net/hrltx12pl8hq/4FQigSNobbBRYl0tbU2t56/9055f12f1498416b4fb388ad948e27bb/Cinematic-Spots-Thumbnail.jpg')
              no-repeat center center fixed;
  background-size: cover;
}

/* =========================
   OVERLAY (CORRIGIDO)
========================= */
.overlay {
  position: absolute;
  background: var(--overlay);
  z-index: 1;
}

/* =========================
   CONTEÚDO SOBRE OVERLAY
========================= */
.content {
  position: relative;
  z-index: 2;
}

/* =========================
   TEXTOS
========================= */
h1, h2, h3, h4, h5, p, label {
  color: var(--text);
}

/* =========================
   TEXTO SECUNDÁRIO
========================= */
.text-muted {
  color: var(--muted) !important;
}

/* =========================
   CARDS
========================= */
.card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  transition: 0.3s;
}

/* =========================
   INPUTS
========================= */
.form-control,
.form-select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

.form-control:focus,
.form-select:focus {
  background: var(--card);
  color: var(--text);
  border-color: var(--btn);
  box-shadow: none;
}

/* =========================
   BOTÕES
========================= */
.btn {
  background: var(--btn);
  color: var(--btn-text);
  border: none;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.3s;
}

.btn:hover {
  opacity: 0.9;
}

/* =========================
   NAVBAR
========================= */
.navbar {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border);
}

/* =========================
   LINKS
========================= */
a {
  color: var(--btn);
}

a:hover {
  opacity: 0.8;
}

/* =========================
   TABELAS (ADMIN)
========================= */
.table {
  background: var(--card);
  color: var(--text);
}

.table th {
  background: var(--btn);
  color: var(--btn-text);
}

/* =========================
   TRANSIÇÃO GLOBAL
========================= */
* {
  transition: background 0.3s, color 0.3s, border 0.3s;
}