/* ============================================================
   DASHBOARD MÉDECIN — Design System
   Palette principale : bleu #2563EB, vert #059669, rouge #DC2626
   Neutres : slate (#0F172A → #F8FAFC)
   ============================================================ */

/* ── Variables globales ──────────────────────────────────── */
:root {
  --dm-radius-sm  : 8px;
  --dm-radius     : 12px;
  --dm-radius-lg  : 16px;
  --dm-radius-xl  : 20px;

  --dm-shadow-xs  : 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --dm-shadow-sm  : 0 4px 6px  rgba(15,23,42,.07), 0 2px 4px  rgba(15,23,42,.05);
  --dm-shadow     : 0 8px 16px  rgba(15,23,42,.08), 0 4px 8px  rgba(15,23,42,.06);
  --dm-shadow-lg  : 0 16px 32px rgba(15,23,42,.10), 0 6px 12px rgba(15,23,42,.07);

  --dm-transition : all .22s cubic-bezier(.4,0,.2,1);

  --dm-blue-50  : #EFF6FF;
  --dm-blue-100 : #DBEAFE;
  --dm-blue-500 : #3B82F6;
  --dm-blue-600 : #2563EB;
  --dm-blue-700 : #1D4ED8;

  --dm-green-50  : #ECFDF5;
  --dm-green-500 : #10B981;
  --dm-green-600 : #059669;

  --dm-orange-50  : #FFF7ED;
  --dm-orange-500 : #F97316;
  --dm-orange-600 : #EA580C;

  --dm-red-50  : #FEF2F2;
  --dm-red-500 : #EF4444;
  --dm-red-600 : #DC2626;

  --dm-violet-50  : #F5F3FF;
  --dm-violet-500 : #8B5CF6;
  --dm-violet-600 : #7C3AED;

  --dm-teal-50  : #F0FDFA;
  --dm-teal-500 : #14B8A6;
  --dm-teal-600 : #0D9488;

  --dm-amber-50  : #FFFBEB;
  --dm-amber-500 : #F59E0B;

  --dm-slate-50  : #F8FAFC;
  --dm-slate-100 : #F1F5F9;
  --dm-slate-200 : #E2E8F0;
  --dm-slate-300 : #CBD5E1;
  --dm-slate-400 : #94A3B8;
  --dm-slate-500 : #64748B;
  --dm-slate-600 : #475569;
  --dm-slate-700 : #334155;
  --dm-slate-800 : #1E293B;
  --dm-slate-900 : #0F172A;
}

/* ── Base page ───────────────────────────────────────────── */
.app-main__inner {
  padding: 1.75rem 1.75rem 2.5rem;
  background: var(--dm-slate-50);
  min-height: 100vh;
}

/* ── En-tête ─────────────────────────────────────────────── */
.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--dm-slate-800);
  line-height: 1.2;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.dashboard-title i {
  color: var(--dm-blue-600);
  font-size: 1.5rem;
}

/* ── KPI Cards ───────────────────────────────────────────── */
.stats-card {
  background: #ffffff;
  border-radius: var(--dm-radius);
  padding: .625rem .875rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: var(--dm-shadow-sm);
  border: 1px solid var(--dm-slate-100);
  transition: var(--dm-transition);
  position: relative;
  overflow: hidden;
}

.stats-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  box-shadow: var(--dm-shadow-lg);
  transition: opacity .22s ease;
}

.stats-card:hover {
  transform: translateY(-3px);
  border-color: var(--dm-slate-200);
}

.stats-card:hover::after { opacity: 1; }

/* Barre colorée en haut */
.stats-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-c1, #3B82F6), var(--card-c2, #2563EB));
  border-radius: var(--dm-radius-lg) var(--dm-radius-lg) 0 0;
}

/* Couleurs par carte */
.card-blue   { --card-c1: #3B82F6; --card-c2: #2563EB; }
.card-green  { --card-c1: #10B981; --card-c2: #059669; }
.card-orange { --card-c1: #F97316; --card-c2: #EA580C; }
.card-red    { --card-c1: #EF4444; --card-c2: #DC2626; }
.card-purple { --card-c1: #8B5CF6; --card-c2: #7C3AED; }
.card-teal   { --card-c1: #14B8A6; --card-c2: #0D9488; }

.stats-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--dm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: linear-gradient(135deg, var(--card-c1, #3B82F6), var(--card-c2, #2563EB));
  color: white;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,.13);
}

.stats-content { flex: 1; min-width: 0; }

.stats-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--dm-slate-800);
  line-height: 1.1;
  margin-bottom: .2rem;
  letter-spacing: -.4px;
}

.stats-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--dm-slate-500);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: .25rem;
}

.stats-trend {
  font-size: .78rem;
  color: var(--dm-slate-400);
  display: flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-trend.positive { color: var(--dm-green-600); }
.stats-trend.negative { color: var(--dm-red-600); }

/* ── Sélecteur d'année ───────────────────────────────────── */
.year-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--dm-slate-200);
  border-radius: var(--dm-radius-sm);
  padding: 0 .625rem;
  height: 34px;
  gap: .375rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.year-select-wrapper:focus-within {
  border-color: var(--dm-blue-500);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.year-select-icon {
  font-size: .95rem;
  color: var(--dm-blue-500);
  pointer-events: none;
  flex-shrink: 0;
}

.year-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-size: .875rem;
  font-weight: 600;
  color: var(--dm-slate-700);
  cursor: pointer;
  padding: 0;
  width: 52px;
  text-align: center;
}

.year-select option {
  font-weight: 500;
  color: var(--dm-slate-700);
}

.year-select-arrow {
  font-size: .9rem;
  color: var(--dm-slate-400);
  pointer-events: none;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.year-select-wrapper:focus-within .year-select-arrow {
  transform: rotate(180deg);
  color: var(--dm-blue-500);
}

/* ── Dashboard cards (panels) ────────────────────────────── */
.dashboard-card {
  background: #ffffff;
  border-radius: var(--dm-radius-lg);
  border: 1px solid var(--dm-slate-200);
  box-shadow: var(--dm-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--dm-transition);
}

.dashboard-card:hover {
  box-shadow: var(--dm-shadow);
}

.dashboard-card .card-header {
  background: #ffffff;
  border-bottom: 1px solid var(--dm-slate-100);
  padding: .75rem 1.125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.dashboard-card .card-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--dm-slate-700);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.dashboard-card .card-title i {
  font-size: 1.125rem;
}

.dashboard-card .card-body {
  padding: .875rem 1.125rem;
  flex: 1;
}

.dashboard-card .card-body.p-0 {
  padding: 0;
}

/* ── Alertes ─────────────────────────────────────────────── */
.alerts-list {
  display: flex;
  flex-direction: column;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1.375rem;
  border-bottom: 1px solid var(--dm-slate-100);
  border-left: 3px solid transparent;
  transition: var(--dm-transition);
}

.alert-item:last-child { border-bottom: none; }

.alert-item:hover {
  background: var(--dm-slate-50);
}

.alert-item.alert-urgent  { border-left-color: var(--dm-red-500);  background: #FFFAFA; }
.alert-item.alert-medium  { border-left-color: var(--dm-amber-500); background: #FFFEF5; }
.alert-item.alert-low     { border-left-color: var(--dm-blue-500);  background: #F8FAFF; }

.alert-item.alert-urgent:hover  { background: #FFF5F5; }
.alert-item.alert-medium:hover  { background: #FFFBF0; }
.alert-item.alert-low:hover     { background: #EFF6FF; }

.alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.alert-urgent .alert-icon  { background: var(--dm-red-50);    color: var(--dm-red-600); }
.alert-medium .alert-icon  { background: var(--dm-amber-50);  color: #B45309; }
.alert-low    .alert-icon  { background: var(--dm-blue-50);   color: var(--dm-blue-600); }

.alert-content { flex: 1; min-width: 0; }

.alert-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--dm-slate-800);
  margin-bottom: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Agenda / Dossiers ───────────────────────────────────── */
.agenda-list {
  display: flex;
  flex-direction: column;
}

.agenda-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1.125rem;
  border-bottom: 1px solid var(--dm-slate-100);
  transition: background .18s ease;
}

.agenda-item:last-child { border-bottom: none; }

.agenda-item:hover { background: var(--dm-slate-50); }

/* ── Tables ──────────────────────────────────────────────── */
.table {
  margin-bottom: 0;
}

.table thead th {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--dm-slate-500);
  background: var(--dm-slate-50);
  border-bottom: 1px solid var(--dm-slate-200);
  padding: .625rem 1rem;
  white-space: nowrap;
}

.table tbody td {
  padding: .625rem 1rem;
  font-size: .875rem;
  vertical-align: middle;
  border-color: var(--dm-slate-100);
  color: var(--dm-slate-700);
}

.table-hover tbody tr:hover {
  background-color: var(--dm-slate-50);
}

/* ── Compliance / Metric cards ───────────────────────────── */
.compliance-metric {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .75rem 1rem;
  background: var(--dm-slate-50);
  border: 1px solid var(--dm-slate-200);
  border-radius: var(--dm-radius);
  height: 100%;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--dm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.metric-content { flex: 1; }

.metric-value {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--dm-slate-800);
  line-height: 1.1;
  letter-spacing: -.3px;
}

.metric-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--dm-slate-500);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: .125rem;
}

/* ── Accès rapides ───────────────────────────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .875rem;
}

.quick-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .75rem .5rem;
  border-radius: var(--dm-radius);
  background: var(--dm-slate-50);
  border: 1px solid var(--dm-slate-200);
  cursor: pointer;
  transition: var(--dm-transition);
  text-align: center;
  user-select: none;
}

.quick-action-item:hover {
  background: white;
  border-color: var(--dm-blue-500);
  box-shadow: 0 4px 12px rgba(37,99,235,.12);
  transform: translateY(-2px);
}

.quick-action-item:active {
  transform: translateY(0);
}

.quick-action-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--dm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform .18s ease;
}

.quick-action-item:hover .quick-action-icon {
  transform: scale(1.1);
}

.quick-action-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--dm-slate-600);
  line-height: 1.3;
}

/* ── Couleurs utilitaires ────────────────────────────────── */
.bg-primary-light { background: var(--dm-blue-50)   !important; }
.bg-success-light { background: var(--dm-green-50)  !important; }
.bg-warning-light { background: var(--dm-amber-50)  !important; }
.bg-danger-light  { background: var(--dm-red-50)    !important; }
.bg-info-light    { background: var(--dm-teal-50)   !important; }
.bg-purple-light  { background: var(--dm-violet-50) !important; }

.text-purple { color: var(--dm-violet-600) !important; }
.text-teal   { color: var(--dm-teal-600)   !important; }

/* Badges - ajustements fins */
.badge {
  font-size: .7rem;
  font-weight: 600;
  padding: .3em .6em;
  letter-spacing: .2px;
  border-radius: 6px;
}

/* ── Graphiques ──────────────────────────────────────────── */
canvas {
  display: block;
  width: 100% !important;
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  color: var(--dm-slate-400);
}

.empty-state i   { opacity: .5; }
.empty-state p   { margin: 0; font-size: .9rem; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner-border.text-primary { color: var(--dm-blue-600) !important; }

/* ── Buttons dans les headers ────────────────────────────── */
.dashboard-card .card-header .btn {
  font-size: .78rem;
  padding: .3rem .75rem;
  border-radius: var(--dm-radius-sm);
  font-weight: 600;
  letter-spacing: .2px;
}

/* ── Animations d'entrée ─────────────────────────────────── */
@keyframes dm-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stats-card {
  animation: dm-fade-up .4s ease-out both;
}

/* Décalage en cascade sur les 6 KPI cards */
.row .col-xl-2:nth-child(1) .stats-card { animation-delay: .05s; }
.row .col-xl-2:nth-child(2) .stats-card { animation-delay: .10s; }
.row .col-xl-2:nth-child(3) .stats-card { animation-delay: .15s; }
.row .col-xl-2:nth-child(4) .stats-card { animation-delay: .20s; }
.row .col-xl-2:nth-child(5) .stats-card { animation-delay: .25s; }
.row .col-xl-2:nth-child(6) .stats-card { animation-delay: .30s; }

/* ── Compliance metric variante colonne ──────────────────── */
.compliance-metric.flex-column {
  align-items: center;
  text-align: center;
  padding: .75rem .5rem;
}

/* ── Sous-catégories arrêts ──────────────────────────────── */
.arrets-subcats {
  display: flex;
  gap: .5rem;
}

.arret-sub-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem .375rem;
  background: var(--dm-slate-50);
  border-radius: var(--dm-radius-sm);
  border-top: 3px solid #ccc;
  text-align: center;
}

.arret-sub-item.border-danger   { border-top-color: var(--dm-red-500); }
.arret-sub-item.border-warning  { border-top-color: var(--dm-amber-500); }
.arret-sub-item.border-secondary{ border-top-color: var(--dm-slate-400); }

.arret-sub-value {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.3px;
}

.arret-sub-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--dm-slate-500);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: .15rem;
  line-height: 1.2;
}

/* ── Bannière de danger (arrêts actifs) ──────────────────── */
.arrets-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .625rem .875rem;
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.2);
  border-radius: var(--dm-radius-sm);
}

/* ── Campagne item ────────────────────────────────────────── */
.campagne-item {
  padding: .625rem 1.125rem;
  border-bottom: 1px solid var(--dm-slate-100);
}

.campagne-item:last-child { border-bottom: none; }
.campagne-item:hover { background: var(--dm-slate-50); }

/* ── Section labels ──────────────────────────────────────── */
.section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--dm-slate-400);
  padding: .5rem 0 .25rem;
  display: block;
}

/* ── Loading / skeleton ──────────────────────────────────── */
.dm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: var(--dm-slate-400);
}

.dm-loading .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
  color: var(--dm-blue-600) !important;
}

/* ── Responsive ──────────────────────────────────────────── */

/* ≥1400px : 6 colonnes bien définies */
@media (min-width: 1400px) {
  .stats-value { font-size: 2rem; }
}

/* ≤1199px : KPIs passent sur 3 colonnes */
@media (max-width: 1199.98px) {
  .stats-value { font-size: 1.625rem; }
  .stats-icon  { width: 46px; height: 46px; font-size: 1.25rem; }
  .quick-actions { grid-template-columns: repeat(3, 1fr); }
}

/* ≤991px : quelques ajustements tablette */
@media (max-width: 991.98px) {
  .app-main__inner { padding: 1.25rem 1rem 2rem; }
  .dashboard-title { font-size: 1.375rem; }
  .metric-value    { font-size: 1.375rem; }
}

/* ≤767px : mobile */
@media (max-width: 767.98px) {
  .app-main__inner { padding: .875rem .75rem 1.75rem; }
  .dashboard-title { font-size: 1.25rem; }

  .stats-card {
    padding: 1rem;
    gap: .75rem;
  }

  .stats-value { font-size: 1.5rem; }
  .stats-icon  { width: 42px; height: 42px; font-size: 1.125rem; }

  .dashboard-card .card-header { padding: .875rem 1rem; }
  .dashboard-card .card-body   { padding: 1rem; }

  .alert-item  { padding: .75rem 1rem; }
  .agenda-item { padding: .75rem 1rem; }

  .table thead th  { padding: .5rem .75rem; }
  .table tbody td  { padding: .5rem .75rem; }

  .quick-actions { grid-template-columns: repeat(3, 1fr); gap: .625rem; }
  .quick-action-item  { padding: .875rem .5rem; }
  .quick-action-icon  { width: 44px; height: 44px; font-size: 1.25rem; }
  .quick-action-label { font-size: .72rem; }
}

/* ≤575px : très petit écran */
@media (max-width: 575.98px) {
  .stats-card { flex-direction: row; }
  .stats-value { font-size: 1.375rem; }

  .quick-actions { grid-template-columns: repeat(2, 1fr); }

  .compliance-metric {
    flex-direction: row;
    padding: .75rem;
  }

  .metric-value { font-size: 1.25rem; }
}