/* =========================================================================
   EXOBIO — Exploration Command Center
   Design system "DEEPSPACE" : terminal de bord, pas panneau d'administration.

   Trois regles qui tranchent tous les arbitrages :
     1. Le noir n'est pas une couleur de fond, c'est le vide. L'interface flotte.
     2. L'ambre est rare. Il designe ce qui compte MAINTENANT. S'il est partout,
        il ne veut plus rien dire.
     3. Une seconde et demie. C'est le temps qu'on regarde le second ecran.
   ========================================================================= */

:root {
  /* --- Vide et coque --- */
  --void:        #05060a;
  --hull-900:    #0a0c11;
  --hull-800:    #101318;
  --hull-700:    #171b22;
  --hull-600:    #1f242d;

  /* --- Traits --- */
  --line:        #232935;
  --line-soft:   #1a1f28;
  --line-strong: #333d4d;

  /* --- Encre (blanc legerement casse, jamais #fff) --- */
  --ink:         #eceae5;
  --ink-dim:     #9ba3af;
  --ink-faint:   #5c6673;

  /* --- Accent : exploration, information active --- */
  --amber:       #ff9b33;
  --amber-hi:    #ffb865;
  --amber-lo:    #b36313;
  --amber-veil:  rgba(255, 155, 51, .10);
  --amber-glow:  rgba(255, 155, 51, .28);

  /* --- Statuts --- */
  --new:         #35d68a;   /* nouveau, jamais visite */
  --seen:        #f0533d;   /* deja visite, avertissement */
  --gold:        #f7c948;   /* jackpot, decouverte exceptionnelle */
  --info:        #5ea8e8;   /* information secondaire, discret */
  --warn:        #e9a13b;   /* estimation, incertitude */

  --new-veil:    rgba(53, 214, 138, .10);
  --seen-veil:   rgba(240, 83, 61, .10);
  --gold-veil:   rgba(247, 201, 72, .12);
  --info-veil:   rgba(94, 168, 232, .10);
  --warn-veil:   rgba(233, 161, 59, .10);

  /* --- Formes : angles techniques, jamais arrondis mous --- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  /* --- Profondeur : la hierarchie vient du fond et du filet, pas de l'ombre --- */
  --elev-1: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.5);
  --elev-2: 0 8px 24px -12px rgba(0,0,0,.8);
  --glow-amber: 0 0 0 1px var(--amber-lo), 0 0 32px -14px var(--amber-glow);
  --glow-new:   0 0 0 1px rgba(53,214,138,.35), 0 0 32px -14px rgba(53,214,138,.30);
  --glow-seen:  0 0 0 1px rgba(240,83,61,.35),  0 0 32px -14px rgba(240,83,61,.30);

  /* --- Mouvement --- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- Typographie ---
     Volontairement PAS de police "jeu video" en texte courant : illisible en
     petit. Le caractere technique vient des chiffres monospace, des filets 1px
     et des angles coupes. */
  --font-ui:   "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular",
               Consolas, "Liberation Mono", monospace;

  --rail-w: 66px;
  --topbar-h: 52px;
}

/* ------------------------------------------------------------------ Base -- */

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--void);
  /* Deux halos tres sombres : empeche le banding sur les grands aplats noirs
     d'un ecran OLED, sans aucune image ni requete reseau. */
  background-image:
    radial-gradient(1200px 700px at 15% -10%, rgba(255,155,51,.045), transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, rgba(94,168,232,.035), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber-veil); color: var(--ink); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 10px; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-hi); text-decoration: underline; }

/* Chiffres toujours alignes en colonne : indispensable pour comparer des
   credits d'une ligne a l'autre. */
.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.hidden { display: none !important; }

/* Focus visible partout : navigation clavier reelle, pas decorative. */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Etiquette de champ / en-tete de colonne */
.label {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}

/* -------------------------------------------------------------- Scrollbar -- */

* { scrollbar-width: thin; scrollbar-color: var(--hull-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--hull-600);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--line-strong); }

/* ----------------------------------------------------------------- Panel -- */

.panel {
  background: var(--hull-900);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}
.panel-pad { padding: 18px 20px; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head .label { flex: 1; }

/* Le coin coupe est la signature visuelle. Reserve aux panneaux de premier
   plan : jamais sur les quarante lignes d'un tableau. */
.panel-cut {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.panel-accent { border-left: 2px solid var(--amber); }

/* --------------------------------------------------------------- Boutons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--hull-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--hull-600); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  color: #14100a;
  background: var(--amber);
  border-color: var(--amber);
}
.btn-primary:hover { background: var(--amber-hi); border-color: var(--amber-hi); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--hull-800); }

.btn-danger { color: var(--seen); border-color: rgba(240,83,61,.35); background: var(--seen-veil); }
.btn-danger:hover { background: rgba(240,83,61,.18); border-color: var(--seen); }

.btn-block { width: 100%; }
.btn-sm { padding: 6px 11px; font-size: 13px; }

.btn svg { flex: none; }

/* ---------------------------------------------------------------- Champs -- */

.field { margin-bottom: 16px; }
.field .label { display: block; margin-bottom: 6px; }

.input {
  width: 100%;
  padding: 10px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--hull-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--ink-faint); }
.input:hover { border-color: var(--line-strong); }
.input:focus {
  outline: none;
  background: var(--hull-700);
  border-color: var(--amber-lo);
  box-shadow: 0 0 0 3px var(--amber-veil);
}
textarea.input { resize: vertical; min-height: 90px; line-height: 1.5; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 42px; }
.input-icon-btn {
  position: absolute;
  right: 6px;
  display: flex;
  padding: 6px;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.input-icon-btn:hover { color: var(--ink); background: var(--hull-600); }

.hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
.hint-err { color: var(--seen); }

/* ---------------------------------------------------------------- Badges -- */
/* Le statut n'est JAMAIS porte par la couleur seule : couleur + glyphe + mot.
   Environ 8 % des hommes ne distinguent pas rouge et vert. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.badge .glyph { font-size: 13px; line-height: 1; }

.badge-new  { color: var(--new);  background: var(--new-veil);  border-color: rgba(53,214,138,.28); }
.badge-seen { color: var(--seen); background: var(--seen-veil); border-color: rgba(240,83,61,.28); }
.badge-gold { color: var(--gold); background: var(--gold-veil); border-color: rgba(247,201,72,.3); }
.badge-info { color: var(--info); background: var(--info-veil); border-color: rgba(94,168,232,.28); }
.badge-warn { color: var(--warn); background: var(--warn-veil); border-color: rgba(233,161,59,.28); }
.badge-mute { color: var(--ink-dim); background: var(--hull-700); border-color: var(--line); }

/* Marqueur de confiance : accompagne toute valeur non certaine. */
.conf {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--warn);
  cursor: help;
}
.conf-derived { color: var(--info); }
.conf-manual  { color: var(--ink-dim); }
.conf-unknown { color: var(--ink-faint); }

/* ------------------------------------------------------------- Spinner ---- */

.spinner {
  width: 26px;
  height: 26px;
  margin: 48px auto;
  border: 2px solid var(--line);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- Vide --- */

.empty {
  padding: 44px 20px;
  color: var(--ink-faint);
  text-align: center;
}
.empty h3 { margin-bottom: 6px; color: var(--ink-dim); font-size: 16px; }
.empty p { margin: 0; font-size: 14px; }

/* --------------------------------------------------------------- Toasts --- */

.toast-zone {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 15px;
  background: var(--hull-800);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-dim);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2);
  animation: toast-in var(--dur-3) var(--ease-out);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.toast .t-title { font-size: 13.5px; font-weight: 700; }
.toast .t-msg   { font-size: 13px; color: var(--ink-dim); }
.toast.ok   { border-left-color: var(--new); }
.toast.err  { border-left-color: var(--seen); }
.toast.warn { border-left-color: var(--warn); }
.toast.gold { border-left-color: var(--gold); }
.toast.info { border-left-color: var(--info); }

/* --------------------------------------------------------------- Modale --- */

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 4, 7, .72);
  backdrop-filter: blur(3px);
  animation: fade-in var(--dur-2) var(--ease);
}
.modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--hull-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
  animation: modal-in var(--dur-3) var(--ease-out);
}
.modal.lg { width: min(860px, 100%); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h3 { flex: 1; font-size: 16px; }
.modal-close {
  padding: 2px 9px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); background: var(--hull-700); }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.fade-up { animation: fade-up var(--dur-3) var(--ease-out); }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Page d'accueil / connexion
   ========================================================================== */

.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow: hidden;
}

/* Champ d'etoiles genere en CSS : aucune image, aucun asset propriétaire. */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 380px 380px;
  background-image:
    radial-gradient(1px 1px at 34px 62px,  rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 152px 21px, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 249px 143px,rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 88px 291px, rgba(255,255,255,.30), transparent),
    radial-gradient(1.6px 1.6px at 311px 246px, rgba(255,196,140,.42), transparent),
    radial-gradient(1px 1px at 197px 331px, rgba(255,255,255,.28), transparent),
    radial-gradient(1px 1px at 12px 199px,  rgba(190,220,255,.34), transparent);
  animation: drift 240s linear infinite;
}
@keyframes drift { to { background-position: 380px 380px; } }

.auth-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
}

.auth-brand { margin-bottom: 26px; text-align: center; }
.auth-brand .wordmark {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .42em;
  text-indent: .42em;   /* compense la chasse ajoutee a droite par letter-spacing */
  color: var(--ink);
}
.auth-brand .rule {
  width: 130px;
  height: 1px;
  margin: 12px auto;
  background: linear-gradient(90deg, transparent, var(--amber-lo), transparent);
}
.auth-brand .tagline {
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.auth-panel {
  padding: 26px 26px 22px;
  background: rgba(10, 12, 17, .84);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2), 0 0 60px -30px var(--amber-glow);
}
.auth-panel > .label { margin-bottom: 18px; }

.auth-switch {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--ink-dim);
  text-align: center;
}
.auth-foot {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

/* Bandeau de la cle de recuperation : volontairement impossible a manquer. */
.recovery-box {
  padding: 16px;
  margin: 14px 0;
  background: var(--amber-veil);
  border: 1px solid var(--amber-lo);
  border-radius: var(--r-md);
}
.recovery-key {
  display: block;
  margin: 10px 0;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: .06em;
  text-align: center;
  color: var(--amber-hi);
  background: var(--void);
  border: 1px dashed var(--amber-lo);
  border-radius: var(--r-md);
  user-select: all;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .auth-brand .wordmark { font-size: 26px; letter-spacing: .3em; text-indent: .3em; }
  .auth-panel { padding: 20px 18px 18px; }
  .toast-zone { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ==========================================================================
   Accessibilite du mouvement
   Respecte le reglage systeme ; un interrupteur utilisateur existe aussi dans
   les preferences (classe .no-anim posee sur <html>).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.no-anim *, .no-anim *::before, .no-anim *::after {
  animation: none !important;
  transition: none !important;
}

/* ==========================================================================
   Coque applicative : rail lateral + bandeau superieur + contenu
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

.shell-main { display: flex; flex-direction: column; min-width: 0; }

/* ------------------------------------------------------------------ Rail -- */

.rail {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100vh;
  padding: 12px 0;
  background: var(--hull-900);
  border-right: 1px solid var(--line);
}

.rail-brand {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--amber);
  border: 1px solid var(--amber-lo);
  border-radius: var(--r-md);
  background: var(--amber-veil);
}

.rail-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
.rail-spacer { flex: 1; }

.rail-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.rail-item:hover { color: var(--ink); background: var(--hull-700); }
.rail-item.active { color: var(--amber); background: var(--amber-veil); }

/* Liseré actif a gauche : repere immediat sans avoir a lire */
.rail-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 2px;
  height: 22px;
  background: var(--amber);
  border-radius: 0 2px 2px 0;
}

/* Libelle au survol : le rail reste etroit, l'information reste accessible */
.rail-label {
  position: absolute;
  left: calc(100% + 10px);
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  background: var(--hull-700);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.rail-item:hover .rail-label { opacity: 1; transform: none; }

/* --------------------------------------------------------------- Topbar --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: rgba(10, 12, 17, .82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-spacer { flex: 1; }

.agent-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.dot-on {
  background: var(--new);
  box-shadow: 0 0 0 3px rgba(53, 214, 138, .16);
}
.dot-off {
  background: var(--seen);
  box-shadow: 0 0 0 3px rgba(240, 83, 61, .14);
}

.cmdr { display: flex; align-items: baseline; gap: 9px; }
.cmdr-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
}

/* -------------------------------------------------------------- Contenu --- */

.content {
  flex: 1;
  width: 100%;
  max-width: 1680px;
  padding: 24px 24px 48px;
  margin: 0 auto;
}

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 22px; }
.page-head .sub { margin-top: 3px; font-size: 13.5px; color: var(--ink-dim); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ Responsive de la coque -- */
/* Sur mobile, le rail devient une barre inferieure : l'interface est repensee,
   pas simplement retrecie. */

@media (max-width: 720px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    flex-direction: row;
    justify-content: space-around;
    height: auto;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line);
    background: rgba(10, 12, 17, .96);
    backdrop-filter: blur(10px);
  }
  .rail-brand, .rail-spacer { display: none; }
  .rail-nav { flex-direction: row; justify-content: space-around; }
  .rail-item { width: 48px; height: 44px; }
  .rail-item.active::before { left: 50%; top: -6px; width: 22px; height: 2px; transform: translateX(-50%); }
  .rail-label { display: none; }

  .content { padding: 18px 16px calc(72px + env(safe-area-inset-bottom)); }
}