/*
 * ═══════════════════════════════════════════════════════════════
 *  SECUBOX LIGHT THEME v2.0
 *  Based on Charte Graphique Six-Module Color System
 *  CyberMind · Gondwana · Notre-Dame-du-Cruet · Savoie
 * ═══════════════════════════════════════════════════════════════
 */

/* ── IMPORT DESIGN TOKENS ── */
@import url('./design-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── THEME-SPECIFIC OVERRIDES ── */
:root {
  /* Bloom/glow effects using ROOT green (primary brand) */
  --bloom-tight:   0 0 1px var(--root-light);
  --bloom-near:    0 0 3px var(--root-light);
  --bloom-mid:     0 0 8px rgba(10,88,64,0.3);
  --bloom-far:     0 0 16px rgba(10,88,64,0.15);
  --bloom-halo:    0 0 30px rgba(10,88,64,0.05);
  --bloom-full:    var(--bloom-tight), var(--bloom-near), var(--bloom-mid), var(--bloom-far);
  --bloom-text:    var(--bloom-tight), var(--bloom-near), var(--bloom-mid);
  --bloom-soft:    var(--bloom-near), var(--bloom-mid);

  /* Amber/warning bloom using WALL color */
  --bloom-amber:   0 0 2px var(--wall-light), 0 0 6px rgba(154,96,16,0.3);

  /* CRT font (keep for terminal aesthetics) */
  --font-crt:      var(--font-mono);
  --font-heading:  var(--font-display);

  /* Timing */
  --blink-vt100:   1200ms;
  --char-fast:     40ms;

  /* Status colors (semantic) */
  --status-ok:     var(--root-main);
  --status-warn:   var(--wall-main);
  --status-err:    var(--boot-main);
  --status-info:   var(--mesh-main);
}

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

html {
  height: 100%;
  scroll-behavior: smooth;
}

body, body.crt-body, body.crt-light {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-relaxed);
  min-height: 100%;
  overflow-x: hidden;
  /* Subtle radial gradient for depth using ROOT color */
  background-image: radial-gradient(ellipse at 50% 30%, rgba(10,88,64,0.04) 0%, transparent 60%);
}

/* ── CRT OVERLAY STACK — SUBTLE ── */

/* Layer 1: Subtle scanlines */
.crt-scanlines::before,
body.crt-light::before {
  content: '';
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(10,88,64,0.02) 3px,
    rgba(10,88,64,0.02) 4px
  );
}

/* Layer 2: Very subtle vignette */
.crt-scanlines::after,
body.crt-light::after {
  content: '';
  position: fixed; inset: 0; z-index: 9001;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      transparent 50%,
      rgba(10,88,64,0.03) 80%,
      rgba(10,88,64,0.08) 100%
    );
}

/* ── PHOSPHOR TEXT GLOW — USING 6-MODULE COLORS ── */
.p-hot   { color: var(--root-light); text-shadow: var(--bloom-full); font-weight: 700; }
.p-on    { color: var(--root-main);  text-shadow: var(--bloom-text); font-weight: 600; }
.p-mid   { color: var(--root-main);  text-shadow: var(--bloom-soft); }
.p-dim   { color: var(--root-dark);  text-shadow: none; }
.p-ghost { color: var(--root-dark);  text-shadow: none; opacity: 0.7; }
.p-amber { color: var(--wall-main);  text-shadow: var(--bloom-amber); }
.p-amber-dim { color: var(--wall-dark); text-shadow: none; }

/* Module-specific text colors */
.text-auth { color: var(--auth-main); }
.text-wall { color: var(--wall-main); }
.text-boot { color: var(--boot-main); }
.text-mind { color: var(--mind-main); }
.text-root { color: var(--root-main); }
.text-mesh { color: var(--mesh-main); }

/* ── CURSOR ── */
@keyframes blink-block {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor::after {
  content: '█';
  color: var(--root-main);
  text-shadow: var(--bloom-text);
  animation: blink-block var(--blink-vt100) step-start infinite;
  margin-left: 1px;
}

/* ── BORDERS / BOXES ── */
.crt-box, .card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.crt-box-lit, .card:hover {
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-md);
}
.crt-box-hot {
  border: 1px solid var(--root-light);
  box-shadow:
    0 0 8px rgba(10,88,64,0.15),
    0 0 20px rgba(10,88,64,0.08);
}

/* Module-colored cards */
.card-auth { border-left: 4px solid var(--auth-main); }
.card-wall { border-left: 4px solid var(--wall-main); }
.card-boot { border-left: 4px solid var(--boot-main); }
.card-mind { border-left: 4px solid var(--mind-main); }
.card-root { border-left: 4px solid var(--root-main); }
.card-mesh { border-left: 4px solid var(--mesh-main); }

/* ── DIVIDERS ── */
.crt-rule, hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-l) 0;
}
.crt-rule-bright {
  border-top: 2px solid var(--border2);
  box-shadow: 0 0 6px rgba(10,88,64,0.1);
}

/* ── TYPOGRAPHY SCALE ── */
h1, .crt-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--root-main);
  text-shadow: var(--bloom-soft);
}
h2, .crt-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-normal);
  color: var(--root-dark);
  text-shadow: var(--bloom-soft);
}
h3, .crt-h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
}
.crt-label {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
}
.crt-small {
  font-size: 0.75rem;
  color: var(--muted);
}
.crt-tiny {
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0.7;
}

/* ── BUTTONS ── */
.btn, button {
  font-family: var(--font-body);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
}
.btn:hover, button:hover {
  border-color: var(--root-main);
  color: var(--root-main);
  background: var(--root-xlt);
}
.btn.primary, button.primary {
  background: var(--root-main);
  color: white;
  border-color: var(--root-dark);
}
.btn.primary:hover, button.primary:hover {
  background: var(--root-dark);
}
.btn.danger, button.danger {
  border-color: var(--boot-main);
  color: var(--boot-main);
}
.btn.danger:hover, button.danger:hover {
  background: var(--boot-xlt);
}
.btn.warning, button.warning {
  border-color: var(--wall-main);
  color: var(--wall-main);
}
.btn.warning:hover, button.warning:hover {
  background: var(--wall-xlt);
}
.btn.info, button.info {
  border-color: var(--mesh-main);
  color: var(--mesh-main);
}
.btn.info:hover, button.info:hover {
  background: var(--mesh-xlt);
}

/* ── FORMS ── */
input, select, textarea {
  font-family: var(--font-body);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--root-main);
  box-shadow: 0 0 0 2px var(--root-xlt);
}
input::placeholder {
  color: var(--muted);
}

/* ── TABLES ── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-sm);
}
th, td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  color: var(--muted);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  background: var(--surface);
}
tr:hover {
  background: var(--surface);
}

/* ── BADGES — 6-MODULE COLORS ── */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}
/* Semantic badges */
.badge.critical, .badge.error { background: var(--boot-xlt); color: var(--boot-dark); }
.badge.high, .badge.warning { background: var(--wall-xlt); color: var(--wall-dark); }
.badge.medium, .badge.info { background: var(--mesh-xlt); color: var(--mesh-dark); }
.badge.low, .badge.success { background: var(--root-xlt); color: var(--root-dark); }
.badge.open, .badge.connected { background: var(--root-xlt); color: var(--root-main); }
.badge.pending { background: var(--wall-xlt); color: var(--wall-dark); }
.badge.resolved, .badge.closed { background: var(--surface2); color: var(--muted); }

/* Module-specific badges */
.badge.auth { background: var(--auth-xlt); color: var(--auth-dark); }
.badge.wall { background: var(--wall-xlt); color: var(--wall-dark); }
.badge.boot { background: var(--boot-xlt); color: var(--boot-dark); }
.badge.mind { background: var(--mind-xlt); color: var(--mind-dark); }
.badge.root { background: var(--root-xlt); color: var(--root-dark); }
.badge.mesh { background: var(--mesh-xlt); color: var(--mesh-dark); }

/* ── TABS ── */
.tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
  margin-bottom: 1rem;
}
.tab {
  padding: 0.5rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
}
.tab:hover {
  color: var(--root-main);
}
.tab.active {
  color: var(--root-main);
  border-bottom-color: var(--root-main);
  font-weight: var(--weight-semibold);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── CODE / PRE ── */
code, pre {
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
code {
  padding: 0.1rem 0.4rem;
  font-size: 0.85em;
  color: var(--mind-main);
}
pre {
  padding: 1rem;
  overflow-x: auto;
  font-size: var(--size-sm);
  color: var(--text);
}

/* ── STATUS BAR ── */
.crt-statusbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8900;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.4rem 1.2rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--size-xs);
  font-family: var(--font-mono);
  color: var(--muted);
}

/* ── LAYOUT HELPERS ── */
.main, .main-content {
  flex: 1;
  margin-left: 220px;
  padding: var(--space-l);
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-l);
}
.grid { display: grid; gap: var(--space-m); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .main, .main-content { margin-left: 0; padding: var(--space-m); }
}

/* ── STATS CARDS ── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-m);
  text-align: center;
}
.stat-card .value {
  font-size: 1.8rem;
  font-weight: var(--weight-bold);
  color: var(--root-main);
  text-shadow: var(--bloom-soft);
}
.stat-card .label {
  font-size: var(--size-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
}
.stat-card.critical .value { color: var(--boot-main); text-shadow: none; }
.stat-card.warning .value { color: var(--wall-main); }
.stat-card.info .value { color: var(--mesh-main); }
.stat-card.success .value { color: var(--root-main); }
.stat-card.mind .value { color: var(--mind-main); }

/* ── MODULE STRIPE GRADIENTS ── */
.stripe-auth { background: linear-gradient(90deg, var(--auth-main), var(--auth-light)); }
.stripe-wall { background: linear-gradient(90deg, var(--wall-main), var(--wall-light)); }
.stripe-boot { background: linear-gradient(90deg, var(--boot-main), var(--boot-light)); }
.stripe-mind { background: linear-gradient(90deg, var(--mind-main), var(--mind-light)); }
.stripe-root { background: linear-gradient(90deg, var(--root-main), var(--root-light)); }
.stripe-mesh { background: linear-gradient(90deg, var(--mesh-main), var(--mesh-light)); }

/* Vertical gradient for sidebar/header accents */
.accent-gradient {
  background: linear-gradient(180deg, var(--root-main), var(--mesh-main), var(--mind-main));
}

/* ── UTILITY ── */
.monospace { font-family: var(--font-mono); }
.upper { text-transform: uppercase; }
.center { text-align: center; }
.flex { display: flex; }
.gap-1 { gap: var(--space-s); }
.gap-2 { gap: var(--space-m); }
.mb-1 { margin-bottom: var(--space-s); }
.mb-2 { margin-bottom: var(--space-m); }
.p-1 { padding: var(--space-s); }
.p-2 { padding: var(--space-m); }