/* 25.07.2026 V1.0.0
   PROJET ADC-RDP
   CSS mini: (Bootstrap 5)
   adc-rdp/serveur/web/public/assets/css/style.css
   thème sombre du portail (surcouche locale sur Bootstrap 5)

   Liste des modifications faites :
   23.07.2026 Création (thème sombre compact 1920x1080)
   24.07.2026 Bug corrigé : tableau de diagnostics illisible (variable Bootstrap --bs-table-bg jamais surchargée)
*/

/* ADC-RDP — thème portail (Bootstrap 5 + surcouche locale) */

:root {
  --adc-bg: #0f1720;
  --adc-bg-alt: #141f2b;
  --adc-card: #182430;
  --adc-border: #24313f;
  --adc-accent: #3ddc97;
  --adc-accent-dark: #1fa876;
  --adc-text: #e6edf3;
  --adc-text-secondary: #93a4b3;
  --adc-danger: #ff5c5c;
  --adc-warning: #ffb84d;
}

html, body {
  height: 100%;
}
body {
  background-color: var(--adc-bg);
  color: var(--adc-text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 0.9rem;
}

.text-adc-accent { color: var(--adc-accent); }

/* Navbar */
.adc-navbar {
  background-color: var(--adc-bg-alt);
  border-bottom: 1px solid var(--adc-border);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.adc-navbar .nav-link {
  color: var(--adc-text-secondary);
}
.adc-navbar .nav-link:hover,
.adc-navbar .nav-link.active {
  color: var(--adc-accent);
}

/* Hero */
.adc-hero {
  background: radial-gradient(circle at top, #1a2b3a 0%, var(--adc-bg) 65%);
  border-bottom: 1px solid var(--adc-border);
}
.btn-adc-primary {
  background-color: var(--adc-accent);
  border-color: var(--adc-accent);
  color: #06231a;
  font-weight: 600;
}
.btn-adc-primary:hover,
.btn-adc-primary:focus {
  background-color: var(--adc-accent-dark);
  border-color: var(--adc-accent-dark);
  color: #06231a;
}

/* Cards */
.adc-card {
  /* Bootstrap fixe `color` sur `.card` via --bs-body-color (sombre), jamais
     surchargé par notre thème : sans ceci, tout texte non explicitement
     coloré dans une .adc-card devient quasi illisible sur le fond sombre
     de la carte (texte sombre sur fond sombre). Même piège que .adc-diag-table
     et .modal-content plus bas dans ce fichier. */
  color: var(--adc-text);
  background-color: var(--adc-card);
  border: 1px solid var(--adc-border);
  border-radius: 0.75rem;
}
.adc-card .text-secondary { color: var(--adc-text-secondary) !important; }

/* Miniatures illustratives en tête de colonne (photo Bureau/Serveur/Portable) */
.adc-column-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin: 0 auto 1.25rem;
}

.adc-column-photo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
}

/* Rangée compacte de 4 icônes d'état (colonne Serveur) : vert = OK, rouge = KO,
   détail complet fourni au survol via l'attribut title (tooltip Bootstrap). */
.adc-status-quad {
  display: flex;
  gap: 0.5rem;
}
.adc-status-quad-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.4rem;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  border: 1px solid var(--adc-border);
  background-color: var(--adc-card);
  color: var(--adc-text-secondary);
}
.adc-status-quad-item.ok {
  color: var(--adc-accent);
  border-color: rgba(61, 220, 151, 0.4);
  background-color: rgba(61, 220, 151, 0.1);
}
.adc-status-quad-item.error {
  color: var(--adc-danger);
  border-color: rgba(255, 92, 92, 0.4);
  background-color: rgba(255, 92, 92, 0.1);
}

.adc-icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(61, 220, 151, 0.12);
  color: var(--adc-accent);
  font-size: 1.05rem;
}

/* Status grid */
.adc-status-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--adc-text-secondary);
  margin-bottom: 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--adc-border);
  min-height: 3.15rem;
}
.adc-status-card {
  background-color: var(--adc-card);
  border: 1px solid var(--adc-border);
  border-radius: 0.6rem;
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 100%;
}
.adc-status-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.adc-status-icon.ok      { background: rgba(61, 220, 151, 0.15); color: var(--adc-accent); }
.adc-status-icon.warn    { background: rgba(255, 184, 77, 0.15); color: var(--adc-warning); }
.adc-status-icon.error   { background: rgba(255, 92, 92, 0.15); color: var(--adc-danger); }
.adc-status-icon.loading { background: rgba(147, 164, 179, 0.15); color: var(--adc-text-secondary); }

.adc-status-label {
  font-size: 0.68rem;
  color: var(--adc-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adc-status-value {
  font-weight: 600;
  font-size: 0.8rem;
}
.adc-status-value.ok    { color: var(--adc-accent); }
.adc-status-value.warn  { color: var(--adc-warning); }
.adc-status-value.error { color: var(--adc-danger); }

/* Shortcuts */
.adc-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.5rem;
  background-color: var(--adc-card);
  border: 1px solid var(--adc-border);
  border-radius: 0.6rem;
  color: var(--adc-text-secondary);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
  height: 100%;
}
.adc-shortcut i {
  font-size: 1.15rem;
  color: var(--adc-accent);
}
.adc-shortcut:hover {
  border-color: var(--adc-accent);
  color: var(--adc-text);
}
.adc-shortcut span {
  font-size: 0.75rem;
  font-weight: 600;
}
button.adc-shortcut {
  font-family: inherit;
  cursor: pointer;
}

/* Boutons de navigation (déclencheurs de modale) alignés sur les liens */
.adc-navbar .nav-link.btn.btn-link {
  text-decoration: none;
  box-shadow: none;
  font-weight: inherit;
}

/* Footer */
.adc-footer {
  border-top: 1px solid var(--adc-border);
  background-color: var(--adc-bg-alt);
  flex-shrink: 0;
}

code {
  color: var(--adc-accent);
  background: rgba(61, 220, 151, 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
}

/* Modales (thème sombre) */
.modal-content {
  background-color: var(--adc-card);
  border: 1px solid var(--adc-border);
  color: var(--adc-text);
}
.modal-header, .modal-footer {
  border-color: var(--adc-border);
}
.modal-backdrop.show {
  opacity: 0.7;
}
.adc-modal-form label {
  font-size: 0.8rem;
  color: var(--adc-text-secondary);
  margin-bottom: 0.2rem;
}
.form-control, .form-select {
  background-color: var(--adc-bg);
  border-color: var(--adc-border);
  color: var(--adc-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--adc-bg);
  color: var(--adc-text);
  border-color: var(--adc-accent);
  box-shadow: 0 0 0 0.2rem rgba(61, 220, 151, 0.2);
}
.form-control::placeholder { color: var(--adc-text-secondary); opacity: 0.7; }
.adc-token-display {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  word-break: break-all;
  background: var(--adc-bg);
  border: 1px dashed var(--adc-accent);
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
}
.adc-result-box {
  background: var(--adc-bg);
  border: 1px solid var(--adc-border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 0.85rem;
}
.adc-diag-table {
  /* Bootstrap fixe --bs-table-bg sur --bs-body-bg (blanc) par défaut, jamais
     surchargé par notre thème sombre : sans ceci, chaque cellule affichait un
     fond blanc avec un texte clair dessus — quasi invisible. */
  --bs-table-bg: transparent;
  --bs-table-color: var(--adc-text);
  --bs-table-border-color: var(--adc-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}
.adc-diag-table th, .adc-diag-table td {
  color: var(--adc-text);
  border-color: var(--adc-border);
  font-size: 0.85rem;
}