/* ── Google Fonts — pixel HUD + terminal mono ────────────────────────────────*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Press+Start+2P&family=VT323:wght@400&display=swap');

/* ── Variables — retro sci-fi phosphor terminal ───────────────────────────────*/
:root {
  /* Phosphor P31-ish green + accents (CRT / mainframe TTY) */
  --green:       #39ff14;
  --green-dim:   #0d6b2c;
  --green-muted: rgba(57, 255, 20, 0.45);
  --green-glow:  0 0 4px #39ff14, 0 0 18px rgba(57, 255, 20, 0.45);

  --blue:        #5ce1ff;
  --blue-dim:    #0a5c6e;
  --blue-glow:   0 0 5px #5ce1ff, 0 0 14px rgba(92, 225, 255, 0.45);

  --rose:        #ff7cff;
  --rose-dim:    #6b1a6b;
  --rose-glow:   0 0 5px #ff7cff, 0 0 14px rgba(255, 124, 255, 0.4);

  --red:         #ff3b3b;
  --red-glow:    0 0 5px #ff3b3b, 0 0 14px rgba(255, 59, 59, 0.45);
  --amber:       #ffcc33;
  --amber-glow:  0 0 5px #ffcc33, 0 0 14px rgba(255, 204, 51, 0.4);

  /* Chassis + glass */
  --bg:            #010203;
  --panel-bg:      #030605;
  --border:        #141a16;
  --dim:           #5a6b5f;
  --bezel:         #0a100c;
  --bezel-highlight: rgba(57, 255, 20, 0.14);
  --phosphor-tint: rgba(20, 90, 45, 0.12);

  /* Typo — VT323 primary; IBM Plex for dense tabular HUD */
  --font-pixel:  'Press Start 2P', monospace;
  --font-mono:   'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  --font-hud:    'IBM Plex Mono', 'VT323', monospace;

  --header-h:    clamp(52px, 5.5dvh, 72px);
  --statusbar-h: clamp(30px, 4.2dvh, 36px);
  --ticker-h:    clamp(60px, 7.5dvh, 88px);
  --gap:         10px;
  --lcd-inset:   rgba(57, 255, 20, 0.07);

  /*
   * Échelle typo harmonisée (h1→h4 + corps) : écarts ~10–14 %, plafonds serrés
   * pour éviter « h4 illisible / h1 énorme » au zoom ou sur grands écrans.
   * Les anciennes --text-body / --text-pixel-* pointent vers ces jetons.
   */
  --type-h1: clamp(1.125rem, 1.02rem + 0.42vw, 1.5rem);
  --type-h2: clamp(1.0625rem, 0.97rem + 0.32vw, 1.3125rem);
  --type-h3: clamp(1rem, 0.92rem + 0.26vw, 1.1875rem);
  --type-h4: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem);
  --type-body: clamp(0.9375rem, 0.86rem + 0.18vw, 1.0625rem);
  --type-small: clamp(0.875rem, 0.82rem + 0.14vw, 0.9375rem);
  --type-caption: clamp(14px, 0.76rem + 0.1vw, 0.875rem);
  /* HUD / liens nav : même plancher que --type-small */
  --type-nav: var(--type-small);
  --type-link: var(--type-body);
  /* Press Start 2P — plancher lisible (éviter 8–10px) */
  --type-pixel-sm: clamp(12px, 0.58rem + 0.22vw, 14px);
  --type-pixel-md: clamp(13px, 0.62rem + 0.26vw, 15px);
  /* Affichage type horloge / ticker : proche h2, borné */
  --type-display: clamp(1.1875rem, 1rem + 0.55vw, 1.75rem);

  --text-body: var(--type-body);
  --text-pixel-sm: var(--type-pixel-sm);
  --text-pixel-md: var(--type-pixel-md);

  /* ── UI kit (shared pages) ─────────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 6px;
  --stroke-1: 1px solid color-mix(in srgb, var(--green) 22%, #0a120c);
  --stroke-dim: 1px solid color-mix(in srgb, var(--green) 14%, #071009);
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--green) 45%, transparent);
  --shadow-soft: 0 0 48px rgba(57, 255, 20, 0.12), inset 0 0 0 1px rgba(57, 255, 20, 0.06);
  /* Pages utilitaires : pleine largeur utile, marges fluides */
  --page-max: none;
}

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

html {
  height: 100dvh;
  overflow: hidden;
}

html, body {
  width: 100%;
  margin: 0;
}

body {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 130% 90% at 50% -10%, var(--phosphor-tint) 0%, transparent 55%),
    radial-gradient(ellipse 95% 70% at 50% 115%, rgba(0, 30, 18, 0.55) 0%, transparent 45%),
    radial-gradient(ellipse 120% 80% at 50% 20%, #0c1510 0%, #020806 38%, #000 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 55, 28, 0.045) 2px, rgba(0, 55, 28, 0.045) 4px);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Dashboard CRT : léger rehaussement vs pages UI, même hiérarchie */
body.crt {
  --type-h1: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5625rem);
  --type-h2: clamp(1.125rem, 1rem + 0.38vw, 1.375rem);
  --type-h3: clamp(1.0625rem, 0.96rem + 0.3vw, 1.25rem);
  --type-h4: clamp(1rem, 0.92rem + 0.24vw, 1.125rem);
  --type-body: clamp(1rem, 0.9rem + 0.22vw, 1.125rem);
  --type-small: clamp(0.9375rem, 0.86rem + 0.16vw, 1rem);
  --type-pixel-sm: clamp(13px, 0.6rem + 0.24vw, 15px);
  --type-pixel-md: clamp(14px, 0.64rem + 0.28vw, 16px);
  --type-display: clamp(1.25rem, 1.05rem + 0.6vw, 1.875rem);
  --text-body: var(--type-body);
  --text-pixel-sm: var(--type-pixel-sm);
  --text-pixel-md: var(--type-pixel-md);
  --dash-type-s: var(--type-pixel-sm);
  --dash-type-m: var(--type-body);
  --dash-type-l: var(--type-h3);
}

/* Mobile/tablette: scroll vertical (les règles .crt-wrap / .crt-stage mobile
   sont redéfinies plus bas, après le bloc desktop, pour gagner en cascade). */
@media (max-width: 960px) {
  html, body {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

}

::selection { background:var(--green); color:var(--bg); }

/* ── Shared UI primitives (admin/settings/docs/terminal) ───────────────────── */

/* Links */
a {
  color: color-mix(in srgb, var(--blue) 80%, #fff);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { color: color-mix(in srgb, var(--blue) 92%, #fff); text-decoration: underline; }

/* Form controls */
input, select, textarea, button {
  font: inherit;
  color: inherit;
}

input, select, textarea {
  background: #000;
  border: var(--stroke-dim);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: color-mix(in srgb, var(--green) 30%, #fff);
  outline: none;
}
input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, var(--dim) 70%, transparent);
  opacity: 1;
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--green) 45%, #0a120c);
  box-shadow: var(--focus-ring);
}

/* Buttons */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: var(--stroke-dim);
  background: transparent;
  font-size: var(--type-body);
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  letter-spacing: 0.04em;
}
.ui-btn:active { transform: translateY(1px); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ui-btn--primary {
  border-color: color-mix(in srgb, var(--green) 60%, #0a120c);
  color: var(--green);
  text-shadow: var(--green-glow);
}
.ui-btn--primary:hover {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  box-shadow: 0 0 18px rgba(57,255,20,0.14);
}

.ui-btn--ghost {
  color: color-mix(in srgb, var(--dim) 90%, #fff);
}
.ui-btn--ghost:hover {
  color: color-mix(in srgb, var(--green) 55%, #fff);
  border-color: color-mix(in srgb, var(--green) 35%, #0a120c);
}

.ui-btn--danger:hover {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 65%, #1a0707);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

/* Page shells */
.ui-page {
  min-height: 100vh;
  height: auto;
  max-height: none;
  overflow: auto;
}

/* Global html/body lock (above) is for the fixed CRT dashboard. Auxiliary pages
   only set body.ui-page; without this, html stays overflow:hidden and the doc
   cannot scroll on viewports > 960px. Exclude .terminal (full-viewport + inner scroll). */
html:has(body.ui-page:not(.terminal)) {
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.ui-wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px) clamp(14px, 2.5vw, 36px) 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}
.ui-shell {
  border: var(--stroke-1);
  border-radius: var(--radius-md);
  background: rgba(1, 4, 2, 0.97);
  box-shadow: var(--shadow-soft);
}
.ui-shell__body { padding: 18px; }

.ui-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: var(--stroke-dim);
}
.ui-title {
  font-family: var(--font-pixel);
  font-size: var(--type-pixel-md);
  letter-spacing: 0.18em;
  line-height: 1.45;
  color: var(--green);
  text-shadow: var(--green-glow);
  text-transform: uppercase;
}
.ui-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ui-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: var(--stroke-dim);
  border-radius: var(--radius-sm);
  font-size: var(--type-nav);
  color: color-mix(in srgb, var(--blue) 75%, #fff);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ui-nav a:hover {
  border-color: color-mix(in srgb, var(--blue) 60%, #111);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}

/* Sections / cards */
.ui-card {
  border: var(--stroke-dim);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-bg) 60%, #000);
}
.ui-card__head {
  padding: 12px 14px;
  border-bottom: var(--stroke-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ui-card__title {
  font-family: var(--font-pixel);
  font-size: var(--type-pixel-sm);
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--green) 85%, #fff);
  text-transform: uppercase;
}
.ui-card__body { padding: 14px; }

/* Hiérarchie sémantique pages .ui-page (docs, settings, showcase…) */
.ui-page h1 {
  font-family: var(--font-mono);
  font-size: var(--type-h1);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: color-mix(in srgb, var(--green) 88%, #fff);
  margin: 0 0 0.5em;
}
.ui-page h2 {
  font-family: var(--font-mono);
  font-size: var(--type-h2);
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--green) 82%, #fff);
  margin: 0 0 0.45em;
}
.ui-page h3 {
  font-family: var(--font-mono);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--green) 78%, #fff);
  margin: 0 0 0.4em;
}
.ui-page h4 {
  font-family: var(--font-mono);
  font-size: var(--type-h4);
  font-weight: 600;
  line-height: 1.4;
  color: color-mix(in srgb, var(--green) 72%, #fff);
  margin: 0 0 0.35em;
}
.ui-page p,
.ui-page li {
  font-size: var(--type-body);
  line-height: 1.5;
}

/* Subtle scrollbars (where supported) */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--green) 30%, transparent) #050805;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #050805; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--green) 22%, #222);
  border-radius: 10px;
  border: 2px solid #050805;
}

.crt-wrap {
  position: relative;
  height: 100%;
  max-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(6px, 1.2dvw, 14px);
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 900px) {
  .dashboard-header {
    padding: 0 clamp(10px, 2vw, 18px);
  }
  .ticker-bar {
    padding: 0 clamp(8px, 2vw, 14px);
  }
}

@media (max-width: 640px) {
  .dashboard-header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    min-height: auto;
    padding: 10px 12px;
  }
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .logo {
    font-size: clamp(14px, 3.4vw, 18px);
    letter-spacing: 2px;
  }
  .version {
    font-size: 13px;
  }
  .clock {
    font-size: clamp(26px, 6.5vw, 34px);
  }
  .header-weather {
    max-width: 100%;
    font-size: 14px;
    padding: 3px 7px;
  }
  .conn-status {
    font-size: 18px;
    gap: 6px;
  }

  /* Simplify CRT chrome on phone — remove bezel weight */
  .crt-wrap {
    padding: 0;
  }
  .crt-stage {
    border: none;
    border-radius: 0;
    box-shadow: inset 0 0 40px rgba(0, 35, 18, 0.3);
  }
  /* .crt-glass is position:absolute defined below — hide on phone */
  .crt-glass {
    display: none;
  }
}

.crt-stage {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  /* Desktop : défilement si zoom / header haut — évite texte coupé sans accès */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border-radius: 6px;
  border: 3px solid var(--bezel);
  box-shadow:
    inset 0 0 0 1px var(--bezel-highlight),
    inset 0 0 140px rgba(0, 35, 18, 0.5),
    inset 0 2px 0 rgba(57, 255, 20, 0.08),
    0 0 0 1px rgba(57, 255, 20, 0.22),
    0 16px 56px rgba(0, 0, 0, 0.82);
  background:
    radial-gradient(ellipse 85% 55% at 50% 50%, rgba(57, 255, 20, 0.03) 0%, transparent 62%),
    #010402;
}

/* Après les règles .crt-wrap / .crt-stage ci-dessus : sans ce bloc, le mobile
   hérite de flex:1 + min-height:0 + overflow:hidden et la zone centrale peut
   rester à hauteur 0 (écran vide). */
@media (max-width: 960px) {
  .crt-wrap {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
  }

  .crt-stage {
    flex: 0 1 auto;
    min-height: auto;
    overflow: visible;
  }
}

/* Grands écrans : pleine largeur, rehaussement typo modéré (évite explosion au zoom) */
@media (min-width: 1400px) {
  :root {
    --type-h1: clamp(1.1875rem, 1.05rem + 0.38vw, 1.5625rem);
    --type-h2: clamp(1.125rem, 1rem + 0.32vw, 1.375rem);
    --type-h3: clamp(1.0625rem, 0.96rem + 0.26vw, 1.25rem);
    --type-h4: clamp(1rem, 0.92rem + 0.2vw, 1.125rem);
    --type-body: clamp(1rem, 0.9rem + 0.16vw, 1.125rem);
    --type-small: clamp(0.9375rem, 0.86rem + 0.12vw, 1rem);
    --type-pixel-sm: clamp(13px, 0.6rem + 0.2vw, 15px);
    --type-pixel-md: clamp(14px, 0.64rem + 0.24vw, 16px);
    --type-display: clamp(1.3125rem, 1.08rem + 0.5vw, 1.875rem);
  }

  .crt-wrap {
    padding: clamp(8px, 0.7dvw, 12px);
  }

  .crt-stage {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .dashboard-header {
    padding: 10px clamp(18px, 1.4vw, 30px) 12px;
  }

  .logo {
    font-size: clamp(15px, 0.75rem + 0.55vw, 22px);
  }

  .version {
    font-size: var(--type-h4);
  }

  .clock {
    font-size: var(--type-display);
  }

  .header-weather {
    max-width: min(55vw, 860px);
    font-size: var(--type-h3);
    min-height: 36px;
    padding: 6px 10px;
  }

  .conn-status {
    font-size: var(--type-h2);
  }

  .ticker-content {
    font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.375rem);
  }

  .ticker-content--reverse {
    font-size: clamp(1rem, 0.92rem + 0.3vw, 1.25rem);
  }
}

@media (min-width: 1800px) {
  :root {
    --type-display: clamp(1.375rem, 1.1rem + 0.45vw, 1.9375rem);
  }
}

.crt-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse 95% 65% at 50% 38%, rgba(255, 124, 255, 0.05) 0%, transparent 58%),
    radial-gradient(130% 100% at 50% 42%, transparent 50%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, rgba(57, 255, 20, 0.03) 0%, transparent 42%);
}

/* ── Utilitaires ─────────────────────────────────────────────────────────────*/
.dim    { color: var(--dim); }
.hidden { display: none !important; }

.loading-placeholder {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--type-body);
  padding: 4px 0;
  animation: blink 1s step-end infinite;
}

.loading-placeholder--error {
  color: #ff8888;
  animation: none;
  line-height: 1.45;
}

.loading-placeholder--error code {
  color: #a8d4ff;
  font-size: 0.95em;
}

@keyframes blink { 50% { opacity: 0; } }

/* Glitch ambiant — discret, sans overlay ────────────────────────────────────*/
.crt-ambient-glitch {
  animation: ambient-glitch 0.38s steps(4) forwards;
}
@keyframes ambient-glitch {
  0%   { filter: none; }
  25%  { filter: brightness(1.35) hue-rotate(12deg) saturate(1.6); }
  50%  { filter: brightness(0.82) hue-rotate(-6deg) contrast(1.1); }
  75%  { filter: brightness(1.15) hue-rotate(4deg); }
  100% { filter: none; }
}