/* Présentation Sipswitch : console d'administration dense et lisible.
   Chargée après le thème (theme-sipswitch.min.css, généré par tools/build-theme.py) et user.css. */

:root {
  --sw-gap: .75rem;
  --sw-text: #222834;
  --sw-muted: #6e7891;
  --sw-line: #e3e6ed;
}

body {
  font-size: .875rem;
  color: var(--sw-text);
}

/* ----- Fil d'Ariane (barre du haut) et en-tête de page : titre et actions sur une ligne ----- */
.sw-topbar-breadcrumb {
  padding-left: 1rem;
}
.sw-topbar-breadcrumb .breadcrumb {
  margin: 0;
  font-size: .8125rem;
}
.sw-topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--sw-muted);
}
.sw-topbar-breadcrumb .breadcrumb-item,
.sw-topbar-breadcrumb .breadcrumb a {
  color: var(--sw-muted);
  text-decoration: none;
}
.sw-topbar-breadcrumb .breadcrumb a:hover {
  color: var(--phoenix-primary);
}
.sw-topbar-breadcrumb .breadcrumb-item.active {
  color: var(--sw-text);
  font-weight: 600;
}
.page-header {
  margin-bottom: var(--sw-gap);
}
.page-header-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sw-text);
  margin: 0;
  line-height: 1.3;
}
.page-header-subtitle {
  color: var(--sw-muted);
  font-size: .8125rem;
}

/* ----- Une page = une carte (sw-sheet), avec ou sans onglets (sw-tabs) ----- */
.sw-sheet {
  background: #fff;
  border: 1px solid var(--sw-line);
  border-radius: .375rem;
}
.sw-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--sw-line);
  padding: 0 1rem;
}
.sw-tabs a {
  padding: .6rem 0 .5rem;
  margin-bottom: -1px;
  color: var(--sw-muted);
  font-weight: 600;
  font-size: .8125rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sw-tabs a:hover {
  color: var(--sw-text);
}
.sw-tabs a.active {
  color: var(--phoenix-primary);
  border-bottom-color: var(--phoenix-primary);
}
.sw-sheet-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* ----- Blocs d'une carte : sans cadre, titre sur un filet gris avec un accent bleu, espacés ----- */
.sw-card {
  height: 100%;
}
/* Plusieurs blocs empilés dans une colonne : hauteur naturelle */
.sw-card-row > [class*="col"] > .sw-card:not(:only-child) {
  height: auto;
}
.sw-card-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
  padding-bottom: .3rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--sw-line);
}
.sw-card-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  height: 2px;
  background: var(--phoenix-primary);
}
.sw-card-row {
  --phoenix-gutter-x: 3rem;
  --phoenix-gutter-y: 2rem;
}
.sw-card-row + .sw-card,
.sw-card + .sw-card,
.sw-card + .sw-card-row,
.sw-card-row + .sw-card-row {
  margin-top: 2rem;
}
.section-title {
  flex-grow: 1;
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--phoenix-primary);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Paramètres : libellé / valeur, l'un sous l'autre */
.sw-fields {
  width: 100%;
  font-size: .8125rem;
}
.sw-fields td {
  padding: .2rem 0;
  vertical-align: top;
}
.sw-fields td:first-child {
  color: var(--sw-muted);
  width: 1%;
  white-space: nowrap;
  padding-right: 2rem;
}
.sw-fields td:last-child {
  font-weight: 600;
}

/* Tableaux de données compacts */
.sw-table {
  width: 100%;
  font-size: .8125rem;
  margin: 0;
}
.sw-table > thead th {
  font-size: .75rem;
  font-weight: 600;
  color: #525b75;
  padding: .35rem .5rem;
  background: var(--phoenix-primary-soft, #f4f6fb);
  border-bottom: 1px solid #dfe5f2;
  vertical-align: bottom;
}
.sw-table > tbody td {
  padding: .3rem .5rem;
  border-bottom: 1px solid #f0f2f6;
  vertical-align: middle;
}
.sw-table > tbody tr:last-child td {
  border-bottom: 0;
}
.sw-table > tbody tr:hover td {
  background: #f7f9fc;
}
.sw-table > tbody tr.sw-row-match td {
  background: #e7f6e3;
}
.sw-table > tbody tr.sw-row-total td {
  border-top: 1px solid var(--sw-line);
  background: #f6f8fb;
}
/* Ligne d'en-tête d'un sous-ensemble (groupe de trunks d'une table de routage) */
.sw-table > tbody tr.sw-row-group td,
.sw-table > tbody tr.sw-row-group:hover td {
  background: #eef2f9;
  border-top: 1px solid #dfe5f2;
  border-bottom: 1px solid #dfe5f2;
}
/* Tableau sans retour à la ligne (listes longues, une ligne par élément) ; .text-wrap autorise une colonne */
.sw-table.sw-nowrap th,
.sw-table.sw-nowrap td {
  white-space: nowrap;
}
.sw-table.sw-nowrap .text-wrap {
  white-space: normal;
}
.sw-empty {
  color: var(--sw-muted);
  font-size: .8125rem;
}

/* Pastille d'état */
.sw-dot.bg-secondary {
  background-color: #b3bacb !important;
}
.sw-dot {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  vertical-align: middle;
}

/* Boutons d'action d'une ligne */
.sw-icon-btn {
  padding: .1rem .3rem;
  font-size: .8125rem;
  line-height: 1;
}

/* ----- Formulaires (fenêtres de modification) ----- */
.form-label {
  padding-left: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--sw-text);
  margin-bottom: .2rem;
  text-transform: none;
  letter-spacing: 0;
}
.form-control,
.form-select {
  padding-top: .3rem;
  padding-bottom: .3rem;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.4;
}
.form-control {
  padding-left: .6rem;
  padding-right: .6rem;
  color: var(--sw-text);
}
.form-select {
  padding-left: .6rem;
  background-position: right .6rem center;
}
.form-check-label {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--sw-text);
}
.form-text {
  font-size: .75rem;
}
.modal-header {
  padding: .6rem 1rem;
}
.modal-title {
  font-size: .9375rem;
  font-weight: 700;
}
.modal-body {
  padding: .9rem 1rem;
}
.modal-footer {
  padding: .5rem 1rem;
}
.modal .row.g-3 {
  --phoenix-gutter-y: .6rem;
  --phoenix-gutter-x: .75rem;
}
.btn {
  font-size: .8125rem;
}
.btn-sm {
  padding: .25rem .6rem;
  font-size: .75rem;
}

/* Formulaire en lignes : libellé à gauche, champ à droite à la largeur de son contenu */
.sw-form-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  align-items: center;
  gap: .75rem;
  padding: .3rem 0;
}
.sw-form-row > .form-label {
  margin: 0;
  padding-left: 0;
}
.sw-form-row + .sw-form-row {
  border-top: 1px solid #f0f2f6;
}
.sw-form-section {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sw-muted);
  margin: .75rem 0 .25rem;
}
.sw-form-section:first-child {
  margin-top: 0;
}
.sw-input-xs { max-width: 6rem; }
.sw-input-sm { max-width: 10rem; }
.sw-input-md { max-width: 18rem; }
.modal-footer .btn {
  padding: .35rem .9rem;
}

/* ----- Menu de gauche et barre du haut ----- */
.navbar-vertical .navbar-nav .nav-link {
  padding-top: .3rem;
  padding-bottom: .3rem;
  font-weight: 500;
  font-size: .8125rem;
}
.navbar-vertical .navbar-nav .nav-link.active {
  font-weight: 700;
}
.navbar-vertical .navbar-nav .nav .nav-link {
  font-size: .8125rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}


/* Carte ou onglet à un seul bloc : pas de titre (celui de la page ou de l'onglet suffit), barre
   d'outils : recherche ou filtres à gauche (me-auto), actions à droite */
.sw-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .25rem;
  margin-bottom: .75rem;
}

/* Formulaire sur deux colonnes (fenêtre large) : colonne des libellés plus étroite */
.sw-form-narrow .sw-form-row {
  grid-template-columns: 9.5rem 1fr;
}
.sw-form-narrow .sw-form-section:not(:first-child) {
  margin-top: 1rem;
}

/* Aperçu d'un fichier importé : grille de type tableur */
.sw-preview-table th,
.sw-preview-table td {
  padding: .15rem .4rem;
  border: 1px solid var(--sw-line);
}
.sw-preview-table th {
  background: #f6f8fb;
  color: var(--sw-muted);
}


/* Texte discret à droite d'un titre de bloc (heure de mise à jour…) */
.sw-card-meta {
  margin-left: auto;
  min-width: 0;
  color: var(--sw-muted);
  font-size: .75rem;
  text-align: right;
}

/* Tuiles de chiffres clés (tableau de bord) : sw-kpi-{primary|success|warning|danger|muted} */
.sw-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sw-gap);
}
.sw-kpi {
  --sw-kpi-color: var(--phoenix-primary);
  --sw-kpi-soft: var(--phoenix-primary-100);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 7.5rem;
  padding: .9rem 1rem .8rem;
  border: 1px solid var(--sw-line);
  border-radius: .5rem;
  background: #fff;
  color: var(--sw-text);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
a.sw-kpi:hover {
  color: var(--sw-text);
  box-shadow: 0 .25rem .75rem rgba(34, 40, 52, .08);
  transform: translateY(-1px);
}
.sw-kpi-success { --sw-kpi-color: var(--phoenix-success); --sw-kpi-soft: var(--phoenix-success-100); }
.sw-kpi-warning { --sw-kpi-color: var(--phoenix-warning); --sw-kpi-soft: var(--phoenix-warning-100); }
.sw-kpi-danger  { --sw-kpi-color: var(--phoenix-danger);  --sw-kpi-soft: var(--phoenix-danger-100); }
.sw-kpi-muted   { --sw-kpi-color: var(--phoenix-gray-500); --sw-kpi-soft: var(--phoenix-gray-100); }
.sw-kpi-danger {
  border-color: var(--phoenix-danger-200, var(--sw-line));
}
.sw-kpi-icon {
  position: absolute;
  top: 2.2rem;
  right: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--sw-kpi-soft);
  color: var(--sw-kpi-color);
}
.sw-kpi-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}
.sw-kpi-label {
  color: var(--sw-muted);
  font-size: .8rem;
  font-weight: 600;
}
.sw-kpi-value {
  margin-top: .35rem;
  padding-right: 2.75rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sw-kpi-warning .sw-kpi-value,
.sw-kpi-danger .sw-kpi-value {
  color: var(--sw-kpi-color);
}
.sw-kpi-muted .sw-kpi-value {
  color: var(--phoenix-gray-500);
}
.sw-kpi-sub {
  margin-top: auto;
  padding-top: .3rem;
  color: var(--sw-muted);
  font-size: .8rem;
}
/* Barre de proportion en bas de tuile */
.sw-kpi-bar {
  display: block;
  height: .3rem;
  margin-top: .45rem;
  border-radius: .15rem;
  background: var(--phoenix-gray-100);
  overflow: hidden;
}
.sw-kpi-bar > span {
  display: block;
  height: 100%;
}
.sw-kpis-3 {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
/* Deux blocs côte à côte sans la gouttière de .row (tableau de bord) */
.sw-card-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3rem;
}
@media (min-width: 1200px) {
  .sw-card-pair {
    grid-template-columns: 1fr 1fr;
  }
}
.sw-card-pair > .sw-card + .sw-card {
  margin-top: 0;
}

/* Journal des modifications : champs modifiés d'une entrée */
.sw-changes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sw-changes li {
  overflow-wrap: anywhere;
}
.sw-changes-more > summary {
  color: var(--phoenix-primary);
  cursor: pointer;
}
.sw-journal td {
  vertical-align: top;
}

/* Statistiques : filtre en lignes de champs étiquetés, tableaux à niveaux */
.sw-filter {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.sw-filter-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem 1rem;
}
.sw-filter-field {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  color: var(--sw-muted);
  font-size: .75rem;
  font-weight: 600;
}
.sw-notice {
  margin-bottom: .5rem;
  color: var(--phoenix-warning-text-emphasis, #bc3803);
  font-size: .8rem;
}
.sw-stats-table td.sw-level-1 { padding-left: 1.5rem; }
.sw-stats-table td.sw-level-2 { padding-left: 2.5rem; }
.sw-stats-table td.sw-level-3 { padding-left: 3.5rem; }
.sw-stats-table td.sw-level-4 { padding-left: 4.5rem; }
.sw-stats-table .sw-row-total td {
  font-weight: 700;
  border-bottom: 2px solid var(--sw-line);
}
.sw-stats-table .sw-share {
  width: 14rem;
}
.sw-filter .form-control,
.sw-filter .form-select {
  height: 1.95rem;
  min-height: 0;
  padding-top: .2rem;
  padding-bottom: .2rem;
}
/* Regroupements : listes de largeur fixe, côte à côte (pas de largeur 100 % de Bootstrap) */
.sw-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}
.sw-groups > select {
  flex: 0 0 auto;
  width: 10rem;
}

/* ----- Avatar utilisateur : initiales sur un rond de couleur (helper avatar()) ----- */
.sw-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  user-select: none;
}
.sw-avatar-m { width: 36px; height: 36px; font-size: .875rem; }
.sw-avatar-l { width: 56px; height: 56px; font-size: 1.25rem; }
.sw-avatar-c0 { background: #22609a; }
.sw-avatar-c1 { background: #4a90d9; }
.sw-avatar-c2 { background: #2f7d6d; }
.sw-avatar-c3 { background: #7a5ba6; }
.sw-avatar-c4 { background: #b5642d; }
.sw-avatar-c5 { background: #5c6b80; }

/* ----- Logos de la plateforme (déposés dans Plateforme > Logo et favicon, helper brand_url()) ----- */
.sw-brand-login { width: auto; height: auto; max-width: min(400px, 100%); max-height: 120px; }
.sw-brand-header { width: auto; height: auto; max-width: 170px; max-height: 40px; }
.sw-brand-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 140px;
  padding: .75rem;
  margin-bottom: .5rem;
  border: 1px solid var(--phoenix-gray-200, #e3e6ed);
  border-radius: .375rem;
  background: #fff;
}
.sw-brand-preview-favicon { align-items: flex-end; }
.sw-brand-preview-favicon figure { margin: 0; text-align: center; }
.sw-brand-preview-favicon figcaption { font-size: .75rem; color: var(--phoenix-gray-600, #6e7891); }
/* Charge : blocs CPS, canaux, refus séparés par un filet vertical, utilisation en barre */
.sw-load-table .sw-col-start {
  border-left: 1px solid #c9d3e6;
}
.sw-load-table > thead th.sw-th-group {
  text-align: center;
  color: var(--sw-text);
  border-bottom: 1px solid #c9d3e6;
}
.sw-load-table .sw-th-sub {
  font-weight: 400;
  color: var(--sw-muted);
}
.sw-load-table .sw-usage {
  width: 7.5rem;
  min-width: 7rem;
}
.sw-load-table .sw-usage-value {
  min-width: 2.8rem;
  text-align: right;
  white-space: nowrap;
}
/* Titres de colonnes et noms des objets sur une ligne (titre long coupé dans la vue) */
.sw-load-table > thead th {
  vertical-align: bottom;
  white-space: nowrap;
}
.sw-load-table > tbody td:first-child {
  white-space: nowrap;
}
/* Graphes : empilés, même largeur de tracé pour aligner les échelles de temps */
.sw-charts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sw-chart-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  border-bottom: 1px solid var(--sw-line);
  margin-bottom: .35rem;
}
.sw-chart-head .section-title {
  margin: 0;
}
.sw-chart-note {
  color: var(--sw-muted);
  font-size: .75rem;
}
.sw-chart-plot {
  width: 100%;
}
.sw-tip-head {
  font-weight: 600;
  margin-bottom: .2rem;
}
.sw-tip-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
}
.sw-tip-row b {
  margin-left: auto;
  padding-left: 1rem;
  font-weight: 600;
}
.sw-filter-checks {
  min-height: 1.95rem;
}

/* ----- Capacités : jauge pic / limite (vert, orange, rouge ; grise sans limite) ----- */
.sw-gauge {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 9rem;
}
.sw-gauge-bar {
  flex: 1 1 auto;
  height: .55rem;
  border-radius: .3rem;
  background: var(--phoenix-gray-100, #eff2f6);
  overflow: hidden;
}
.sw-gauge-bar > span {
  display: block;
  height: 100%;
  border-radius: .3rem;
}
.sw-gauge-ok .sw-gauge-bar > span { background: var(--phoenix-success); }
.sw-gauge-warning .sw-gauge-bar > span { background: var(--phoenix-warning); }
.sw-gauge-danger .sw-gauge-bar > span { background: var(--phoenix-danger); }
.sw-gauge-none .sw-gauge-bar {
  background: repeating-linear-gradient(45deg, var(--phoenix-gray-100, #eff2f6) 0 6px, #fff 6px 12px);
  border: 1px solid var(--sw-line);
}
.sw-gauge-text {
  flex: 0 0 8.5rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sw-gauge-danger .sw-gauge-text { color: var(--phoenix-danger); font-weight: 600; }
.sw-capacity-table .sw-capacity-col { width: 34%; }
.sw-capacity-table > tbody tr.sw-capacity-child td { border-bottom-color: #f6f7fa; }
.sw-capacity-table > tbody tr:not(.sw-capacity-child) td { background: #fafbfd; }
.sw-capacity-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: .5rem 3rem;
}
.sw-capacity-platform {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sw-capacity-platform > span:first-child { flex: 0 0 7.5rem; }
.sw-capacity-platform .sw-gauge { flex: 1 1 auto; }
/* Capacités : tableau croisé clients × fournisseurs (deux jauges compactes par case) */
.sw-capacity-matrix > tbody td { vertical-align: top; }
.sw-capacity-matrix .sw-gauge { min-width: 8rem; margin-bottom: .15rem; }
.sw-capacity-matrix .sw-gauge-text { flex-basis: 6.5rem; }
.sw-capacity-matrix td.sw-capacity-off { opacity: .55; }
.sw-capacity-balance > .sw-gauge { flex: 1 1 auto; }
/* Statistiques : nombres et noms sur une ligne (en-têtes seuls repliés) */
.sw-stats-table > tbody td { white-space: nowrap; }
/* Aide en plusieurs parties : intertitre discret (help-section) */
.help-popover .help-section {
  margin: .7rem 0 .3rem;
  color: var(--phoenix-gray-600, #6e7891);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.help-popover .help-section + ul,
.help-popover .help-section + p { margin-top: 0; }
/* Statistiques : rappel des filtres appliqués au-dessus du tableau */
.sw-filter-summary {
  margin-bottom: .5rem;
  color: var(--sw-text);
  font-size: .8125rem;
  font-weight: 600;
}
.sw-filter-summary .fas { color: var(--phoenix-primary); font-size: .75rem; }
.sw-level-tag { margin-left: .35rem; color: var(--sw-muted); font-size: .6875rem; font-weight: 400; }
