/* ------------------------------------------------------------------------------------------------
   app.css — NotifyHUB styles.
   Copyright (c) Vivaticket SAS. All rights reserved.

   Implements the « NotifyHub » handoff (claude.ai/design) on top of Vivaticket.Hub.Components:
   the shell is VivaAppShell; this file only adds what the design shows beyond it (hosting pill,
   header logo, content width, footer). Light theme only, as in the design. Fonts and icons are
   served locally: servers installed at customers often have no Internet access.
   ------------------------------------------------------------------------------------------------ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The design is light only: pin the light panel colours over the component library's
   prefers-color-scheme dark variant (unlayered rules win over its @layer). */
:root {
  color-scheme: light;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f9fafb;
  --color-background-info: #eaf1fb;
  --color-border-tertiary: #e5e7eb;
  --color-border-soft: #f3f4f6;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-text-info: #1d4ed8;
}

html {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--color-text-primary);
}

body {
  margin: 0;
  background: var(--color-background-secondary);
  -webkit-font-smoothing: antialiased;
}

/* Content links only: an unlayered rule on every <a> would beat the component library's layered
   styles and recolour the sidebar entries. */
.nh-page a { color: #2563eb; }
.nh-page a:hover { color: #1d4ed8; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #d4d8de;
  background-clip: content-box;
}

/* FocusOnNavigate moves the focus to the page title for screen readers: no visible ring there. */
h1:focus { outline: none; }

/* ---- Sidebar ------------------------------------------------------------------------------- */

/* 40px entries, as in the design (10px padding around a 20px line). */
.viva-sidebar__link,
.viva-sidebar__logout { line-height: 20px; }

/* ---- Header -------------------------------------------------------------------------------- */

/* "Sur site · mono-tenant", from 1024px up (hidden lg:flex). */
.nh-hosting {
  display: none;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.05);
  color: #e5e7eb;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .nh-hosting { display: flex; }
}

.nh-hosting__icon { font-size: 14px; color: #9ca3af; }
.nh-hosting__dot { color: #6b7280; }
.nh-hosting__muted { color: #9ca3af; }

.nh-header-logo { width: 83px; height: 22px; object-fit: contain; opacity: 0.9; }
.nh-header-separator { width: 1px; height: 26px; background: rgb(255 255 255 / 0.18); }

/* The state of VivaFlow, in the style of the hosting pill (not in the design): always shown, it
   tells why the screens that depend on VivaFlow cannot answer. */
.nh-flow-status {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.05);
  color: #e5e7eb;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.nh-flow-status:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.nh-flow-status__dot { width: 8px; height: 8px; border-radius: 9999px; background: #9ca3af; }
.nh-flow-status--ok .nh-flow-status__dot { background: #22c55e; }
.nh-flow-status--error { border-color: rgb(252 165 165 / 0.35); background: rgb(239 68 68 / 0.12); color: #fecaca; }
.nh-flow-status--error .nh-flow-status__dot { background: #ef4444; }

/* ---- Content and footer -------------------------------------------------------------------- */

/* The shell body pads 28px 24px; the design caps the content at 1500px, 40px from the bottom. */
.nh-page { width: 100%; max-width: 1500px; margin: 0 auto; padding-bottom: 12px; }

.nh-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 20px;
}

/* 18px high, smaller than the 28px of the design (h-7) on purpose. */
.nh-footer__logo { height: 18px; object-fit: contain; }

.nh-link { font-size: 14px; font-weight: 500; text-decoration: none; }

.nh-error-id { margin: 0 0 20px; text-align: center; color: var(--color-text-secondary); font-size: 13px; }

/* ---- User menu rows (layout.jsx MenuRow) ----------------------------------------------------- */

.nh-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.nh-user-row > span:first-child { display: flex; align-items: center; gap: 8px; color: #6b7280; }
.nh-user-row > span:first-child i { font-size: 15px; color: #9ca3af; }
.nh-user-row > span:last-child { overflow: hidden; color: #111827; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nh-user-row__mono { max-width: 55%; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }

/* ---- Buttons of the standalone pages --------------------------------------------------------- */

.nh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.nh-btn i { font-size: 17px; }
.nh-btn--primary { background: #2563eb; color: #fff; }
.nh-btn--primary:hover { background: #1d4ed8; color: #fff; }
.nh-btn--secondary { border-color: #d1d5db; background: #fff; color: #374151; }
.nh-btn--secondary:hover { background: #f9fafb; color: #111827; }

/* ---- Sign-in page (pages_auth.jsx LoginPage) ------------------------------------------------- */

.nh-auth { display: flex; min-height: 100vh; }

.nh-auth__brand {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  overflow: hidden;
  padding: 48px;
  background: var(--viva-ink);
  color: #fff;
}

@media (min-width: 1024px) {
  .nh-auth__brand { display: flex; }
}

.nh-auth__stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 16px);
}

.nh-auth__brand-head,
.nh-auth__pitch,
.nh-auth__powered { position: relative; }

.nh-auth__brand-head { display: flex; align-items: center; gap: 12px; }

.nh-auth__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
  color: #fff;
  font-size: 20px;
}

.nh-auth__name { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }
.nh-auth__headline { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.nh-auth__lead { max-width: 448px; margin: 16px 0 0; color: #d1d5db; font-size: 15px; line-height: 1.625; }
.nh-auth__powered { display: flex; align-items: center; gap: 10px; color: #9ca3af; font-size: 14px; }
.nh-auth__powered img { height: 16px; object-fit: contain; opacity: 0.9; }

.nh-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 32px;
  background: #fff;
}

@media (min-width: 1024px) {
  .nh-auth__panel { width: 50%; }
}

.nh-auth__form { width: 100%; max-width: 384px; }

.nh-auth__mark--mobile { width: 44px; height: 44px; margin-bottom: 40px; background: var(--viva-ink); box-shadow: none; font-size: 22px; }

@media (min-width: 1024px) {
  .nh-auth__mark--mobile { display: none; }
}

.nh-auth__title { margin: 0; color: #111827; font-size: 24px; font-weight: 700; line-height: 32px; }
.nh-auth__hint { margin: 8px 0 0; color: #6b7280; font-size: 14px; line-height: 20px; }

.nh-auth__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  margin-top: 32px;
  border-radius: 8px;
  background: #2563eb;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.nh-auth__button:hover { background: #1d4ed8; color: #fff; }
.nh-auth__button i { font-size: 19px; }

.nh-auth__divider { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: #9ca3af; font-size: 12px; }
.nh-auth__divider::before,
.nh-auth__divider::after { flex: 1; height: 1px; background: #e5e7eb; content: ''; }

.nh-auth__diagnostic { margin: 32px 0 0; color: #9ca3af; font-size: 13px; text-align: center; }
.nh-auth__diagnostic a { color: #2563eb; font-weight: 600; text-decoration: none; }
.nh-auth__diagnostic a:hover { text-decoration: underline; }

.nh-auth__version { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 64px; color: #9ca3af; font-size: 13px; }
.nh-auth__version img { height: 16px; object-fit: contain; opacity: 0.8; }

/* ---- Standalone pages: access denied, service unavailable (pages_auth.jsx) ------------------- */

.nh-standalone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 24px;
  background: var(--color-background-secondary);
}

.nh-standalone > * { width: 100%; max-width: 576px; }

.nh-standalone__brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 32px; }
.nh-auth__mark--standalone { background: var(--viva-ink); box-shadow: none; }
.nh-standalone__name { color: #111827; font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }

.nh-standalone__card {
  box-sizing: border-box;
  padding: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  text-align: center;
}

.nh-standalone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 9999px;
  background: #fef2f2;
  color: #ef4444;
  font-size: 38px;
}

.nh-standalone__icon--warning { background: #fffbeb; color: #f59e0b; }

.nh-standalone__title { margin: 24px 0 0; color: #111827; font-size: 24px; font-weight: 700; line-height: 32px; }
.nh-standalone__text { max-width: 448px; margin: 12px auto 0; color: #6b7280; font-size: 15px; line-height: 1.625; }
.nh-standalone__user { margin: 12px 0 0; color: #374151; font-size: 14px; font-weight: 500; }
.nh-standalone__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.nh-standalone__support { margin: 24px 0 0; color: #9ca3af; font-size: 13px; text-align: center; }
.nh-standalone__icon--ok { background: #ecfdf5; color: #16a34a; }
.nh-standalone__mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; word-break: break-all; }

/* ---- Settings (pages_parametres.jsx, pages_db.jsx) --------------------------------------------- */

.nh-page-subtitle { margin: -12px 0 24px; color: #6b7280; font-size: 14px; line-height: 20px; }
.nh-settings-readonly { margin-bottom: 16px; }
.nh-settings-card { padding: 24px; }
.nh-settings-banner { margin-top: 16px; }
.nh-settings-detail { display: block; margin-top: 6px; color: #6b7280; font-size: 12px; overflow-wrap: anywhere; }
.nh-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* grid lg:grid-cols-2 gap-4 */
.nh-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

@media (min-width: 1024px) {
  .nh-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nh-form-grid__wide { grid-column: 1 / -1; }
}

/* The VivaFlow tab: one field per line, as in the design. */
.nh-form-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; }

/* A field and its button on one line, the button aligned on the input (below the label). */
.nh-field-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.nh-field-with-action > .viva-btn { margin-top: 24px; }

.nh-field { display: flex; flex-direction: column; }
.nh-field__label { margin-bottom: 6px; color: #6b7280; font-size: 13px; font-weight: 600; }

/* « Client machine à machine » + tag: h-10 rounded-lg border-gray-200 bg-gray-50 px-3 text-sm */
.nh-readonly-box {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #374151;
  font-size: 14px;
}

.nh-readonly-box .ti { color: #6b7280; font-size: 16px; }
.nh-readonly-box .nh-tag { white-space: nowrap; }

.nh-tag {
  padding: 1px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* mt-6 flex justify-end border-t border-gray-200 pt-5 */
.nh-form-footer { display: flex; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid #e5e7eb; }

/* The read-only values of the database tab: label text-xs gray-400, value mt-1 text-sm gray-900. */
.nh-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; }

@media (min-width: 1024px) {
  .nh-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.nh-kv dt { color: #9ca3af; font-size: 12px; }
.nh-kv dd { margin: 4px 0 0; color: #111827; font-size: 14px; overflow-wrap: anywhere; }

/* ---- Lists of the Connections and Agents tabs (pages_parametres.jsx ConnexionsTab) --------- */

/* The action of a tab, above its list (the design puts « Nouvelle connexion » in the header). */
.nh-tab-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.nh-form-footer { gap: 8px; }
.nh-page-top { margin-bottom: 8px; }

/* flex flex-col divide-y divide-gray-100; each row px-5 py-4 gap-2 */
.nh-rows { margin: 0 -20px; padding: 0; list-style: none; }
.nh-row { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-top: 1px solid #f3f4f6; }
.nh-row:first-child { border-top: 0; }
.nh-row--inactive { opacity: 0.6; }
.nh-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nh-row__name { color: #111827; font-weight: 500; }
.nh-row__meta { color: #9ca3af; font-size: 12px; }
.nh-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 20px; color: #6b7280; font-size: 12px; }
.nh-row__note { margin: 0 0 0 4px; padding-left: 20px; color: #6b7280; font-size: 12px; }
.nh-row__tags .nh-row__note { padding-left: 0; }
.nh-row__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 0 20px; }

/* Dot: h-2 w-2 rounded-full, green / amber / gray. */
.nh-dot { flex: none; width: 8px; height: 8px; border-radius: 9999px; background: #9ca3af; }
.nh-dot--green { background: #22c55e; }
.nh-dot--amber { background: #f59e0b; }
.nh-dot--gray { background: #d1d5db; }

/* Tag tones of the design: violet for notify, blue for the transport. */
.nh-tag .ti { font-size: 13px; vertical-align: -2px; }
.nh-tag--violet { border-color: #ddd6fe; background: #f5f3ff; color: #6d28d9; }
.nh-tag--blue { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }


/* ---- Alert creation: the catalog and the generated form (pages_alerte_form.jsx, fields.jsx) ---- */

/* FieldBox: rounded-lg border p-5 with a legend text-sm font-semibold. */
.nh-fieldbox { margin: 0 0 24px; padding: 16px 20px 20px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.nh-fieldbox > legend { padding: 0 6px; color: #111827; font-size: 14px; font-weight: 600; }
.nh-muted { margin: 0; color: #6b7280; font-size: 14px; }
.nh-link-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #6b7280; font-size: 13px; cursor: pointer; }
.nh-link-button:hover { color: #111827; }
.nh-cap-conn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.nh-tag--green { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.nh-tag--amber { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.nh-tag--red { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.nh-cap-section { margin-top: 20px; }
.nh-cap-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.nh-cap-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
.nh-cap-bar .nh-field__label { margin: 0; }
.nh-cap-empty { border: 1px solid #e5e7eb; border-radius: 10px; }

/* grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3 */
.nh-cap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media (min-width: 768px) {
  .nh-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .nh-cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nh-cap-card { display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; width: 100%; margin: 0; padding: 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font: inherit; text-align: left; }
.nh-cap-card--pick { cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.nh-cap-card--pick:hover { background: #f9fafb; }
.nh-cap-card--selected, .nh-cap-card--selected:hover { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb; }
.nh-cap-card--install { border-style: dashed; border-color: #fcd34d; background: rgb(253 243 226 / 0.4); }
.nh-cap-card--na { border-style: dashed; background: #f9fafb; opacity: 0.8; }
.nh-cap-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nh-cap-card--na .nh-cap-card__head { justify-content: flex-start; align-items: center; color: #9ca3af; }
.nh-cap-card__title { color: #111827; font-size: 14px; font-weight: 600; }
.nh-cap-card--na .nh-cap-card__title { color: #6b7280; font-weight: 500; }
.nh-cap-card--selected .nh-cap-card__title { color: #1d4ed8; }
.nh-cap-card__radio { flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: 2px; border: 1px solid #d1d5db; border-radius: 9999px; }
.nh-cap-card--selected .nh-cap-card__radio { border-color: #2563eb; background: radial-gradient(circle, #2563eb 0 5px, transparent 5.5px); }
.nh-cap-card__text { margin: 0; color: #6b7280; font-size: 12px; line-height: 1.6; }
.nh-cap-card--na .nh-cap-card__text { color: #9ca3af; }
.nh-cap-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.nh-cap-card__link { align-self: flex-start; font-size: 13px; }
.nh-cap-card__hint { color: #9ca3af; font-size: 12px; }
.nh-cap-generated { display: flex; align-items: flex-start; gap: 6px; margin: 16px 0 0; color: #9ca3af; font-size: 12px; }

/* The generated form: number + unit on one line, checks of a multiple enum, the errors. */
.nh-cap-form { max-width: none; }
.nh-number-unit { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; align-items: start; }
.nh-cap-toggle { margin-top: 10px; }
.nh-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.nh-check { display: inline-flex; align-items: center; gap: 6px; color: #374151; font-size: 14px; }
.nh-field__error { margin: 6px 0 0; color: #b91c1c; font-size: 12px; }
.nh-cap-field--invalid .viva-input, .nh-cap-field--invalid .viva-select { border-color: #f87171; }

/* The reference field: chips of what was chosen, a boxed list or a search with its results. */
.nh-ref__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.nh-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 6px 3px 10px; border: 1px solid #bfdbfe; border-radius: 9999px; background: #eff6ff; color: #1d4ed8; font-size: 13px; }
.nh-chip--inactive { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.nh-chip--missing { border-color: #fecaca; background: #fef2f2; color: #991b1b; text-decoration: line-through; }
.nh-chip--missing .nh-tag { text-decoration: none; }
.nh-chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: inherit; cursor: pointer; }
.nh-chip__remove:hover { background: rgb(0 0 0 / 0.08); }
.nh-ref__box { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.nh-ref__input { margin-bottom: 8px; }
.nh-ref__list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.nh-ref__list li { margin: 0; }
.nh-check--inactive { color: #9ca3af; }
.nh-ref__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.nh-ref__hint { margin: 4px 0 0; color: #9ca3af; font-size: 12px; }
.nh-ref__error { margin: 6px 0 0; color: #b45309; font-size: 12px; }
.nh-ref__refresh, .nh-ref__more { font-size: 13px; }
.nh-ref__results { display: flex; flex-direction: column; gap: 4px; max-height: 280px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; border: 1px solid #e5e7eb; border-radius: 10px; }
.nh-ref__results li { margin: 0; }
.nh-ref__result { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: transparent; color: #111827; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.nh-ref__result:hover:not(:disabled) { background: #f9fafb; }
.nh-ref__result--picked { color: #15803d; }
.nh-ref__result .ti { color: #2563eb; }
.nh-ref__result--picked .ti { color: #15803d; }

/* The templates (pages_modeles.jsx): filters on three columns; the form on the left, the
   variables and the preview on the right (xl:grid-cols-[1.2fr_1fr]). */
.nh-tpl-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nh-tpl-filters { margin-bottom: 24px; }
.nh-tpl-filters__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.nh-tpl-channel { color: #9ca3af; font-size: 16px; }
.nh-tpl-summary { max-width: 640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.nh-tpl-main, .nh-tpl-side { min-width: 0; }
.nh-tpl-stack { max-width: none; }
/* The inputs are content-box with width: 100% in the shared styles: their padding would overflow the boxes. */
.nh-tpl-layout .viva-input { box-sizing: border-box; }
.nh-tpl-caps { display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.nh-tpl-caps__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nh-tpl-sms { height: auto; min-height: 120px; padding-top: 8px; padding-bottom: 8px; font-family: inherit; line-height: 1.5; resize: vertical; }
.nh-tpl-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.nh-tpl-params { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.nh-tpl-param { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.nh-tpl-param__position { padding: 6px 8px; border-radius: 6px; background: #f3f4f6; color: #4b5563; font-size: 13px; text-align: center; }

@media (min-width: 768px) {
  .nh-tpl-filters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nh-tpl-meta { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

@media (min-width: 1280px) {
  .nh-tpl-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* The variables: one button per variable, its token and its label; a click inserts it. */
.nh-vars__hint { margin: -4px 0 12px; font-size: 13px; }
.nh-vars__group { margin: 12px 0 6px; color: #6b7280; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.nh-vars { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nh-var { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.nh-var:hover:not(:disabled) { border-color: #93c5fd; background: #eff6ff; }
.nh-var__token { flex: 0 0 auto; max-width: 55%; overflow: hidden; color: #374151; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.nh-var__label { flex: 1 1 auto; color: #4b5563; font-size: 14px; }
.nh-var .ti { color: #9ca3af; }
.nh-vars__empty { margin-top: 12px; font-size: 13px; }

/* The rich text of an email body: a toolbar over an editable area. */
.nh-rte__box { border: 1px solid #d1d5db; border-radius: 8px; background: #fff; }
.nh-rte__box:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 15%); }
.nh-rte__toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid #e5e7eb; }
.nh-rte__tool { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: #4b5563; cursor: pointer; }
.nh-rte__tool:hover { background: #f3f4f6; color: #111827; }
.nh-rte__area { min-height: 200px; padding: 10px 12px; color: #111827; font-size: 14px; line-height: 1.55; outline: none; overflow-wrap: anywhere; }
.nh-rte__area ul, .nh-rte__area ol { margin: 4px 0; padding-left: 24px; }
.nh-rte__area a { color: #2563eb; text-decoration: underline; }

/* The SMS counter (F7). */
.nh-sms { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; color: #6b7280; font-size: 12px; }
.nh-sms--warn { color: #b45309; }
.nh-sms__note { color: #9ca3af; }

/* The preview: the email as read, the text message in a bubble, the WhatsApp parameters. */
.nh-preview-mail { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.nh-preview-mail__subject { margin: 0; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; font-size: 14px; font-weight: 600; }
.nh-preview-mail__body { padding: 12px 14px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.nh-preview-mail__body p { margin: 0 0 8px; }
.nh-preview-phone { padding: 16px; border-radius: 8px; background: #f3f4f6; }
.nh-preview-phone--whatsapp { background: #efeae2; }
.nh-preview-bubble { max-width: 85%; margin-left: auto; padding: 8px 12px; border-radius: 12px 12px 0 12px; background: #fff; color: #1f2937; font-size: 14px; line-height: 1.5; white-space: pre-wrap; box-shadow: 0 1px 1px rgb(0 0 0 / 8%); }
.nh-preview-bubble--whatsapp { background: #d9fdd3; white-space: normal; }
.nh-preview-meta { margin: 0 0 8px; color: #4b5563; font-size: 13px; }
.nh-preview-params { display: grid; gap: 4px; margin: 0; }
.nh-preview-params > div { display: flex; gap: 8px; }
.nh-preview-params dt { color: #6b7280; }
.nh-preview-params dd { margin: 0; }

/* The recipients (pages_destinataires.jsx): folder tabs over a card whose top left corner joins
   them, a search and the filters on one line. */
.nh-folder-card { border-top-left-radius: 0; }
.nh-rcp-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.nh-rcp-filters .viva-field { margin: 0; }
.nh-rcp-search { box-sizing: border-box; width: 100%; }
.nh-rcp-channels { display: inline-flex; gap: 4px; }
.nh-rcp-channel { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #f3f4f6; color: #6b7280; font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 1024px) {
  .nh-rcp-filters { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
}

/* The forms: two columns (lg:grid-cols-2). */
.nh-rcp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.nh-rcp-layout .viva-input { box-sizing: border-box; }
.nh-rcp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.nh-rcp-toggle { margin-top: 8px; }
.nh-rcp-channel-rows { display: flex; flex-direction: column; gap: 10px; }
.nh-rcp-channel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; color: #374151; font-size: 14px; font-weight: 500; }
.nh-rcp-channel-row .ti { margin-right: 6px; color: #9ca3af; font-size: 17px; }
.nh-rcp-active { margin-top: 16px; background: #f9fafb; font-weight: 400; }
.nh-rcp-modules { margin-top: 16px; }
.nh-rcp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-rcp-chip { height: 36px; padding: 0 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #6b7280; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nh-rcp-chip:hover { background: #f9fafb; }
.nh-rcp-chip--on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }

@media (min-width: 1024px) {
  .nh-rcp-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The members of a list, the recipients of the picker: one checkbox row each. */
.nh-rcp-members { display: flex; flex-direction: column; gap: 8px; max-height: 480px; margin: 12px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.nh-rcp-member { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; }
.nh-rcp-member:hover { background: #f9fafb; }
.nh-rcp-member__who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.nh-rcp-member__name { color: #1f2937; font-size: 14px; font-weight: 600; }
.nh-rcp-member__mail { overflow: hidden; color: #6b7280; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nh-rcp-member__function { color: #9ca3af; font-size: 12px; }
.nh-rcp-count { margin-top: 12px; }

/* The picker of an action: the summary under the list. */
.nh-picker__box { padding: 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.nh-picker__empty { margin: 8px 0; }
.nh-picker__summary { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 12px 0 0; color: #6b7280; font-size: 14px; }
.nh-picker__summary strong { color: #111827; }


/* ---- Channels: the tab and the form of a configuration (pages_parametres.jsx CanauxTab, ConfigurationFormPage) ---- */

.nh-channels { display: flex; flex-direction: column; gap: 16px; }
.nh-channels__title { margin: 16px 0 0; color: #111827; font-size: 16px; font-weight: 500; }

/* grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-3; a card rounded-lg border p-4, dashed when not configured */
.nh-channel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media (min-width: 768px) {
  .nh-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1536px) {
  .nh-channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nh-channel-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.nh-channel-card--empty { border-style: dashed; border-color: #d1d5db; background: #f9fafb; }
.nh-channel-card > .viva-btn { align-self: flex-start; }
.nh-channel-card__head { display: flex; align-items: center; gap: 12px; }
.nh-channel-card__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #eff6ff; color: #2563eb; font-size: 20px; }
.nh-channel-card--empty .nh-channel-card__icon { background: #f3f4f6; color: #9ca3af; }
.nh-channel-card__name { flex: 1; min-width: 0; }
.nh-channel-card__name p { margin: 0; color: #111827; font-weight: 500; }
.nh-channel-card--empty .nh-channel-card__name p { color: #6b7280; }
.nh-channel-card__name p.nh-mono { color: #9ca3af; font-size: 11px; font-weight: 400; }
.nh-channel-card__help { margin: 0; color: #6b7280; font-size: 12px; }
.nh-channel-rows__icon { color: #9ca3af; font-size: 16px; }
.nh-channel-card__quota { margin: 0; color: #374151; font-size: 12px; }

/* The quotas of the channels, kept by VivaFlow: the dates side by side from 640px */
.nh-quotas__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.nh-quota-dates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media (min-width: 640px) {
  .nh-quota-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* grid-cols-1 gap-6 xl:grid-cols-2: channel and label on the left, the settings on the right */
.nh-channel-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

@media (min-width: 1280px) {
  .nh-channel-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.nh-channel-form .nh-fieldbox { margin: 0; }
.nh-channel-form .viva-input { box-sizing: border-box; }
.nh-channel-form__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nh-channel-form__test { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 16px; }

/* The channels as buttons: grid-cols-2 sm:grid-cols-3, h-11, the chosen one in brand colours */
.nh-channel-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

@media (min-width: 640px) {
  .nh-channel-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nh-channel-picker__option { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #6b7280; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nh-channel-picker__option:hover:not(:disabled) { background: #f9fafb; }
.nh-channel-picker__option.is-selected { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.nh-channel-picker__option:disabled:not(.is-selected) { opacity: 0.45; cursor: not-allowed; }
.nh-channel-picker__option .ti { font-size: 17px; }

.nh-channel-text { resize: vertical; }
.nh-channel-toggle { display: flex; flex-direction: column; gap: 4px; }

.nh-channel-test { margin-top: 16px; }
.nh-channel-test .viva-input { box-sizing: border-box; }
.nh-channel-test__progress { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: #6b7280; font-size: 14px; }
.nh-channel-test__run { display: block; margin-top: 4px; color: #6b7280; font-size: 11px; }

/* Schedules: the form on the left, the preview on the right (pages_planification.jsx). */
.nh-sch-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.nh-sch-form__column { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nh-sch-form .nh-fieldbox { margin: 0; }
.nh-sch-form .viva-input { box-sizing: border-box; }

@media (min-width: 1280px) {
  .nh-sch-form { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.nh-sch-label { display: block; margin: 16px 0 8px; color: #374151; font-size: 13px; font-weight: 600; }
.nh-form-stack .nh-sch-label { margin-top: 0; }
.nh-sch-days { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-sch-day { width: 52px; height: 36px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #6b7280; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nh-sch-day:hover { background: #f9fafb; }
.nh-sch-day.is-selected { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.nh-sch-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nh-sch-time { display: flex; align-items: center; gap: 4px; }
.nh-sch-time .viva-field { width: 128px; }
.nh-sch-range { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.nh-sch-range .viva-field { width: 160px; }
.nh-sch-cron input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nh-sch-validity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nh-sch-summary { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; color: #1e3a8a; font-size: 15px; font-weight: 600; }
.nh-sch-summary p { margin: 0; }
.nh-sch-summary .ti { color: #1d4ed8; font-size: 22px; }
.nh-sch-runs { margin: 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 8px; list-style: none; }
.nh-sch-runs li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #1f2937; font-size: 14px; }
.nh-sch-runs li + li { border-top: 1px solid #f3f4f6; }
.nh-sch-runs__index { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; background: #f3f4f6; color: #6b7280; font-size: 12px; font-weight: 600; }
.nh-sch-triggers { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.nh-sch-triggers li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #374151; font-size: 13px; }
.nh-sch-syntax { width: 100%; border-collapse: collapse; font-size: 13px; }
.nh-sch-syntax th, .nh-sch-syntax td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; text-align: left; }
.nh-sch-syntax th { color: #6b7280; font-weight: 600; }
.nh-sch-examples { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.nh-sch-example { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.nh-sch-example code { min-width: 150px; padding: 6px 10px; border-radius: 6px; background: #f3f4f6; color: #374151; font-size: 13px; }
.nh-sch-example span { color: #4b5563; font-size: 14px; }
.nh-sch-example:hover span { color: #2563eb; }
.nh-sch-usages { margin: 0; padding: 0; list-style: none; }
.nh-sch-usages li { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: #374151; font-size: 14px; }
.nh-sch-usages li + li { border-top: 1px solid #f3f4f6; }
.nh-sch-usages .ti { color: #9ca3af; }

/* Alerts (step 11): the list and the form, its actions each with its message. */
/* The inputs of the library count their padding outside their width: in a grid cell they overflow. */
.nh-fieldbox .viva-input, .nh-alert-filters .viva-input { box-sizing: border-box; }
.nh-alert-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: end; }
.nh-alert-sync { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 9999px; background: #d1d5db; }
.nh-alert-sync--pending { background: #f59e0b; }
.nh-alert-sync--synced { background: #16a34a; }
.nh-alert-sync--failed { background: #dc2626; }
.nh-alert-sync-card { margin-bottom: 16px; }
.nh-alert-sync-panel { display: flex; flex-direction: column; gap: 8px; }
.nh-alert-sync-panel__state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nh-alert-sync-panel__error { color: #b91c1c; overflow-wrap: anywhere; }
.nh-alert-sync-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-alert-test__heading { margin: 16px 0 8px; font-size: 14px; }
.nh-alert-test__objects { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nh-alert-test__objects li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nh-alert-test__message { margin-bottom: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
.nh-alert-test__channel { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: 600; }
.nh-alert-test__part { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 6px; }
.nh-alert-test__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.nh-flow-reconcile { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.nh-alert-channel { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #f3f4f6; color: #4b5563; font-size: 14px; }
.nh-alert-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.nh-alert-schedule { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.nh-alert-schedule .viva-field { flex: 1 1 280px; }
.nh-alert-schedule__summary { margin-top: 12px; }
.nh-alert-schedule__next { color: #1e40af; font-size: 13px; font-weight: 400; }
.nh-alert-actions__intro { margin: 0 0 16px; }
.nh-alert-actions { display: flex; flex-direction: column; gap: 16px; }
.nh-alert-actions__add { max-width: 360px; margin-top: 16px; }
.nh-alert-action { position: relative; margin: 0; background: #fff; }
.nh-alert-action__remove { position: absolute; top: -25px; right: 12px; padding: 0 4px; background: #fff; }
.nh-alert-action legend .ti { color: #6b7280; }
.nh-alert-problems { margin: 0; padding-left: 18px; }
.nh-alert-message { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.nh-alert-filters > :first-child { grid-column: 1 / -1; }
/* Phones: the four statuses on two rows, each option as wide as the others. */
@media (max-width: 767.98px) {
  .nh-alert-filters .viva-segmented { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nh-alert-filters .viva-segmented__option { padding: 0 8px; }
}
@media (min-width: 768px) {
  .nh-alert-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nh-alert-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .nh-alert-filters { grid-template-columns: auto repeat(2, minmax(0, 240px)); }
  .nh-alert-filters > :first-child { grid-column: auto; }
}

/* ---- Dashboard (pages_dashboard.jsx): figures with a left accent, triggers, alerts by status ---- */
.nh-dash-source { color: #9ca3af; font-size: 12px; line-height: 20px; }
.nh-dash-kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.nh-dash-kpi { position: relative; padding: 24px; border: 1px solid #e5e7eb; border-left-width: 4px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.nh-dash-kpi__icon { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: 20px; }
.nh-dash-kpi__label { color: #4b5563; font-size: 14px; }
.nh-dash-kpi__value { margin-top: 12px; font-size: 36px; line-height: 40px; }
.nh-dash-kpi--slate { border-left-color: #94a3b8; }
.nh-dash-kpi--slate .nh-dash-kpi__icon { background: #f8fafc; color: #64748b; }
.nh-dash-kpi--slate .nh-dash-kpi__value { color: #111827; }
.nh-dash-kpi--amber { border-left-color: #f59e0b; }
.nh-dash-kpi--amber .nh-dash-kpi__icon { background: #fffbeb; color: #f59e0b; }
.nh-dash-kpi--amber .nh-dash-kpi__value { color: #f59e0b; }
.nh-dash-kpi--green { border-left-color: #22c55e; }
.nh-dash-kpi--green .nh-dash-kpi__icon { background: #f0fdf4; color: #16a34a; }
.nh-dash-kpi--green .nh-dash-kpi__value { color: #16a34a; }
.nh-dash-kpi--blue { border-left-color: #3b82f6; }
.nh-dash-kpi--blue .nh-dash-kpi__icon { background: #eff6ff; color: #2563eb; }
.nh-dash-kpi--blue .nh-dash-kpi__value { color: #2563eb; }
.nh-dash-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.nh-dash-card { padding: 24px; }
.nh-dash-card__head { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
.nh-dash-card__title { margin: 0; color: #111827; font-size: 16px; font-weight: 500; }
.nh-dash-card__title--spaced { margin-bottom: 20px; }
.nh-dash-card__text { margin: 4px 0 0; color: #6b7280; font-size: 14px; }
.nh-dash-empty { display: flex; align-items: center; justify-content: center; height: 224px; border: 1px solid #f3f4f6; border-radius: 6px; background: #f9fafb; color: #6b7280; font-size: 14px; text-align: center; }
.nh-dash-flags { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f3f4f6; }
.nh-page .nh-dash-flag { display: inline-flex; align-items: center; gap: 8px; color: #374151; font-size: 14px; text-decoration: none; }
.nh-dash-flag strong { color: #111827; }
.nh-page .nh-dash-flag:hover { color: #2563eb; }
.nh-dash-card--actions { max-width: 640px; }
.nh-dash-actions { display: flex; flex-direction: column; }
.nh-page .nh-dash-action { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; color: #374151; text-decoration: none; }
.nh-dash-action:last-child { border-bottom: 0; }
.nh-page .nh-dash-action:hover { color: #2563eb; }
.nh-dash-action .ti { color: #9ca3af; font-size: 18px; }
.nh-dash-action .nh-dash-action__icon--red { color: #f87171; }
.nh-dash-action .nh-dash-action__icon--amber { color: #f59e0b; }
@media (min-width: 768px) {
  .nh-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .nh-dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nh-dash-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* ---- History (pages_historique.jsx): the filters, the table, an execution ---- */
.nh-history-filters { display: flex; flex-direction: column; gap: 16px; }
.nh-history-filters__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.nh-history-card { overflow: hidden; }
.nh-history-scroll { overflow-x: auto; }
.nh-history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nh-history-table th { padding: 10px 16px; border-bottom: 1px solid #e5e7eb; color: #6b7280; font-size: 12px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.nh-history-table td { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; color: #111827; vertical-align: top; }
.nh-history-table__date { color: #4b5563; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: nowrap; }
.nh-history-table__type { color: #4b5563; white-space: nowrap; }
.nh-history-table__type .ti { margin-right: 6px; color: #9ca3af; font-size: 15px; }
.nh-history-table__type .nh-tag { margin-left: 6px; }
.nh-history-table__detail { color: #4b5563; overflow-wrap: anywhere; }
.nh-history-table__status { text-align: right; white-space: nowrap; }
.nh-history-row:hover td { background: #f9fafb; }
.nh-history-row--trigger { cursor: pointer; }
.nh-history-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; }
.nh-history-footer__count { color: #6b7280; font-size: 13px; }
.nh-history-cap { margin: 0; padding: 0 16px 16px; color: #92400e; font-size: 13px; }
.nh-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nh-run-head__alert { font-weight: 600; }
.nh-run-head__meta { margin-left: auto; color: #6b7280; font-size: 13px; }
.nh-run-detail { margin: 8px 0 0; color: #4b5563; font-size: 14px; overflow-wrap: anywhere; }
.nh-run-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.nh-run-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nh-run-list__code { font-weight: 500; white-space: nowrap; }
.nh-run-list__status { color: #6b7280; font-size: 13px; }
.nh-run-list__text { color: #4b5563; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .nh-history-filters__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .nh-history-filters__fields { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}