/*
 * AUDI - surcouche de theme appliquee par-dessus le template Tabler.
 * Toutes les couleurs de marque et classes utilitaires specifiques a
 * l'application vivent ici : aucune vue ne doit contenir de CSS inline.
 */

:root {
  --audi-blue: #186695;
  --audi-blue-dark: #124d70;
  --audi-blue-darker: #0d3a54;
  --audi-green: #42ad4f;
  --audi-green-dark: #399143;
  --audi-slate: #5a6875;
  --audi-slate-dark: #404b56;
  --audi-amber: #d97706;
  --audi-amber-dark: #b45f04;
  --audi-red: #b91c1c;
  --audi-red-dark: #7f1414;
  --audi-sidebar-width: 264px;
}

body {
  font-family: var(--tblr-body-font-family);
}

/* ---------------------------------------------------------------------
 * Marque : boutons, texte, fonds
 * ------------------------------------------------------------------- */
.btn-brand {
  background: var(--audi-blue);
  border-color: var(--audi-blue);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--audi-blue-dark);
  border-color: var(--audi-blue-dark);
  color: #fff;
}
.btn-outline-brand {
  border-color: var(--audi-blue);
  color: var(--audi-blue);
  background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background: var(--audi-blue);
  border-color: var(--audi-blue);
  color: #fff;
}
.btn-accent {
  background: var(--audi-green);
  border-color: var(--audi-green);
  color: #fff;
}
.btn-accent:hover,
.btn-accent:focus {
  background: var(--audi-green-dark);
  border-color: var(--audi-green-dark);
  color: #fff;
}
.text-brand {
  color: var(--audi-blue);
}
.bg-brand-light {
  background: #eaf3fa;
}

a {
  color: var(--audi-blue);
}

/* ---------------------------------------------------------------------
 * Cartes statistiques (degrades)
 * ------------------------------------------------------------------- */
.stat-card {
  border-radius: 0.85rem;
  color: #fff;
}
.bg-stat-primary {
  background: linear-gradient(135deg, var(--audi-blue), var(--audi-blue-dark));
}
.bg-stat-success {
  background: linear-gradient(135deg, var(--audi-green), var(--audi-green-dark));
}
.bg-stat-warning {
  background: linear-gradient(135deg, var(--audi-amber), var(--audi-amber-dark));
}
.bg-stat-danger {
  background: linear-gradient(135deg, var(--audi-red), var(--audi-red-dark));
}
.bg-stat-slate {
  background: linear-gradient(135deg, var(--audi-slate), var(--audi-slate-dark));
}

/* ---------------------------------------------------------------------
 * Fiches de detail en lecture seule
 * ------------------------------------------------------------------- */
.info-list {
  margin: 0;
}
.info-list .info-row {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--tblr-border-color, #eef1f4);
}
.info-list .info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.info-list .info-row:first-child {
  padding-top: 0;
}
.info-list dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-secondary-color, #8993a1);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.info-list dd {
  margin: 0;
  font-size: 0.93rem;
}
.detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #eaf3fa;
}
.detail-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  background: var(--audi-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.badge-etape {
  font-size: 0.72rem;
}

.detail-icon-circle-sm {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.doc-card {
  transition: box-shadow .15s ease, transform .15s ease;
}
.doc-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.badge-notif {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 0.6rem;
  padding: 0.15rem 0.35rem;
  border-radius: 1rem;
}

.dropdown-menu-alertes {
  width: 340px;
  max-width: 90vw;
  max-height: 420px;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------
 * Images et vignettes (remplace les style= "object-fit" inline)
 * ------------------------------------------------------------------- */
.avatar-photo-sm {
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.avatar-photo-lg {
  width: 110px;
  height: 110px;
  object-fit: cover;
}
.thumb-100 {
  height: 100px;
  object-fit: cover;
}
.thumb-150 {
  height: 150px;
  object-fit: cover;
}
.thumb-180 {
  height: 180px;
  object-fit: cover;
}
.thumb-220 {
  height: 220px;
  object-fit: cover;
}
.img-signature {
  max-height: 50px;
}

/* ---------------------------------------------------------------------
 * Divers composants applicatifs
 * ------------------------------------------------------------------- */
.otp-input {
  letter-spacing: 0.5em;
  font-size: 1.5rem;
  text-align: center;
  font-weight: 600;
}
.qr-code-lg {
  width: 220px;
  height: 220px;
}
.d-none-toggle {
  display: none;
}

.step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  color: #fff;
  background: #e5e8e7;
}
.step-circle.is-done,
.step-circle.is-current {
  background: var(--audi-green);
}
.step-circle-sm {
  width: 34px;
  height: 34px;
}
.step-label {
  color: var(--tblr-secondary-color, #8993a1);
}
.step-label.is-current {
  font-weight: 700;
  color: var(--tblr-body-color);
}

/* ---------------------------------------------------------------------
 * Navbar verticale : fond degrade bleu de la marque
 * ------------------------------------------------------------------- */
.navbar-vertical.navbar-dark {
  background: linear-gradient(180deg, var(--audi-blue-darker), var(--audi-blue-dark) 55%);
}
.navbar-vertical .nav-link.active {
  background: rgba(66, 173, 79, 0.18);
  border-left: 3px solid var(--audi-green);
  font-weight: 600;
}
.navbar-vertical .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------
 * Navbar verticale : bloc marque AUDI
 * ------------------------------------------------------------------- */
.navbar-vertical .navbar-brand-audi {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
}
.navbar-vertical .navbar-brand-audi .brand-chip {
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.3rem 0.5rem;
  line-height: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.navbar-vertical .navbar-brand-audi .brand-chip img {
  height: 26px;
  display: block;
}
.navbar-vertical .navbar-brand-audi .brand-text {
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.2;
  opacity: 0.85;
  font-weight: 500;
}

/* ---------------------------------------------------------------------
 * Pages d'authentification (connexion, 2FA, suivi public)
 * ------------------------------------------------------------------- */
.auth-page {
  background: linear-gradient(135deg, var(--audi-blue-darker), var(--audi-blue));
  min-height: 100vh;
}

/* ---------------------------------------------------------------------
 * Couverture projet / visibilite / statistiques de visite
 * ------------------------------------------------------------------- */
.admin-cover-thumb {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}