/* =============================================================================
   GNM Radar — base.css (refonte)
   Système graphique professionnel type console d'exploitation :
   anthracite / orange industriel / turquoise secondaire, rayons courts,
   aucune animation décorative permanente. Les couleurs d'état (OK / WARNING /
   CRITICAL / UNKNOWN) restent réservées aux événements significatifs.
   Mode sombre par défaut ; thème clair via [data-theme="light"].
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Surfaces (graphite) ------------------------------------------------ */
  --bg: #101820;
  --bg-elevated: #19242D;
  --surface: #19242D;
  --surface-2: #24323B;
  --surface-3: #2B3B45;
  --border: #34444D;
  --border-strong: #4A5F69;
  --overlay: rgba(6, 9, 13, 0.72);

  /* --- Texte (gris neutres) ---------------------------------------------- */
  --text: #E8EDF0;
  --text-2: #A4B2BA;
  --text-3: #91A2AC;

  /* --- Identité industrielle, indépendante des états opérationnels -------- */
  --accent: #FF8A3D;
  --accent-hover: #FFA064;
  --accent-soft: rgba(255, 138, 61, 0.12);
  --accent-fg: #101820;
  --accent-secondary: #32B8A6;
  --link: #FF9B59;
  --focus-ring: 0 0 0 3px rgba(255, 138, 61, 0.32);

  /* --- Statuts (strictement réservés aux états) --------------------------- */
  --ok: #22C55E;
  --warn: #F59E0B;
  --crit: #EF4444;
  --unk: #94A3B8;
  --ok-soft: rgba(70, 179, 128, 0.14);
  --warn-soft: rgba(214, 155, 50, 0.15);
  --crit-soft: rgba(224, 87, 79, 0.15);
  --unk-soft: rgba(125, 136, 153, 0.16);

  /* --- Dimensions --------------------------------------------------------- */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 6px;
  --r-pill: 4px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sidebar-w: 216px;
  --topbar-h: 52px;
  --content-max: 1380px;

  /* --- Ombres (discrètes) -------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 12px 28px -20px rgba(0, 0, 0, 0.8);
  --shadow-3: 0 24px 56px -32px rgba(0, 0, 0, 0.85);

  /* --- Typographie --------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;

  --dur: 140ms;
  --ease: cubic-bezier(0.2, 0.5, 0.4, 1);
}

/* --- Thème clair ---------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #E9EDF0;
  --bg-elevated: #F8F9FA;
  --surface: #F1F3F5;
  --surface-2: #DFE5E9;
  --surface-3: #C9D2D8;
  --border: #C9D2D8;
  --border-strong: #A7B6C0;
  --overlay: rgba(32, 43, 51, 0.35);
  --text: #202B33;
  --text-2: #52616D;
  --text-3: #6F7F8A;
  --accent: #FF8A3D;
  --accent-hover: #F57B2C;
  --accent-soft: rgba(255, 138, 61, 0.12);
  --accent-fg: #101820;
  --link: #A8460B;
  --ok: #22C55E;
  --warn: #F59E0B;
  --crit: #EF4444;
  --unk: #94A3B8;
  --ok-soft: rgba(29, 154, 102, 0.12);
  --warn-soft: rgba(184, 121, 17, 0.13);
  --crit-soft: rgba(209, 69, 60, 0.12);
  --unk-soft: rgba(107, 118, 136, 0.14);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.07);
  --shadow-2: 0 12px 28px -22px rgba(15, 23, 42, 0.4);
  --shadow-3: 0 24px 56px -34px rgba(15, 23, 42, 0.45);
  --focus-ring: 0 0 0 3px rgba(255, 138, 61, 0.3);
}

/* =============================================================================
   Réinitialisation
   ========================================================================== */

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

html,
body { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 { font-size: var(--fs-24); }
h2 { font-size: var(--fs-20); }
h3 { font-size: var(--fs-16); }
h4 { font-size: var(--fs-14); }

p { margin: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); color: var(--text); }

/* Barres de défilement sobres */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--border-strong); background-clip: content-box; }

/* =============================================================================
   Utilitaires typographiques et d'alignement
   ========================================================================== */

.mono, .mono-block, .num, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mono, .mono-block { font-size: 0.92em; }
.num { font-weight: 600; }

.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: var(--fs-12); }
.strong { font-weight: 650; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.right { margin-left: auto; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.hide-sm { display: initial; }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stack { display: grid; gap: var(--sp-4); }
.stack-sm { display: grid; gap: var(--sp-2); }

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--sp-4) 0;
}

/* =============================================================================
   Liens et boutons-Lien
   ========================================================================== */

.table-link { color: var(--text); font-weight: 600; }
.table-link:hover { color: var(--accent); text-decoration: none; }

/* =============================================================================
   Étiquettes, pastilles, compteurs
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
}

.tag__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

/* =============================================================================
   Squelettes de chargement (statiques, sans balayage permanent)
   ========================================================================== */

.skeleton {
  background: var(--surface-2);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.07), transparent);
  transform: translateX(-100%);
  animation: gnm-shimmer 1.4s ease-in-out infinite;
}

.skeleton--text { height: 12px; margin: 5px 0; }
.skeleton--title { height: 20px; width: 40%; margin-bottom: 10px; }
.skeleton--line { height: 34px; margin: 6px 0; }
.skeleton--kpi { height: 76px; }
.skeleton-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@keyframes gnm-shimmer {
  100% { transform: translateX(100%); }
}

/* =============================================================================
   Animations fonctionnelles uniquement
   ========================================================================== */

@keyframes gnm-spin {
  to { transform: rotate(360deg); }
}

@keyframes gnm-fade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   Lien d'évitement
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--text);
}

.skip-link:focus { left: 8px; }

@media (max-width: 900px) {
  .hide-sm { display: none; }
}

/* ---------------------------------------------------------------------------
   RTL — corrections directionnelles pour l'arabe et les composants mixtes.
   --------------------------------------------------------------------------- */

[dir="rtl"] .lang-select__trigger {
  flex-direction: row;
}

[dir="rtl"] .lang-select__menu {
  inset-inline-end: auto;
  inset-inline-start: 0;
  direction: rtl;
}

[dir="rtl"] .lang-select__option {
  grid-template-columns: auto minmax(0, 1fr) auto;
  text-align: start;
}

[dir="rtl"] .lang-select__native {
  text-align: start;
}

[dir="rtl"] .lang-select__check {
  order: -1;
  margin-inline-start: 0;
  margin-inline-end: 8px;
}

[dir="rtl"] .lang-select__header {
  flex-direction: row;
}

[dir="rtl"] .topbar__title {
  text-align: right;
}

[dir="rtl"] .page-head {
  text-align: right;
}

[dir="rtl"] .page-head__actions {
  justify-content: flex-start;
}

[dir="rtl"] .btn > svg,
[dir="rtl"] .btn > .icon {
  margin-inline-end: 0;
  margin-inline-start: 6px;
}

[dir="rtl"] .table th,
[dir="rtl"] .table td {
  text-align: start;
}

[dir="rtl"] .field__label {
  text-align: start;
}

[dir="rtl"] .form-error {
  text-align: start;
}

[dir="rtl"] .modal__title {
  text-align: start;
}

[dir="rtl"] .nav-item {
  text-align: start;
}

[dir="rtl"] .sidebar {
  border-right: 0;
  border-left: 1px solid var(--border);
}

[dir="rtl"] .shell.is-nav-open .sidebar {
  transform: none;
}

[dir="rtl"] .noc-header {
  direction: rtl;
}

[dir="rtl"] .noc-header > nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .noc-footer {
  direction: rtl;
}

[dir="rtl"] .noc-intro {
  direction: rtl;
}

[dir="rtl"] .noc-intro-copy {
  text-align: right;
}

[dir="rtl"] .noc-kpi {
  text-align: right;
}

@media (max-width: 900px) {
  [dir="rtl"] .sidebar {
    inset: 0 0 0 auto;
    transform: translateX(102%);
  }
  [dir="rtl"] .shell.is-nav-open .sidebar {
    transform: none;
  }
}