/* ===== Page Netsight — résumé de supervision (consultation seule) ===== */
.page_netsight {
  padding: 16px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.ns-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ns-header h1 {
  font-size: 20pt;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ns-header h1 .fa { color: var(--main-bg-color); }

.ns-config-badge {
  background: #fff3cd;
  color: #8a6d3b;
  border: 1px solid #ffe69c;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 9.5pt;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Toolbar / sélection tiers */
.ns-toolbar {
  margin-bottom: 18px;
}
.ns-tier-select { max-width: 480px; }
.ns-tier-select label {
  display: block;
  font-size: 9pt;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

.ns-resume { max-width: 900px; }

/* Vide / placeholder */
.ns-placeholder {
  text-align: center;
  color: #999;
  padding: 60px 20px;
  font-size: 11pt;
}
.ns-placeholder .fa { display: block; font-size: 22pt; margin-bottom: 10px; color: #ccc; }

/* =====================================================================
 * Composant global <netsight-resume> (includes/vue.netsight_resume.php)
 * Utilisé par cette page ET, à terme, par la popup NetSight du détail de
 * ticket dans l'Atelier (étape 5 du plan de liaison DoliMIS <-> NetSight).
 * Classes préfixées "nsr-" pour ne pas entrer en collision avec les
 * classes "ns-" propres à la page.
 * ===================================================================== */
.nsr-root {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 16px;
  /* La page Netsight centre son contenu : le résumé (sites, alertes) se lit aligné à gauche */
  text-align: left;
}
.nsr-root.nsr-compact {
  border: none;
  box-shadow: none;
  padding: 0;
}
/* Mode compact (popup) : grille de tuiles à largeur FIXE (4 colonnes) plutôt
 * qu'auto-fit dépendant de la largeur du conteneur — évite qu'avec un nombre
 * de tuiles affichées (sites/équipements/en ligne/hors ligne/inconnu/sans
 * contrat/contrat/alertes...) la dernière se retrouve seule sur une 2e ligne
 * avec un grand vide à côté. */
.nsr-root.nsr-compact .nsr-counters {
  grid-template-columns: repeat(4, 1fr);
}

.nsr-state {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #777;
  font-size: 10pt;
  padding: 20px 10px;
}
.nsr-state .fa { font-size: 14pt; }
.nsr-state-warn { color: #8a6d3b; }
.nsr-state-error { color: #a33; flex-wrap: wrap; }

/* En-tête client */
.nsr-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.nsr-header-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nsr-client-name { font-size: 13pt; font-weight: 700; }

.nsr-badge {
  font-size: 8pt;
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.nsr-badge-warn { background: #fff3cd; color: #8a6d3b; }
.nsr-badge-muted { background: #f0f0f0; color: #777; }
.nsr-badge-critical { background: #fdecea; color: #c0392b; }
.nsr-badge-warning { background: #fff3cd; color: #8a6d3b; }
.nsr-badge-info { background: #e8f0fe; color: #1a56b0; }
/* Petit compte "N sans contrat" dans l'en-tête d'un site */
.nsr-badge-nocontract { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c0; margin-left: 8px; }

.nsr-btn {
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 9.5pt;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition: filter .15s, background .15s;
}
.nsr-btn:disabled { opacity: .55; cursor: not-allowed; }
.nsr-btn-primary { background: var(--main-bg-color); color: #fff; }
.nsr-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.nsr-btn-ghost { background: #f0f0f0; color: #333; border: 1px solid #ddd; }
.nsr-btn-ghost:hover:not(:disabled) { background: #e4e4e4; }
.nsr-btn-sm { padding: 5px 9px; }

/* Compteurs */
.nsr-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.nsr-counter {
  background: #f7f7f9;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.nsr-counter-val { font-size: 15pt; font-weight: 700; line-height: 1; color: #333; }
.nsr-counter-lbl { font-size: 7.5pt; text-transform: uppercase; color: #888; margin-top: 3px; }
.nsr-counter-online .nsr-counter-val { color: #1d7a3a; }
.nsr-counter-offline .nsr-counter-val { color: #999; }
.nsr-counter-unknown .nsr-counter-val { color: #999; }
.nsr-counter-crit .nsr-counter-val { color: #c0392b; }
.nsr-counter-warn .nsr-counter-val { color: #b9770e; }
.nsr-counter-nocontract .nsr-counter-val { color: #999; }
.nsr-counter-nocontract.nsr-counter-alert { background: #fdecea; }
.nsr-counter-nocontract.nsr-counter-alert .nsr-counter-val { color: #c0392b; }

/* Alignement contrat Dolibarr / détection NetSight (additif v2,
 * contracts.alignment.postes|nas) : "OK" vert si aligné, "Sur-effectif"
 * rouge (plus d'équipements détectés qu'au contrat), "Sous-effectif" orange
 * (moins détectés qu'au contrat), "Non vérifiable" gris (calcul NetSight
 * indisponible, JAMAIS un faux "OK"). Tuile masquée si contracts.alignment
 * ou .postes est absent/null (cf. gabarit v-if). */
.nsr-counter-align.nsr-align-ok { background: #eafaf1; }
.nsr-counter-align.nsr-align-ok .nsr-counter-val { color: #1d7a3a; }
.nsr-counter-align.nsr-align-over { background: #fdecea; }
.nsr-counter-align.nsr-align-over .nsr-counter-val { color: #c0392b; }
.nsr-counter-align.nsr-align-under { background: #fdf3e3; }
.nsr-counter-align.nsr-align-under .nsr-counter-val { color: #b9770e; }
.nsr-counter-align.nsr-align-unknown .nsr-counter-val { color: #999; }
.nsr-counter-sub { font-size: 7.5pt; color: #777; margin-top: 2px; }
.nsr-counter-sub-crit { color: #c0392b; font-weight: 600; }
/* Verdict textuel (« Sous-effectif ») : plus petit que les chiffres pour tenir dans la tuile */
.nsr-counter-align .nsr-counter-val { font-size: 11pt; line-height: 1.15; }
.nsr-counter-sub-nas { font-weight: 600; }
.nsr-counter-sub-nas.nsr-align-ok { color: #1d7a3a; }
.nsr-counter-sub-nas.nsr-align-over { color: #c0392b; }
.nsr-counter-sub-nas.nsr-align-under { color: #b9770e; }

/* Sections (sites, nomades, alertes, contrats) */
.nsr-section { margin-top: 16px; }
.nsr-section-title {
  font-size: 10.5pt;
  font-weight: 600;
  color: #444;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.nsr-section-title .fa { color: var(--main-bg-color); }

.nsr-site {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.nsr-site-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nsr-site-name { font-weight: 600; color: #222; text-decoration: none; }
a.nsr-site-name:hover { text-decoration: underline; }
.nsr-site-status { font-size: 8pt; color: #888; margin-left: auto; }
.nsr-site-reason { font-size: 9pt; color: #666; margin-top: 4px; }
.nsr-site-meta { font-size: 8.5pt; color: #999; margin-top: 3px; }

.nsr-equipments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.nsr-equip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f7f7f9;
  border-radius: 14px;
  padding: 3px 10px 3px 8px;
  font-size: 8.5pt;
  color: #333;
  text-decoration: none;
}
a.nsr-equip-link:hover { background: #eceef2; }
.nsr-equip-nolink { cursor: default; }

/* Liaison contrat (additif v1/v2 NetSight) : identification rapide d'un
 * équipement SANS contrat. Seuls les POSTES, SERVEURS et NAS sont concernés
 * (contract_expected === true) : "sans contrat" = contract_expected === true
 * && under_contract === false (cf. nsr_isMissingContract, includes/
 * vue.netsight_resume.php — SEUL endroit qui décide de ce marquage).
 * Discrète quand SOUS contrat (under_contract === true), quel que soit
 * contract_expected. Aucun indicateur pour un équipement non attendu
 * (contract_expected false, ex. routeur/imprimante) ou dont l'info est
 * inconnue (contract_expected ou under_contract === null, ex. NetSight pas
 * encore à jour). */
.nsr-equip-nocontract .nsr-equip-link {
  border: 1.5px solid #e0533d;
  background: #fdf1ef;
  padding: 2.5px 9px 2.5px 7px;
}
.nsr-contract-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 7.5pt;
  font-weight: 700;
  margin-left: 2px;
}
.nsr-contract-flag-none { color: #c0392b; }
.nsr-contract-flag-ok { color: #999; font-size: 8pt; }

.nsr-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.nsr-status-dot-sm { width: 8px; height: 8px; }
.nsr-status-online  { background: #2ecc71; }
.nsr-status-warning { background: #f39c12; }
.nsr-status-offline { background: #e74c3c; }
.nsr-status-unknown { background: #ccc; }

.nsr-alert {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 9.5pt;
}
.nsr-alert-msg { flex: 1; min-width: 160px; color: #333; }
.nsr-alert-date { font-size: 8pt; color: #999; }

/* Lien "Ticket <ID>" vers l'Atelier (§456 Step 8) — additif v1, alerte liée à un
   ticket DoliMIS. Nouvel onglet (cf. vue.netsight_resume.php) pour ne pas perdre
   la popup/page en cours. */
.nsr-alert-ticket {
  font-size: 8.5pt;
  color: #1a56b0;
  white-space: nowrap;
  text-decoration: none;
}
.nsr-alert-ticket:hover { text-decoration: underline; }
.nsr-alert-ticket .fa { margin-right: 3px; }

.nsr-contracts-line { font-size: 9.5pt; color: #444; }

.nsr-empty {
  color: #888;
  font-size: 9.5pt;
  padding: 6px 0;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .nsr-counters { grid-template-columns: repeat(3, 1fr); }
  .nsr-header { align-items: flex-start; }
  /* Le nom du client (min-width: 0) se faisait recouvrir par « Ouvrir dans NetSight » :
     il prend toute la ligne, les boutons passent dessous. */
  .nsr-header-main { flex-basis: 100%; }
  /* Le titre passe sur 3 lignes à cette largeur ; .html{text-align:center}
     (main.css) centre chaque ligne dans la boîte flex du h1, ce qui éloigne
     visuellement le texte de l'icône (pourtant bien centrée verticalement).
     Aligné à gauche, le texte démarre juste à côté de l'icône. */
  .ns-header h1 { text-align: left; }
}