@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,.14);
  --ok-line:   rgba(63,212,148,.40);

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

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

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

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

  /* 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;
}

/* 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:        #168f5e;
  --ok-soft:   rgba(22,143,94,.10);
  --ok-line:   rgba(22,143,94,.35);

  --info:      #2a6fdb;
  --info-soft: rgba(42,111,219,.08);
  --info-line: rgba(42,111,219,.30);

  --warn:      #c98217;
  --warn-soft: rgba(201,130,23,.10);
  --warn-line: rgba(201,130,23,.32);

  --danger:    #d23b3b;
  --danger-soft: rgba(210,59,59,.08);
  --danger-line: rgba(210,59,59,.32);

  --elev:      #7a4ad6;
  --elev-soft: rgba(122,74,214,.08);
  --elev-line: rgba(122,74,214,.30);

  --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: .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: .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; }