/**
 * Composants visuels du tableau de bord (dashboard.view.php uniquement) :
 * cartes KPI, onglets « Mes services », ressources, donut, activité,
 * raccourcis. Ne touche ni à la topbar ni au rail latéral, chargé après
 * style.css et panel-dashboard.css, mêmes jetons (--brand, --surface,
 * --border…).
 */

/* ======================================================================
   Tableau de bord — en-tête
   ====================================================================== */

.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.dash-head h2{font-size:22px;}
.dash-head p{color:var(--text-soft);font-size:13.5px;margin-top:4px;}
.dash-head-actions{display:flex;gap:10px;flex-shrink:0;}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:22px;}
@media (max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:720px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.kpi-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:14px;
}
.kpi-top{display:flex;align-items:center;gap:13px;}
.kpi-icon{
  width:50px;height:50px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.kpi-icon .icon{width:22px;height:22px;}
.kpi-icon.c-brand{background:var(--brand-tint);color:var(--brand-dark);}
.kpi-icon.c-warning{background:var(--warning-tint);color:var(--warning);}
.kpi-icon.c-dns{background:#dbeafe;color:#1d4ed8;}
.kpi-icon.c-pay{background:#dcfce7;color:#15803d;}
.kpi-icon.c-web{background:#ede9fe;color:#6d28d9;}
.kpi-value{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.05;}
.kpi-label{font-size:12.5px;color:var(--text-soft);margin-top:3px;}
.kpi-card a.kpi-link{font-size:12px;text-decoration:none;font-weight:600;}
.kpi-card a.kpi-link:hover{text-decoration:underline;}
/* Le lien reprend la teinte de l'icône de sa propre carte, pas toujours
   la couleur de marque — c'est ce qui donne le petit effet « coordonné »
   du modèle. */
.kpi-link.c-brand{color:var(--brand-dark);}
.kpi-link.c-warning{color:var(--warning);}
.kpi-link.c-dns{color:#1d4ed8;}
.kpi-link.c-pay{color:#15803d;}
.kpi-link.c-web{color:#6d28d9;}

/* Section title, réutilisé tel quel (défini dans style.css) — ajouts : */
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.section-title h2{font-size:15.5px;}
.section-title a{font-size:12.5px;color:var(--brand-dark);text-decoration:none;font-weight:500;}
.section-title a:hover{text-decoration:underline;}

/* Grille principale du dashboard — 3 colonnes façon modèle : chaque
   colonne empile ses propres cartes (services+activité / ressources+
   raccourcis / répartition+sauvegardes+compte), chacune à son rythme. */
.dash-cols3{display:grid;grid-template-columns:1.4fr 1.5fr 1fr;gap:20px;align-items:start;margin-bottom:24px;}
.dcol{display:flex;flex-direction:column;gap:20px;min-width:0;}
@media (max-width:1180px){.dash-cols3{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){.dash-cols3{grid-template-columns:1fr;}}

/* Carte "Mes services" avec onglets */
.dcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);}
.dcard-head{padding:18px 18px 0;}
.dcard-head h3{
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text);
}
.tab-row{display:flex;gap:4px;padding:12px 18px 0;border-bottom:1px solid var(--border);}
.tab-btn{
  padding:8px 4px;margin-right:14px;border:none;background:none;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--text-faint);
  border-bottom:2px solid transparent;transition:.14s ease;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--brand-dark);border-bottom-color:var(--brand);font-weight:600;}
.dcard-body{padding:6px 10px 10px;}
.dcard-foot{padding:10px 18px 16px;text-align:center;border-top:1px solid var(--border);}
.dcard-foot a{font-size:12.5px;color:var(--brand-dark);text-decoration:none;font-weight:500;}
.dcard-foot a:hover{text-decoration:underline;}

.svc-row2{
  display:flex;align-items:center;gap:12px;
  padding:11px 10px;border-radius:10px;text-decoration:none;color:inherit;
}
.svc-row2:hover{background:var(--paper);}
.svc-row2-ic{
  width:36px;height:36px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.svc-row2-ic .icon{width:17px;height:17px;}
.svc-row2-main{flex:1;min-width:0;}
.svc-row2-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc-row2-sub{font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc-row2-meta{flex-shrink:0;text-align:right;font-size:11.5px;color:var(--text-faint);}
.svc-row2-empty{padding:22px 12px;text-align:center;font-size:13px;color:var(--text-faint);}

/* Utilisation des ressources */
.usage-row{padding:12px 18px;}
.usage-row + .usage-row{border-top:1px solid var(--border);}
.usage-row-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.usage-row-head .icon{width:15px;height:15px;color:var(--text-faint);}
.usage-row-head span{flex:1;font-size:12.5px;font-weight:500;color:var(--text);}
.usage-row-head b{font-size:12px;color:var(--text-soft);font-weight:600;}
.usage-track{height:6px;border-radius:999px;background:var(--paper);overflow:hidden;}
.usage-track > i{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .7s cubic-bezier(.2,.8,.2,1);}
.usage-track.warn > i{background:var(--warning);}
.usage-track.crit > i{background:var(--danger);}
.usage-sub{margin-top:5px;font-size:11px;color:var(--text-faint);}

/* Donut "Aperçu par service" */
.donut-wrap{display:flex;align-items:center;gap:18px;padding:6px 18px 18px;}
.donut-chart{
  width:118px;height:118px;flex-shrink:0;border-radius:50%;
  background:conic-gradient(var(--donut-stops, var(--border) 0 360deg));
  display:flex;align-items:center;justify-content:center;
}
.donut-chart::after{
  content:"";width:60%;height:60%;border-radius:50%;background:var(--surface);
  display:flex;
}
.donut-center{position:relative;width:118px;height:118px;flex-shrink:0;}
.donut-center .donut-chart{position:absolute;inset:0;}
.donut-center-txt{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;
}
.donut-center-txt b{font-family:var(--font-display);font-size:19px;line-height:1;}
.donut-center-txt span{font-size:10px;color:var(--text-faint);margin-top:3px;}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.donut-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-soft);}
.donut-legend-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.donut-legend-item .n{margin-left:auto;font-weight:600;color:var(--text);}

/* Petites cartes info (compte, sauvegardes) */
.info-list{padding:4px 18px 16px;display:flex;flex-direction:column;gap:11px;}
.info-list-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;}
.info-list-row span{color:var(--text-faint);}
.info-list-row b{color:var(--text);font-weight:600;text-align:right;}
.info-list-row a.btn{margin-top:2px;}
.mini-stat-row{display:flex;align-items:center;gap:12px;padding:14px 18px 6px;}
.mini-stat-ic{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);color:var(--brand-dark);
}
.mini-stat-ic .icon{width:18px;height:18px;}
.mini-stat-row div{min-width:0;}
.mini-stat-row .n{font-size:13.5px;font-weight:600;}
.mini-stat-row .l{font-size:11.5px;color:var(--text-faint);}

/* Activité récente */
.activity-list{display:flex;flex-direction:column;}
.activity-row{display:flex;align-items:center;gap:12px;padding:11px 18px;}
.activity-row + .activity-row{border-top:1px solid var(--border);}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex-shrink:0;}
.activity-row-main{flex:1;min-width:0;font-size:13px;color:var(--text);}
.activity-row-main b{font-weight:600;}
.activity-row-time{flex-shrink:0;font-size:11.5px;color:var(--text-faint);}
.activity-empty{padding:26px 12px;text-align:center;font-size:13px;color:var(--text-faint);}

/* Raccourcis — 4 tuiles par ligne, icône carrée centrée en haut, libellé
   centré dessous : la disposition exacte du modèle. La colonne du milieu a
   été élargie (dash-cols3) pour qu'elles ne soient plus écrasées. */
.shortcut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.shortcut-tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 6px;border-radius:12px;text-align:center;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);
  transition:.15s ease;
}
.shortcut-tile:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.shortcut-tile .ic{
  width:40px;height:40px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);color:var(--brand-dark);
}
.shortcut-tile .ic .icon{width:19px;height:19px;}
.shortcut-tile span{font-size:12px;font-weight:500;color:var(--text);line-height:1.3;}

/* Un raccourci = un service = sa propre couleur, comme dans le modèle
   (cPanel orange, Bases indigo, phpMyAdmin bleu…) plutôt que la même
   pastille verte répétée sur toutes les tuiles. */
.shortcut-tile .ic.c-brand{background:var(--brand-tint);color:var(--brand-dark);}
.shortcut-tile .ic.c-warning{background:var(--warning-tint);color:var(--warning);}
.shortcut-tile .ic.c-dns{background:#dbeafe;color:#1d4ed8;}
.shortcut-tile .ic.c-pay{background:#dcfce7;color:#15803d;}
.shortcut-tile .ic.c-web{background:#ede9fe;color:#6d28d9;}
.shortcut-tile .ic.c-indigo{background:#e0e7ff;color:#4338ca;}
/* Logo de marque réel (ex. phpMyAdmin) : reste dans le même gabarit carré
   que les autres icônes pour que les 4 tuiles restent alignées ; seule
   l'image à l'intérieur garde ses propres couleurs sur fond neutre. */
.shortcut-tile .ic.is-logo{
  background:var(--paper);border:1px solid var(--border);
}
.shortcut-tile .ic.is-logo img{max-width:30px;max-height:18px;width:auto;height:auto;object-fit:contain;}
.shortcut-tile .ic.is-logo img{max-width:46px;max-height:26px;width:auto;height:auto;object-fit:contain;}

/* Bandeau d'aide */
.help-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:22px;padding:16px 20px;border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--border);
}
.help-banner-txt{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--text);}
.help-banner-txt .ic{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);color:var(--brand-dark);
}
.help-banner-actions{display:flex;gap:10px;}