/* Composants partagés par toutes les pages, sur le modèle de shadcn/ui (décision 0030) : bouton principal bleu marine,
   secondaire sable, contour blanc, discret ; panneaux sable qui portent des lignes blanches. Rayons : 10 px pour les
   commandes, 12 px pour les lignes, 18 px pour les panneaux. */

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.375rem;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: 500 var(--text-md) / 1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-base) ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--outline {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.btn--quiet {
  background: transparent;
  color: var(--color-link);
}

.btn--danger {
  background: var(--color-bad);
  color: var(--color-on-bad);
}

.btn--sm {
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 3rem;
  font-size: var(--text-base);
}

.btn .icon {
  margin-left: -2px;
}

.btn--block {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
  }

  .btn--secondary:hover:not(:disabled) {
    background: var(--color-secondary-hover);
  }

  .btn--quiet:hover:not(:disabled),
  .btn--outline:hover:not(:disabled) {
    background: var(--color-surface-sunken);
  }
}

/* Commandes groupées sur une piste, comme les onglets de shadcn : l'élément courant sur une pastille blanche */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: calc(var(--radius-control) + 3px);
  background: var(--color-secondary);
}

.segmented .btn {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--color-text-muted);
}

.segmented .btn[aria-current="page"] {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  .segmented .btn:not([aria-current="page"]):hover {
    background: var(--color-secondary-hover);
    color: var(--color-text);
  }
}

/* Panneaux : un fond sable, sans bordure ; ce qu'ils contiennent est blanc */
.panel {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-panel);
  background: var(--color-panel);
}

.panel-title {
  font-size: 0.9375rem;
}

/* Un panneau qui ne contient qu'un formulaire prend la largeur du formulaire. */
.panel--form {
  max-width: 44rem;
}

/* Listes : un cadre blanc, une ligne par élément séparée d'un filet, son action à droite ; lisibles sur téléphone
   sans défilement horizontal */
.list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
  list-style: none;
}

.list-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.list-row:first-child {
  border-top: 0;
}

.list-row strong,
.list-row small {
  display: block;
}

.list-row strong {
  font-weight: 500;
}

.list-row small {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

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

/* Pastilles d'état : fond pâle, texte foncé de la même teinte, toujours accompagnées d'un mot */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.badge--ok {
  background: var(--color-ok-bg);
  color: var(--color-ok);
}

.badge--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn);
}

.badge--bad {
  background: var(--color-bad-bg);
  color: var(--color-bad);
}

/* Messages */
.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-row);
  background: var(--color-surface-sunken);
  font-size: var(--text-md);
}

.notice--ok {
  background: var(--color-ok-bg);
}

.notice--bad {
  background: var(--color-bad-bg);
}

.notice--warn {
  background: var(--color-warn-bg);
}

.notice-list {
  margin: 0;
  padding-left: var(--space-5);
}

/* Faits en liste : un libellé discret, une valeur */
.facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.facts dt {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.facts--grid {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.panel-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

/* Icônes au trait (balise <icon>) : 16 px, de la couleur du texte */
.icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bouton réduit à son icône : toujours un nom (aria-label), 44 px sur téléphone */
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: background-color var(--duration-base) ease;
}

@media (max-width: 60rem) {
  .icon-button {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.icon-button--primary {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.icon-button--primary .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
  }

  .icon-button--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
  }
}

/* Personnes : initiales sur une teinte pâle stable (Avatars.Tint) */
.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.avatar--lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-md);
}

.avatar--sm {
  width: 1.75rem;
  height: 1.75rem;
}

/* Une personne dans une liste : sa pastille, puis son nom */
.person {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.avatar--t1 { background: var(--color-person-1-bg); color: var(--color-person-1); }
.avatar--t2 { background: var(--color-person-2-bg); color: var(--color-person-2); }
.avatar--t3 { background: var(--color-person-3-bg); color: var(--color-person-3); }
.avatar--t4 { background: var(--color-person-4-bg); color: var(--color-person-4); }
.avatar--t5 { background: var(--color-person-5-bg); color: var(--color-person-5); }
.avatar--t6 { background: var(--color-person-6-bg); color: var(--color-person-6); }
.avatar--t7 { background: var(--color-person-7-bg); color: var(--color-person-7); }

/* Le DR400 vu de dessus de la page de connexion : la vignette d'un avion sans photo */
.plane-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
}

.plane-thumb svg { width: 2.125rem; height: 2.125rem; }
.plane-thumb-body { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 0.16; }
.plane-thumb-trim { fill: var(--color-primary); }
.plane-thumb--off { background: var(--color-nav-active); }
.plane-thumb--off .plane-thumb-body { stroke: var(--color-border-control); }
.plane-thumb--off .plane-thumb-trim { fill: var(--color-border-control); }