/* ============================================================
   ETélé Digital — couche de modernisation UI
   - Correction logo sidebar (tous thèmes)
   - Dashboard modernisé (thème clair uniquement, via body.theme-light)
   ============================================================ */

/* ---------- 1) Logo : contraint dans l'espace qui lui est accordé ---------- */
.sidebar .sidebar-header {
  height: 72px;
  padding: 0 18px;
}
.sidebar .sidebar-header .sidebar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sidebar .sidebar-header .sidebar-brand img {
  width: auto;
  max-width: 100%;
  max-height: 48px;   /* le logo (800x615) tient désormais dans l'en-tête */
  height: auto;
  object-fit: contain;
}

/* ---------- 2) Dashboard modernisé (thème clair) ---------- */
body.theme-light .dashboard-modern .card {
  border: 1px solid #eaeef4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -20px rgba(16, 24, 40, .12);
}
body.theme-light .dashboard-modern .card > .card-body {
  padding: 1.25rem 1.35rem;
}
body.theme-light .dashboard-modern .card > .card-header {
  background: transparent;
  border-bottom: 1px solid #f0f2f7;
  padding: .9rem 1.35rem;
}

/* Grands nombres : hiérarchie nette, chiffres tabulaires */
.dashboard-modern .card h3 {
  font-size: 1.85rem;
  font-weight: 700;
  color: #16202e;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dashboard-modern .card .card-title {
  color: #7a8497;
  font-weight: 600;
}

/* L'élément affirmé : pastilles d'icônes teintées, alternance sobre */
body.theme-light .dashboard-modern .dash-icon svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 14px;
  background: rgba(221, 178, 5, .14);
  color: var(--primary-color);
}
body.theme-light .dashboard-modern .row > .col-xxl-3:nth-child(4n+2) .dash-icon svg {
  background: rgba(58, 123, 213, .12);
  color: #3a7bd5;
}
body.theme-light .dashboard-modern .row > .col-xxl-3:nth-child(4n+3) .dash-icon svg {
  background: rgba(0, 180, 42, .12);
  color: #00a84f;
}
body.theme-light .dashboard-modern .row > .col-xxl-3:nth-child(4n) .dash-icon svg {
  background: rgba(115, 86, 213, .12);
  color: #7356d5;
}

/* Tableaux plus lisibles */
body.theme-light .dashboard-modern .table thead th {
  font-size: .72rem;
  letter-spacing: .05em;
  color: #8a93a5;
  border-bottom: 1px solid #e8ebf2;
}
body.theme-light .dashboard-modern .table tbody td {
  border-color: #f1f3f8;
  color: #3c4657;
}
body.theme-light .dashboard-modern .table tbody tr:hover {
  background: #fafbfe;
}

/* Boutons et accès rapides */
.dashboard-modern .btn {
  border-radius: 10px;
}
body.theme-light .mail-quick {
  border: 1px solid #eaeef4 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.theme-light a:hover .mail-quick,
body.theme-light a:focus-visible .mail-quick {
  border-color: rgba(221, 178, 5, .55) !important;
  box-shadow: 0 10px 24px -18px rgba(16, 24, 40, .25);
}

/* Focus clavier visible */
.dashboard-modern a:focus-visible,
.dashboard-modern button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dashboard-modern *,
  .mail-quick {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- 3) Couleurs d'actions forçées (le thème remappe btn-danger en or) ---------- */
.btn-solid-red {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}
.btn-solid-red:hover, .btn-solid-red:focus {
  background-color: #bb2d3b !important;
  border-color: #b02a37 !important;
  color: #fff !important;
}
.btn-solid-blue {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
.btn-solid-blue:hover, .btn-solid-blue:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #fff !important;
}