/* =============================================================================
   components.css
   Composants UI réutilisables : boutons, cards, badges, tables, alertes, forms.
   IMPORTE : tokens.css
   RÈGLE : chaque composant est autonome (pas de dépendance à d'autres classes).
           Pas de styles de mise en page ici (margins, positions).
   ============================================================================= */


/* ---------------------------------------------------------------------------
   BOUTONS
--------------------------------------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-4);
  border-radius:   var(--radius-md);
  font-size:       var(--text-sm);
  font-weight:     var(--font-medium);
  font-family:     var(--font-sans);
  line-height:     1.5;
  white-space:     nowrap;
  cursor:          pointer;
  border:          var(--border-width) solid transparent;
  text-decoration: none;
  transition:      background    var(--transition-fast),
                   border-color  var(--transition-fast),
                   color         var(--transition-fast),
                   box-shadow    var(--transition-fast),
                   opacity       var(--transition-fast);
  user-select:     none;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor:  not-allowed;
  pointer-events: none;
}

.btn:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Variants */
.btn-primary {
  background:   var(--color-primary);
  color:        #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background:   var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color:        #fff;
  text-decoration: none;
}

.btn-secondary {
  background:   var(--color-surface);
  color:        var(--color-text-main);
  border-color: var(--color-border-strong);
  box-shadow:   var(--shadow-xs);
}
.btn-secondary:hover {
  background:   var(--color-primary-alpha-06);
  border-color: var(--color-primary);
  color:        var(--color-primary);
  text-decoration: none;
}

.btn-ghost {
  background:   transparent;
  color:        var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-bg);
  color:      var(--color-text-main);
  text-decoration: none;
}

.btn-danger {
  background:   var(--color-danger);
  color:        #fff;
  border-color: var(--color-danger);
}
.btn-danger:hover {
  background:   var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color:        #fff;
  text-decoration: none;
}

.btn-danger-ghost {
  background:   transparent;
  color:        var(--color-danger);
  border-color: transparent;
}
.btn-danger-ghost:hover {
  background:   var(--color-danger-bg);
  border-color: transparent;
  text-decoration: none;
}

.btn-outline {
  background:   var(--color-surface);
  color:        var(--color-text-muted);
  border-color: var(--color-border-strong);
}
.btn-outline:hover {
  background:   var(--color-primary-alpha-08);
  border-color: var(--color-primary);
  color:        var(--color-primary);
  text-decoration: none;
}

.btn-outline-danger {
  background:   var(--color-surface);
  color:        var(--color-danger);
  border-color: var(--color-danger-border);
}
.btn-outline-danger:hover {
  background:   var(--color-danger-bg);
  border-color: var(--color-danger);
  color:        var(--color-danger-hover);
  text-decoration: none;
}

/* Tailles */
.btn-xs {
  padding:     var(--space-1) var(--space-2);
  font-size:   var(--text-xs);
  gap:         var(--space-1);
}

.btn-sm {
  padding:   6px var(--space-3);
  font-size: var(--text-sm);
}

.btn-lg {
  padding:   var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* Icône seule */
.btn-icon {
  width:   36px;
  height:  36px;
  padding: 0;
}

.btn-icon.btn-sm {
  width:  30px;
  height: 30px;
}

/* Loading spinner */
.btn.is-loading {
  pointer-events: none;
  position:       relative;
  color:          transparent;
}

.btn.is-loading::after {
  content:       '';
  position:      absolute;
  width:         14px;
  height:        14px;
  border:        2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation:     spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Groupe de boutons */
.btn-group {
  display:  inline-flex;
  gap:      0;
}

.btn-group .btn {
  border-radius: 0;
  border-right-width: 0;
}

.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-right-width: var(--border-width); }


/* ---------------------------------------------------------------------------
   BADGES & STATUS
--------------------------------------------------------------------------- */
.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  padding:         2px var(--space-2);
  border-radius:   var(--radius-full);
  font-size:       var(--text-xs);
  font-weight:     var(--font-semi);
  white-space:     nowrap;
  border:          var(--border-width) solid transparent;
}

.badge-ok,
.badge-success {
  background:   var(--status-ok-bg);
  color:        var(--status-ok-color);
  border-color: var(--status-ok-border);
}

.badge-ko,
.badge-danger {
  background:   var(--status-ko-bg);
  color:        var(--status-ko-color);
  border-color: var(--status-ko-border);
}

.badge-warn,
.badge-warning {
  background:   var(--status-warn-bg);
  color:        var(--status-warn-color);
  border-color: var(--status-warn-border);
}

.badge-skip,
.badge-muted {
  background:   var(--status-skip-bg);
  color:        var(--status-skip-color);
  border-color: var(--status-skip-border);
}

.badge-pending,
.badge-info {
  background:   var(--status-pending-bg);
  color:        var(--status-pending-color);
  border-color: var(--status-pending-border);
}

.badge-primary {
  background:   var(--color-primary-light);
  color:        var(--color-primary-dark);
  border-color: var(--color-primary-light);
}

/* Dot indicateur */
.badge::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: var(--radius-full);
  background:    currentColor;
  flex-shrink:   0;
}

.badge.no-dot::before {
  display: none;
}


/* ---------------------------------------------------------------------------
   CARDS
--------------------------------------------------------------------------- */
.card {
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-sm);
  width: 100%;
}

.card-header {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        var(--space-5) var(--space-6);
  border-bottom:  var(--border-width) solid var(--color-border);
}

.card-title {
  font-size:   var(--text-base);
  font-weight: var(--font-semi);
  color:       var(--color-text-main);
}

.card-subtitle {
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  margin-top: var(--space-1);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding:       var(--space-4) var(--space-6);
  border-top:    var(--border-width) solid var(--color-border);
  background:    var(--color-bg);
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

/* Stat card */
.stat-card {
  background:    var(--color-surface);
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-5) var(--space-6);
  box-shadow:    var(--shadow-sm);
  position:      relative;
  overflow:      hidden;
}

.stat-card__accent {
  position:    absolute;
  left:        0;
  top:         20%;
  bottom:      20%;
  width:       4px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.stat-card__label {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
}

.stat-card__value {
  font-size:   var(--text-3xl);
  font-weight: var(--font-bold);
  color:       var(--color-text-main);
  line-height: 1;
}

.stat-card__sub {
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  margin-top: var(--space-2);
}





/* ---------------------------------------------------------------------------
   FORMULAIRES
--------------------------------------------------------------------------- */
.form-group {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
}

.form-label {
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
  color:       var(--color-text-main);
}

.form-label.required::after {
  content: ' *';
  color:   var(--color-danger);
}

.form-hint {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
}

.form-error {
  font-size: var(--text-xs);
  color:     var(--color-danger);
  display:   flex;
  align-items: center;
  gap:       var(--space-1);
}

/* Inputs */
.form-control {
  width:         100%;
  height:        var(--input-height-md);
  padding:       0 var(--space-3);
  background:    var(--color-surface);
  border:        var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  color:         var(--color-text-main);
  font-family:   var(--font-sans);
  transition:    border-color var(--transition-fast),
                 box-shadow   var(--transition-fast);
  line-height:   var(--leading-normal);
}

/* Variantes de taille */
.form-control--sm {
  height:    var(--input-height-sm);
  font-size: var(--text-xs);
  padding:   0 var(--space-2);
}

.form-control--lg {
  height:    var(--input-height-lg);
  font-size: var(--text-base);
  padding:   0 var(--space-4);
}

.form-control::placeholder {
  color: var(--color-text-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-subtle);
  outline:      none;
}

.form-control.is-invalid {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-control:disabled {
  background: var(--color-bg);
  color:      var(--color-text-muted);
  cursor:     not-allowed;
}

/* Select */
select.form-control {
  cursor:             pointer;
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right var(--space-3) center;
  padding-right:      var(--space-8);
}

/* Textarea */
textarea.form-control {
  min-height: 100px;
  resize:     vertical;
}

/* Input group */
.input-group {
  display: flex;
}

.input-group .form-control {
  border-radius: 0;
  flex: 1;
}

.input-group .form-control:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-control:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Search input */
.input-search {
  position: relative;
}

.input-search__icon {
  position:  absolute;
  left:      var(--space-3);
  top:       50%;
  transform: translateY(-50%);
  color:     var(--color-text-light);
  pointer-events: none;
}

.input-search .form-control {
  padding-left: calc(var(--space-3) * 2 + 16px);
}


/* ---------------------------------------------------------------------------
   FORM-ACTIONS — barre d'actions de formulaire
   Source de vérité : specs (pipeline_profile_create.html)
   Remplace : .pj-form-actions (projects), .pf-actions (partners/tenancy),
              .tf-actions (projects transport), .pj-delete-card__actions (suppression)

   Usage standard :
     <div class="form-actions">
       <button type="submit" class="btn btn-primary">Créer</button>
       <a href="…" class="btn btn-secondary">Annuler</a>
     </div>

   Usage suppression :
     <div class="form-actions form-actions--center">
       <a href="…" class="btn btn-secondary">Annuler</a>
       <button type="submit" class="btn btn-danger">Supprimer</button>
     </div>

   Règles :
     - Annuler = toujours <a> (navigation), jamais <button>
     - Annuler = toujours .btn.btn-secondary
     - Réinit. dans les filtres = .btn.btn-secondary.btn-sm
     - Position : action principale à gauche, secondaire à droite
--------------------------------------------------------------------------- */
.form-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-top:  var(--space-6);
}

.form-actions--center {
  justify-content: center;
}


/* ---------------------------------------------------------------------------
   ALERTES & NOTIFICATIONS
--------------------------------------------------------------------------- */
.alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-4);
  border-radius: var(--radius-lg);
  border:        var(--border-width) solid transparent;
  font-size:     var(--text-sm);
}

.alert-success {
  background:   var(--color-success-bg);
  border-color: var(--color-success-border);
  color:        var(--color-success);
}

.alert-danger {
  background:   var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color:        var(--color-danger);
}

.alert-warning {
  background:   var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color:        var(--color-warning);
}

.alert-info {
  background:   var(--color-info-bg);
  border-color: var(--color-info-border);
  color:        var(--color-info);
}

.alert__icon {
  flex-shrink: 0;
  margin-top:  1px;
}

.alert__body {
  flex: 1;
}

.alert__title {
  font-weight:   var(--font-semi);
  margin-bottom: var(--space-1);
}


/* .toast — source de vérité dans shell.css (.toast-stack + .toast + .toast--*) */


/* ---------------------------------------------------------------------------
   EMPTY STATE — état vide canonique (table, card, page)
   Pattern : icône + titre + description + CTA optionnel, centré verticalement.
   Partial : components/_empty_state.html
--------------------------------------------------------------------------- */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-12) var(--space-4);
  text-align:      center;
}

.empty-state__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   var(--radius-xl);
  background:      var(--color-bg);
  border:          var(--border-width) solid var(--color-border);
  color:           var(--color-text-light);
  margin-bottom:   var(--space-2);
}
.empty-state__icon svg {
  width:        28px;
  height:       28px;
  stroke-width: 1.5;
}

.empty-state__title {
  font-size:    var(--text-base);
  font-weight:  var(--font-semi);
  font-family:  var(--font-sans);
  white-space:  normal;
  color:        var(--color-text-main);
  margin:       0;
}

.empty-state__text {
  font-size:    var(--text-sm);
  font-family:  var(--font-sans);
  color:        var(--color-text-muted);
  max-width:    320px;
  line-height:  var(--leading-normal);
  white-space:  normal;
  margin:       0;
}

.empty-state .btn {
  margin-top: var(--space-3);
}

/* Override .data-table tbody td a qui écrase couleur + hover des boutons dans les <td> */
.empty-state .btn.btn-primary {
  background:   var(--color-primary);
  color:        #fff;
  border-color: var(--color-primary);
}
.empty-state .btn.btn-primary:hover {
  background:   var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color:        #fff;
}

/* Variante compacte — dans un <td colspan> ou une card étroite */
.empty-state--inline {
  padding: var(--space-8) var(--space-4);
}

/* ---------------------------------------------------------------------------
   MODALES
--------------------------------------------------------------------------- */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.4);
  z-index:         var(--z-modal);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4);
  animation:       overlay-enter var(--transition-fast) ease;
}

@keyframes overlay-enter {
  from { opacity: 0; }
}

.modal-overlay.is-hidden {
  display: none;
}

.modal {
  background:    var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow:    var(--shadow-xl);
  width:         100%;
  max-width:     560px;
  max-height:    90vh;
  display:       flex;
  flex-direction: column;
  animation:     modal-enter var(--transition-normal) ease;
}

@keyframes modal-enter {
  from {
    opacity:   0;
    transform: scale(0.96) translateY(8px);
  }
}

.modal.modal-lg { max-width: 768px; }
.modal.modal-sm { max-width: 400px; }

.modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-5) var(--space-6);
  border-bottom:   2px solid var(--color-primary);
  flex-shrink:     0;
}

.modal__title {
  font-size:   var(--text-lg);
  font-weight: var(--font-semi);
  color:       var(--color-text-main);
}

.modal__close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border:          1px solid transparent;
  background:      transparent;
  border-radius:   var(--radius-md);
  color:           var(--color-text-muted);
  transition:      background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  cursor:          pointer;
}

.modal__close:hover {
  background:   var(--color-danger-bg);
  border-color: var(--color-danger);
  color:        var(--color-danger);
}

.modal__body {
  padding:    var(--space-6);
  overflow-y: auto;
  flex:       1;
}

.modal__footer {
  padding:       var(--space-4) var(--space-6);
  border-top:    var(--border-width) solid var(--color-border);
  display:       flex;
  align-items:   center;
  justify-content: flex-end;
  gap:           var(--space-3);
  flex-shrink:   0;
  background:    var(--color-bg);
  border-radius: 0 0 calc(var(--radius-2xl) - 1px) calc(var(--radius-2xl) - 1px);
}


/* ---------------------------------------------------------------------------
   TABS
--------------------------------------------------------------------------- */
.tabs {
  display:       flex;
  gap:           0;
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-6);
}

.tab {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-4);
  font-size:       var(--text-sm);
  font-weight:     var(--font-medium);
  color:           var(--color-text-muted);
  text-decoration: none;
  border-bottom:   2px solid transparent;
  margin-bottom:   -1px;
  transition:      color        var(--transition-fast),
                   border-color var(--transition-fast);
  cursor:          pointer;
  white-space:     nowrap;
}

.tab:hover {
  color:           var(--color-text-main);
  text-decoration: none;
}

.tab.is-active {
  color:        var(--color-primary);
  border-color: var(--color-primary);
  font-weight:  var(--font-semi);
}

.tab__count {
  background:    var(--color-bg);
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  padding:       1px var(--space-2);
  font-size:     var(--text-xs);
  color:         var(--color-text-muted);
  min-width:     20px;
  text-align:    center;
}

.tab.is-active .tab__count {
  background:   var(--color-primary-light);
  border-color: var(--color-primary-light);
  color:        var(--color-primary-dark);
}




/* ===========================================================================
   PAGINATION — .pagination
   Utilisé via {% include 'components/_pagination.html' %}
   =========================================================================== */

.pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-3) var(--space-4);
  border-top:      1px solid var(--color-border);
  gap:             var(--space-4);
  flex-wrap:       wrap;
}

.pagination__info {
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  white-space: nowrap;
}

.pagination__total {
  color: var(--color-text-light);
  margin-left: 4px;
}

.pagination__btns {
  display:     flex;
  align-items: center;
  gap:         2px;
}

.pagination__btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     28px;
  height:        28px;
  padding:       0 6px;
  font-size:     var(--text-xs);
  font-family:   var(--font-sans);
  font-weight:   var(--font-normal);
  color:         var(--color-text-main);
  background:    transparent;
  border:        1px solid transparent;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  text-decoration: none;
  transition:    background .12s, border-color .12s, color .12s;
  user-select:   none;
}

.pagination__btn:hover:not(:disabled):not(.pagination__btn--active) {
  background:    var(--color-bg);
  border-color:  var(--color-border);
}

.pagination__btn--active {
  background:    var(--color-primary);
  color:         #fff;
  font-weight:   var(--font-semi);
  cursor:        default;
}

.pagination__btn:disabled {
  color:   var(--color-text-light);
  cursor:  not-allowed;
  opacity: .5;
}

.pagination__ellipsis {
  display:     inline-flex;
  align-items: center;
  height:      28px;
  padding:     0 4px;
  font-size:   var(--text-xs);
  color:       var(--color-text-light);
  user-select: none;
}

/* .topbar-link — source de vérité déplacée dans la section TOPBAR LINKS canonique (fin de fichier) */

/* ===========================================================================
   FORMULAIRES PAGES — .pf-*
   Utilisé par : partners, tenancy, specs, et tout module avec formulaire page.
   =========================================================================== */

/* Inputs dans .pf-form */
.pf-form input[type="text"],
.pf-form input[type="email"],
.pf-form input[type="tel"],
.pf-form input[type="password"],
.pf-form select {
  width:         100%;
  height:        34px;
  padding:       0 var(--space-3);
  background:    var(--color-surface);
  border:        1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  font-family:   var(--font-sans);
  color:         var(--color-text-main);
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pf-form textarea {
  width:         100%;
  padding:       var(--space-2) var(--space-3);
  background:    var(--color-surface);
  border:        1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  font-family:   var(--font-mono);
  color:         var(--color-text-main);
  resize:        vertical;
  min-height:    100px;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pf-form input[type="text"]:focus,
.pf-form input[type="email"]:focus,
.pf-form input[type="tel"]:focus,
.pf-form input[type="password"]:focus,
.pf-form select:focus,
.pf-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-subtle);
  outline:      none;
}
.pf-form input[type="checkbox"] {
  width:        16px;
  height:       16px;
  accent-color: var(--color-primary);
  cursor:       pointer;
  flex-shrink:  0;
}

.pf-form-page { max-width: 900px; margin: 0 auto; }

/* Sections dépliables */
.pf-section {
  background:    var(--color-surface);
  border:        var(--border-width-md) solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-card);
  margin-bottom: var(--space-4);
  overflow:      hidden;
}
.pf-section summary {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-3) var(--space-5);
  cursor:          pointer;
  user-select:     none;
  list-style:      none;
  background:      var(--color-bg);
}
.pf-section summary::-webkit-details-marker { display: none; }
.pf-section summary::after {
  content:     '\25BE';
  color:       var(--color-text-muted);
  font-size:   var(--text-xs);
  margin-left: var(--space-3);
  transition:  transform .2s;
  flex-shrink: 0;
}
.pf-section[open] summary::after { transform: rotate(180deg); }
.pf-section__title { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text-main); }
.pf-section__hint  { font-size: var(--text-xs); color: var(--color-text-muted); margin-right: auto; margin-left: var(--space-4); }
.pf-section__count { font-size: var(--text-2xs); font-weight: var(--font-normal); color: var(--color-text-muted); margin-left: var(--space-1); }
.pf-section__body  {
  padding:        var(--space-4) var(--space-5);
  border-top:     1px solid var(--color-border);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}
.pf-group-inline summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--color-primary);
  font-weight: var(--font-semi); list-style: none; padding: var(--space-2) 0;
}
.pf-group-inline summary::-webkit-details-marker { display: none; }
.pf-group-inline__body { padding-top: var(--space-4); }

/* Pied de carte avec sous-section toggle */
.pd-card__foot {
  padding:    var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.pf-subsection__body { padding-top: var(--space-4); display: none; }
[data-subsection].is-open .pf-subsection__body { display: block; }

/* Grilles de champs */
.pf-row    { display: grid; gap: var(--space-3); }
.pf-row--2 { grid-template-columns: 1fr 1fr; }
.pf-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.pf-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Champ */
.pf-field { display: flex; flex-direction: column; gap: var(--space-2); }
.pf-field--error input,
.pf-field--error select,
.pf-field--error textarea { border-color: var(--color-danger) !important; }
.pf-field--action { justify-content: flex-end; }

.pf-label {
  font-size: var(--text-2xs); font-weight: var(--font-semi); color: var(--color-text-main);
  text-transform: uppercase; letter-spacing: .05em;
}
.pf-label .req  { color: var(--color-danger); margin-left: 2px; }
.pf-error       { font-size: var(--text-xs); color: var(--color-danger); margin: 0; }
.pf-hint        { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; line-height: 1.4; }
.pf-hint-inline { font-size: var(--text-xs); color: var(--color-danger); margin-left: var(--space-1); font-weight: var(--font-normal); }
.pf-check { display: flex; align-items: center; gap: var(--space-2); height: 38px; }
.pf-check label { font-size: var(--text-sm); cursor: pointer; }

/* Actions formulaire */
.pf-actions         { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); }
.pf-actions__delete { margin-left: auto; }


/* ===========================================================================
   FICHES DÉTAIL — .pd-*
   Utilisé par : partners, tenancy, et tout module avec fiche détail.
   =========================================================================== */

.pd-card {
  background: var(--color-surface); border: var(--border-width-md) solid var(--color-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  overflow: hidden; margin-bottom: var(--space-4);
}
.pd-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5); background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.pd-card__title { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text-main); }
.pd-card__body  { padding: var(--space-5); }
.pd-badges      { display: flex; gap: var(--space-2); align-items: center; }

/* Identité 2 colonnes */
.pd-identity {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); padding: var(--space-5);
}
@media (max-width: 768px) { .pd-identity { grid-template-columns: 1fr; } }

.pd-kv {
  display: grid; grid-template-columns: 130px 1fr;
  gap: var(--space-2) var(--space-4); align-content: start; font-size: var(--text-sm);
}
.pd-kv dt { font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--color-text-muted); padding-top: 1px; white-space: nowrap; }
.pd-kv dd { color: var(--color-text-main); }

.pd-section-lbl {
  font-size: var(--text-2xs); font-weight: var(--font-semi); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--space-2);
}
.pd-address  { font-style: normal; font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-main); }
.pd-siblings { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------------------------------------------------------------------------
   PD-TWO-COL — layout 2 colonnes pour les pages détail (identité + adresse)
   PD-RIGHT    — colonne droite dans pd-two-col
--------------------------------------------------------------------------- */
.pd-two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
}
.pd-two-col > .card { display: flex; flex-direction: column; }
.pd-two-col > .card .card-table-wrap { flex: 1; }
.pd-right { /* colonne droite — pas de style propre, sert de conteneur */ }

@media (max-width: 768px) {
  .pd-two-col { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   PF-GRID-2 / PF-GRID-3 — grilles pour formulaires inline (membres, invitations)
--------------------------------------------------------------------------- */
.pf-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-3);
  align-items:           start;
}
.pf-grid-3 {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   var(--space-3);
  align-items:           start;
}

@media (max-width: 900px) {
  .pf-grid-2,
  .pf-grid-3 { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   PF-SUBSECTION — section rétractable inline dans une card (JS toggle)
   Usage : <div class="pf-subsection" data-subsection>
             <button data-subsection-toggle>...</button>
             <div class="pf-subsection__body">...</div>
           </div>
--------------------------------------------------------------------------- */
.pf-subsection {
  border-top:  var(--border-width) solid var(--color-border);
  padding-top: var(--space-3);
  margin-top:  var(--space-3);
}

.pf-subsection__toggle {
  background:  none;
  border:      none;
  padding:     0;
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
  color:       var(--color-primary);
  cursor:      pointer;
  text-align:  left;
}
.pf-subsection__toggle:hover { text-decoration: underline; }

/* Tables dans les cartes détail */
.pd-table-wrap { overflow-x: auto; border-top: var(--border-width-md) solid var(--color-border-strong); }
.pd-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pd-table thead tr { border-bottom: 2px solid var(--color-primary); background: var(--color-surface); }
.pd-table th {
  padding: var(--space-2) var(--space-4); font-size: var(--text-2xs); font-weight: var(--font-bold);
  color: var(--color-text-main); text-transform: uppercase; letter-spacing: .07em;
  text-align: left; white-space: nowrap;
}
.pd-table td {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  color: var(--color-text-main); vertical-align: middle;
}
.pd-table tbody tr:last-child td { border-bottom: none; }
.pd-table tbody tr:hover td { background: var(--color-primary-subtle); }
.pd-name { font-weight: var(--font-medium); }
.pd-col-actions { text-align: right; white-space: nowrap; }

/* Responsive pf-* */
@media (max-width: 900px) { .pf-row--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .pf-row--2, .pf-row--3, .pf-row--4 { grid-template-columns: 1fr; }
  .pf-section summary { flex-wrap: wrap; gap: var(--space-2); }
}

/* =============================================================================
   ═══════════════════════════════════════════════════════════════════════════════
   COMPOSANTS CANONIQUES v2 — Phase 1 consolidation (2026-03-23)
   ═══════════════════════════════════════════════════════════════════════════════
   Composants unifiés remplaçant les variantes dupliquées dans les CSS de pages.
   Chaque composant ci-dessous est la SOURCE DE VÉRITÉ unique.
   Les anciennes variantes (.kpi-grid, .pd-table, .sp-table, etc.) restent
   temporairement pour backward-compat et seront supprimées en Phase 2.
   ============================================================================= */


/* Compact — inner tables dans les cards */
.data-table--compact th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-compact);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
}
.data-table--compact td {
  padding: var(--space-2) var(--space-3);
}

/* Muted head — style simple pour pages secondaires */
.data-table--muted-head thead tr {
  background:    var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.data-table--muted-head th {
  font-size:   var(--text-xs);
  font-weight: var(--font-semi);
  color:       var(--color-text-muted);
}
.data-table--muted-head tbody tr:hover td {
  background: var(--color-bg);
}
.data-table--muted-head tbody tr:hover td:first-child {
  box-shadow: none;
}



/* ===========================================================================
   STAT-STRIP — barre de KPIs cliquables unifiée
   Remplace : .kpi-grid/.kpi-card, .db-stat-strip, .stat-strip (partners),
              .pj-stat-strip, .tx-stat-strip
   Usage :
     <div class="stat-strip">
       <a href="?" class="stat-strip__item is-active">
         <span class="stat-strip__dot stat-strip__dot--ok"></span>
         <span class="stat-strip__label">Actifs</span>
         <span class="stat-strip__value">42</span>
       </a>
     </div>
   Variantes :
     .stat-strip--narrow → max-width: 560px (transco, alerts)
     .stat-strip--5      → 5 colonnes grid (dashboard)
   =========================================================================== */

.stat-strip {
  display:       flex;
  gap:           1px;
  background:    var(--color-border);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-xs);
  margin-bottom: var(--space-4);
}

.stat-strip--narrow { max-width: 560px; }

.stat-strip__item {
  flex:            1;
  background:      var(--color-surface);
  padding:         11px 16px;
  display:         flex;
  align-items:     center;
  gap:             10px;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .1s;
  user-select:     none;
}

.stat-strip__item:hover { background: var(--color-primary-subtle); }
.stat-strip__item:hover { text-decoration: none; }

.stat-strip__item.is-active {
  background: var(--color-primary-subtle);
}
.stat-strip__item.is-active .stat-strip__value {
  color: var(--color-primary-dark);
}
.stat-strip__item.is-active .stat-strip__dot {
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
}

.stat-strip__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
  transition:    box-shadow .1s;
}

/* Couleurs de dot sémantiques */
.stat-strip__dot--total    { background: var(--color-text-light); }
.stat-strip__dot--ok,
.stat-strip__dot--active,
.stat-strip__dot--published { background: var(--color-success); }
.stat-strip__dot--ko,
.stat-strip__dot--inactive  { background: var(--color-danger); }
.stat-strip__dot--warn,
.stat-strip__dot--paused,
.stat-strip__dot--draft     { background: var(--color-warning); }
.stat-strip__dot--muted,
.stat-strip__dot--archived  { background: var(--color-text-light); }
.stat-strip__dot--info,
.stat-strip__dot--rate      { background: var(--color-primary); }
.stat-strip__dot--in        { background: #3B82F6; }
.stat-strip__dot--out       { background: #8B5CF6; }

.stat-strip__label {
  font-size:      var(--text-xs);
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight:    var(--font-medium);
  flex:           1;
}

.stat-strip__value {
  font-size: var(--text-xl);
  font-weight:          var(--font-semi);
  color:                var(--color-text-main);
  line-height:          1;
  font-variant-numeric: tabular-nums;
  transition:           color .1s;
}

/* Variantes de couleur sur la valeur */
.stat-strip__item--ok .stat-strip__value   { color: var(--color-success); }
.stat-strip__item--ko .stat-strip__value   { color: var(--color-danger); }
.stat-strip__item--rate .stat-strip__value { color: var(--color-primary-dark); }

/* Stat-strip avec icônes (dashboard style) */
.stat-strip__icon {
  width:           34px;
  height:          34px;
  border-radius:   var(--radius-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  background:      var(--color-bg);
}

/* Grid 5 colonnes (dashboard) */
.stat-strip--5 {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
}

/* Responsive */
@media (max-width: 1200px) {
  .stat-strip--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .stat-strip { flex-wrap: wrap; }
  .stat-strip__item { min-width: 120px; }
}
@media (max-width: 560px) {
  .stat-strip--5 { grid-template-columns: 1fr; }
}


/* ===========================================================================
   CARD-TOOLBAR — toolbar intégrée en haut d'une card (recherche + filtres)
   Remplace : .tx-toolbar, .pj-toolbar, .pipeline-filter-bar
   Usage :
     <div class="card">
       <form class="card-toolbar">
         <div class="search-input">…</div>
         <select class="card-toolbar__ctrl">…</select>
         <button class="btn btn-primary btn-sm">Filtrer</button>
         <span class="card-toolbar__count">42 résultats</span>
       </form>
       <table class="data-table">…</table>
     </div>
   =========================================================================== */

.card-toolbar {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background:    var(--color-bg);
  min-height:    48px;
  flex-wrap:     wrap;
}

.card-toolbar__ctrl {
  height:        var(--input-height-sm);
  padding:       0 24px 0 8px;
  border:        1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size:     var(--text-xs);
  font-family:   var(--font-sans);
  color:         var(--color-text-main);
  background:    var(--color-surface);
  cursor:        pointer;
  appearance:    none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 7px center;
  transition:    border-color .12s;
  white-space:   nowrap;
}

.card-toolbar__ctrl:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px var(--color-primary-alpha-12);
}

input[type="text"].card-toolbar__ctrl {
  width:         180px;
  padding:       0 10px;
  cursor:        text;
  appearance:    none;
  background-image: none;
}

.card-toolbar__count {
  margin-left: auto;
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  white-space: nowrap;
}


/* ===========================================================================
   SEARCH-INPUT — champ de recherche avec icône (universel)
   Remplace : .input-search, .pt-search-*, .pj-search-*, .tx-search-*
   Usage :
     <div class="search-input">
       <svg class="search-input__icon">…</svg>
       <input class="search-input__field" placeholder="Rechercher…">
     </div>
   =========================================================================== */

.search-input {
  position:  relative;
  flex:      1;
  min-width: 140px;
  max-width: 280px;
}

.search-input__icon {
  position:       absolute;
  left:           9px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--color-text-light);
  pointer-events: none;
}

.search-input__field {
  width:         100%;
  height:        var(--input-height-sm);
  padding:       0 10px 0 30px;
  border:        1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size:     var(--text-xs);
  font-family:   var(--font-sans);
  background:    var(--color-surface);
  color:         var(--color-text-main);
  transition:    border-color .12s, box-shadow .12s;
}

.search-input__field::placeholder { color: var(--color-text-light); }

.search-input__field:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px var(--color-primary-alpha-12);
}

/* Variante large (pour filter panels) */
.search-input--lg {
  max-width: 360px;
}
.search-input--lg .search-input__field {
  height: var(--input-height-md);
}


/* ===========================================================================
   FILTER-PANEL — panneau de filtres (source de vérité : flows)
   Remplace : .mf-panel (flows), .tx-panel (transco), .ff-panel (files),
              .sp-panel (specs), .pg-filter (partners)

   2 layouts, mêmes atomes :

   Layout A — simple row (partners, projects, specs, tenancy) :
     <div class="filter-panel" id="…" hidden>
       <form><div class="filter-panel__row">
         <div class="filter-panel__field">
           <label class="filter-panel__label">…</label>
           <input class="filter-panel__ctrl">
         </div>
         <div class="filter-panel__actions">…</div>
       </div></form>
     </div>

   Layout B — multi-colonnes centré (flows, transco, files) :
     <form class="filter-panel filter-panel--compact" id="…" hidden>
       <div class="filter-panel__cols">
         <div class="filter-panel__col">
           <div class="filter-panel__col-title">ÉMETTEUR</div>
           <div class="filter-panel__grid">
             <span class="filter-panel__label">Groupe</span>
             <select class="filter-panel__ctrl">…</select>
           </div>
         </div>
       </div>
       <div class="filter-panel__actions">…</div>
     </form>
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Wrapper — base partagée
--------------------------------------------------------------------------- */
.filter-panel {
  background:    var(--color-surface);
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-sm);
  overflow:      visible;
  animation:     fp-slide-down var(--transition-normal) ease;
}

.filter-panel[hidden] { display: none; }

/* Espacement entre la toolbar et le panneau filtres */
.page-toolbar + .filter-panel {
  margin-top: var(--space-3);
}

@keyframes fp-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---------------------------------------------------------------------------
   Wrapper — variante compact (flows, transco, files)
--------------------------------------------------------------------------- */
.filter-panel--compact {
  width:  fit-content;
  margin: 0 auto;
}


/* ---------------------------------------------------------------------------
   Layout A — simple row (partners, projects, specs, tenancy)
--------------------------------------------------------------------------- */
.filter-panel__row {
  display:     flex;
  align-items: flex-end;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-4);
  flex-wrap:   wrap;
}

.filter-panel__row--bg {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.filter-panel__row--grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   var(--space-2);
  align-items:           end;
}

.filter-panel__field {
  display:        flex;
  flex-direction: column;
  gap:            var(--filter-gap-field);
}


/* ---------------------------------------------------------------------------
   Layout B — multi-colonnes (flows, transco, files)
--------------------------------------------------------------------------- */
.filter-panel__cols {
  display: flex;
}

.filter-panel__col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  padding:        var(--filter-col-padding);
}

.filter-panel__col + .filter-panel__col {
  border-left: var(--border-width) solid var(--color-border);
}

.filter-panel__col-title {
  font-size:      var(--filter-col-title-size);
  font-weight:    var(--font-semi);
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--filter-col-title-color);
}

.filter-panel__grid {
  display:               grid;
  grid-template-columns: 70px minmax(0, 180px);
  gap:                   var(--filter-gap-grid);
  align-items:           center;
}


/* ---------------------------------------------------------------------------
   Atomes — label (partagé layouts A + B)
--------------------------------------------------------------------------- */
.filter-panel__label {
  font-size:   var(--filter-label-size);
  font-weight: var(--filter-label-weight);
  color:       var(--filter-label-color);
  white-space: nowrap;
  user-select: none;
}


/* ---------------------------------------------------------------------------
   Atomes — control input/select (partagé layouts A + B)
   Cible aussi les widgets Django sans classe explicite via .filter-panel__field
--------------------------------------------------------------------------- */
.filter-panel__ctrl,
.filter-panel__field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filter-panel__field select {
  display:       block;
  height:        var(--filter-field-height);
  font-size:     var(--filter-ctrl-size);
  font-family:   var(--font-sans);
  padding:       0 6px;
  border:        var(--border-width) solid var(--filter-ctrl-border);
  border-radius: var(--radius-sm);
  background:    var(--color-surface);
  color:         var(--filter-ctrl-color);
  width:         100%;
  transition:    border-color var(--transition-fast),
                 box-shadow var(--transition-fast);
}

.filter-panel__ctrl::placeholder,
.filter-panel__field input::placeholder {
  color: var(--filter-placeholder);
}

/* Combobox à l'intérieur du filter-panel : hauteur alignée sur --filter-field-height */
.filter-panel__grid .combobox__input,
.filter-panel__col  .combobox__input {
  height:       var(--filter-field-height);
  border-color: var(--filter-ctrl-border);
}

.filter-panel__grid .combobox__toggle,
.filter-panel__col  .combobox__toggle {
  height:       var(--filter-field-height);
  border-color: var(--filter-ctrl-border);
}

.filter-panel__ctrl:focus,
.filter-panel__field input:focus,
.filter-panel__field select:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px var(--color-primary-alpha-10);
}

select.filter-panel__ctrl,
.filter-panel__field select {
  cursor:              pointer;
  appearance:          none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 5px center;
  padding-right:       18px;
  color:               var(--filter-placeholder);
}

select.filter-panel__ctrl.has-value {
  color: var(--color-text-muted);
}

input[type="date"].filter-panel__ctrl { padding-top: 0; }


/* ---------------------------------------------------------------------------
   Atomes — actions (Filtrer + Réinit.)
   Source de vérité : flows (list.html)
   Partial canonique : components/_filter_actions.html

   Pattern :
     <div class="filter-panel__actions">
       {% include "components/_filter_actions.html" with reset_url=request.path %}
     </div>

   Règles :
     - Filtrer  = .btn.btn-primary.btn-sm + icône SVG entonnoir (14×14)
     - Réinit.  = <a> .btn.btn-secondary.btn-sm → URL sans query string
     - Texte    = "Filtrer" / "Réinit." (jamais "Réinitialiser", jamais "Reset")
--------------------------------------------------------------------------- */
.filter-panel__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

/* Actions en bas du panneau compact (border-top séparateur) */
.filter-panel--compact > .filter-panel__actions {
  padding:    var(--filter-col-padding);
  border-top: var(--border-width) solid var(--color-border);
}

/* Actions à l'intérieur d'une colonne (flows: Masse → Filtrer/Réinit.) */
.filter-panel__col .filter-panel__actions {
  margin-top:      8px;
  justify-content: flex-end;
}

.filter-panel__count {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .filter-panel__cols {
    flex-wrap: wrap;
  }
  .filter-panel__col + .filter-panel__col {
    border-left:  none;
    border-top:   var(--border-width) solid var(--color-border);
  }
}

@media (max-width: 640px) {
  .filter-panel__row {
    flex-direction: column;
    align-items:    stretch;
  }
  .filter-panel__ctrl {
    min-width: auto;
    width:     100%;
  }
}


/* ===========================================================================
   FORM-CHECK-INPUT — checkbox standardisée dans les formulaires
   Usage : <input type="checkbox" class="form-check-input">
   =========================================================================== */

.form-check-input {
  width:         16px;
  height:        16px;
  margin-right:  var(--space-2);
  accent-color:  var(--color-primary);
  vertical-align: middle;
  cursor:        pointer;
}


/* ===========================================================================
   FORM-STACK — layout vertical pour formulaires
   Remplace : déclarations ad-hoc dans pipeline_specs.css, transco.css, etc.
   Usage :
     <div class="form-stack">
       <div class="form-group">…</div>
       <div class="form-group">…</div>
     </div>
   =========================================================================== */

.form-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}


/* ===========================================================================
   ROW STATES — états visuels des lignes de tableaux (partagé entre modules)
   Remplace : .pt-row--inactive, .pj-row--inactive, .row-inactive, etc.
   Usage : <tr class="row--inactive">
   =========================================================================== */

.row--inactive    td { opacity: .6; }
.row--inactive:hover td { opacity: 1; }

.row--paused      td { background: var(--color-warning-bg); }
.row--paused:hover td { background: #fde68a; }

.row--archived    td { opacity: .5; }
.row--archived:hover td { opacity: .8; background: var(--color-bg); }

.row--clickable   { cursor: pointer; }
.row--unread      td { font-weight: var(--font-medium); }


/* ===========================================================================
   BADGE-COUNT — compteur dans les headers de section
   Usage : <span>Flux <span class="badge-count">12</span></span>
   =========================================================================== */

.badge-count {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     20px;
  height:        18px;
  padding:       0 6px;
  border-radius: var(--radius-full);
  background:    var(--color-bg);
  border:        var(--border-width) solid var(--color-border);
  font-size:     var(--text-2xs);
  font-weight:   var(--font-semi);
  color:         var(--color-text-muted);
  margin-left:   var(--space-2);
  line-height:   1;
}


/* ===========================================================================
   DOT INDICATOR — pastille de statut inline
   Usage : <span class="dot dot--ok"></span>
   =========================================================================== */

.dot,
.status-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: var(--radius-full);
}
.dot--ok, .status-dot--ok  { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-bg); }
.dot--off, .status-dot--off { background: var(--color-border-strong); box-shadow: 0 0 0 3px var(--color-bg); }
.dot--ko, .status-dot--ko  { background: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); }
.dot--warn, .status-dot--warn { background: var(--color-warning); box-shadow: 0 0 0 3px var(--color-warning-bg); }


/* ===========================================================================
   TOGGLE-BTN — bouton toggle ON/OFF dans les tableaux
   Usage :
     <button class="toggle-btn toggle-btn--on">✓</button>
     <button class="toggle-btn toggle-btn--off">—</button>
   =========================================================================== */

.toggle-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border:          var(--border-width) solid var(--color-border);
  border-radius:   var(--radius-md);
  background:      var(--color-surface);
  cursor:          pointer;
  font-size:       11px;
  color:           var(--color-text-muted);
  transition:      background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  padding:         0;
  font-family:     var(--font-sans);
}

.toggle-btn:hover { background: var(--color-bg); color: var(--color-text-main); }

.toggle-btn--on  { color: var(--color-success); border-color: var(--color-success-border); }
.toggle-btn--on:hover  { background: var(--color-success-bg); }

.toggle-btn--off { color: var(--color-text-light); }
.toggle-btn--off:hover { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger-border); }

.toggle-btn--warn { color: var(--color-warning); border-color: var(--color-warning-border); }
.toggle-btn--warn:hover { background: var(--color-warning-bg); }

.toggle-btn--neutral { color: var(--color-text-muted); }
.toggle-btn--neutral:hover { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary); }


/* .status-dot — alias de .dot (voir DOT INDICATOR ci-dessus) */


/* ===========================================================================
   MODAL EXTENSIONS — compléments pour le composant .modal existant
   =========================================================================== */

/* État ouvert via JS (alternative au display:none → display:flex) */
.modal-overlay--open {
  display: flex;
}

/* Grille 2 colonnes dans le body d'une modale */
.modal-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
  align-items:           end;
}

.modal-field--full { grid-column: 1 / -1; }


/* ===========================================================================
   PIPELINE-STEP — visualisation des étapes pipeline
   Factorisé depuis flows.css (utilisé aussi par pipeline_sandbox.css)
   Usage :
     <div class="pipeline-steps">
       <div class="pipeline-step pipeline-step--ok">
         <div class="pipeline-step__num">1</div>
         <div class="pipeline-step__body">
           <div class="pipeline-step__name">Preconfig</div>
           <div class="pipeline-step__reason">…</div>
         </div>
         <div class="pipeline-step__right">
           <span class="pipeline-step__badge">OK</span>
           <span class="pipeline-step__issues">2 issues</span>
         </div>
       </div>
     </div>
   =========================================================================== */

.pipeline-steps {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.pipeline-step {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-left:   3px solid transparent;
  background:    var(--color-bg);
}

.pipeline-step--ok      { border-left-color: var(--color-success); }
.pipeline-step--ko      { border-left-color: var(--color-danger); background: var(--color-danger-bg); }
.pipeline-step--skipped { border-left-color: var(--color-border); opacity: .6; }

.pipeline-step__num {
  font-size:   var(--text-xs);
  font-weight: var(--font-bold);
  color:       var(--color-text-muted);
  width:       18px;
  text-align:  center;
  flex-shrink: 0;
}

.pipeline-step__body { flex: 1; min-width: 0; }

.pipeline-step__name {
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
  color:       var(--color-text-main);
}

.pipeline-step__reason {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  font-style:  italic;
  margin-top:  1px;
}

.pipeline-step__right {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

.pipeline-step__badge {
  font-size:      var(--text-xs);
  font-weight:    var(--font-bold);
  letter-spacing: .04em;
}
.pipeline-step--ok      .pipeline-step__badge { color: var(--color-success); }
.pipeline-step--ko      .pipeline-step__badge { color: var(--color-danger); }
.pipeline-step--skipped .pipeline-step__badge { color: var(--color-text-muted); }

/* Badges statut nommés (pour split docs) */
.pipeline-step__badge--success,
.pipeline-step__badge--ok,
.pipeline-step__badge--OK      { color: var(--color-success); }
.pipeline-step__badge--failed,
.pipeline-step__badge--ko,
.pipeline-step__badge--KO      { color: var(--color-danger); }
.pipeline-step__badge--partial { color: var(--color-warning); }

.pipeline-step__issues {
  font-size:     var(--text-xs);
  background:    var(--color-danger-bg);
  color:         var(--color-danger);
  padding:       1px var(--space-1);
  border-radius: var(--radius-sm);
}


/* ===========================================================================
   PIPELINE ERROR BANNER
   =========================================================================== */

.pipeline-error-banner {
  background:    var(--color-danger-bg);
  color:         var(--color-danger);
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
  font-size:     var(--text-sm);
  margin-bottom: var(--space-4);
}


/* ===========================================================================
   BADGE PROTOCOL / KIND — badges techniques dans les tableaux
   Usage : <span class="badge-kind badge-kind--sftp">SFTP</span>
   =========================================================================== */

.badge-kind {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 7px;
  border-radius: var(--radius-sm);
  font-size:     var(--text-2xs);
  font-weight:   var(--font-semi);
  font-family:   var(--font-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  color:         var(--color-text-muted);
}

.badge-kind--sftp,
.badge-kind--ftp  { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.badge-kind--api  { background: var(--color-primary-subtle); border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-kind--as2  { background: #F5F3FF; border-color: #DDD6FE; color: #6D28D9; }
.badge-kind--local { background: var(--color-bg); border-color: var(--color-border-strong); color: var(--color-text-muted); }


/* ===========================================================================
   OPS-PANEL — panneau dépliable opérationnel (flows detail)
   =========================================================================== */

.ops-panel {
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}

.ops-panel details > summary {
  padding:        var(--space-3) var(--space-4);
  background:     var(--color-bg);
  border-bottom:  var(--border-width) solid var(--color-border);
  font-size:      var(--text-xs);
  font-weight:    var(--font-bold);
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor:         pointer;
  user-select:    none;
  list-style:     none;
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  transition:     background var(--transition-fast);
}

.ops-panel details > summary:hover { background: var(--color-border); }
.ops-panel details > summary::-webkit-details-marker { display: none; }

.ops-body { padding: var(--space-4); }


/* ===========================================================================
   PAGE-TOOLBAR — barre d'outils principale des pages de listing
   Remplace : .mf-toolbar (flows), .ff-toolbar (files), .tx-toolbar (transco),
              .pipeline-toolbar / .sp-toolbar (specs), ad-hoc projets/partenaires/orgs
   Source de vérité : flows.css (monitoring) — pixel-perfect

   Usage :
     <div class="page-toolbar">
       <button class="page-toolbar__toggle" id="xxx-toggle-filters"
               aria-expanded="false" aria-controls="xxx-filters">
         <svg class="page-toolbar__toggle-icon">…</svg>
         Filtres avancés
         <svg class="page-toolbar__chevron">…</svg>
       </button>
       <div class="page-toolbar__sep"></div>
       <div class="page-toolbar__group"> <!-- pills / nav / compteurs --> </div>
       <div class="page-toolbar__spacer"></div>
       <div class="page-toolbar__search">
         <svg>…</svg>
         <input type="text" placeholder="Recherche rapide…">
       </div>
     </div>
   =========================================================================== */

.page-toolbar {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}

/* ── Toggle — bouton "Filtres avancés ▾" ── */
.page-toolbar__toggle {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  border:        var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background:    var(--color-surface);
  color:         var(--color-text-muted);
  font-size:     var(--text-sm);
  font-weight:   var(--font-medium);
  font-family:   var(--font-sans);
  cursor:        pointer;
  transition:    background var(--transition-fast),
                 border-color var(--transition-fast),
                 color var(--transition-fast);
  white-space:   nowrap;
}
.page-toolbar__toggle:hover {
  border-color: var(--color-primary);
  color:        var(--color-primary);
}
.page-toolbar__toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  color:        var(--color-primary);
  background:   var(--color-primary-subtle);
}

.page-toolbar__toggle-icon {
  flex-shrink: 0;
  opacity:     0.6;
}
.page-toolbar__toggle:hover .page-toolbar__toggle-icon,
.page-toolbar__toggle[aria-expanded="true"] .page-toolbar__toggle-icon {
  opacity: 1;
}

.page-toolbar__chevron {
  transition:  transform var(--transition-fast);
  flex-shrink: 0;
}
.page-toolbar__toggle[aria-expanded="true"] .page-toolbar__chevron {
  transform: rotate(180deg);
}

/* ── Group — conteneur générique pour pills, nav, compteurs ── */
.page-toolbar__group {
  display:     flex;
  align-items: center;
  gap:         3px;
  flex-shrink: 0;
}

/* ── Séparateur vertical ── */
.page-toolbar__sep {
  width:       var(--border-width);
  height:      24px;
  background:  var(--color-border);
  flex-shrink: 0;
  margin:      0 var(--space-1);
}

/* ── Spacer — pousse le search à droite ── */
.page-toolbar__spacer { flex: 1; }

/* ── Search — champ de recherche rapide avec icône ── */
.page-toolbar__search {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  background:    var(--color-surface);
  border:        var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition:    border-color var(--transition-fast),
                 box-shadow var(--transition-fast);
  color:         var(--color-text-light);
}
.page-toolbar__search:focus-within {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px var(--color-primary-alpha-10);
}
.page-toolbar__search input {
  background:  transparent;
  border:      none;
  outline:     none;
  color:       var(--color-text-main);
  font-size:   var(--text-sm);
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  width:       170px;
}
.page-toolbar__search input::placeholder {
  color:       var(--color-text-light);
  font-weight: var(--font-normal);
  font-size:   var(--text-sm);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .page-toolbar__group {
    order:      10;
    flex-basis: 100%;
    margin-top: var(--space-2);
  }
  .page-toolbar__search input { width: 120px; }
}
@media (max-width: 480px) {
  .page-toolbar__search { flex: 1; order: 20; }
  .page-toolbar__search input { width: 100%; }
}


/* ===========================================================================
   TABLE-FOOTER — footer de tableau avec per-page + pagination
   Remplace : .flows-card__footer (flows), .files-card__footer (files),
              .pj-list-footer (projets)

   Usage :
     <div class="table-footer">
       <div class="table-footer__inner">
         <div class="per-page">…</div>
         <div class="table-footer__pagination">
           {% include 'components/_pagination.html' %}
         </div>
       </div>
     </div>
   =========================================================================== */

.table-footer {
  padding:    var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
}

.table-footer__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}

.table-footer__pagination {
  flex:            1;
  display:         flex;
  justify-content: flex-end;
}


/* ===========================================================================
   PER-PAGE — sélecteur "Lignes par page" (20 / 30 / 50)
   Remplace : .per-page dupliqué dans flows.css, files.css, projects.css

   Usage :
     <div class="per-page">
       <span class="per-page__label">Lignes par page</span>
       <div class="per-page__btns">
         <a href="?per_page=20" class="per-page__btn is-active">20</a>
         <a href="?per_page=30" class="per-page__btn">30</a>
         <a href="?per_page=50" class="per-page__btn">50</a>
       </div>
     </div>
   =========================================================================== */

.per-page {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

.per-page__label {
  font-size:   var(--text-xs);
  color:       var(--color-text-light);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.per-page__btns {
  display:       flex;
  gap:           0;
  border:        var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.per-page__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          28px;
  padding:         0 var(--space-2);
  font-size:       var(--text-xs);
  font-weight:     var(--font-semi);
  font-family:     var(--font-mono);
  color:           var(--color-text-muted);
  background:      var(--color-surface);
  text-decoration: none;
  border-right:    var(--border-width) solid var(--color-border);
  transition:      background var(--transition-fast),
                   color var(--transition-fast);
  cursor:          pointer;
}

.per-page__btn:last-child {
  border-right: none;
}

.per-page__btn:hover {
  background:      var(--color-primary-alpha-06);
  color:           var(--color-primary-dark);
  text-decoration: none;
}

.per-page__btn.is-active {
  background:   var(--color-primary);
  color:        #fff;
  border-color: var(--color-primary);
}

.per-page__btn.is-active + .per-page__btn {
  border-left-color: var(--color-primary);
}


/* ===========================================================================
   PILL — composant pill unifié (filtres, navigation, compteurs)
   Remplace : .mf-pill (flows), .ff-tab + .ff-toggle (files),
              .sp-pill (specs/projets/partenaires/orgs), .tx-pill (transco)

   3 usages :

   1. Nav / Counter — lien <a> ou <span> directement stylé
      <a href="…" class="pill is-active">3 Total</a>
      <a href="…" class="pill">2 Actifs</a>
      <span class="pill">0 Inactifs</span>

   2. Toggle — <label> avec checkbox caché, coloration au :checked
      <label class="pill--toggle pill--ok">
        <input type="checkbox" …>
        <span>OK</span>
      </label>

   3. Sémantique — variante couleur sur is-active (counter filtrant)
      <a href="…" class="pill pill--success is-active">7 Publiés</a>
      <a href="…" class="pill pill--warn is-active">2 Brouillons</a>
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Base — forme partagée par nav/counter ET toggle span
--------------------------------------------------------------------------- */
.pill,
.pill--toggle span {
  display:        inline-flex;
  align-items:    center;
  height:         var(--input-height-sm);
  padding:        0 var(--space-3);
  border:         var(--border-width-md) solid var(--color-border-strong);
  border-radius:  var(--radius-full);
  font-size:      var(--text-xs);
  font-weight:    var(--font-semi);
  color:          var(--color-text-muted);
  background:     var(--color-surface);
  text-decoration: none;
  cursor:         pointer;
  transition:     background var(--transition-fast),
                  border-color var(--transition-fast),
                  color var(--transition-fast);
  user-select:    none;
  letter-spacing: .03em;
  white-space:    nowrap;
}

.pill:hover,
.pill--toggle:hover span {
  border-color:    var(--color-primary);
  color:           var(--color-primary);
  text-decoration: none;
}

.pill:focus:not(:focus-visible) { outline: none; }
.pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   Active state — nav/counter (teal par défaut)
--------------------------------------------------------------------------- */
.pill.is-active {
  border-color: var(--color-primary);
  color:        var(--color-primary-dark);
  background:   var(--color-primary-subtle);
}


/* ---------------------------------------------------------------------------
   Active color variants — counter filtrant avec couleur sémantique
--------------------------------------------------------------------------- */
.pill--success.is-active {
  border-color: var(--color-success-border);
  color:        var(--color-success);
  background:   var(--color-success-bg);
}

.pill--warn.is-active {
  border-color: var(--color-warning-border);
  color:        #92400E;
  background:   var(--color-warning-bg);
}

.pill--danger.is-active {
  border-color: var(--color-danger-border);
  color:        var(--color-danger);
  background:   var(--color-danger-bg);
}


/* ---------------------------------------------------------------------------
   Toggle — <label> wrapper avec checkbox caché
--------------------------------------------------------------------------- */
.pill--toggle {
  position: relative;
  cursor:   pointer;
}

.pill--toggle input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}


/* ---------------------------------------------------------------------------
   Toggle color variants — coloration quand :checked
--------------------------------------------------------------------------- */
.pill--ok  input:checked + span {
  background:   var(--color-success-bg);
  border-color: var(--color-success-border);
  color:        var(--color-success);
}

.pill--ko  input:checked + span {
  background:   var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color:        var(--color-danger);
}

.pill--dir input:checked + span {
  background:   var(--color-primary-light);
  border-color: var(--color-primary);
  color:        var(--color-primary-dark);
}

.pill--md  input:checked + span {
  background:   var(--color-md-bg);
  border-color: var(--color-md-border);
  color:        var(--color-md);
}

.pill--dup input:checked + span {
  background:   var(--color-info-bg);
  border-color: var(--color-info-border);
  color:        var(--color-info);
}

.pill--archived input:checked + span {
  background:   var(--color-bg);
  border-color: var(--color-border-strong);
  color:        var(--color-text-muted);
}


/* ===========================================================================
   FILTER-CHIP — pill dismissible de filtre actif
   Source de vérité : dashboard (index.html)

   Usage :
     <span class="filter-chip">
       Partenaire ALTO
       <a href="?remove=partner" class="filter-chip__close" aria-label="Retirer">×</a>
     </span>

   Peut être utilisé dans .page-toolbar__group ou tout conteneur flex.
   =========================================================================== */

.filter-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       4px var(--space-3);
  border:        var(--border-width-md) solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  font-weight:   var(--font-medium);
  color:         var(--color-primary-dark);
  background:    var(--color-primary-light);
  white-space:   nowrap;
}

.filter-chip__close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           16px;
  height:          16px;
  border-radius:   var(--radius-full);
  border:          none;
  background:      transparent;
  font-size:       var(--text-xs);
  line-height:     1;
  color:           var(--color-primary);
  text-decoration: none;
  cursor:          pointer;
  transition:      background var(--transition-fast), color var(--transition-fast);
}

.filter-chip__close:hover {
  background: var(--color-primary);
  color:      #fff;
}


/* ===========================================================================
   BACK-LINK — pill retour compact (pages détail/formulaire)
   Remplace : .mf-back-link (flows), .fd-back-link (files),
              .pj-back-link (projets), .sp-back-link (specs/tenancy)

   Usage :
     <a href="…" class="back-link">← Retour à la liste</a>
   =========================================================================== */

.back-link {
  display:         inline-flex;
  align-items:     center;
  align-self:      flex-start;
  gap:             3px;
  font-size:       var(--text-xs);
  color:           var(--color-text-muted);
  text-decoration: none;
  padding:         3px 10px;
  border:          var(--border-width) solid var(--color-border-strong);
  border-radius:   var(--radius-full);
  transition:      border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  margin-bottom:   var(--space-4);
}

.back-link:hover {
  border-color: var(--color-primary);
  color:        var(--color-primary);
  background:   var(--color-primary-alpha-08);
  text-decoration: none;
}


/* ===========================================================================
   LINK-NAME — lien principal dans la première colonne des tableaux de liste
   Remplace : .link-name dans pipeline_specs.css (migré en canonique)

   Usage : <a href="…" class="link-name">NOM_ENTITE</a>
   =========================================================================== */

.link-name {
  font-weight:     var(--font-semi);
  font-family:     var(--font-sans);
  color:           var(--color-text-main);
  text-decoration: none;
  transition:      color var(--transition-fast);
}
.link-name:hover {
  color:           var(--color-primary);
  text-decoration: none;
}


/* ===========================================================================
   BADGE-KIND — extensions de couleur
   Base (.badge-kind) déjà dans components.css (sftp, ftp, api, as2, local).
   On ajoute : types de document, engines, protocoles, transco.

   Remplace : .flux-tag (flows), .proto-tag (flows),
              .format-tag (specs), .tx-badge--json (transco)

   Usage :
     <span class="badge-kind badge-kind--order">ORDER</span>
     <span class="badge-kind badge-kind--edifact">EDIFACT</span>
     <span class="badge-kind badge-kind--json">JSON</span>
     <span class="badge-kind">manual</span>   ← default neutre
   =========================================================================== */

/* ── Types de document (flux EDI) ── */
.badge-kind--order   { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.badge-kind--desadv  { background: #f0f9ff; border-color: #bae6fd; color: #0284c7; }
.badge-kind--invoic  { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.badge-kind--recadv  { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }

/* ── Engines (pipeline format IN → OUT) ── */
.badge-kind--csv     { background: #D1FAE5; border-color: #A7F3D0; color: #065F46; }
.badge-kind--fixed   { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.badge-kind--edifact { background: #DBEAFE; border-color: #BFDBFE; color: #1E40AF; }
.badge-kind--xml     { background: #EDE9FE; border-color: #DDD6FE; color: #6D28D9; }

/* ── Transco value type ── */
.badge-kind--json    { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); }

/* ── Flèche entre engines (EDIFACT → CSV) ── */
.engine-arrow {
  display:     inline-block;
  margin:      0 var(--space-1);
  color:       var(--color-text-muted);
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
}


/* ===========================================================================
   CELL-META — cellule tableau avec ligne principale + sous-ligne muted
   Remplace : styles inline dans projects list (colonne MAJ : date + user)

   Usage :
     <td>
       <div class="cell-meta">
         <span class="cell-meta__main">28/03/2026 10:53</span>
         <span class="cell-meta__sub">admin</span>
       </div>
     </td>
   =========================================================================== */

.cell-meta {
  display:        flex;
  flex-direction: column;
  line-height:    1.3;
}

.cell-meta__main {
  font-size: var(--text-2xs);
  color:     var(--color-text-muted);
}

.cell-meta__sub {
  font-size: var(--text-2xs);
  color:     var(--color-text-light);
}


/* ===========================================================================
   COMBOBOX — select filtrable avec dropdown
   Remplace : .mf-combo (flows), .ff-combo (files),
              .sp-combo (specs), .tx-combo (transco)

   2 modes d'init par combobox.js :
   A) Progressive : <select data-combobox> → JS construit le wrapper
   B) Pre-built   : <div class="combobox"> avec input + list déjà en HTML

   Structure générée / attendue :
     <div class="combobox [is-open]">
       <input type="hidden" name="…" value="…">
       <input type="text" class="combobox__input" …>
       <button class="combobox__toggle">▼</button>
       <ul class="combobox__list">
         <li class="combobox__item" data-value="…">Label</li>
       </ul>
     </div>
   =========================================================================== */


/* ── Wrapper ── */
.combobox {
  position: relative;
  display:  flex;
  align-items: center;
}


/* ── Input texte (recherche / affichage) ── */
.combobox__input {
  flex:          1;
  min-width:     0;
  height:        var(--input-height-sm);
  padding:       0 var(--space-2) 0 var(--space-2);
  border:        var(--border-width) solid var(--color-border-strong);
  border-right:  none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size:     var(--text-xs);
  font-family:   var(--font-sans);
  color:         var(--color-text-main);
  background:    var(--color-surface);
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.combobox__input::placeholder {
  color:       var(--color-text-light);
  font-weight: var(--font-normal);
}

.combobox__input:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px var(--color-primary-alpha-10);
}

/* Quand l'input est focus, le toggle partage le même état visuel */
.combobox__input:focus ~ .combobox__toggle {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px var(--color-primary-alpha-10);
}

.combobox__input.has-value {
  color:       var(--color-primary-dark);
  font-weight: var(--font-semi);
}


/* ── Bouton toggle (chevron) — séparateur bordure gauche ── */
.combobox__toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           28px;
  height:          var(--input-height-sm);
  padding:         0;
  border:          var(--border-width) solid var(--color-border-strong);
  border-radius:   0 var(--radius-md) var(--radius-md) 0;
  background:      var(--color-surface);
  color:           var(--color-text-light);
  cursor:          pointer;
  transition:      color var(--transition-fast),
                   border-color var(--transition-fast),
                   background var(--transition-fast),
                   box-shadow var(--transition-fast);
}

.combobox__toggle:hover {
  color:      var(--color-primary);
  background: var(--color-primary-alpha-06);
}

.combobox.is-open .combobox__toggle {
  border-color: var(--color-primary);
  color:        var(--color-primary);
}

.combobox.is-open .combobox__toggle svg {
  transform: rotate(180deg);
}


/* ── Dropdown list — affiche 10 éléments, scroll au-delà ── */
.combobox__list {
  display:       none;
  position:      absolute;
  top:           calc(100% + 2px);
  left:          0;
  right:         0;
  z-index:       var(--z-dropdown, 100);
  margin:        0;
  padding:       4px 0;
  background:    var(--color-surface);
  border:        var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  max-height:    288px;   /* 10 items × 28px + 8px padding */
  overflow-y:    auto;
  list-style:    none;
  overscroll-behavior: contain;
}

.combobox.is-open .combobox__list {
  display: block;
}

/* Scrollbar fine */
.combobox__list::-webkit-scrollbar { width: 4px; }
.combobox__list::-webkit-scrollbar-thumb {
  background:    var(--color-border-strong);
  border-radius: 2px;
}


/* ── Item ── */
.combobox__item {
  padding:     5px 10px;
  font-size:   var(--text-xs);
  font-family: var(--font-mono);
  color:       var(--color-text-main);
  cursor:      pointer;
  white-space: nowrap;
  transition:  background .1s;
}

.combobox__item:hover,
.combobox__item.is-focused {
  background: var(--color-primary-alpha-08);
  color:      var(--color-primary-dark);
}

.combobox__item.is-selected {
  background:  var(--color-primary-light);
  color:       var(--color-primary-dark);
  font-weight: var(--font-semi);
}

.combobox__item.is-hidden {
  display: none;
}

/* ── Item interne (Tenant) — distinction visuelle tenant vs partenaire ── */
.combobox__item--internal {
  color:       var(--color-primary-dark);
  font-weight: var(--font-medium);
  border-bottom: var(--border-width) dashed var(--color-border);
}
.combobox__item--internal:last-of-type {
  border-bottom-style: solid;
}


/* ── Message "aucun résultat" ── */
.combobox__empty {
  padding:    8px 10px;
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  font-style: italic;
}


/* ===========================================================================
   TOPBAR LINKS — boutons/liens dans la topbar (page_actions)
   Remplace : .sp-topbar-link (specs + transco), .topbar-upload-btn (4 fichiers)

   Usage :
     <a href="…" class="topbar-link">Sandbox</a>            ← lien ghost secondaire (sp-topbar-link = alias compat)
     <a href="…" class="btn btn-sm btn-topbar">+ Nouveau</a>  ← CTA primaire (outline→fill)
   =========================================================================== */

/* Lien ghost dans la topbar (Sandbox, Tester, Tables…) */
.topbar-link,
.sp-topbar-link {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  font-size:       var(--text-xs);
  font-weight:     var(--font-medium);
  color:           var(--color-text-muted);
  text-decoration: none;
  padding:         var(--space-1) var(--space-3);
  border:          var(--border-width) solid transparent;
  border-radius:   var(--radius-md);
  transition:      border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.topbar-link:hover,
.sp-topbar-link:hover {
  border-color: var(--color-primary);
  color:        var(--color-primary);
  background:   var(--color-primary-alpha-08);
}

/* CTA primaire dans la topbar — outline teal par défaut, filled au hover.
   Usage : class="btn btn-sm btn-topbar"
   Ex : + Nouveau X, Envoyer un fichier
   Ancienne classe : topbar-upload-btn (alias conservé pour compat) */
.btn-topbar,
.topbar-upload-btn {
  border:        var(--border-width-md) solid var(--color-primary);
  color:         var(--color-primary);
  font-weight:   var(--font-semi);
  transition:    background var(--transition-fast), color var(--transition-fast);
}

.btn-topbar:hover,
.topbar-upload-btn:hover {
  background:      var(--color-primary);
  color:           #fff;
  text-decoration: none;
}

/* ===========================================================================
   COMBOBOX — extensions flows (group filtering + cross-exclusion)
   Ajout à la suite du bloc .combobox dans components.css
   =========================================================================== */

/* Masquage par groupe ou exclusion cross-combo (flows sender/receiver) */
.combobox__item--group-hidden,
.combobox__item--excluded {
  display: none;
}

/* ===========================================================================
   DATA TABLE — tableau de données canonique
   Source de vérité : flows (copie stricte)

   Sélecteurs :
     .data-table         : classe canonique (flows, transco)
     .file-table         : alias (files, specs, projets, partenaires, tenancy)
     .table-card         : wrapper card (transco, files, specs, projets, partenaires, tenancy)
     .files-table-wrap   : alias wrapper
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Wrapper card
--------------------------------------------------------------------------- */
.table-card,
.files-table-wrap {
  background:    var(--color-surface);
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-xs);
  overflow:      hidden;
}


/* ---------------------------------------------------------------------------
   Table base
--------------------------------------------------------------------------- */
.data-table,
.file-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
}


/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.data-table th,
.file-table th {
  padding:        10px var(--space-4);
  font-size:      var(--text-2xs);
  font-weight:    var(--font-bold);
  color:          var(--color-text-main);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom:  var(--border-width-md) solid var(--color-border);
  white-space:    nowrap;
  background:     var(--color-bg);
  text-align:     center;
  vertical-align: middle;
  position:       sticky;
  top:            0;
  z-index:        var(--z-raised);
}


/* ---------------------------------------------------------------------------
   Cellules
--------------------------------------------------------------------------- */
.data-table td,
.file-table td {
  padding:              11px var(--space-4);
  border-bottom:        var(--border-width) solid var(--color-border);
  font-family:          var(--font-mono);
  font-size:            var(--text-xs);
  font-variant-numeric: tabular-nums;
  color:                var(--color-text-main);
  vertical-align:       middle;
  text-align:           center;
  white-space:          nowrap;
  transition:           background var(--transition-fast);
}

.data-table tbody tr:last-child td,
.file-table tbody tr:last-child td {
  border-bottom: none;
}


/* ---------------------------------------------------------------------------
   Hover ligne
--------------------------------------------------------------------------- */
.data-table tbody tr:hover td,
.file-table tbody tr:hover td {
  background: var(--color-primary-alpha-04);
}


/* ---------------------------------------------------------------------------
   Liens dans les cellules
--------------------------------------------------------------------------- */
.data-table tbody td a,
.file-table tbody td a {
  color:           var(--color-text-main);
  font-weight:     inherit;
  text-decoration: none;
}

.data-table tbody td a:hover,
.file-table tbody td a:hover {
  color:           var(--color-primary);
  text-decoration: none;
}


/* ---------------------------------------------------------------------------
   Colonnes utilitaires
--------------------------------------------------------------------------- */
.data-table .col-center,
.file-table .col-center { text-align: center; }

.data-table .col-primary,
.data-table .col-tertiary,
.file-table .col-primary,
.file-table .col-tertiary {
  color:       var(--color-text-main);
  font-weight: inherit;
}

.data-table .col-check,
.file-table .col-check {
  width:      1%;
  padding:    0 var(--space-2);
  text-align: center;
}

.data-table .col-check input[type="checkbox"],
.file-table .col-check input[type="checkbox"] {
  cursor:       pointer;
  accent-color: var(--color-primary);
}

.data-table .col-mono,
.file-table .col-mono {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
}


/* ---------------------------------------------------------------------------
   Colonne actions — pattern canonique (2026-04-01)

   Pattern A (défaut) : "Ouvrir" (detail) + "Éditer" (edit, conditionnel)
     → Specs, Projects, Transco, Tenancy orgs, Tenancy groups
   Pattern B (lecture) : "Ouvrir" (detail) + "Voir" (preview)
     → Files IN, Files OUT (+ bouton ↓ download)
   Pattern C (single) : "Ouvrir" seul
     → Partners groups

   Règles :
     - Toujours btn-xs + btn-ghost (le sélecteur ci-dessous override la taille)
     - "Ouvrir" = 1er bouton, toujours présent → page detail
     - "Éditer" = 2e bouton conditionnel → page edit
     - "Voir" = variante lecture → preview ou detail read-only
     - Boutons spécifiques métier (Basculer, ↓) en extra
--------------------------------------------------------------------------- */
.data-table .col-actions,
.file-table .col-actions {
  text-align:  center;
  white-space: nowrap;
  width:       1%;
}

.data-table .col-actions .btn,
.file-table .col-actions .btn {
  padding:     3px var(--space-2);
  font-size:   var(--text-2xs);
  font-family: var(--font-sans);
}

.data-table .col-actions .btn.btn-ghost,
.file-table .col-actions .btn.btn-ghost {
  color:        var(--color-text-muted);
  border-color: var(--color-border);
}

.data-table .col-actions .btn.btn-ghost:hover,
.file-table .col-actions .btn.btn-ghost:hover {
  color:        var(--color-primary);
  border-color: var(--color-primary);
  background:   var(--color-primary-alpha-08);
}

.data-table .col-actions a,
.file-table .col-actions a,
.data-table .col-actions a:hover,
.file-table .col-actions a:hover {
  text-decoration: none;
}

/* ── Tri colonnes (lien cliquable dans <th>) ── */
.th-sort {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  color:           inherit;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
}
.th-sort:hover  { color: var(--color-text-main); }
.th-sort .caret { font-size: var(--text-2xs); opacity: .6; }


/* ---------------------------------------------------------------------------
   Badges dans les cellules
--------------------------------------------------------------------------- */
.data-table td .badge,
.file-table td .badge {
  font-weight: var(--font-normal);
  font-size:   var(--text-xs);
  padding:     2px 8px;
}


/* ---------------------------------------------------------------------------
   États de lignes
--------------------------------------------------------------------------- */

/* Ligne sélectionnée (bulk select) */
.data-table tr.is-selected td,
.file-table tr.is-selected td {
  background: var(--color-primary-alpha-08);
}

/* Ligne dupliquée — trait gauche bleu */
.data-table tr.row--dup td:first-child,
.file-table tr.row--dup td:first-child {
  box-shadow: inset 3px 0 0 #3b82f6;
}

/* Ligne inactive / draft */
.data-table tr.row-inactive td,
.file-table tr.row-inactive td,
.data-table tr.row--inactive td,
.file-table tr.row--inactive td {
  opacity: 0.55;
}

.data-table tr.row-inactive:hover td,
.file-table tr.row-inactive:hover td,
.data-table tr.row--inactive:hover td,
.file-table tr.row--inactive:hover td {
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Page layout — wrapper flex column pour toutes les pages list
--------------------------------------------------------------------------- */
.page-layout {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8);
  max-width:      var(--content-max-width);
}