/* ==========================================================================
   NOC-Perf — Design System "Salle de contrôle / Journal de bord"
   Ancré dans le sujet : un opérateur note son travail, un manager vérifie
   les faits (tickets, appels, alarmes) et tranche. La preuve est le
   matériau central du design — d'où le "talon de preuve" en typo mono.
   ========================================================================== */

:root {
  /* --- Neutres --- */
  --np-paper:        #F6F4EE;   /* fond général, papier technique chaud */
  --np-paper-raised: #FFFFFF;   /* cartes / surfaces */
  --np-line:         #E3DFD2;   /* hairlines */
  --np-line-strong:  #CFC9B8;
  --np-ink:          #171B17;   /* texte principal */
  --np-ink-soft:     #565F58;   /* texte secondaire */
  --np-ink-faint:    #8B927F;   /* texte tertiaire / placeholders */

  /* --- Signal (accent primaire — direct / suivi / actions) --- */
  --np-signal:        #0E6E6B;
  --np-signal-dark:   #0A5450;
  --np-signal-soft:   #E4F1EE;
  --np-signal-line:   #B9D9D4;

  /* --- Ambre (écart / attention) --- */
  --np-amber:        #B4711E;
  --np-amber-soft:   #FBEEDD;
  --np-amber-line:   #E9CB9C;

  /* --- Rouge (critique / bloquant / urgent) --- */
  --np-red:          #A23B33;
  --np-red-soft:     #F8E7E4;
  --np-red-line:     #E5BBB3;

  /* --- Violet (en cours de revue — statut neutre "en traitement") --- */
  --np-violet:       #5B4E8C;
  --np-violet-soft:  #EEEAF7;
  --np-violet-line:  #D2C9EA;

  /* --- Vert (validé / évalué) --- */
  --np-green:        #3E7A45;
  --np-green-soft:   #E8F3E7;
  --np-green-line:   #C1DCBE;

  /* --- Graphite (exempté / neutre / inactif) --- */
  --np-slate:        #6B7268;
  --np-slate-soft:   #EDEBE3;
  --np-slate-line:   #D6D2C4;

  --np-radius-sm: 6px;
  --np-radius:    10px;
  --np-radius-lg: 16px;
  --np-shadow:    0 1px 2px rgba(23,27,23,0.04), 0 2px 10px rgba(23,27,23,0.05);
  --np-shadow-lg: 0 4px 16px rgba(23,27,23,0.08), 0 12px 32px rgba(23,27,23,0.08);
}

html { background: var(--np-paper); }

body.np-body {
  background: var(--np-paper);
  background-image:
    radial-gradient(circle at 1px 1px, var(--np-line) 1px, transparent 0);
  background-size: 28px 28px;
  color: var(--np-ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01" on, "cv05" on;
}

.np-font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.01em; }
.np-font-mono    { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: "tnum" on; }

/* --- Header / nav --- */
.np-header {
  background: var(--np-paper-raised);
  border-bottom: 1px solid var(--np-line);
}
.np-logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--np-ink);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.np-logo-mark svg { width: 20px; height: 20px; }

.np-nav-link {
  position: relative;
  font-size: 0.875rem; font-weight: 500;
  color: var(--np-ink-soft);
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.np-nav-link:hover { color: var(--np-ink); }
.np-nav-link.is-active { color: var(--np-ink); border-bottom-color: var(--np-signal); }

/* --- Menu déroulant de navigation (ex. "Administration") ---
   Regroupe les liens admin plutôt que de les aligner un par un dans la
   barre principale : au-delà d'une poignée de liens, une rangée plate
   déborde et s'enroule sur plusieurs lignes (observé en prod avec 13
   liens pour un admin cumulant les blocs manager + admin). */
.np-nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--np-ink-soft);
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer;
  transition: color .15s ease;
}
.np-nav-dropdown-trigger:hover { color: var(--np-ink); }
.np-nav-dropdown-trigger.is-active { color: var(--np-ink); border-bottom-color: var(--np-signal); }
.np-nav-dropdown-trigger svg { width: 14px; height: 14px; transition: transform .15s ease; }
.np-nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.np-nav-dropdown-panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 220px;
  background: var(--np-paper-raised);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  box-shadow: var(--np-shadow-lg);
  padding: 0.4rem;
  z-index: 50;
}
.np-nav-dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 0.65rem;
  border-radius: var(--np-radius-sm);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--np-ink-soft);
  transition: background .12s ease, color .12s ease;
}
.np-nav-dropdown-item:hover { background: var(--np-slate-soft); color: var(--np-ink); }
.np-nav-dropdown-item.is-active { background: var(--np-signal-soft); color: var(--np-signal-dark); font-weight: 600; }

[x-cloak] { display: none !important; }

/* --- Section accent (barre latérale colorée par module) --- */
.np-module-planning  { --np-accent: var(--np-slate); }
.np-module-eval      { --np-accent: var(--np-amber); }
.np-module-review    { --np-accent: var(--np-violet); }
.np-module-analytics { --np-accent: var(--np-signal); }
.np-module-admin     { --np-accent: var(--np-ink); }

/* --- Cartes --- */
.np-card {
  background: var(--np-paper-raised);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-lg);
  box-shadow: var(--np-shadow);
}
.np-card-accent {
  border-top: 3px solid var(--np-accent, var(--np-signal));
}
.np-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--np-line);
}
.np-card-body { padding: 1.5rem; }

.np-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-ink-faint);
}

.np-h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--np-ink); }
.np-h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--np-ink); }

/* --- Boutons --- */
.np-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: var(--np-radius-sm);
  border: 1px solid transparent;
  transition: all .15s ease;
  cursor: pointer;
  line-height: 1.2;
}
.np-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.np-btn-primary  { background: var(--np-ink); color: var(--np-paper-raised); }
.np-btn-primary:hover { background: #000; }
.np-btn-signal   { background: var(--np-signal); color: #fff; }
.np-btn-signal:hover { background: var(--np-signal-dark); }
.np-btn-outline  { background: var(--np-paper-raised); color: var(--np-ink); border-color: var(--np-line-strong); }
.np-btn-outline:hover { border-color: var(--np-ink); }
.np-btn-ghost    { background: transparent; color: var(--np-ink-soft); }
.np-btn-ghost:hover { color: var(--np-ink); background: var(--np-slate-soft); }
.np-btn-danger   { background: var(--np-paper-raised); color: var(--np-red); border-color: var(--np-red-line); }
.np-btn-danger:hover { background: var(--np-red-soft); }
.np-btn-amber    { background: var(--np-amber); color: #fff; }
.np-btn-amber:hover { filter: brightness(0.92); }
.np-btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }

/* --- Statuts (remplace les puces emoji du CDC par des pastilles maîtrisées) --- */
.np-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.65rem 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.np-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.np-status-pending   { background: var(--np-red-soft);    color: var(--np-red);    border-color: var(--np-red-line); }
.np-status-pending .np-status-dot   { background: var(--np-red); }
.np-status-submitted { background: var(--np-amber-soft);  color: var(--np-amber);  border-color: var(--np-amber-line); }
.np-status-submitted .np-status-dot { background: var(--np-amber); }
.np-status-review    { background: var(--np-violet-soft); color: var(--np-violet); border-color: var(--np-violet-line); }
.np-status-review .np-status-dot    { background: var(--np-violet); }
.np-status-done       { background: var(--np-green-soft);  color: var(--np-green);  border-color: var(--np-green-line); }
.np-status-done .np-status-dot      { background: var(--np-green); }
.np-status-exempt    { background: var(--np-slate-soft);  color: var(--np-slate);  border-color: var(--np-slate-line); }
.np-status-exempt .np-status-dot    { background: var(--np-slate); }

/* --- Talon de preuve : élément signature pour toute référence factuelle --- */
.np-evidence {
  display: flex; align-items: stretch;
  background: var(--np-paper-raised);
  border: 1px dashed var(--np-line-strong);
  border-radius: var(--np-radius-sm);
  overflow: hidden;
  font-family: 'IBM Plex Mono', monospace;
}
.np-evidence-tab {
  flex: none; width: 5px;
  background: repeating-linear-gradient(
    to bottom, var(--np-ink-faint) 0 4px, transparent 4px 8px
  );
}
.np-evidence-body { padding: 0.55rem 0.75rem; flex: 1; }
.np-evidence-source {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--np-ink-faint);
}
.np-evidence-id {
  font-size: 0.8125rem; font-weight: 700; color: var(--np-ink);
}
.np-evidence-empty {
  font-family: 'Inter', sans-serif; font-style: italic;
  color: var(--np-ink-faint); font-size: 0.8125rem;
}

/* --- Score --- */
.np-score {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.75rem; line-height: 1;
  color: var(--np-ink);
}
.np-score-sm { font-size: 1.125rem; }
.np-score-den { font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; color: var(--np-ink-faint); font-weight: 500; }

/* --- Formulaires --- */
.np-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--np-ink-soft); margin-bottom: 0.3rem; }
.np-input, .np-select, .np-textarea {
  width: 100%;
  background: var(--np-paper-raised);
  border: 1px solid var(--np-line-strong);
  border-radius: var(--np-radius-sm);
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  color: var(--np-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.np-input:focus, .np-select:focus, .np-textarea:focus {
  outline: none; border-color: var(--np-signal);
  box-shadow: 0 0 0 3px var(--np-signal-soft);
}
.np-input::placeholder, .np-textarea::placeholder { color: var(--np-ink-faint); }

/* --- Alertes --- */
.np-alert { border-radius: var(--np-radius); border: 1px solid; padding: 1rem 1.15rem; font-size: 0.875rem; }
.np-alert-signal { background: var(--np-signal-soft); border-color: var(--np-signal-line); color: var(--np-signal-dark); }
.np-alert-amber  { background: var(--np-amber-soft);  border-color: var(--np-amber-line); color: #7A4B12; }
.np-alert-red    { background: var(--np-red-soft);    border-color: var(--np-red-line);   color: var(--np-red); }
.np-alert-green  { background: var(--np-green-soft);  border-color: var(--np-green-line); color: var(--np-green); }
.np-alert-violet { background: var(--np-violet-soft); border-color: var(--np-violet-line); color: var(--np-violet); }

/* --- Tables --- */
.np-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.np-table th {
  text-align: left; font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--np-ink-faint); font-weight: 600;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--np-line-strong);
}
.np-table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--np-line); color: var(--np-ink); }
.np-table tr:last-child td { border-bottom: none; }
.np-table tbody tr:hover { background: var(--np-signal-soft); }

/* --- Utilitaires --- */
.np-divider { height: 1px; background: var(--np-line); border: none; }

.np-mobile-link {
  display: block; padding: 0.65rem 1rem;
  border-left: 2px solid transparent;
  font-size: 0.875rem; font-weight: 500;
  color: var(--np-ink-soft);
  transition: background .15s ease, color .15s ease;
}
.np-mobile-link:hover { background: var(--np-slate-soft); color: var(--np-ink); }
.np-mobile-link.is-active {
  border-color: var(--np-signal); color: var(--np-ink);
  background: var(--np-signal-soft); font-weight: 600;
}
.np-skeleton-icon { color: var(--np-ink-faint); }

@media (prefers-reduced-motion: no-preference) {
  .np-transition { transition: all .15s ease; }
}