/* ================================================================
   kdStats.css — Composants réutilisables pour dashboards/stats
   Préfixe : .kdStats*
   Utilisation : appliquer les classes sur n'importe quel module
                 pour obtenir un design moderne cohérent.

   Structure typique :
   .kdStatsWrapper
     ├── .kdStatsPeriodBar (optionnel — sélecteur de période)
     ├── .kdStatsSection
     │   ├── .kdStatsSectionHeader (gradient bleu)
     │   └── .kdStatsSectionBody
     │        └── .kdStatsCardGrid
     │             └── .kdStatsCard (plusieurs)
     │                  ├── .kdStatsCardHead
     │                  ├── .kdStatsMetricsGrid
     │                  │    └── .kdStatsMetric (plusieurs)
     │                  └── .kdStatsCardFooter
     │                       └── .kdStatsKeyMetric (plusieurs)
     └── .kdStatsSection
         └── .kdStatsSectionBody
              └── .kdStatsTable
                   ├── .kdStatsTableHead
                   └── .kdStatsTableRow (plusieurs)
   ================================================================ */

/* -- Wrapper global ------------------------------------------------ */
.kdStatsWrapper{
	width:100%;
	padding:8px 4px 20px 4px;
	box-sizing:border-box;
	display:flex; flex-direction:column; gap:20px;
}

/* -- Barre de période (sélecteurs + boutons navigation) ----------- */
.kdStatsPeriodBar{
	display:flex; align-items:center; justify-content:center; gap:14px;
	padding:12px 18px;
	background:linear-gradient(135deg,#f8fafc,#eef2ff);
	border:1px solid #e3e8ef;
	border-radius:14px;
	box-shadow:0 1px 2px rgba(16,24,40,0.04);
	flex-wrap:wrap;
}
.kdStatsPeriodNav{
	width:38px; height:38px; border-radius:10px;
	display:flex; align-items:center; justify-content:center;
	background:#fff; border:1px solid #e3e8ef;
	cursor:pointer; color:#3b82f6; font-size:16px;
	transition:all 0.15s ease;
}
.kdStatsPeriodNav:hover{
	background:#3b82f6; color:#fff; border-color:#3b82f6;
	box-shadow:0 4px 12px rgba(59,130,246,0.25);
}
.kdStatsPeriodNav.prev:hover{ transform:translateX(-2px); }
.kdStatsPeriodNav.next:hover{ transform:translateX(2px); }
.kdStatsPeriodSelect{
	min-width:120px; height:38px; padding:0 12px;
	background:#fff; border:1px solid #e3e8ef; border-radius:10px;
	font-size:14px; color:#0f172a; font-weight:500;
	cursor:pointer;
}
.kdStatsPeriodSelect:focus{ outline:2px solid #3b82f6; outline-offset:1px; }
.kdStatsPeriodLabel{ font-size:12px; color:#64748b; font-weight:500; }

/* -- Barre d'onglets horizontale (touch-friendly) ----------------- */
.kdStatsTabs{
	display:flex; flex-wrap:wrap;
	column-gap:6px; row-gap:2px;
	border-bottom:2px solid #e3e8ef;
	padding:0 4px;
	width:100%; box-sizing:border-box;
	min-width:0;
}
.kdStatsTab{
	min-height:48px;
	padding:12px 22px;
	font-size:14.5px; font-weight:500; color:#64748b;
	cursor:pointer;
	border-radius:10px 10px 0 0;
	border:1px solid transparent;
	border-bottom:none;
	margin-bottom:-2px;
	transition:all 0.15s ease;
	display:flex; align-items:center; gap:10px;
	white-space:nowrap;
	-webkit-tap-highlight-color:transparent;
	user-select:none;
}
.kdStatsTab i{ font-size:16px; }
.kdStatsTab:hover{ color:#1e293b; background:#f8fafc; }
.kdStatsTab.active{
	color:#1d4ed8; background:#fff;
	border-color:#e3e8ef; border-bottom-color:#fff;
	font-weight:600;
}
.kdStatsTab:active{ transform:scale(0.97); }
.kdStatsTab .kdStatsTabBadge{
	background:#eef2ff; color:#3730a3;
	padding:3px 10px; border-radius:999px;
	font-size:12px; font-weight:600;
}
.kdStatsTab.active .kdStatsTabBadge{ background:#3b82f6; color:#fff; }

/* Ajustements tactiles spécifiques (tablette / mobile) */
@media (pointer: coarse){
	.kdStatsTab{ min-height:54px; padding:14px 24px; font-size:15px; }
	.kdStatsTab i{ font-size:17px; }
}

/* -- Section (conteneur principal de contenu) --------------------- */
.kdStatsSection{
	background:#fff; border:1px solid #e3e8ef; border-radius:16px;
	box-shadow:0 1px 3px rgba(16,24,40,0.05);
	overflow:hidden;
}
.kdStatsSectionHeader{
	display:flex; align-items:center; gap:12px;
	padding:14px 20px;
	background:linear-gradient(135deg,#1e3a8a,#3b82f6);
	color:#fff;
}
.kdStatsSectionHeaderIcon{
	width:36px; height:36px; border-radius:10px;
	background:rgba(255,255,255,0.18);
	display:flex; align-items:center; justify-content:center;
	font-size:16px; flex-shrink:0;
}
.kdStatsSectionHeaderTitle{ font-size:15px; font-weight:600; flex:1; min-width:0; }
.kdStatsSectionHeaderSub{ font-size:12px; opacity:0.85; white-space:nowrap; }
.kdStatsSectionBody{ padding:20px; }

/* Variantes de couleur du header */
.kdStatsSectionHeader.green{ background:linear-gradient(135deg,#065f46,#10b981); }
.kdStatsSectionHeader.orange{ background:linear-gradient(135deg,#9a3412,#f97316); }
.kdStatsSectionHeader.purple{ background:linear-gradient(135deg,#4c1d95,#8b5cf6); }
.kdStatsSectionHeader.slate{ background:linear-gradient(135deg,#1e293b,#475569); }

/* -- Grille de cartes ---------------------------------------------- */
.kdStatsCardGrid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
	gap:16px;
}
.kdStatsCardGrid.narrow{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.kdStatsCardGrid.wide{ grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); }

/* -- Carte ---------------------------------------------------------- */
.kdStatsCard{
	border:1px solid #e3e8ef; border-radius:14px;
	background:#fff;
	overflow:hidden;
	transition:all 0.18s ease;
	display:flex; flex-direction:column;
	-webkit-tap-highlight-color:transparent;
}
.kdStatsCard:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(16,24,40,0.08);
	border-color:#c7d2fe;
}
.kdStatsCard.clickable{ cursor:pointer; }
.kdStatsCard.clickable:active{ transform:scale(0.99); }
.kdStatsCardHead{
	display:flex; align-items:center; gap:12px;
	padding:14px 16px;
	background:linear-gradient(135deg,#eef2ff,#f1f5f9);
	border-bottom:1px solid #e3e8ef;
}
.kdStatsCardBadge{
	background:#fff; border:1px solid #c7d2fe;
	color:#3730a3; font-weight:700; font-size:12px;
	padding:4px 10px; border-radius:999px;
	white-space:nowrap; flex-shrink:0;
}
.kdStatsCardBadge.green{ border-color:#86efac; color:#166534; }
.kdStatsCardBadge.orange{ border-color:#fdba74; color:#9a3412; }
.kdStatsCardBadge.grey{ border-color:#cbd5e1; color:#64748b; }
.kdStatsCardTitleBlock{
	flex:1; min-width:0;
	display:flex; flex-direction:column; gap:2px;
}
.kdStatsCardName{
	flex:1; min-width:0;
	font-size:14px; font-weight:600; color:#0f172a;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	line-height:1.2;
}
.kdStatsCardSub{
	font-size:11px; color:#64748b; font-weight:500;
	line-height:1.3;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
	overflow:hidden; word-break:break-word;
}
.kdStatsCardIcon{
	width:34px; height:34px; border-radius:9px;
	background:rgba(59,130,246,0.12); color:#1d4ed8;
	display:flex; align-items:center; justify-content:center;
	font-size:15px; flex-shrink:0;
}
.kdStatsCardIcon.green{ background:rgba(16,185,129,0.12); color:#047857; }
.kdStatsCardIcon.orange{ background:rgba(249,115,22,0.12); color:#c2410c; }
.kdStatsCardIcon.grey{ background:#f1f5f9; color:#94a3b8; }

/* -- Variante "row" : cartes empilées en format horizontal -------- */
.kdStatsCardGrid.rows{ grid-template-columns:1fr; gap:10px; }
.kdStatsCard.row{ flex-direction:row; align-items:stretch; }
.kdStatsCard.row .kdStatsCardHead{
	border-bottom:none; border-right:1px solid #e3e8ef;
	width:260px; min-width:260px; flex-shrink:0;
}
.kdStatsCard.row .kdStatsMetricsGrid{ flex:1; grid-template-columns:repeat(6, 1fr); }
.kdStatsCard.row .kdStatsMetricsGrid.cols4{ grid-template-columns:repeat(4, 1fr); }
.kdStatsCard.row .kdStatsMetricsGrid.cols5{ grid-template-columns:repeat(5, 1fr); }
.kdStatsCard.row .kdStatsCardFooter{
	border-top:none; border-left:1px solid #e3e8ef;
	width:240px; min-width:240px; flex-shrink:0;
	margin-top:0;
}
.kdStatsCard.row .kdStatsCardFooter.cols3{ width:340px; min-width:340px; }
.kdStatsCard.row .kdStatsCardFooter.cols1{ width:160px; min-width:160px; }

@media (max-width: 900px){
	.kdStatsCard.row{ flex-direction:column; }
	.kdStatsCard.row .kdStatsCardHead{ width:100%; border-right:none; border-bottom:1px solid #e3e8ef; }
	.kdStatsCard.row .kdStatsCardFooter{ width:100%; border-left:none; border-top:1px solid #e3e8ef; }
	.kdStatsCard.row .kdStatsMetricsGrid{ grid-template-columns:repeat(3, 1fr); }
}

/* -- Grille de métriques à l'intérieur d'une carte ---------------- */
.kdStatsMetricsGrid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:1px;
	background:#e3e8ef;
}
.kdStatsMetricsGrid.cols2{ grid-template-columns:repeat(2, 1fr); }
.kdStatsMetricsGrid.cols4{ grid-template-columns:repeat(4, 1fr); }
.kdStatsMetricsGrid.cols5{ grid-template-columns:repeat(5, 1fr); }
.kdStatsMetricsGrid.cols6{ grid-template-columns:repeat(6, 1fr); }
.kdStatsMetric{
	background:#fff;
	padding:12px 10px;
	display:flex; flex-direction:column; align-items:center; gap:4px;
	text-align:center;
}
.kdStatsMetricLabel{
	font-size:10.5px; color:#64748b; text-transform:uppercase;
	letter-spacing:0.3px; font-weight:500;
	display:flex; align-items:center; gap:5px;
}
.kdStatsMetricValue{
	font-size:18px; font-weight:700; color:#0f172a;
	line-height:1;
}
.kdStatsMetricIcon{ font-size:11px; color:#94a3b8; }

/* -- Footer de carte (KPI principaux) ----------------------------- */
.kdStatsCardFooter{
	display:grid; grid-template-columns:1fr 1fr;
	border-top:1px solid #e3e8ef;
	margin-top:auto;
}
.kdStatsCardFooter.cols1{ grid-template-columns:1fr; }
.kdStatsCardFooter.cols3{ grid-template-columns:1fr 1fr 1fr; }
.kdStatsKeyMetric{
	padding:14px 12px;
	display:flex; flex-direction:column; align-items:center; gap:2px;
}
.kdStatsKeyMetric + .kdStatsKeyMetric{ border-left:1px solid #e3e8ef; }
.kdStatsKeyMetricLabel{
	font-size:11px; color:#64748b; font-weight:500;
	display:flex; align-items:center; gap:5px;
}
.kdStatsKeyMetricValue{
	font-size:22px; font-weight:700; color:#0f172a;
	line-height:1.1;
}
.kdStatsKeyMetric.available .kdStatsKeyMetricValue{ color:#047857; }
.kdStatsKeyMetric.charged .kdStatsKeyMetricValue{ color:#b45309; }
.kdStatsKeyMetric.danger .kdStatsKeyMetricValue{ color:#b91c1c; }
.kdStatsKeyMetric.info .kdStatsKeyMetricValue{ color:#1d4ed8; }

/* -- Tableau compact (alternative à la grille de cartes) ---------- */
.kdStatsTable{
	width:100%;
	border:1px solid #e3e8ef;
	border-radius:12px;
	overflow:hidden;
	font-size:13px;
}
.kdStatsTableHead{
	display:flex; align-items:center;
	background:#f8fafc;
	border-bottom:1px solid #e3e8ef;
	color:#475569; font-weight:600; font-size:12px;
	text-transform:uppercase; letter-spacing:0.3px;
}
.kdStatsTableHead > div, .kdStatsTableRow > div{
	padding:12px 14px;
}
.kdStatsTableRow{
	display:flex; align-items:center;
	border-bottom:1px solid #f1f5f9;
	background:#fff;
	transition:background 0.12s ease;
}
.kdStatsTableRow:last-child{ border-bottom:none; }
.kdStatsTableRow:hover{ background:#f8fafc; }
.kdStatsTableRow.clickable{ cursor:pointer; }

/* Colonnes réutilisables (.col-* conçues pour être utilisées dans .kdStatsTable) */
.kdStatsTable .col-code{ width:80px; text-align:center; font-family:'Courier New',monospace; font-weight:600; color:#3730a3; }
.kdStatsTable .col-name{ flex:1; font-weight:500; color:#0f172a; }
.kdStatsTable .col-metric{ width:120px; text-align:center; font-size:15px; font-weight:600; color:#0f172a; }
.kdStatsTable .col-small{ width:80px; text-align:center; }
.kdStatsTable .col-large{ width:180px; }

/* -- Utilitaires --------------------------------------------------- */
.kdStatsZero{ color:#cbd5e1; font-weight:400; }
.kdStatsEmpty{
	padding:40px 20px; text-align:center;
	color:#94a3b8; font-size:13px;
}
.kdStatsPositive{ color:#047857; }
.kdStatsNegative{ color:#b91c1c; }
.kdStatsNeutral{ color:#64748b; }

/* -- Responsive ---------------------------------------------------- */
@media (max-width: 640px){
	.kdStatsCardGrid{ grid-template-columns:1fr; }
	.kdStatsMetricsGrid{ grid-template-columns:repeat(2, 1fr); }
	.kdStatsSectionBody{ padding:14px; }
}

/* -- Ajustements appareils tactiles (tablette) -------------------- */
@media (pointer: coarse){
	.kdStatsPeriodNav{ width:46px; height:46px; font-size:18px; }
	.kdStatsPeriodSelect{ height:46px; font-size:15px; }
	.kdStatsMetricValue{ font-size:19px; }
	.kdStatsKeyMetricValue{ font-size:24px; }
	.kdStatsTableHead > div, .kdStatsTableRow > div{ padding:14px 16px; }
	.kdStatsTableRow{ min-height:52px; }
}