/* ==========================================================================
   SW Mailing — système d'interface

   Feuille unique, chargée après Bootstrap 5. Elle contient, dans cet ordre :

     1. les jetons  (couleurs, typographie, espacements, rayons)
     2. le réglage de Bootstrap par ses propres variables
     3. la coquille (barre du haut, menu de gauche, zone de contenu)
     4. les composants (carte, tableau, bouton, badge, formulaire, tuile,
        pastille, état vide, barre de progression, fenêtre, cadre de graphique)
     5. les classes héritées, conservées comme filet de sécurité

   Écrite à la main : le projet n'a pas d'outil de construction, cette feuille
   est servie telle quelle.

   Les couleurs viennent du logo SW : bleu cyan clair pour les accents vifs,
   bleu moyen pour les actions, bleu profond pour les textes forts. Le reste
   est neutre — l'interface reste blanche, les couleurs servent à distinguer,
   pas à décorer.
   ========================================================================== */

/* == 1. Jetons ============================================================ */

:root {
  /* Bleus du logo */
  --sw-cyan-400: #2eb3e6;
  --sw-blue-500: #1a80c2;
  --sw-blue-600: #16679f;
  --sw-blue-700: #124a80;
  --sw-blue-50:  #eef7fc;
  --sw-blue-100: #d9ecf8;

  /* Neutres */
  --sw-white:    #ffffff;
  --sw-gray-25:  #fbfcfd;
  --sw-gray-50:  #f7f8fa;
  --sw-gray-100: #f1f3f5;
  --sw-gray-200: #e6e9ed;
  --sw-gray-300: #d5dae0;
  --sw-gray-400: #aeb6c0;
  --sw-gray-500: #79838f;
  --sw-gray-600: #5b646f;
  --sw-gray-700: #3f4750;
  --sw-gray-900: #1c2126;

  /* États */
  --sw-green-600: #1c8a4d;
  --sw-green-50:  #eaf7ef;
  --sw-amber-600: #9a6a10;
  --sw-amber-50:  #fdf5e6;
  --sw-red-600:   #c0392b;
  --sw-red-50:    #fdefed;

  /* Rôles */
  --sw-bg:        var(--sw-gray-50);
  --sw-surface:   var(--sw-white);
  --sw-border:    var(--sw-gray-200);
  --sw-border-strong: var(--sw-gray-300);
  --sw-text:      var(--sw-gray-900);
  --sw-text-soft: var(--sw-gray-600);
  --sw-muted:     var(--sw-gray-500);
  --sw-primary:   var(--sw-blue-500);
  --sw-primary-dark: var(--sw-blue-600);

  /* Formes et rythme */
  --sw-radius:    6px;
  --sw-radius-sm: 4px;
  --sw-radius-lg: 8px;
  --sw-shadow:    0 1px 2px rgba(28, 33, 38, .05);
  --sw-shadow-lg: 0 8px 28px rgba(28, 33, 38, .14);
  --sw-sidebar-w: 232px;
  --sw-topbar-h:  56px;

  /* Typographie */
  --sw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --sw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;
}

/* == 2. Réglage de Bootstrap ============================================== */

/* Bootstrap lit ses propres variables : les redéfinir suffit à teinter
   l'ensemble de ses composants, sans réécrire ses règles. */
:root {
  --bs-body-font-family: var(--sw-font);
  --bs-body-font-size: .875rem;      /* 14 px */
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--sw-text);
  --bs-body-bg: var(--sw-bg);
  --bs-border-color: var(--sw-border);
  --bs-border-radius: var(--sw-radius);
  --bs-border-radius-sm: var(--sw-radius-sm);
  --bs-border-radius-lg: var(--sw-radius-lg);
  --bs-primary: var(--sw-primary);
  --bs-primary-rgb: 26, 128, 194;
  --bs-link-color: var(--sw-primary);
  --bs-link-color-rgb: 26, 128, 194;
  --bs-link-hover-color: var(--sw-primary-dark);
  --bs-link-hover-color-rgb: 22, 103, 159;
  --bs-emphasis-color: var(--sw-gray-900);
  --bs-secondary-color: var(--sw-text-soft);
  --bs-tertiary-color: var(--sw-muted);
  --bs-focus-ring-color: rgba(26, 128, 194, .2);
  --bs-focus-ring-width: 3px;
}

body {
  /* Outil de bureau : l'interface n'est pas prévue en dessous de 1100 px.
     Ce plancher évite un empilement dégradé plutôt que de le styler. */
  min-width: 1100px;
  -webkit-font-smoothing: antialiased;
}

/* == 3. Coquille ========================================================== */

.sw-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  height: var(--sw-topbar-h);
  padding: 0 20px;
  background: var(--sw-surface);
  border-bottom: 1px solid var(--sw-border);
}

.sw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sw-gray-900);
}

.sw-brand:hover { color: var(--sw-gray-900); }
.sw-brand img { height: 22px; width: auto; display: block; }

.sw-brand span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--sw-gray-600);
  padding-left: 10px;
  border-left: 1px solid var(--sw-border);
}

.sw-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Sélecteur de client : un menu, pas une liste déroulante native, pour
   afficher le client courant et le libellé « Tous ». */
.sw-customer > .btn {
  font-weight: 500;
  color: var(--sw-gray-700);
  background: var(--sw-white);
  border-color: var(--sw-border-strong);
}

.sw-customer .dropdown-menu {
  min-width: 240px;
  padding: 6px;
  border-color: var(--sw-border);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-lg);
}

.sw-customer .dropdown-header {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sw-muted);
}

.sw-customer .dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--sw-radius-sm);
  font-size: 13.5px;
  color: var(--sw-gray-700);
}

.sw-customer .dropdown-item:hover { background: var(--sw-gray-100); }

.sw-customer .dropdown-item.active {
  background: var(--sw-blue-50);
  color: var(--sw-primary-dark);
  font-weight: 500;
}

.sw-customer .dropdown-item .zmdi { color: var(--sw-gray-400); font-size: 16px; }
.sw-customer .dropdown-item.active .zmdi { color: var(--sw-primary); }

.sw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--sw-radius);
  background: transparent;
  color: var(--sw-gray-500);
  font-size: 18px;
  text-decoration: none;
  transition: background-color .12s, color .12s;
}

.sw-icon-btn:hover {
  background: var(--sw-gray-100);
  color: var(--sw-gray-700);
}

.sw-sidebar {
  position: fixed;
  top: var(--sw-topbar-h);
  bottom: 0;
  left: 0;
  z-index: 1020;
  width: var(--sw-sidebar-w);
  padding: 14px 12px;
  overflow-y: auto;
  background: var(--sw-surface);
  border-right: 1px solid var(--sw-border);
}

.sw-nav { list-style: none; margin: 0; padding: 0; }
.sw-nav li + li { margin-top: 2px; }

.sw-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--sw-radius);
  font-size: 13.5px;
  color: var(--sw-gray-700);
  text-decoration: none;
  transition: background-color .12s, color .12s;
}

.sw-nav a:hover { background: var(--sw-gray-100); color: var(--sw-gray-900); }

.sw-nav a .zmdi {
  font-size: 17px;
  color: var(--sw-gray-400);
  width: 18px;
  text-align: center;
  transition: color .12s;
}

.sw-nav a:hover .zmdi { color: var(--sw-gray-600); }

.sw-nav li.active > a {
  background: var(--sw-blue-50);
  color: var(--sw-primary-dark);
  font-weight: 500;
}

.sw-nav li.active > a .zmdi { color: var(--sw-primary); }

.sw-nav-group {
  margin: 18px 0 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sw-gray-400);
}

.sw-main {
  margin-left: var(--sw-sidebar-w);
  padding: 24px 28px 56px;
  min-height: calc(100vh - var(--sw-topbar-h));
  margin-top: var(--sw-topbar-h);
  background: var(--sw-bg);
}

.sw-container { max-width: 1480px; }

/* En-tête d'écran : titre à gauche, actions à droite. */
.sw-page-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.sw-page-head h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--sw-gray-900);
}

.sw-page-head .sw-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--sw-muted);
}

.sw-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* == 4. Composants ======================================================== */

/* --- Carte --------------------------------------------------------------- */

.sw-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow);
  margin-bottom: 20px;
}

.sw-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--sw-border);
}

.sw-card-head h2,
.sw-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sw-gray-900);
}

.sw-card-head .sw-card-note {
  font-size: 12.5px;
  color: var(--sw-muted);
}

.sw-card-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.sw-card-body { padding: 18px; }
.sw-card-body > :last-child { margin-bottom: 0; }

/* Un tableau occupe la carte entière, sans double remplissage. */
.sw-card-table { padding: 0; }
.sw-card-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--sw-border);
  background: var(--sw-gray-25);
  border-radius: 0 0 var(--sw-radius-lg) var(--sw-radius-lg);
  font-size: 13px;
  color: var(--sw-text-soft);
}

/* --- Tableau ------------------------------------------------------------- */

.sw-table-wrap { overflow-x: auto; }

.sw-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--sw-gray-700);
}

.sw-table th {
  padding: 9px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sw-muted);
  background: var(--sw-gray-25);
  border-bottom: 1px solid var(--sw-border);
  white-space: nowrap;
}

.sw-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--sw-gray-100);
  vertical-align: middle;
}

.sw-table tbody tr:last-child td { border-bottom: 0; }
.sw-table tbody tr:hover td { background: var(--sw-gray-25); }

/* Les liens de texte d'un tableau prennent la couleur d'action ; les boutons
   qui s'y trouvent gardent la leur — sans le :not(), ce sélecteur, plus
   spécifique que .btn, repeignait toutes les actions de ligne en bleu. */
.sw-table a:not(.btn) { color: var(--sw-primary); text-decoration: none; }
.sw-table a:not(.btn):hover { text-decoration: underline; }

.sw-table .sw-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sw-table .sw-actions {
  text-align: right;
  white-space: nowrap;
}

.sw-table .sw-strong { font-weight: 500; color: var(--sw-gray-900); }
.sw-table .sw-soft { color: var(--sw-muted); }
.sw-table-fixed { table-layout: fixed; }

/* Une cellule qui porte une URL longue se coupe au lieu d'élargir le tableau. */
.sw-break { word-break: break-all; }

/* --- Bouton -------------------------------------------------------------- */

/* Bootstrap fournit .btn ; on n'en règle que le ton et la densité. */
.btn {
  --bs-btn-padding-y: .375rem;
  --bs-btn-padding-x: .8rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--sw-radius);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn .zmdi { font-size: 15px; }

.btn-primary {
  --bs-btn-bg: var(--sw-primary);
  --bs-btn-border-color: var(--sw-primary);
  --bs-btn-hover-bg: var(--sw-primary-dark);
  --bs-btn-hover-border-color: var(--sw-primary-dark);
  --bs-btn-active-bg: var(--sw-blue-700);
  --bs-btn-active-border-color: var(--sw-blue-700);
  --bs-btn-disabled-bg: var(--sw-gray-300);
  --bs-btn-disabled-border-color: var(--sw-gray-300);
}

/* Bouton neutre : c'est le bouton par défaut de l'interface. */
.btn-secondary,
.btn-default {
  --bs-btn-color: var(--sw-gray-700);
  --bs-btn-bg: var(--sw-white);
  --bs-btn-border-color: var(--sw-border-strong);
  --bs-btn-hover-color: var(--sw-gray-900);
  --bs-btn-hover-bg: var(--sw-gray-50);
  --bs-btn-hover-border-color: var(--sw-gray-400);
  --bs-btn-active-color: var(--sw-gray-900);
  --bs-btn-active-bg: var(--sw-gray-100);
  --bs-btn-active-border-color: var(--sw-gray-400);
}

.btn-danger {
  --bs-btn-bg: var(--sw-red-600);
  --bs-btn-border-color: var(--sw-red-600);
  --bs-btn-hover-bg: #a53024;
  --bs-btn-hover-border-color: #a53024;
}

/* Bouton d'action discrète, dans une ligne de tableau. */
.btn-ghost {
  --bs-btn-color: var(--sw-gray-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--sw-gray-900);
  --bs-btn-hover-bg: var(--sw-gray-100);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-padding-x: .5rem;
}

.btn-ghost-danger {
  --bs-btn-color: var(--sw-gray-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--sw-red-600);
  --bs-btn-hover-bg: var(--sw-red-50);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-padding-x: .5rem;
}

.btn-sm {
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .6rem;
  --bs-btn-font-size: .75rem;
}

/* --- Formulaire ---------------------------------------------------------- */

.form-control,
.form-select {
  --bs-border-color: var(--sw-border-strong);
  font-size: .8125rem;
  padding: .4rem .625rem;
  color: var(--sw-gray-900);
  border-radius: var(--sw-radius);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sw-primary);
  box-shadow: 0 0 0 3px rgba(26, 128, 194, .15);
}

.form-control::placeholder { color: var(--sw-gray-400); }
textarea.form-control { line-height: 1.6; }

.form-label {
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sw-text-soft);
}

.form-text { font-size: 12px; color: var(--sw-muted); }

.form-check-input {
  border-color: var(--sw-border-strong);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--sw-primary);
  border-color: var(--sw-primary);
}

.form-check-input:focus {
  border-color: var(--sw-primary);
  box-shadow: 0 0 0 3px rgba(26, 128, 194, .15);
}

.form-check-label { font-size: 13px; color: var(--sw-gray-700); cursor: pointer; }

/* Ligne de formulaire : libellé au-dessus du champ, espacement constant. */
.sw-field { margin-bottom: 14px; }
.sw-field:last-child { margin-bottom: 0; }

.sw-field > label,
.sw-field > .form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sw-text-soft);
}

/* Barre de filtres au-dessus d'un tableau. */
.sw-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.sw-filters .sw-field { margin-bottom: 0; }
.sw-filters .form-control,
.sw-filters .form-select { min-width: 150px; }

/* --- Pastille de statut -------------------------------------------------- */

.sw-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: 20px;
  background: var(--sw-gray-100);
  color: var(--sw-gray-600);
}

.sw-badge-success { background: var(--sw-green-50); color: var(--sw-green-600); }
.sw-badge-warning { background: var(--sw-amber-50); color: var(--sw-amber-600); }
.sw-badge-danger  { background: var(--sw-red-50);   color: var(--sw-red-600); }
.sw-badge-info    { background: var(--sw-blue-50);  color: var(--sw-blue-600); }

/* --- Message de retour --------------------------------------------------- */

.sw-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--sw-gray-700);
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-left: 3px solid var(--sw-gray-400);
  border-radius: var(--sw-radius);
}

.sw-alert .zmdi { font-size: 17px; line-height: 1.4; }

.sw-alert-success { border-left-color: var(--sw-green-600); background: var(--sw-green-50); }
.sw-alert-success .zmdi { color: var(--sw-green-600); }
.sw-alert-error   { border-left-color: var(--sw-red-600);   background: var(--sw-red-50); }
.sw-alert-error .zmdi { color: var(--sw-red-600); }
.sw-alert-infos   { border-left-color: var(--sw-primary);   background: var(--sw-blue-50); }
.sw-alert-infos .zmdi { color: var(--sw-primary); }

/* --- Tuile de chiffre ---------------------------------------------------- */

.sw-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.sw-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sw-stat {
  padding: 15px 17px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow);
}

.sw-stat-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sw-muted);
}

.sw-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--sw-gray-900);
  font-variant-numeric: tabular-nums;
}

.sw-stat-unit { font-size: 13px; font-weight: 400; color: var(--sw-muted); }

.sw-stat-hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--sw-muted);
}

/* --- État vide ----------------------------------------------------------- */

.sw-empty {
  padding: 44px 24px;
  text-align: center;
  color: var(--sw-muted);
  font-size: 13.5px;
}

.sw-empty .zmdi {
  display: block;
  margin-bottom: 10px;
  font-size: 34px;
  color: var(--sw-gray-300);
}

.sw-empty strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sw-gray-700);
}

/* --- Barre de progression ------------------------------------------------ */

.sw-progress {
  height: 6px;
  overflow: hidden;
  background: var(--sw-gray-200);
  border-radius: 20px;
}

.sw-progress-fill {
  height: 100%;
  background: var(--sw-primary);
  border-radius: 20px;
  transition: width .3s ease;
}

/* --- Cadre de graphique -------------------------------------------------- */

.sw-chart {
  position: relative;
  width: 100%;
  height: 260px;
}

.sw-chart canvas { display: block; }

.sw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sw-gray-700);
}

.sw-legend .sw-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.sw-legend .sw-legend-value {
  margin-left: auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Légende empilée : une ligne par part, valeur alignée à droite. */
.sw-legend-stack {
  display: block;
  margin-top: 14px;
}

.sw-legend-stack li { padding: 6px 0; }
.sw-legend-stack li + li { border-top: 1px solid var(--sw-gray-100); }

/* Barre de répartition : trois parts d'un même total. Le fond en couleur de
   surface laisse un jour de 2 px entre deux parts, qui les sépare sans trait. */
.sw-split {
  display: flex;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  background: var(--sw-gray-100);
  border-radius: 20px;
}

.sw-split-part { display: block; height: 100%; min-width: 3px; }
.sw-split-part:first-child { border-radius: 20px 0 0 20px; }
.sw-split-part:last-child { border-radius: 0 20px 20px 0; }
.sw-split-part:only-child { border-radius: 20px; }

/* Table de repli d'un graphique : les valeurs restent accessibles au clavier
   et à la lecture d'écran, sans encombrer l'écran. */
.sw-chart-data { margin-top: 14px; }

.sw-chart-data > summary {
  /* display:inline-block escamote le marqueur du navigateur : on garde
     list-item pour que le triangle d'ouverture reste visible. */
  display: list-item;
  width: fit-content;
  font-size: 12.5px;
  color: var(--sw-text-soft);
  cursor: pointer;
}

.sw-chart-data > summary:hover { color: var(--sw-gray-900); }

/* Liste « libellé / valeur » d'un panneau de statistiques. */
.sw-kv { margin: 0; }

.sw-kv-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sw-gray-100);
  font-size: 13px;
}

.sw-kv-row:last-child { border-bottom: 0; }
.sw-kv-row:first-child { padding-top: 0; }

.sw-kv-label { color: var(--sw-text-soft); }

.sw-kv-value {
  margin-left: auto;
  font-weight: 600;
  color: var(--sw-gray-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sw-kv-sub { font-size: 12px; font-weight: 400; color: var(--sw-muted); }

/* Un lien qui ouvre un détail sous la page. */
.sw-drill {
  cursor: pointer;
  color: var(--sw-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--sw-gray-300);
}

.sw-drill:hover { color: var(--sw-primary-dark); border-bottom-style: solid; }

/* --- Onglets ------------------------------------------------------------- */

.sw-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: -1px;
  padding: 0 6px;
  list-style: none;
  border-bottom: 1px solid var(--sw-border);
}

.sw-tabs a {
  display: block;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sw-text-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.sw-tabs a:hover { color: var(--sw-gray-900); }

.sw-tabs li.active a {
  color: var(--sw-primary-dark);
  border-bottom-color: var(--sw-primary);
}

/* --- Index alphabétique -------------------------------------------------- */

.sw-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sw-border);
}

.sw-alpha a {
  min-width: 26px;
  padding: 3px 6px;
  font-size: 12.5px;
  text-align: center;
  color: var(--sw-text-soft);
  text-decoration: none;
  border-radius: var(--sw-radius-sm);
}

.sw-alpha a:hover { background: var(--sw-gray-100); color: var(--sw-gray-900); }

.sw-alpha a.active {
  font-weight: 600;
  color: var(--sw-primary-dark);
  background: var(--sw-blue-50);
}

/* --- Jeu de statuts sur une ligne ---------------------------------------- */

/* Le statut courant est une pastille ; les autres sont cliquables et prennent
   la couleur de leur statut au survol. */
.sw-status-set { display: flex; flex-wrap: wrap; gap: 4px; }

.sw-badge-action {
  color: var(--sw-gray-500);
  background: transparent;
  border: 1px dashed var(--sw-gray-300);
  text-decoration: none;
  cursor: pointer;
}

.sw-badge-action:hover {
  color: var(--sw-primary-dark);
  background: var(--sw-blue-50);
  border-color: var(--sw-blue-100);
  border-style: solid;
}

/* --- Pagination ---------------------------------------------------------- */

.sw-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.sw-pager a,
.sw-pager span {
  display: inline-block;
  min-width: 28px;
  padding: 4px 7px;
  font-size: 12.5px;
  text-align: center;
  color: var(--sw-gray-700);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--sw-radius-sm);
}

.sw-pager a:hover { background: var(--sw-gray-100); }

.sw-pager .active {
  font-weight: 600;
  color: var(--sw-primary-dark);
  background: var(--sw-blue-50);
  border-color: var(--sw-blue-100);
}

/* --- Fenêtre de confirmation --------------------------------------------- */

/* Les noms de classe sont ceux qu'attend assets/js/app.js : ne pas les
   renommer sans changer ce script. */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 33, 38, .5);
}

.app-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 26px 28px;
  background: var(--sw-surface);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow-lg);
}

.app-modal-body { font-size: 13.5px; color: var(--sw-gray-700); text-align: center; }
.app-modal-body p { margin: 0 0 16px; line-height: 1.6; }
.app-modal-body form { margin: 0; }

.app-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--sw-muted);
  background: transparent;
  border: 0;
  border-radius: var(--sw-radius-sm);
  cursor: pointer;
}

.app-modal-close:hover { color: var(--sw-gray-900); background: var(--sw-gray-100); }

/* --- Utilitaires du projet ----------------------------------------------- */

.sw-mono { font-family: var(--sw-font-mono); font-size: 12.5px; }
.sw-xs { font-size: 12px; }
.sw-select-auto { width: auto; }

/* Un champ de recherche occupe la place restante d'une barre de filtres. */
.sw-field-grow { flex: 1; min-width: 260px; }

/* Une pastille qui est aussi un lien : elle ne prend pas le soulignement des
   liens de tableau. */
.sw-badge-link { text-decoration: none; }
.sw-badge-link:hover { text-decoration: none; filter: brightness(.96); }
.sw-nowrap { white-space: nowrap; }
.sw-muted { color: var(--sw-muted); }
.sw-soft { color: var(--sw-text-soft); }
.sw-section-title {
  margin: 26px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sw-gray-900);
}
.sw-section-title:first-child { margin-top: 0; }

/* --- Écran de connexion -------------------------------------------------- */

/* Page autonome : elle ne charge pas la coquille, et n'a donc pas de plancher
   de largeur à respecter. */
body.sw-login {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--sw-gray-50);
}

.sw-login-panel {
  width: 100%;
  max-width: 380px;
  padding: 32px 34px 26px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  box-shadow: 0 2px 12px rgba(28, 33, 38, .06);
}

.sw-login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  text-decoration: none;
}

.sw-login-brand img { height: 30px; width: auto; display: block; }

.sw-login-brand span {
  padding-left: 11px;
  border-left: 1px solid var(--sw-border);
  font-size: 16px;
  font-weight: 500;
  color: var(--sw-gray-600);
}

.sw-login-panel h1 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--sw-gray-900);
}

.sw-login-intro {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sw-muted);
}

.sw-login-panel .sw-field { margin-bottom: 16px; }
.sw-login-panel .form-control { padding: .5rem .7rem; font-size: 14px; }

.sw-login-submit {
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .875rem;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.sw-login-foot {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sw-border);
  font-size: 12.5px;
  text-align: center;
}

.sw-login-foot a { color: var(--sw-muted); text-decoration: none; }
.sw-login-foot a:hover { color: var(--sw-primary); }

/* == 5. Classes héritées ================================================== */

/* Ces classes viennent de l'ancienne feuille style.css et restent employées
   par du balisage que la refonte n'a pas repris. Elles sont redirigées vers
   l'apparence des composants ci-dessus : un écran oublié reste présentable.
   À retirer quand plus aucune vue ne les emploie. */

.styleTab {
  width: 100%;
  margin: 0 0 20px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--sw-gray-700);
}

.styleTab th {
  padding: 9px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sw-muted);
  background: var(--sw-gray-25);
  border-bottom: 1px solid var(--sw-border);
  white-space: nowrap;
}

.styleTab td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--sw-gray-100);
  vertical-align: middle;
}

.styleTab tr:last-child td { border-bottom: 0; }
.styleTab tr:hover td { background: var(--sw-gray-25); }
.styleTab a:not(.btn) { color: var(--sw-primary); text-decoration: none; }
.styleTab a:not(.btn):hover { text-decoration: underline; }

input.text, textarea.text, select.text {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: .4rem .625rem;
  font-size: 13px;
  color: var(--sw-gray-900);
  background: var(--sw-white);
  border: 1px solid var(--sw-border-strong);
  border-radius: var(--sw-radius);
}

input.text:focus, textarea.text:focus, select.text:focus {
  outline: 0;
  border-color: var(--sw-primary);
  box-shadow: 0 0 0 3px rgba(26, 128, 194, .15);
}

input.button, button.button, a.button {
  display: inline-block;
  padding: .375rem .8rem;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--sw-primary);
  border: 1px solid transparent;
  border-radius: var(--sw-radius);
  cursor: pointer;
  text-decoration: none;
}

input.button:hover, button.button:hover, a.button:hover {
  background: var(--sw-primary-dark);
  color: #fff;
}

.message {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--sw-gray-700);
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-left: 3px solid var(--sw-gray-400);
  border-radius: var(--sw-radius);
}

.message-success { border-left-color: var(--sw-green-600); background: var(--sw-green-50); }
.message-error   { border-left-color: var(--sw-red-600);   background: var(--sw-red-50); }
.message-infos   { border-left-color: var(--sw-primary);   background: var(--sw-blue-50); }

.boxForm {
  padding: 18px;
  margin-bottom: 20px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow);
}

.statsHome {
  box-sizing: border-box;
  padding: 15px 17px;
  margin-bottom: 14px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow);
  font-size: 24px;
  font-weight: 600;
  color: var(--sw-gray-900);
  font-variant-numeric: tabular-nums;
}

.statsHome span {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 500;
  font-style: normal;
  color: var(--sw-muted);
}

.mailing {
  padding: 15px 18px;
  margin-bottom: 10px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  cursor: pointer;
}

.mailing:hover { border-color: var(--sw-border-strong); box-shadow: var(--sw-shadow); }
.mailing .sendInfos { margin: 0; font-size: 13px; color: var(--sw-muted); }

.loadInfos, .updateStatus { cursor: pointer; color: var(--sw-primary); }
.loadInfos:hover, .updateStatus:hover { text-decoration: underline; }

.app-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 20px;
  background: var(--sw-gray-100);
  color: var(--sw-gray-600);
}

.app-badge-success { background: var(--sw-green-50); color: var(--sw-green-600); }
.app-badge-warning { background: var(--sw-amber-50); color: var(--sw-amber-600); }
.app-badge-danger  { background: var(--sw-red-50);   color: var(--sw-red-600); }
.app-badge-info    { background: var(--sw-blue-50);  color: var(--sw-blue-600); }

.app-empty { padding: 44px 24px; text-align: center; color: var(--sw-muted); font-size: 13.5px; }
.app-empty .zmdi { display: block; font-size: 34px; margin-bottom: 10px; color: var(--sw-gray-300); }
.app-empty strong { display: block; color: var(--sw-gray-700); font-size: 14px; margin-bottom: 5px; }

.app-bar { height: 6px; background: var(--sw-gray-200); border-radius: 20px; overflow: hidden; }
.app-bar-fill { height: 100%; background: var(--sw-primary); border-radius: 20px; transition: width .3s ease; }