/* design-system.css — Variables CSS, reset, body, navbar, main layout, section-header */

/* ── DESIGN SYSTEM — ORBITAL COMMAND ───────────────────────────────── */
:root {
  --bg:          #11131c;
  --surface-low: #191b24;
  --surface:     #1d1f29;
  --surface-hi:  #282933;
  --border:      #44474a;
  --text:        #e1e1ef;
  --muted:       #8f9194;
  --primary:     #00e475;
  --primary-dim: rgba(0, 228, 117, 0.12);
  --danger:      #d73b00;
  --danger-dim:  rgba(215, 59, 0, 0.12);
  --font-head:   'Space Grotesk', sans-serif;
  --font-body:   'Inter', sans-serif;
  --radius:      10px;
  --transition:  0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  min-height: 100vh;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  font-size: 18px;
}

/* ── NAVBAR TOP ──────────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(17, 19, 28, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

/* Left — brand */
#navbar .brand {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
#navbar .brand span { color: var(--muted); font-weight: 400; }

/* Center — nav tabs */
#navbar nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
#navbar nav a {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: color var(--transition), background var(--transition);
  cursor: pointer;
}
#navbar nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
#navbar nav a.active {
  color: var(--primary);
  background: var(--primary-dim);
  border-bottom: 2px solid var(--primary);
  border-radius: 6px 6px 0 0;
}

/* Right — status badge */
#insta-status-badge {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface-low);
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
#insta-status-badge.online {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-dim);
}
#insta-status-badge.offline {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-dim);
}

/* ── MAIN CONTENT ────────────────────────────────────────────────── */
/* BLOC_fix_global_galaxy_zindex_visibility (2026-04-28) :
   position:relative + z-index:1 pour passer tout le contenu au-dessus de
   .galaxy-bg (position:fixed z-index:0). Sans ça, galaxy-bg fixed peint
   APRÈS les éléments static descendants → contenu invisible sur les
   onglets autres que Approbation. */
#main {
  margin-top: 56px;
  padding: 28px 24px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

/* Section header */
.section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}
.section-header h2 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
}
.section-header .section-sub {
  font-size: 12px;
  color: var(--muted);
}