/* ── Variables Geskar ─────────────────────────────────────────────────────── */
:root {
  --geskar-red:   #8B1A1A;
  --geskar-dark:  #6B0000;
  --geskar-light: #F2DCDC;
}

/* ── Couleurs thème ──────────────────────────────────────────────────────── */
.text-geskar           { color: var(--geskar-red) !important; }
.bg-geskar             { background-color: var(--geskar-red) !important; }
.border-geskar         { border-color: var(--geskar-red) !important; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.geskar-nav {
  background-color: var(--geskar-dark);
  border-bottom: 2px solid var(--geskar-red);
}
.geskar-nav .navbar-brand { font-size: 1.15rem; letter-spacing: .5px; }
.geskar-nav .nav-link { color: rgba(255,255,255,.8) !important; }
.geskar-nav .nav-link:hover,
.geskar-nav .nav-link.active { color: #fff !important; }
.geskar-nav .nav-link.active { border-bottom: 2px solid #fff; }

/* ── Logo carré ──────────────────────────────────────────────────────────── */
.geskar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--geskar-red);
  color: #fff;
  font-weight: 800;
  border-radius: 4px;
  font-size: .9rem;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── Bouton principal ─────────────────────────────────────────────────────── */
.btn-geskar {
  background-color: var(--geskar-red);
  border-color: var(--geskar-red);
  color: #fff;
}
.btn-geskar:hover, .btn-geskar:focus {
  background-color: var(--geskar-dark);
  border-color: var(--geskar-dark);
  color: #fff;
}
.btn-outline-geskar {
  color: var(--geskar-red);
  border-color: var(--geskar-red);
}
.btn-outline-geskar:hover {
  background-color: var(--geskar-red);
  color: #fff;
}

/* ── En-tête de carte ─────────────────────────────────────────────────────── */
.geskar-header {
  background-color: var(--geskar-dark);
  color: #fff;
}
.geskar-header-light {
  background-color: var(--geskar-light);
  color: var(--geskar-dark);
  border-bottom: 2px solid var(--geskar-red);
}

/* ── Stats dashboard ──────────────────────────────────────────────────────── */
.stat-card { transition: transform .15s ease; }
.stat-card:hover { transform: translateY(-2px); }
.stat-icon { font-size: 1.8rem; margin-bottom: 4px; }
.stat-number { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .78rem; color: #888; text-transform: uppercase; letter-spacing: .5px; }

/* ── Page de connexion ────────────────────────────────────────────────────── */
.login-bg { background: linear-gradient(135deg, #1a0000 0%, var(--geskar-dark) 50%, #2a0000 100%); }
.geskar-logo-lg {
  width: 60px; height: 60px;
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  margin: 0 auto;
}
.geskar-header { background: var(--geskar-dark); }

/* ── Badges accessoires ────────────────────────────────────────────────────── */
.bg-success-subtle { transition: background-color .5s ease; }

/* ── Total flottant ───────────────────────────────────────────────────────── */
.border-geskar { border: 2px solid var(--geskar-red) !important; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: #555; }
code.text-geskar { font-size: .9em; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .stat-number { font-size: 1.5rem; }
  main { padding: .75rem !important; }
}