@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* Design tokens — Console opérateur Remote IT Support
   Direction: sécurité / institutionnel — bleu nuit + vert validation.
   Densité: admin SaaS confortable. */

:root {
  /* Backgrounds (dark first) */
  --bg-deep: #080d18;
  --bg: #0d1424;
  --bg-elev: #131c33;
  --bg-card: #18223e;
  --bg-hover: #1f2a4a;

  /* Borders */
  --border: #232f54;
  --border-soft: #1b2444;
  --border-strong: #344269;
  --border-focus: #5ba8ff;

  /* Text */
  --text-1: #e9eef7;
  --text-2: #a8b3d1;
  --text-3: #6e7ba0;
  --text-4: #6a7491;

  /* Semantic */
  --ok: #3fd494; /* validation / actif / contrôle accordé */
  --ok-soft: rgba(63, 212, 148, 0.14);
  --ok-line: rgba(63, 212, 148, 0.4);

  --info: #5ba8ff; /* observation / informatif */
  --info-soft: rgba(91, 168, 255, 0.13);
  --info-line: rgba(91, 168, 255, 0.38);

  --warn: #f2b345; /* en attente / validation requise */
  --warn-soft: rgba(242, 179, 69, 0.13);
  --warn-line: rgba(242, 179, 69, 0.4);

  --danger: #ff6b6b; /* erreur / refus / déconnecté */
  --danger-soft: rgba(255, 107, 107, 0.13);
  --danger-line: rgba(255, 107, 107, 0.42);

  --elev: #b985ff; /* élévation locale en cours */
  --elev-soft: rgba(185, 133, 255, 0.13);
  --elev-line: rgba(185, 133, 255, 0.4);

  /* Per-operator colors (multi-op) */
  --op-1: #3fd494; /* vert  — actif par défaut */
  --op-2: #5ba8ff; /* bleu  — observer */
  --op-3: #f2b345; /* amber */
  --op-4: #b985ff; /* violet */

  /* Type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Density (overridden by tweak) */
  --row-h: 34px;
  --pad-x: 12px;
  --pad-y: 10px;
  --gap: 10px;
  --radius: 8px;
  --radius-s: 5px;
  --radius-l: 12px;

  /* Layout */
  --rail-w: 56px;
  --panel-l-w: 280px;
  --panel-r-w: 320px;
  --topbar-h: 48px;
  --bottombar-h: 30px;

  /* Panel aliases — fix contrast bugs in dark mode.
     Every panel CSS uses var(--xxx, fallback) where the fallback is a light
     colour assuming print stylesheet. These aliases ensure every token used
     anywhere in src/operator/ resolves to a dark-theme-aware value. */
  --panel-bg: var(--bg-card);
  --panel-bg-1: var(--bg-card);
  --panel-bg-2: var(--bg-elev);
  --panel-bg-3: var(--bg-hover);
  --panel-input-bg: var(--bg-elev);
  --panel-row-hover: var(--bg-hover);
  --panel-row-selected: var(--info-soft);
  --panel-border: var(--border);
  --surface: var(--bg-card);
  --surface-1: var(--bg-deep);
  --surface-2: var(--bg-hover);
  --surface-3: var(--bg-elev);
  --bg-2: var(--bg-elev);
  --bg-focus: var(--info-soft);
  --bg-code: var(--bg-deep);
  --hover: var(--bg-hover);
  --input-bg: var(--bg-elev);
  --border-1: var(--border);
  --border-faint: var(--border-soft);
  --border-subtle: var(--border-soft);
  --donut-track: var(--border-soft);
  --skeleton-shimmer: var(--border-soft);
  --accent: var(--info);
  --accent-bg: var(--info-soft);
  --accent-ok: var(--ok);
  --accent-info: var(--info);
  --accent-warn: var(--warn);
  --accent-danger: var(--danger);
  --primary: var(--info);
  --link: var(--info);
  --success: var(--ok);
  --danger-border: var(--danger-line);
  --text: var(--text-1);
  --text-muted: var(--text-3);
  --text-dim: var(--text-3);
  --color-muted: var(--text-3);
  --muted: var(--text-3);
  --text-danger: var(--danger);
  --fg: var(--text-1);
}

/* Light theme (tweakable) */
.theme-light {
  --bg-deep: #eef1f6;
  --bg: #f4f6fa;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #eef2f8;

  --border: #dde3ee;
  --border-soft: #e8ecf3;
  --border-strong: #c9d2e1;
  --border-focus: #2a6fdb;

  --text-1: #131c33;
  --text-2: #424d6b;
  --text-3: #6a7491;
  --text-4: #9aa3bd;

  --ok: #0f7048; /* assombri pour contraste AA sur fonds clairs */
  --ok-soft: rgba(15, 112, 72, 0.1);
  --ok-line: rgba(15, 112, 72, 0.35);

  --info: #2a6fdb;
  --info-soft: rgba(42, 111, 219, 0.08);
  --info-line: rgba(42, 111, 219, 0.3);

  --warn: #8a5710; /* assombri pour contraste AA sur fonds clairs */
  --warn-soft: rgba(138, 87, 16, 0.1);
  --warn-line: rgba(138, 87, 16, 0.32);

  --danger: #d23b3b;
  --danger-soft: rgba(210, 59, 59, 0.08);
  --danger-line: rgba(210, 59, 59, 0.32);

  --elev: #7a4ad6;
  --elev-soft: rgba(122, 74, 214, 0.08);
  --elev-line: rgba(122, 74, 214, 0.3);

  --op-1: #168f5e;
  --op-2: #2a6fdb;
  --op-3: #b8730d;
  --op-4: #7a4ad6;
}

/* Density modes (tweakable) */
.density-compact {
  --row-h: 28px;
  --pad-x: 10px;
  --pad-y: 7px;
  --gap: 6px;
  --topbar-h: 42px;
  --bottombar-h: 26px;
}
.density-comfy {
  --row-h: 40px;
  --pad-x: 14px;
  --pad-y: 12px;
  --gap: 12px;
  --topbar-h: 54px;
  --bottombar-h: 34px;
}

/* Base */
.console {
  font-family: var(--font-sans);
  color: var(--text-1);
  background: var(--bg);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.console *,
.console *::before,
.console *::after {
  box-sizing: border-box;
}
.console button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Reusable */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "zero";
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-2);
}

/* Pulse — used on active control indicators */
@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.pulse-dot {
  animation: pulseDot 1.6s ease-in-out infinite;
}

/* Scrollbars (slim, dark-aware) */
.console *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.console *::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.console *::-webkit-scrollbar-thumb:hover {
  background: var(--text-4);
  background-clip: content-box;
}
.console *::-webkit-scrollbar-track {
  background: transparent;
}