/* ============================================================
   Cadre de page — ce que le design system ne couvre pas.

   `connect-vm.css` est la source de verite : il livre les composants
   (ligne, badge, boutons, statut, session) mais pas le gabarit de la
   page qui les porte. Ce fichier n'ajoute que ce cadre, en n'utilisant
   que ses jetons — aucune couleur, aucun rayon, aucune duree en dur.
   ============================================================ */

.page {
  box-sizing: border-box;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--cvm-space-6) var(--cvm-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cvm-space-4);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cvm-space-4);
}

.page-title {
  margin: 0;
  font-size: var(--cvm-size-500);
  font-weight: var(--cvm-weight-bold);
  line-height: var(--cvm-leading-tight);
}

.page-meta {
  margin: var(--cvm-space-1) 0 0;
  font-size: var(--cvm-size-100);
  color: var(--cvm-text-faint);
}

/* Le conteneur de liste : filet, rayon de carte, ombre la plus discrete.
   Le debordement est masque pour que les filets internes des lignes
   s'arretent exactement sur le rayon. */
.vms {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cvm-border);
  border-radius: var(--cvm-radius-2);
  background: var(--cvm-surface);
  box-shadow: var(--cvm-shadow-1);
  overflow: hidden;
}

[hidden] { display: none !important; }

/* La barre de session aligne nom, badge et meta a gauche ; la sortie va a
   droite. Le design system ne le dit pas — cest du gabarit, pas du composant. */
.session-bar .ghost { margin-left: auto; }

/* Le nom de la machine et la duree cedent la place avant la sortie : la barre
   ne doit jamais se chevaucher, meme dans une fenetre etroite. */
.session-bar .vm-name, .session-bar .vm-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Page de connexion : une carte centree, rien d autre a l ecran. */
.login {
  /* Sans cela le padding s ajoute aux 100vh : la page deborde d une hauteur de
     marge, une barre de defilement apparait, et la carte n est plus centree. */
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cvm-space-5);
}

.login-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: var(--cvm-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cvm-space-4);
  border: 1px solid var(--cvm-border);
  border-radius: var(--cvm-radius-3);
  background: var(--cvm-surface);
  box-shadow: var(--cvm-shadow-2);
}

.login-lead {
  margin: 0;
  font-size: var(--cvm-size-300);
  line-height: var(--cvm-leading-body);
  color: var(--cvm-text-muted);
}

.login-card form { margin: 0; }
.login-card button.primary { width: 100%; }

/* L identite et la sortie tiennent avec le bouton Actualiser, a droite du titre. */
.page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--cvm-space-2);
}

.page-head-actions form { margin: 0; }

.page-user {
  font-size: var(--cvm-size-100);
  color: var(--cvm-text-faint);
  margin-right: var(--cvm-space-1);
}

/* ---------- La liste, en grille de cartes ----------
   Les cartes gardent la classe .vm : elles heritent ainsi des traitements du
   design system qui s appuient sur l etat du badge — nom attenue quand la
   machine est eteinte, filet de progression pendant les transitions. */

.vms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--cvm-space-3);
  /* Chaque carte porte son propre cadre : le conteneur n en a plus besoin. */
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.vm.carte {
  display: flex;
  flex-direction: column;
  /* `.vm` centre ses elements pour sa version en ligne ; en colonne, cela
     centrerait tout le contenu de la carte. */
  align-items: stretch;
  gap: var(--cvm-space-2);
  padding: var(--cvm-space-3) var(--cvm-space-4);
  border: 1px solid var(--cvm-border);
  border-radius: var(--cvm-radius-2);
  box-shadow: var(--cvm-shadow-1);
}

/* Un nom d'occupant plus long que la carte doit s'abreger, pas la deformer. */
.carte .vm-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.carte-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cvm-space-2);
  min-width: 0;
}

/* Les actions occupent toute la largeur de la carte, a parts egales : la souris
   vise une cible large sans avoir a lire. */
.carte .vm-actions { justify-content: stretch; }
.carte .vm-actions button { flex: 1; }

/* Le prefixe est identique sur toutes les machines : il situe sans distraire. */
.vm-name .prefixe { color: var(--cvm-text-faint); }

/* Une machine occupee le dit dans la couleur reservee a ce qui est en cours. */
.vm-meta.occupee { color: var(--cvm-starting-fg); }