/* Nébula — surcouche thème "veille de pont de commandement" sur Bootstrap 5 (dark).
   Palette : nuit #0b0e1a · panneaux #141a2e · lisérés #26304f
             accent ambre #f0b429 · info cyan #58c4dd · alerte #e06c75 */

:root, [data-bs-theme=dark] {
  --bg: #0b0e1a;
  --panel: #141a2e;
  --panel-2: #1a2138;
  --line: #26304f;
  --text: #d8def0;
  --muted: #8891ad;
  --amber: #f0b429;
  --cyan: #58c4dd;
  --red: #e06c75;
  --green: #7fc97f;
  --mono: "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Variables Bootstrap redirigées vers la palette */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
  --bs-warning: var(--amber);
  --bs-danger: var(--red);
  --bs-info: var(--cyan);
  --bs-success: var(--green);
  /* Palette Couleurs Ressources */
  --res-metal: #f0b429;     /* Métal = JAUNE */
  --res-crystal: #38bdf8;   /* Cristal = BLEU */
  --res-deuterium: #ffffff; /* Deutérium = BLANC */
  --res-energy: #c084fc;    /* Énergie = VIOLET */
}

body {
  background-image:
    radial-gradient(1px 1px at 12% 22%, #ffffff55 0, transparent 100%),
    radial-gradient(1px 1px at 78% 8%, #ffffff40 0, transparent 100%),
    radial-gradient(1px 1px at 35% 74%, #ffffff30 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 62%, #ffffff45 0, transparent 100%),
    radial-gradient(1px 1px at 55% 40%, #ffffff25 0, transparent 100%);
  min-height: 100vh;
}
.hidden { display: none !important; }

/* ── Typo ─────────────────────────────────────── */
.logo {
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--amber);
  text-shadow: 0 0 24px #f0b42955;
}
h1.logo { font-size: 1.75rem; word-break: break-word; }
.logo.small { font-size: 0.95rem; letter-spacing: .08em; white-space: nowrap; }
h2, .card-title {
  font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
  padding-bottom: .4rem; margin-bottom: .8rem;
}
.res-val, .res-cap, .coords, .countdown, td.n { font-family: var(--mono); }
.coords { color: var(--cyan); }
.countdown { color: var(--amber); }

/* ── Connexion ────────────────────────────────── */
.auth-box { width: 340px; max-width: 100%; }
.tagline { color: var(--muted); font-size: .85rem; }
.error { color: var(--red); font-size: .85rem; min-height: 1.2em; }

/* ── Panneaux Bootstrap aux couleurs du pont ──── */
.card { --bs-card-bg: var(--panel); border-color: var(--line); }
header.navbar { background: var(--panel); border-color: var(--line) !important; }
#resbar { background: #0e1324; border-color: var(--line) !important; }
.form-control, .form-select { background-color: var(--panel-2); border-color: var(--line); }
.qty { width: 5.5rem; }

/* ── Ressources (Code couleur Métal/Cristal/Deutérium/Énergie) ───────────────── */
.res { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
       padding: .5rem .8rem; display: flex; flex-direction: column; min-width: 130px; 
       position: relative; overflow: hidden; z-index: 1; }
.res::before {
  content: ""; position: absolute;
  bottom: 0; left: 0; right: 0; height: var(--fill-pct, 0%);
  z-index: -1; transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 0 0 8px 8px;
}
.res-metal::before { background: linear-gradient(to top, rgba(240, 180, 41, 0.02), rgba(240, 180, 41, 0.25)); }
.res-crystal::before { background: linear-gradient(to top, rgba(56, 189, 248, 0.02), rgba(56, 189, 248, 0.25)); }
.res-deuterium::before { background: linear-gradient(to top, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.15)); }
.res-energy::before { background: linear-gradient(to top, rgba(192, 132, 252, 0.02), rgba(192, 132, 252, 0.25)); }
.res-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.res-val { font-size: 1.05rem; font-family: var(--mono); }
.res-cap { font-size: .7rem; color: var(--muted); }

/* Code Couleur Demandé */
.res-metal .res-val, #r-metal, .res-tag.res-metal, .res-label-metal { color: var(--res-metal) !important; }
.res-crystal .res-val, #r-crystal, .res-tag.res-crystal, .res-label-crystal { color: var(--res-crystal) !important; }
.res-deuterium .res-val, #r-deuterium, .res-tag.res-deuterium, .res-label-deuterium { color: var(--res-deuterium) !important; }
.res-energy .res-val, #r-energy, .res-tag.res-energy, .res-label-energy { color: var(--res-energy) !important; }

.res-val.full { color: var(--red) !important; }
#r-energy.deficit { color: var(--red) !important; }

.res-tag { font-family: var(--mono); font-weight: 600; }
.res-tag.lack, .cost .lack {
  text-decoration: line-through !important;
  text-decoration-color: rgba(224, 108, 117, 0.45) !important;
  text-decoration-thickness: 1.5px !important;
  opacity: 0.9;
}

/* ── Onglets ──────────────────────────────────── */
.tabs-scroll { overflow-x: auto; scrollbar-width: thin; }
#tabs { border-bottom-color: var(--line); }
#tabs .nav-link { color: var(--muted); }
#tabs .nav-link.active {
  color: var(--amber); background: var(--panel);
  border-color: var(--line) var(--line) var(--panel);
}

/* ── Tables ───────────────────────────────────── */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line);
         --bs-table-hover-bg: #ffffff06; --bs-table-hover-color: var(--text); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
     color: var(--muted) !important; font-weight: 600; }
td.n { text-align: right; white-space: nowrap; }
td.actions { white-space: nowrap; }
.cost { font-size: .8rem; color: var(--muted); font-family: var(--mono); }
.lvl { color: var(--cyan); font-family: var(--mono); white-space: nowrap; }
.mine-row td:first-child { color: var(--green); }
.muted { color: var(--muted); }
small.req { color: var(--red); }
.mission-note { font-size: .82rem; color: var(--muted); }

/* ── Planètes procédurales ────────────────────── */
.planet-canvas { vertical-align: middle; }

/* ── Messages ─────────────────────────────────── */
.msg { border-left: 3px solid var(--line); padding: .5rem .8rem; margin-bottom: .7rem;
       background: var(--panel); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.msg.unread { border-left-color: var(--amber); }
.msg .subject { font-weight: 600; }
.msg .date { font-size: .75rem; color: var(--muted); font-family: var(--mono); }

/* ── Toast ────────────────────────────────────── */
.toast-nebula { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
                background: var(--panel-2); border: 1px solid var(--amber); color: var(--text);
                padding: .6rem 1.2rem; border-radius: 8px; box-shadow: 0 4px 24px #0008;
                max-width: 90vw; z-index: 1080; }
.toast-nebula.err { border-color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .toast-nebula { animation: pop .18s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translate(-50%, 8px); } }
}

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 576px) {
  h1.logo { font-size: 1.25rem; letter-spacing: .05em; }
  .logo.small { font-size: 0.8rem; letter-spacing: .04em; }
  .res { min-width: 0; flex: 1 1 40%; }
  .qty { width: 4.5rem; }
  main.container-xxl { padding-left: .6rem; padding-right: .6rem; }
  .btn-sm { --bs-btn-padding-y: .35rem; }  /* cibles tactiles un peu plus hautes */
}

/* ── Grille de cartes pour Bâtiments & Recherche ─ */
.nebula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.item-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.item-card:hover {
  transform: translateY(-3px);
  border-color: var(--amber);
  box-shadow: 0 8px 24px rgba(240, 180, 41, 0.12);
}

.item-card.disabled-card {
  opacity: 0.55;
  filter: grayscale(35%);
  border-color: rgba(255, 255, 255, 0.05);
}

.item-card.disabled-card:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.item-card.disabled-card:hover .item-img {
  transform: none;
}

.item-img-wrap {
  position: relative;
  height: 150px;
  width: 100%;
  background: #090c17;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.item-card:hover .item-img {
  transform: scale(1.06);
}

.item-badge-lvl {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(11, 14, 26, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 0.2rem 0.65rem;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.item-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.item-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}

.item-meta {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.item-cost {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--mono);
  margin-bottom: 0.5rem;
}

.item-dur {
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--mono);
}

.item-bonus {
  font-size: 0.81rem;
  color: var(--cyan);
  font-weight: 500;
  line-height: 1.25;
}