/* ==========================================================================
   Page Mes Planetes

   Identite : violet/indigo profond, liserés cyan, illustrations de mondes en
   fond de carte. Trois etages — bandeau de totaux, barre d'outils, grille de
   cartes — chacun sur son propre cadre.
   ========================================================================== */

.planets-panel {
  /* Meme cadrage que la page Amiraux : plein ecran, au-dessus de la carte.
     `.admiral-page` ne porte que l'habillage de l'en-tete ; le positionnement
     venait de `.governor-panel`, que ce panneau n'a pas. */
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
  background:
    radial-gradient(circle at 20% -10%, rgba(88, 42, 168, 0.32), transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(24, 78, 168, 0.28), transparent 50%),
    linear-gradient(180deg, rgba(6, 8, 26, 0.98), rgba(4, 6, 20, 0.99));
  overflow: hidden;
}

/* `display: flex` ci-dessus l'emporterait sur la regle globale `[hidden]`. */
.planets-panel[hidden] {
  display: none;
}

.planets-overview,
.planets-toolbar {
  flex: 0 0 auto;
  padding-inline: var(--space-3);
}

.planets-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Bandeau de totaux --- */

.planet-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgba(126, 96, 220, 0.34);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26, 22, 66, 0.78), rgba(10, 10, 34, 0.9));
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.planet-summary-block {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  /* Separateurs internes plutot qu'un cadre par bloc : le bandeau se lit comme
     une seule reglette, comme sur la maquette. */
  padding-left: var(--space-3);
  border-left: 1px solid rgba(126, 96, 220, 0.22);
}

.planet-summary-block:first-child {
  padding-left: 0;
  border-left: 0;
}

.planet-summary-icon {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--planet-icon) center / contain no-repeat;
  filter: drop-shadow(0 0.2rem 0.5rem rgba(0, 0, 0, 0.55));
}

.planet-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.planet-summary-copy small {
  color: #a89ce0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.planet-summary-copy strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.1;
}

.planet-summary-copy em {
  color: #a89ce0;
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* --- Debits horaires --- */

.planet-rate-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem 0.55rem;
  min-width: 0;
  flex-wrap: wrap;
}

/* Dans une carte, les trois debits doivent tenir sur une seule ligne : le
   retour a la ligne decalait tout le corps et cassait l'alignement des cartes
   voisines. On les laisse se comprimer plutot que se replier. */
.planet-card-body .planet-rate-list {
  flex-wrap: nowrap;
  gap: 0.4rem;
}

.planet-card-body .planet-rate {
  font-size: var(--text-xs);
}

.planet-card-body .planet-rate img {
  width: 1.15em;
  height: 1.15em;
}

.planet-rate {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.planet-rate img {
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
}

.planet-rate i {
  font-style: normal;
  opacity: 0.75;
}

.planet-rate small {
  color: var(--text-secondary);
  font-size: 0.75em;
}

/* --- Alertes --- */

.planet-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.planet-alert {
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(126, 96, 220, 0.4);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.planet-alert.is-warning {
  border-color: rgba(255, 190, 90, 0.6);
  background: rgba(255, 176, 60, 0.14);
  color: var(--accent-gold-bright);
}

/* --- Barre d'outils --- */

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

.planet-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.planet-cta--primary {
  border: 1px solid rgba(255, 214, 128, 0.65);
  background: linear-gradient(180deg, rgba(255, 190, 66, 0.95), rgba(198, 122, 16, 0.96));
  box-shadow: 0 0 1rem rgba(255, 180, 60, 0.28);
  color: #17110a;
}

.planet-cta--ghost {
  border: 1px solid rgba(126, 96, 220, 0.5);
  background: linear-gradient(180deg, rgba(38, 28, 88, 0.9), rgba(18, 14, 48, 0.92));
  color: var(--text-primary);
}

.planet-cta[disabled] {
  opacity: 0.42;
  filter: saturate(0.4);
}

.planet-reserve {
  flex: 1 1 12rem;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.planet-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(126, 96, 220, 0.45);
  border-radius: var(--radius-md);
  background: rgba(18, 16, 48, 0.85);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.planet-sort select {
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.planet-view-switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid rgba(126, 96, 220, 0.45);
  border-radius: var(--radius-md);
  background: rgba(18, 16, 48, 0.85);
}

.planet-view-switch button {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
}

.planet-view-switch button.is-active {
  background: linear-gradient(180deg, rgba(120, 72, 220, 0.95), rgba(70, 38, 150, 0.95));
  color: #fff;
}

/* --- Carte d'une planete --- */

.planet-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(126, 96, 220, 0.36);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20, 18, 56, 0.9), rgba(7, 8, 26, 0.95));
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* Un entrepot proche de la saturation gaspille de la production : la carte le
   signale par sa bordure, pas seulement par une ligne de texte. */
.planet-card.is-warning {
  border-color: rgba(255, 190, 90, 0.62);
  box-shadow: var(--shadow-1), 0 0 1rem rgba(255, 176, 60, 0.22);
}

/* Hors de portee : la carte reste lisible mais visiblement en retrait. */
.planet-card.is-remote {
  opacity: 0.76;
}

.planet-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.planet-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.planet-card-title strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.planet-card-title small {
  color: #a89ce0;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.planet-card-title i {
  color: rgba(168, 156, 224, 0.5);
  font-style: normal;
}

.planet-status {
  flex: 0 0 auto;
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(160, 180, 210, 0.32);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  white-space: nowrap;
}

.planet-status.is-reachable {
  border-color: rgba(86, 220, 160, 0.55);
  background: rgba(60, 200, 140, 0.14);
  color: #8ef0c4;
}

/* --- Illustration --- */

.planet-card-art {
  position: relative;
  /* Hauteur plafonnee : laissee libre, l'illustration grandissait avec la
     largeur de la carte et repoussait production, entrepot et boutons hors de
     l'ecran. Le rapport ne sert plus qu'aux cartes etroites. */
  height: min(9rem, 52vw);
  aspect-ratio: 16 / 8;
  background: var(--planet-art) center / cover no-repeat;
  /* Fondu vers le bas : le texte qui suit reste lisible sans cadre supplementaire. */
  mask-image: linear-gradient(180deg, #000 68%, transparent);
}

.planet-card-sigil {
  position: absolute;
  top: 0.5rem;
  left: 0.6rem;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--planet-sigil) center / contain no-repeat;
  filter: drop-shadow(0 0 0.5rem rgba(150, 90, 255, 0.6));
}

/* --- Corps --- */

.planet-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 var(--space-3) var(--space-2);
}

.planet-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.planet-row--split {
  justify-content: space-between;
}

.planet-row small {
  flex: 0 0 auto;
  color: #8f84c8;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.planet-row em {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-style: normal;
  text-align: right;
}

.planet-store,
.planet-garrison,
.planet-admiral {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.planet-garrison b {
  color: rgba(168, 156, 224, 0.6);
}

.planet-garrison.is-full {
  color: #8ef0c4;
}

.planet-garrison-icon {
  width: 1.1rem;
  height: 1.1rem;
  background: var(--planet-icon) center / contain no-repeat;
}

.planet-admiral-avatar {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(126, 96, 220, 0.5);
  border-radius: 50%;
  background: var(--planet-avatar, radial-gradient(circle at 50% 35%, rgba(120, 108, 190, 0.9), rgba(30, 26, 66, 0.9))) center / cover no-repeat;
}

.planet-transit {
  margin: 0;
  color: var(--accent-cyan);
  font-size: var(--text-xs);
}

/* --- Jauges --- */

.planet-gauge {
  overflow: hidden;
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: rgba(10, 8, 30, 0.9);
}

.planet-gauge span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(120, 90, 240, 0.95), rgba(90, 190, 255, 0.95));
  transition: width var(--motion-medium) var(--ease-tactical);
}

.planet-gauge.is-warning span {
  background: linear-gradient(90deg, rgba(255, 190, 90, 0.95), rgba(255, 128, 80, 0.95));
}

.planet-gauge.is-full span {
  background: linear-gradient(90deg, rgba(90, 230, 170, 0.95), rgba(130, 240, 200, 0.95));
}

/* --- Actions --- */

.planet-card-actions {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}

.planet-action {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.45rem 0.3rem;
  border: 1px solid rgba(126, 96, 220, 0.45);
  border-radius: var(--radius-md);
  background: rgba(20, 16, 52, 0.85);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Un libelle coupe en deux desalignait la rangee de boutons d'une carte a
     l'autre : on garde une seule ligne quitte a reduire la graisse. */
  white-space: nowrap;
}

.planet-action--primary {
  border-color: rgba(150, 96, 255, 0.7);
  background: linear-gradient(180deg, rgba(126, 72, 232, 0.95), rgba(74, 36, 158, 0.95));
}

.planet-action--secondary {
  border-color: rgba(90, 150, 235, 0.6);
  background: linear-gradient(180deg, rgba(34, 74, 150, 0.9), rgba(18, 38, 88, 0.92));
}

.planet-action[disabled] {
  opacity: 0.4;
  filter: saturate(0.4);
}

/* --- Affichage en liste --- */

.planets-list.is-list-view {
  grid-template-columns: minmax(0, 1fr);
}

.planets-list.is-list-view .planet-card {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-areas:
    "art head"
    "art body"
    "art actions";
  align-items: stretch;
}

.planets-list.is-list-view .planet-card-art {
  grid-area: art;
  /* Ni hauteur fixe ni rapport d'aspect ici : combines a `height: 100%`, ils se
     resolvaient circulairement et la carte se retrouvait rognee sur ses
     dernieres lignes. On laisse la grille imposer la hauteur. */
  height: auto;
  min-height: 100%;
  aspect-ratio: auto;
  mask-image: linear-gradient(90deg, #000 72%, transparent);
}

.planets-list.is-list-view .planet-card-actions {
  align-items: end;
}

.planets-list.is-list-view .planet-card-head {
  grid-area: head;
}

.planets-list.is-list-view .planet-card-body {
  grid-area: body;
}

.planets-list.is-list-view .planet-card-actions {
  grid-area: actions;
}

.planet-empty-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed rgba(126, 96, 220, 0.4);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  text-align: center;
}

.planet-empty-state strong {
  color: var(--text-primary);
  font-family: var(--font-display);
}

@media (max-width: 40rem) {
  .planet-summary-block {
    padding-left: 0;
    border-left: 0;
  }

  .planets-list.is-list-view .planet-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "art" "head" "body" "actions";
  }

  .planets-list.is-list-view .planet-card-art {
    aspect-ratio: 16 / 7;
    mask-image: linear-gradient(180deg, #000 68%, transparent);
  }
}