/* ==========================================================================
   Shell v2 — navbar, sidebar, pending-changes bar.
   Reference mockups: Stitch project "ISPMan — raffinement UI",
   screens "Coquille v2 — clair" / "Coquille v2 — sombre".
   Loaded last so it overrides custom.css / menu.css without touching them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Colour themes. <html data-theme="blue|duck|earth|pop|neon|mono"> picks one and
   data-bs-theme picks the light or dark mode (js/theme-switcher.js, set
   before paint by layouts/_theme_boot). A theme is a neutral scale
   (--n-0 .. --n-950, used by every light and dark token below), the
   sidebar colours and an accent with its indicator hues. Accent and hues
   are light-dark() pairs: they follow the color-scheme of the element that
   paints them, so the sidebar (always data-bs-theme="dark") gets the dark
   variant on a light page. Any element may carry data-theme: the swatches
   of the theme menu show each theme with its own variables.
   -------------------------------------------------------------------------- */
:root,
[data-theme="blue"] {
  /* Blue: the original slate greys and navy sidebar, blue accent. */
  --n-0: #ffffff;
  --n-50: #f8fafc;
  --n-100: #f1f5f9;
  --n-200: #e2e8f0;
  --n-300: #cbd5e1;
  --n-400: #94a3b8;
  --n-500: #64748b;
  --n-600: #475569;
  --n-700: #334155;
  --n-800: #1e293b;
  --n-900: #0f172a;
  --n-950: #020617;
  --sb-bg: #0f172a;
  --sb-line: #1e293b;
  --accent: light-dark(#1565c0, #64b5f6);
  --accent-hover: light-dark(#0d47a1, #90caf9);
  --accent-ink: light-dark(#0d47a1, #bbdefb);
  --on-accent: light-dark(#ffffff, #0b1f33);
  /* Indicator hues, kept apart from the accent: domains and DNS (accent),
     virtual hosts (sky), mail accounts (coral), databases (amber),
     storage and success (green). */
  --hue-sky: light-dark(#0e7490, #67e8f9);
  --hue-coral: light-dark(#c2452a, #fda48c);
  --hue-amber: light-dark(#b45309, #fcd34d);
  --hue-green: light-dark(#047857, #6ee7b7);
}
[data-theme="duck"] {
  /* Duck blue (Stitch palette C): warm greys, teal-grey sidebar. */
  --n-0: #ffffff;
  --n-50: #fafaf9;
  --n-100: #f5f5f4;
  --n-200: #e7e5e4;
  --n-300: #d6d3d1;
  --n-400: #a8a29e;
  --n-500: #78716c;
  --n-600: #57534e;
  --n-700: #44403c;
  --n-800: #292524;
  --n-900: #1c1917;
  --n-950: #0c0a09;
  --sb-bg: #1c2b2d;
  --sb-line: #2a3a3c;
  --accent: light-dark(#037a87, #2dd4bf);
  --accent-hover: light-dark(#02656f, #5eead4);
  --accent-ink: light-dark(#02656f, #99f6e4);
  --on-accent: light-dark(#ffffff, #042f2e);
  --hue-sky: light-dark(#0369a1, #7dd3fc);
  --hue-coral: light-dark(#c2452a, #fda48c);
  --hue-amber: light-dark(#b45309, #fcd34d);
  --hue-green: light-dark(#047857, #6ee7b7);
}
[data-theme="earth"] {
  /* Earth: sand and brown neutrals, espresso sidebar, burnt orange accent.
     The hues move away from orange: teal, rose, gold, olive. */
  --n-0: #fffdf9;
  --n-50: #fbf7f1;
  --n-100: #f5eee4;
  --n-200: #eadfcf;
  --n-300: #d9c8b1;
  --n-400: #b39c80;
  --n-500: #7d6650;
  --n-600: #62503f;
  --n-700: #4a3c30;
  --n-800: #2f261f;
  --n-900: #201a15;
  --n-950: #120e0b;
  --sb-bg: #2a1e16;
  --sb-line: #3d2d22;
  --accent: light-dark(#c2410c, #fb923c);
  --accent-hover: light-dark(#9a3412, #fdba74);
  --accent-ink: light-dark(#9a3412, #fed7aa);
  --on-accent: light-dark(#ffffff, #431407);
  --hue-sky: light-dark(#0f766e, #5eead4);
  --hue-coral: light-dark(#be123c, #fda4af);
  --hue-amber: light-dark(#a16207, #fde047);
  --hue-green: light-dark(#4d7c0f, #bef264);
}
[data-theme="pop"] {
  /* Pop: Miami pop art. By day hot pink on candy-pink whites, by night
     neon pink and cyan on a deep ocean-night purple. */
  --n-0: #ffffff;
  --n-50: #fff5fa;
  --n-100: #fdeef6;
  --n-200: #f5d7e8;
  --n-300: #e3bcd6;
  --n-400: #a893b8;
  --n-500: #6e5a86;
  --n-600: #4f3d69;
  --n-700: #3a2a57;
  --n-800: #251845;
  --n-900: #170d30;
  --n-950: #0c0620;
  --sb-bg: #1f0a3c;
  --sb-line: #3a1a5e;
  --accent: light-dark(#e6007a, #ff4fb3);
  --accent-hover: light-dark(#b8005f, #ff85cb);
  --accent-ink: light-dark(#b8005f, #ffc2e5);
  --on-accent: light-dark(#ffffff, #2a0019);
  --hue-sky: light-dark(#0891b2, #22d3ee);
  --hue-coral: light-dark(#ea580c, #fb923c);
  --hue-amber: light-dark(#a16207, #facc15);
  --hue-green: light-dark(#059669, #34d399);
}
[data-theme="neon"] {
  /* Neon: pure greys from white to black, black sidebar. Electric azure
     by day; by night neon cyan, magenta, orange, yellow and lime that
     glow (see the glow rule below). */
  --n-0: #ffffff;
  --n-50: #fafafa;
  --n-100: #f7f7f7;
  --n-200: #e6e6e6;
  --n-300: #d0d0d0;
  --n-400: #9a9a9a;
  --n-500: #6b6b6b;
  --n-600: #4a4a4a;
  --n-700: #2e2e2e;
  --n-800: #141414;
  --n-900: #050505;
  --n-950: #000000;
  --sb-bg: #000000;
  --sb-line: #1c1c1c;
  --accent: light-dark(#0070f3, #00e5ff);
  --accent-hover: light-dark(#0058c2, #7ff3ff);
  --accent-ink: light-dark(#0058c2, #b3f7ff);
  --on-accent: light-dark(#ffffff, #001a1f);
  --hue-sky: light-dark(#c8009f, #ff2bd6);
  --hue-coral: light-dark(#c24400, #ff7a1a);
  --hue-amber: light-dark(#8a7400, #f5ff00);
  --hue-green: light-dark(#008a2e, #39ff14);
}
/* Neon glow, dark only (the sidebar is dark in both modes). */
[data-theme="neon"] .sp-btn-primary,
[data-theme="neon"] .app-sidebar .sidebar-menu .nav-item > .nav-link.active {
  box-shadow: 0 0 14px light-dark(transparent, color-mix(in srgb, var(--accent) 45%, transparent));
}
[data-theme="neon"] .sp-kpi-icon,
[data-theme="neon"] .sp-kpi2-icon {
  filter: drop-shadow(0 0 6px light-dark(transparent, color-mix(in srgb, var(--tone, var(--accent)) 60%, transparent)));
}
[data-theme="mono"] {
  /* Monochrome: black, white and greys only. The accent is black by day
     and white by night; the hues are greys of different weights, so an
     active account (green, darkest) still stands apart from a suspended
     one (amber, lightest). Error and pending colours keep their hue. */
  --n-0: #ffffff;
  --n-50: #fafafa;
  --n-100: #f4f4f4;
  --n-200: #e4e4e4;
  --n-300: #cfcfcf;
  --n-400: #9e9e9e;
  --n-500: #6e6e6e;
  --n-600: #4d4d4d;
  --n-700: #333333;
  --n-800: #1c1c1c;
  --n-900: #111111;
  --n-950: #0a0a0a;
  --sb-bg: #0a0a0a;
  --sb-line: #262626;
  --accent: light-dark(#171717, #f5f5f5);
  --accent-hover: light-dark(#404040, #d4d4d4);
  --accent-ink: light-dark(#171717, #ffffff);
  --on-accent: light-dark(#ffffff, #0a0a0a);
  --hue-sky: light-dark(#404040, #d4d4d4);
  --hue-coral: light-dark(#525252, #bdbdbd);
  --hue-amber: light-dark(#6e6e6e, #9e9e9e);
  --hue-green: light-dark(#262626, #e5e5e5);
}
:root {
  /* Tints of the accent; light-dark() inside resolves where they are used. */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-muted: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* light-dark() reads the color-scheme. Bootstrap only sets the dark one,
   and a plain :root rule here would override it on <html>. */
:root:not([data-bs-theme="dark"]),
[data-bs-theme="light"] {
  color-scheme: light;
}
[data-bs-theme="dark"] {
  color-scheme: dark;
}

/* Indicator tones: a component reads --tone (icon, bar, tile). */
.t-accent { --tone: var(--accent); }
.t-sky    { --tone: var(--hue-sky); }
.t-coral  { --tone: var(--hue-coral); }
.t-amber  { --tone: var(--hue-amber); }
.t-green  { --tone: var(--hue-green); }

:root,
[data-bs-theme="light"] {
  /* Bootstrap components (cards, dropdowns, tables, inputs) follow the
     theme's neutrals instead of Bootstrap's own greys. */
  --bs-body-color: var(--n-800);
  --bs-body-bg: var(--n-0);
  --bs-emphasis-color: var(--n-950);
  --bs-secondary-color: var(--n-500);
  --bs-secondary-bg: var(--n-100);
  --bs-tertiary-color: var(--n-400);
  --bs-tertiary-bg: var(--n-50);
  --bs-border-color: var(--n-200);
  --ispman-bg-card: var(--n-0);
  --ispman-bg-sidebar: var(--sb-bg);
  --shell-navbar-bg: var(--n-0);
  --shell-navbar-border: var(--n-200);
  --shell-navbar-text: var(--n-700);
  --shell-navbar-icon: var(--n-500);
  --shell-search-bg: var(--n-100);
  --shell-search-border: transparent;
  --shell-pending-bg: #fffbeb;
  --shell-pending-border: #fde68a;
  --shell-pending-title: var(--n-800);
  --shell-pending-text: var(--n-500);
  --shell-pending-badge-text: #ffffff;
  --shell-input-bg: var(--n-0);
  --shell-input-border: var(--n-300);
  --shell-input-readonly: var(--n-50);
  --shell-addon-bg: var(--n-50);
  --lte-sidebar-width: 248px;
  --lte-app-header-height: 56px;
  --shell-find-text: var(--n-400);
  --shell-find-hover: color-mix(in srgb, var(--n-200) 70%, transparent);
  --shell-kbd-bg: var(--n-0);
  --shell-kbd-border: var(--n-200);
  --shell-kbd-text: var(--n-500);
  --shell-menu-bg: var(--n-0);
  --shell-menu-border: var(--n-200);
  --shell-menu-divider: var(--n-100);
  --shell-menu-sub: var(--n-50);
  --shell-menu-title: var(--n-800);
  --shell-menu-text: var(--n-500);
  --shell-menu-faint: var(--n-400);
  --shell-menu-hover: color-mix(in srgb, var(--n-50) 70%, transparent);
  --tone-amber-bg: #fffbeb;
  --tone-amber-border: rgba(253, 230, 138, 0.5);
  --tone-amber-text: #b45309;
  --tone-accent-bg: var(--accent-soft);
  --tone-accent-border: var(--accent-line);
  --tone-accent-text: var(--accent-ink);
  --tone-red-bg: #fef2f2;
  --tone-red-border: rgba(254, 202, 202, 0.5);
  --tone-red-text: #b91c1c;
  --tone-grey-bg: var(--n-100);
  --tone-grey-text: var(--n-500);
  --tone-grey-strong: var(--n-600);
  --pal-overlay: color-mix(in srgb, var(--n-900) 45%, transparent);
  --pal-icon-active-bg: var(--accent-soft);
  --pal-icon-active-text: var(--accent-ink);
}

[data-bs-theme="dark"] {
  /* The sidebar itself carries data-bs-theme="dark": custom.css sets 275px
     there, the mockup (and the light block above) says 248px. */
  --bs-body-color: var(--n-200);
  --bs-body-bg: var(--n-900);
  --bs-emphasis-color: var(--n-0);
  --bs-secondary-color: var(--n-400);
  --bs-secondary-bg: var(--n-800);
  --bs-tertiary-color: var(--n-500);
  --bs-tertiary-bg: color-mix(in srgb, var(--n-800) 50%, var(--n-900));
  --bs-border-color: var(--n-700);
  --lte-sidebar-width: 248px;
  --ispman-bg-card: var(--n-800);
  --shell-navbar-bg: var(--n-800);
  --shell-navbar-border: var(--n-700);
  --shell-navbar-text: var(--n-200);
  --shell-navbar-icon: var(--n-400);
  --shell-search-bg: var(--n-900);
  --shell-search-border: var(--n-700);
  --shell-pending-bg: rgba(245, 158, 11, 0.12);
  --shell-pending-border: rgba(245, 158, 11, 0.35);
  --shell-pending-title: #fde68a;
  --shell-pending-text: var(--n-300);
  --shell-pending-badge-text: var(--n-900);
  --shell-input-bg: var(--n-900);
  --shell-input-border: var(--n-600);
  --shell-input-readonly: var(--n-800);
  --shell-addon-bg: var(--n-800);
  --shell-find-text: var(--n-500);
  --shell-find-hover: var(--n-800);
  --shell-kbd-bg: var(--n-800);
  --shell-kbd-border: var(--n-700);
  --shell-kbd-text: var(--n-400);
  --shell-menu-bg: var(--n-800);
  --shell-menu-border: var(--n-700);
  --shell-menu-divider: color-mix(in srgb, var(--n-700) 60%, transparent);
  --shell-menu-sub: color-mix(in srgb, var(--n-800) 50%, var(--n-900));
  --shell-menu-title: var(--n-100);
  --shell-menu-text: var(--n-400);
  --shell-menu-faint: var(--n-500);
  --shell-menu-hover: color-mix(in srgb, var(--n-700) 35%, transparent);
  --tone-amber-bg: rgba(245, 158, 11, 0.15);
  --tone-amber-border: rgba(245, 158, 11, 0.3);
  --tone-amber-text: #fcd34d;
  --tone-accent-bg: var(--accent-muted);
  --tone-accent-border: var(--accent-line);
  --tone-accent-text: var(--accent-ink);
  --tone-red-bg: rgba(239, 68, 68, 0.15);
  --tone-red-border: rgba(239, 68, 68, 0.3);
  --tone-red-text: #fca5a5;
  --tone-grey-bg: color-mix(in srgb, var(--n-400) 12%, transparent);
  --tone-grey-text: var(--n-300);
  --tone-grey-strong: var(--n-300);
  --pal-overlay: color-mix(in srgb, var(--n-950) 60%, transparent);
  --pal-icon-active-bg: var(--accent-line);
  --pal-icon-active-text: var(--accent-ink);
}

/* Denser console typography: 14px body, Inter, mono for technical values. */
body {
  font-size: 0.875rem;
  line-height: 1.5;
}
code, kbd, .font-monospace, .mono {
  font-family: var(--ispman-font-mono);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.app-header.navbar {
  min-height: 56px;
  background: var(--shell-navbar-bg) !important;
  border-bottom: 1px solid var(--shell-navbar-border);
  box-shadow: none !important;
  padding-block: 0;
}
.app-header .container-fluid {
  gap: 0.5rem;
  padding-inline: 0.75rem 1rem;
}
.app-header .nav-link {
  color: var(--shell-navbar-text);
  font-weight: 500;
  border-radius: 6px;
  padding: 0.4rem 0.625rem;
}
.app-header .nav-link:hover {
  background: var(--shell-search-bg);
}
.app-header .shell-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--shell-navbar-icon);
  font-size: 1rem;
}
.app-header .dropdown-toggle::after {
  margin-left: 0.4em;
  vertical-align: 0.15em;
  opacity: 0.7;
}

/* Shell v3 navbar (Stitch "v3 clair — Barre du haut, menu Processus
   ouvert"): search trigger, processes menu, theme, help, user. */
.app-header .container-fluid {
  gap: 8px;
  padding-inline: 16px;
}
.app-header .shell-icon-btn {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
}
.app-header .shell-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.app-header .shell-icon-btn:hover,
.app-header .show > .shell-icon-btn,
.app-header .shell-icon-btn.show {
  background: var(--shell-search-bg);
  color: var(--shell-navbar-text);
}
.shell-find {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 440px;
  min-width: 0;
  flex: 0 1 440px;
  height: 36px;
  padding: 0 12px;
  background: var(--shell-search-bg);
  border: 1px solid var(--shell-search-border);
  border-radius: 6px;
  color: var(--shell-find-text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.shell-find:hover {
  background: var(--shell-find-hover);
}
.shell-find:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.shell-find-icon {
  flex: none;
  color: var(--shell-find-text);
}
.shell-find-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-find-kbd,
.pal-foot kbd,
.pal-enter {
  flex: none;
  padding: 2px 6px;
  background: var(--shell-kbd-bg);
  border: 1px solid var(--shell-kbd-border);
  border-radius: 4px;
  box-shadow: none;
  color: var(--shell-kbd-text);
  font-family: var(--ispman-font-family, Inter, sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.shell-nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.shell-nav-link {
  padding: 0 8px;
  color: var(--shell-navbar-text);
  font-weight: 500;
  text-decoration: none;
}
.shell-theme-sun,
[data-bs-theme="dark"] .shell-theme-moon {
  display: none;
}
[data-bs-theme="dark"] .shell-theme-sun {
  display: block;
}

/* Appearance menu: the colour themes, each with a swatch drawn by its own
   variables (sidebar, page, accent), then the mode as a segmented control. */
.app-header .dropdown-menu.shell-look-menu {
  width: 240px;
  margin-top: 8px !important;
  padding: 8px;
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-menu-border);
  border-radius: 8px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--n-900) 12%, transparent);
}
.shell-look-title {
  margin: 4px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--shell-menu-faint);
}
.shell-look-title:not(:first-child) {
  margin-top: 12px;
}
.shell-look-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--shell-menu-title);
  font-size: 14px;
  text-align: left;
}
.shell-look-theme:hover {
  background: var(--shell-menu-sub);
}
.shell-look-theme[aria-checked="true"] {
  background: var(--accent-soft);
}
.shell-look-name {
  flex: 1;
}
.shell-look-check {
  color: var(--accent);
  visibility: hidden;
}
.shell-look-theme[aria-checked="true"] .shell-look-check {
  visibility: visible;
}
.shell-look-swatch {
  display: inline-flex;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  overflow: hidden;
  border: 1px solid var(--shell-menu-border);
  border-radius: 5px;
}
.shell-look-swatch > span {
  flex: 1;
}
.shell-look-swatch > span:nth-child(1) {
  background: var(--sb-bg);
}
.shell-look-swatch > span:nth-child(2) {
  background: light-dark(var(--n-100), var(--n-900));
}
.shell-look-swatch > span:nth-child(3) {
  background: var(--accent);
}
.shell-look-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 0 4px 4px;
  padding: 2px;
  background: var(--shell-search-bg);
  border-radius: 6px;
}
.shell-look-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--shell-menu-text);
  font-size: 12px;
}
.shell-look-mode:hover {
  color: var(--shell-menu-title);
}
.shell-look-mode[aria-checked="true"] {
  background: var(--shell-menu-bg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--n-900) 12%, transparent);
  color: var(--shell-menu-title);
}
.shell-look-theme:focus-visible,
.shell-look-mode:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 1px;
}

/* Processes menu */
.shell-pm-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #f59e0b;
  border: 2px solid var(--shell-navbar-bg);
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.shell-pm-badge[hidden] {
  display: none;
}
.app-header .dropdown-menu.shell-pm-menu {
  width: 380px;
  margin-top: 8px !important;
  padding: 0;
  overflow: hidden;
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-menu-border);
  border-radius: 8px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--n-900) 12%, transparent);
}
.shell-pm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--shell-menu-divider);
}
.shell-pm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--shell-menu-title);
  font-size: 14px;
  font-weight: 600;
}
.shell-pm-count {
  padding: 2px 6px;
  background: var(--tone-amber-bg);
  border: 1px solid var(--tone-amber-border);
  border-radius: 999px;
  color: var(--tone-amber-text);
  font-size: 11px;
  font-weight: 500;
}
.shell-pm-head a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.shell-pm-head a:hover {
  color: var(--accent-hover);
}
.shell-pm-stats {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--shell-menu-sub);
  border-bottom: 1px solid var(--shell-menu-divider);
}
.shell-pm-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.shell-pm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.shell-pm-stat.amber { background: var(--tone-amber-bg); border-color: var(--tone-amber-border); color: var(--tone-amber-text); }
.shell-pm-stat.amber .shell-pm-dot { background: #f59e0b; }
.shell-pm-stat.accent { background: var(--tone-accent-bg); border-color: var(--tone-accent-border); color: var(--tone-accent-text); }
.shell-pm-stat.accent .shell-pm-dot { background: var(--accent); }
.shell-pm-stat.red { background: var(--tone-red-bg); border-color: var(--tone-red-border); color: var(--tone-red-text); }
.shell-pm-stat.red .shell-pm-dot { background: #ef4444; }
.shell-pm-stat.grey { background: var(--tone-grey-bg); color: var(--tone-grey-text); }
.shell-pm-stat.grey .shell-pm-dot { background: var(--n-400); }
.shell-pm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
}
.shell-pm-row + .shell-pm-row {
  border-top: 1px solid var(--shell-menu-divider);
}
.shell-pm-row:hover {
  background: var(--shell-menu-hover);
}
.shell-pm-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
}
.shell-pm-icon.amber { background: var(--tone-amber-bg); border-color: var(--tone-amber-border); color: #d97706; }
.shell-pm-icon.accent { background: var(--tone-accent-bg); border-color: var(--tone-accent-border); color: var(--accent-ink); }
.shell-pm-icon.red { background: var(--tone-red-bg); border-color: var(--tone-red-border); color: #dc2626; }
.shell-pm-icon.grey { background: var(--tone-grey-bg); color: var(--tone-grey-text); }
.shell-pm-text {
  flex: 1;
  min-width: 0;
}
.shell-pm-label,
.shell-pm-target {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.shell-pm-label {
  color: var(--shell-menu-title);
  font-size: 13px;
  font-weight: 500;
}
.shell-pm-target {
  margin-top: 2px;
  color: var(--shell-menu-text);
  font-size: 12px;
}
.shell-pm-meta {
  flex: none;
  margin-left: 12px;
  text-align: right;
}
.shell-pm-pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.shell-pm-pill.amber { background: var(--tone-amber-bg); border-color: var(--tone-amber-border); color: var(--tone-amber-text); }
.shell-pm-pill.accent { background: var(--tone-accent-bg); border-color: var(--tone-accent-border); color: var(--tone-accent-text); }
.shell-pm-pill.red { background: var(--tone-red-bg); border-color: var(--tone-red-border); color: var(--tone-red-text); }
.shell-pm-pill.grey { background: var(--tone-grey-bg); color: var(--tone-grey-text); }
.shell-pm-age {
  display: block;
  margin-top: 2px;
  color: var(--shell-menu-faint);
  font-size: 11px;
}
.shell-pm-empty {
  padding: 20px 16px;
  color: var(--shell-menu-text);
  font-size: 13px;
  text-align: center;
}
.shell-pm-foot {
  padding: 12px 16px;
  background: var(--shell-menu-sub);
  border-top: 1px solid var(--shell-menu-border);
  color: var(--shell-menu-text);
  font-size: 12px;
  line-height: 1.5;
}

/* User menu */
.shell-user-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--shell-navbar-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.shell-user-toggle:hover {
  color: var(--shell-navbar-text);
}
.shell-user-chevron {
  color: var(--shell-find-text);
}

/* ⌘K palette (Stitch "v3 clair — Palette de recherche ⌘K") */
.pal[hidden] {
  display: none;
}
.pal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 96px 16px 16px;
}
.pal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--pal-overlay);
}
.pal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 640px;
  max-width: 100%;
  max-height: calc(100vh - 112px);
  overflow: hidden;
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-menu-border);
  border-radius: 12px;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--n-900) 25%, transparent);
}
.pal-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--shell-menu-border);
}
.pal-input-icon {
  flex: none;
  color: var(--shell-find-text);
}
.pal-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--shell-menu-title);
  font-size: 16px;
  caret-color: var(--accent);
}
.pal-input::placeholder {
  color: var(--shell-find-text);
}
.pal-kbd {
  flex: none;
  padding: 4px 8px;
  background: var(--tone-grey-bg);
  border: 1px solid var(--shell-menu-border);
  border-radius: 4px;
  box-shadow: none;
  color: var(--shell-menu-faint);
  font-family: var(--ispman-font-family, Inter, sans-serif);
  font-size: 11px;
  font-weight: 500;
}
.pal-scopes {
  display: flex;
  gap: 6px;
  flex: none;
  padding: 8px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--shell-menu-divider);
}
.pal-scopes[hidden] {
  display: none;
}
.pal-scope {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 24px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--tone-grey-strong);
  font-size: 12px;
  font-weight: 500;
}
.pal-scope:hover {
  background: var(--tone-grey-bg);
}
.pal-scope.active {
  background: var(--tone-accent-bg);
  color: var(--tone-accent-text);
}
.pal-scope-count {
  color: var(--shell-menu-faint);
  font-weight: 400;
}
.pal-results {
  flex: 0 1 auto;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 0;
}
.pal-group {
  padding: 12px 16px 4px;
  color: var(--shell-menu-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px 0 14px;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.pal-row.active {
  background: var(--tone-accent-bg);
  border-left-color: var(--accent);
}
.pal-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--tone-grey-bg);
  color: var(--shell-menu-text);
}
.pal-row.active .pal-icon {
  background: var(--pal-icon-active-bg);
  color: var(--pal-icon-active-text);
}
.pal-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.pal-label {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--shell-menu-title);
  font-size: 14px;
}
.pal-label mark {
  padding: 0;
  background: none;
  color: var(--tone-accent-text);
  font-weight: 600;
}
.pal-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--shell-menu-text);
  font-size: 12px;
}
.pal-enter {
  display: none;
  color: var(--tone-accent-text);
  border-color: var(--tone-accent-border);
  font-family: var(--ispman-font-mono);
}
.pal-row.active .pal-enter {
  display: inline-block;
}
.pal-empty {
  padding: 24px 16px;
  color: var(--shell-menu-text);
  font-size: 13px;
  text-align: center;
}
.pal-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  height: 40px;
  padding: 0 16px;
  background: var(--shell-menu-sub);
  border-top: 1px solid var(--shell-menu-border);
  color: var(--shell-menu-text);
  font-size: 12px;
  white-space: nowrap;
}
.pal-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pal-foot kbd {
  min-width: 18px;
  padding: 0 4px;
  text-align: center;
}
body.pal-open {
  overflow: hidden;
}

.app-header .shell-user .shell-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--n-900);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
[data-bs-theme="dark"] .app-header .shell-user .shell-avatar {
  background: var(--n-700);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.app-sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-line);
  box-shadow: none !important;
}
.app-sidebar .sidebar-brand {
  height: 56px;
  min-height: 56px;
  padding-inline: 1.25rem;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-sidebar .sidebar-brand .brand-link {
  justify-content: flex-start !important;
  padding: 0;
}
.app-sidebar .sidebar-brand .sidebar-brand-image {
  height: 22px;
  width: auto;
  max-width: 100%;
}

.shell-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 4px;
  color: var(--n-400);
  font-size: 13px;
  text-decoration: none;
}
.shell-back a:hover {
  color: #fff;
}
.shell-domain-block {
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.5rem;
}
.shell-domain-block .shell-domain-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-500);
}
.shell-domain-block .shell-domain-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  word-break: break-all;
}
.shell-domain-block .shell-domain-type {
  flex: 0 0 auto;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--n-700);
  border-radius: 4px;
  color: var(--n-300);
  font-size: 0.6875rem;
  font-weight: 500;
}

.app-sidebar .sidebar-menu .nav-item > .nav-link {
  display: flex;
  align-items: center;
  margin: 0 0.5rem 1px;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: var(--n-300);
  font-size: 0.875rem;
  font-weight: 400;
}
.app-sidebar .sidebar-menu .nav-item > .nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
/* .sidebar-wrapper: AdminLTE paints the active entry white 10%
   (.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active:not(:hover)). */
.app-sidebar .sidebar-menu .nav-item > .nav-link.active,
.app-sidebar .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active {
  background: var(--accent-muted);
  border-left-color: var(--accent);
  color: #fff;
  font-weight: 500;
}
.app-sidebar .sidebar-menu .nav-link .nav-icon {
  width: 1.25rem;
  margin-right: 0.625rem;
  font-size: 0.9375rem;
  color: var(--n-400);
  text-align: center;
}
.app-sidebar .sidebar-menu .nav-link.active .nav-icon {
  color: var(--accent-ink);
}
.app-sidebar .sidebar-menu .nav-link p {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0;
}
.app-sidebar .sidebar-count {
  margin-left: auto;
  padding: 0;
  background: none;
  color: var(--n-500);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.app-sidebar .sidebar-count {
  margin-right: 1.25rem; /* room for the absolutely positioned .nav-arrow */
  font-size: 0.75rem;
  opacity: 1;
}
.app-sidebar .sidebar-count::before,
.app-sidebar .sidebar-count::after {
  content: none;
}
.app-sidebar .sidebar-wrapper {
  height: calc(100vh - 56px);
  overflow-y: auto;
}
.app-sidebar .shell-pill-amber {
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #f59e0b;
  color: var(--n-900);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
}

.shell-sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.shell-sidebar-footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  color: var(--n-400);
  font-size: 0.8125rem;
  text-decoration: none;
}
.shell-sidebar-footer a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.app-sidebar .sidebar-wrapper {
  display: flex;
  flex-direction: column;
}
.shell-sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
}
.shell-sidebar-nav > nav {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Pending-changes bar (layouts/_commit_banner.html.ep)
   -------------------------------------------------------------------------- */
#commit-banner-slot {
  position: sticky;
  top: 0;
  z-index: 1020;
}
.commit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  margin: 0;
  padding: 0.375rem 1.5rem;
  background: var(--shell-pending-bg);
  border: 0;
  border-bottom: 1px solid var(--shell-pending-border);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.875rem;
}
.commit-banner-message {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  white-space: nowrap;
}
.commit-banner-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #f59e0b;
  color: var(--shell-pending-badge-text);
  font-size: 0.75rem;
  font-weight: 700;
}
[data-bs-theme="dark"] .commit-banner-count {
  background: #f59e0b;
  color: var(--shell-pending-badge-text);
}
.commit-banner-message strong {
  display: inline;
  color: var(--shell-pending-title);
  font-weight: 600;
}
.commit-banner-detail {
  display: inline;
  color: var(--shell-pending-text);
  font-size: 0.875rem;
  text-transform: lowercase;
}
.commit-banner-detail::before {
  content: "· ";
}
.commit-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}
.commit-banner-actions .commit-banner-link {
  color: var(--shell-navbar-text);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.commit-banner-actions .commit-banner-link:hover {
  text-decoration: underline;
}
.commit-banner .commit-session-btn {
  height: 32px;
  padding: 0 0.875rem;
  border-radius: 6px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
}
.commit-banner .commit-session-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
[data-bs-theme="dark"] .commit-banner {
  border-inline-start-color: transparent;
}
@media (max-width: 991.98px) {
  #commit-banner-slot {
    top: 56px;
  }
}
@media (max-width: 575.98px) {
  .commit-banner {
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
  }
  .commit-banner-message {
    white-space: normal;
  }
  .commit-banner-actions {
    margin-inline-start: auto;
  }
}

/* --------------------------------------------------------------------------
   Page header (components/_page_header.html.ep, in layouts/content.html.ep)
   -------------------------------------------------------------------------- */
/* One page frame for every screen: 32px around the content, header and
   cards on the same left edge, 24px between header and first card, 1300px
   wide at most (Stitch "Clients" / "Processus"). Form pages (sp_page)
   draw the same frame themselves, 960px wide. */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  max-width: 1364px;
  margin: 0;
  padding: 32px 32px 0;
  background: transparent;
  border-bottom: 0;
}
.page-header-main {
  min-width: 0;
}
.page-header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.page-header-actions:empty {
  display: none;
}
.content-wrapper .content {
  max-width: 1364px;
  padding: 24px 32px 64px;
}
.shell-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.shell-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms;
}
.shell-breadcrumb a:hover {
  color: var(--sp-label);
}
.shell-breadcrumb [aria-current="page"] {
  color: var(--sp-label);
  font-weight: 500;
}
.shell-breadcrumb-sep {
  color: var(--sp-faint);
}
.shell-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.shell-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: var(--sp-title);
  word-break: break-word;
}
.shell-title.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
}
.shell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.shell-meta-sep {
  color: var(--sp-faint);
}

/* Status pills: small, tinted background, solid text. */
.shell-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}
.shell-pill-success { background: rgba(16, 185, 129, 0.1);  color: #047857; }
.shell-pill-warning { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.shell-pill-danger  { background: rgba(239, 68, 68, 0.1);   color: #b91c1c; }
.shell-pill-info    { background: rgba(59, 130, 246, 0.1);  color: #1d4ed8; }
.shell-pill-primary { background: var(--accent-soft); color: var(--accent-ink); }
.shell-pill-neutral { background: color-mix(in srgb, var(--n-500) 12%, transparent); color: var(--n-600); }
[data-bs-theme="dark"] .shell-pill-success { background: rgba(16, 185, 129, 0.15);  color: #6ee7b7; }
[data-bs-theme="dark"] .shell-pill-warning { background: rgba(245, 158, 11, 0.15);  color: #fcd34d; }
[data-bs-theme="dark"] .shell-pill-danger  { background: rgba(239, 68, 68, 0.15);   color: #fca5a5; }
[data-bs-theme="dark"] .shell-pill-info    { background: rgba(59, 130, 246, 0.15);  color: #93c5fd; }
[data-bs-theme="dark"] .shell-pill-neutral { background: color-mix(in srgb, var(--n-400) 15%, transparent); color: var(--n-300); }

/* Listings built with components/_data_table: same compact rhythm as
   .shell-table (40px rows, sentence-case headers). */
/* Listings (components/_data_table, DataTables v2): same look as the
   Stitch "Clients" table — toolbar row, uppercase header, 41px rows,
   quiet icon actions, square pager. */
.sp-dt-card {
  overflow: visible;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  box-shadow: none;
}
.sp-dt-card > .card-body {
  padding: 0;
}
.sp-dt-card .data-table-shell {
  margin: 0;
}
/* Toolbar and footer of every listing (Stitch "v3 clair/sombre —
   Tableaux : barre haute et barre basse"): search, item count and page
   size above the table; range and pager below it. The page size and the
   pager only exist when the list is longer than a page (_data_table). */
:root,
[data-bs-theme="light"] {
  --sp-search-bg: var(--n-50);
  --sp-page-active-bg: var(--accent-soft);
  --sp-page-active-text: var(--accent-ink);
}
[data-bs-theme="dark"] {
  --sp-search-bg: var(--n-900);
  --sp-page-active-bg: var(--accent-muted);
  --sp-page-active-text: var(--accent-ink);
}
.data-table-shell .dt-container > .row {
  --bs-gutter-x: 0;
  align-items: center;
  margin: 0;
  padding: 12px;
  font-size: 12px;
  color: var(--sp-muted);
}
.data-table-shell .dt-container > .row:first-child {
  border-bottom: 1px solid var(--sp-border);
}
.data-table-shell .dt-container > .row.dt-layout-table {
  padding: 0;
}
.data-table-shell .dt-container > .row.dt-layout-table + .row {
  min-height: 48px;
  padding: 8px 16px;
  border-top: 1px solid var(--sp-border);
}
.data-table-shell .dt-container > .row > .dt-layout-start {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.data-table-shell .dt-search label,
.data-table-shell .dt-length label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.data-table-shell .dt-search input,
.data-table-shell .dt-length select {
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  box-shadow: none;
  font-size: 12px;
  color: var(--sp-strong);
  transition: border-color 150ms, background-color 150ms;
}
.data-table-shell .dt-search input {
  width: 320px;
  max-width: 100%;
  margin-left: 0;
  padding: 0 12px 0 36px;
  background-color: var(--sp-search-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.data-table-shell .dt-search input::placeholder {
  color: var(--sp-faint);
}
/* A filter is on: the field keeps the accent, like the Stitch state. */
.data-table-shell .dt-search input:not(:placeholder-shown) {
  background-color: var(--sp-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23667eea' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E");
  border-color: var(--accent);
  font-weight: 500;
  color: var(--sp-title);
}
.data-table-shell .dt-length select {
  width: auto;
  margin: 0;
  padding: 0 32px 0 12px;
  background-color: var(--sp-card);
  font-weight: 500;
  cursor: pointer;
}
.data-table-shell .dt-length select:hover {
  border-color: var(--sp-input-border);
}
.data-table-shell .dt-search input:focus,
.data-table-shell .dt-length select:focus {
  background-color: var(--sp-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  outline: none;
}
.data-table-shell .dt-count {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sp-muted);
}
.data-table-shell .dt-count strong {
  font-weight: 600;
  color: var(--sp-strong);
}
.data-table-shell .dt-count span {
  font-weight: 400;
  color: var(--sp-faint);
}
.data-table-shell .dt-info {
  padding: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-muted);
}
.data-table-shell .dt-paging .pagination {
  align-items: center;
  gap: 4px;
  margin: 0;
}
.data-table-shell .dt-paging .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  background: transparent;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--sp-strong);
  transition: background-color 150ms;
}
.data-table-shell .dt-paging .page-link:hover {
  background: var(--sp-ghost-hover);
  color: var(--sp-title);
}
.data-table-shell .dt-paging .page-link:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.data-table-shell .dt-paging .page-item.active .page-link {
  background: var(--sp-page-active-bg);
  font-weight: 600;
  color: var(--sp-page-active-text);
}
.data-table-shell .dt-paging .page-item.disabled .page-link {
  background: transparent;
  color: var(--sp-faint);
  opacity: 0.6;
}
.data-table-shell .dt-paging .page-link .fas {
  font-size: 12px;
}
.data-table-shell .dt-paging .ellipsis .page-link {
  min-width: 24px;
  color: var(--sp-faint);
}
/* One page (short list, or a filter narrowed it): no pager. */
.data-table-shell .dt-container.dt-one-page .dt-paging {
  display: none;
}
/* Sort arrows right after the column title, like the mockup. */
.data-table-shell .data-table-responsive > thead > tr > th:not(.dt-type-numeric) div.dt-column-header {
  justify-content: flex-start;
  gap: 6px;
}
@media (max-width: 767.98px) {
  .data-table-shell .dt-container > .row {
    gap: 8px;
  }
  .data-table-shell .dt-container > .row > .dt-layout-start {
    flex-wrap: wrap;
    width: 100%;
  }
  .data-table-shell .dt-search,
  .data-table-shell .dt-search input {
    width: 100%;
  }
}
.data-table-shell .data-table-responsive {
  margin: 0 !important;
  border-collapse: collapse !important;
}
.data-table-shell .data-table-responsive > thead > tr > th {
  padding: 10px 16px;
  background: var(--sp-thead-bg);
  border-bottom: 1px solid var(--sp-border);
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table-shell .data-table-responsive > tbody > tr > td {
  height: 41px;
  padding: 8px 16px;
  background: transparent;
  border-bottom: 1px solid var(--sp-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--sp-strong);
}
.data-table-shell .data-table-responsive > tbody > tr:last-child > td {
  border-bottom: 0;
}
.data-table-shell .data-table-responsive > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--n-50) 70%, transparent);
}
[data-bs-theme="dark"] .data-table-shell .data-table-responsive > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--n-900) 40%, transparent);
}

/* Expandable rows (Stitch "v3 clair/sombre — … : ligne dépliée"): a
   chevron column, then the row's detail (components/_row_detail) in a
   DataTables child row under it. */
.data-table-shell th.sp-dt-toggle-col,
.data-table-shell td.sp-dt-toggle {
  width: 36px;
  padding-right: 0 !important;
}
.sp-dt-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--sp-faint);
}
.sp-dt-toggle-btn:hover {
  background: var(--sp-ghost-hover);
  color: var(--sp-strong);
}
.sp-dt-toggle-btn:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 1px;
}
.sp-dt-toggle-btn .sp-icon {
  transform: rotate(-90deg);
  transition: transform 150ms;
}
.sp-dt-toggle-btn[aria-expanded="true"] {
  color: var(--accent);
}
.sp-dt-toggle-btn[aria-expanded="true"] .sp-icon {
  transform: none;
}
.data-table-shell .data-table-responsive > tbody > tr.sp-dt-open > td,
.data-table-shell .data-table-responsive > tbody > tr.sp-dt-open:hover > td {
  background: var(--sp-rowx-bg);
}
.data-table-shell .data-table-responsive > tbody > tr.sp-rowx-row > td {
  padding: 0 !important;
  background: var(--sp-rowx-bg);
  border-top: 1px solid var(--sp-border);
}
/* A click on the row opens it too, a double click opens its page
   (js/row-details.js). */
.data-table-shell tbody > tr:has(> td.sp-dt-toggle),
.sp-rowx-table tbody > tr:has(> td.sp-dt-toggle) {
  cursor: pointer;
}
.sp-rowx {
  padding: 16px 24px 20px 56px;
  text-align: left;
  white-space: normal;
}
.sp-rowx-loading {
  color: var(--sp-muted);
  font-size: 13px;
}
.sp-rowx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
}
.sp-rowx-h {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sp-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-muted);
}
.sp-rowx-dl {
  display: grid;
  gap: 12px;
  margin: 0;
}
.sp-rowx-dl dt {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--sp-muted);
}
.sp-rowx-dl dd {
  margin: 0;
  font-size: 13px;
  color: var(--sp-text);
  overflow-wrap: anywhere;
}
.sp-rowx-bar {
  display: inline-block;
  width: 120px;
  height: 4px;
  margin-left: 10px;
  overflow: hidden;
  vertical-align: middle;
  background: var(--sp-track);
  border-radius: 9999px;
}
.sp-rowx-bar > span {
  display: block;
  height: 100%;
  background: var(--tone, var(--accent));
  border-radius: 9999px;
}
.sp-rowx-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: var(--tone, var(--accent));
  border-radius: 9999px;
}
.sp-rowx-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.sp-rowx-chips.wrap {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.sp-rowx-col.wide {
  grid-column: span 2;
}
.sp-rowx-chip {
  padding: 2px 8px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--sp-text);
}
.sp-rowx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-border);
}
.sp-rowx-actions .sp-btn.sm {
  height: 30px;
  font-size: 13px;
  background: var(--sp-btn-bg);
  color: var(--sp-ghost-text);
  text-decoration: none;
}
.sp-rowx-actions .sp-btn.sm.sp-rowx-amber {
  color: var(--hue-amber);
}
.sp-rowx-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.sp-rowx-link:hover {
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  .sp-rowx {
    padding-left: 24px;
  }
  .sp-rowx-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-rowx-col.wide {
    grid-column: auto;
  }
}
@media (max-width: 575.98px) {
  .data-table-responsive tbody td.sp-dt-toggle {
    justify-content: flex-start;
  }
  .data-table-responsive tbody td.sp-dt-toggle::before,
  .data-table-responsive tbody tr.sp-rowx-row > td::before {
    display: none;
  }
  .data-table-responsive tbody tr.sp-rowx-row > td {
    display: block;
    text-align: left;
  }
  .sp-rowx {
    padding: 12px;
  }
}
.data-table-shell .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}
.data-table-shell td strong {
  font-weight: 500;
  color: var(--sp-title);
}
.data-table-shell .btn-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px;
  box-shadow: none !important;
  font-size: 13px;
  color: var(--sp-faint) !important;
  transition: background-color 150ms, color 150ms;
}
.data-table-shell .btn-action-icon:hover:not(:disabled) {
  background: var(--sp-ghost-hover) !important;
  color: var(--sp-strong) !important;
  transform: none;
}
.data-table-shell .btn-action-icon.btn-action-delete:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
}
.data-table-shell .btn-action-icon:disabled {
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Form controls (Stitch "v2 — Nouvel utilisateur"): plain white 40px
   fields, slate border, 6px radius, accent focus ring. Replaces the
   legacy glass look (translucent fill, blur, shadow) from custom.css.
   -------------------------------------------------------------------------- */
.content-wrapper .form-control,
.content-wrapper .form-select,
.content-wrapper .ts-wrapper .ts-control {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  background-color: var(--shell-input-bg);
  border: 1px solid var(--shell-input-border);
  border-radius: 6px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ispman-text-primary);
  font-size: 0.875rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.content-wrapper .form-select {
  padding-right: 2.25rem;
}
.content-wrapper textarea.form-control {
  min-height: 84px;
}
.content-wrapper .form-control:hover:not(:focus):not(:disabled),
.content-wrapper .form-select:hover:not(:focus):not(:disabled) {
  background-color: var(--shell-input-bg);
  border-color: var(--shell-input-border);
}
.content-wrapper .form-control:focus,
.content-wrapper .form-select:focus,
.content-wrapper .ts-wrapper.focus .ts-control {
  background-color: var(--shell-input-bg) !important;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
  outline: none;
}
.content-wrapper .form-control[readonly],
.content-wrapper .form-control:disabled {
  background-color: var(--shell-input-readonly);
  color: var(--ispman-text-secondary);
  opacity: 1;
}
.content-wrapper .ts-wrapper.multi .ts-control > .item {
  background: var(--n-100);
  border: 1px solid var(--n-200);
  border-radius: 4px;
  color: var(--ispman-text-primary);
  font-size: 0.75rem;
}
[data-bs-theme="dark"] .content-wrapper .ts-wrapper.multi .ts-control > .item {
  background: var(--n-700);
  border-color: var(--n-600);
}

/* ==========================================================================
   Stitch pages (sp-*): pixel copy of the Stitch screen
   "v2 clair — Nouvel utilisateur" (project "ISPMan — raffinement UI").
   Values are the Tailwind ones of the mockup, in px. Pages opt in with
   stash sp_page => 1 (layouts/content.html.ep then skips .page-header).
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --sp-card: var(--n-0);
  --sp-border: var(--n-200);
  --sp-input-bg: var(--n-0);
  --sp-input-border: var(--n-300);
  --sp-title: var(--n-900);
  --sp-label: var(--n-800);
  --sp-text: var(--n-900);
  --sp-muted: var(--n-500);
  --sp-faint: var(--n-400);
  --sp-strong: var(--n-700);
  --sp-addon-bg: var(--n-50);
  --sp-hover: var(--n-50);
  --sp-ghost-hover: var(--n-100);
  --sp-track: var(--n-200);
  --sp-toggle-off: var(--n-300);
  --sp-row-border: color-mix(in srgb, var(--n-200) 80%, transparent);
  --sp-row-bg: var(--n-0);
  --sp-row-bg-on: color-mix(in srgb, var(--n-50) 50%, transparent);
  --sp-rowx-bg: var(--n-50);
  --sp-soft-divider: var(--n-100);
  --sp-tag-bg: var(--n-100);
  --sp-tag-border: var(--n-200);
  --sp-disabled-bg: var(--n-100);
  --sp-disabled-border: var(--n-200);
  --sp-readonly-bg: var(--n-50);
  --sp-readonly-text: var(--n-700);
  --sp-btn-bg: var(--n-0);
  --sp-ghost-text: var(--n-700);
  --sp-toggle-on: #10b981;
  --sp-score-good: #059669;
  --sp-knob-off: #ffffff;
  --sp-danger-border: #ef4444;
  --sp-danger-ring: rgba(248, 113, 113, 0.3);
  --sp-danger-text: #dc2626;
}
[data-bs-theme="dark"] {
  /* Colours of the Stitch screen "v2 sombre — Nouvel utilisateur". */
  --sp-card: var(--n-800);
  --sp-border: var(--n-700);
  --sp-input-bg: var(--n-900);
  --sp-input-border: var(--n-700);
  --sp-title: #ffffff;
  --sp-label: var(--n-200);
  --sp-text: var(--n-100);
  --sp-muted: var(--n-400);
  --sp-faint: var(--n-500);
  --sp-strong: var(--n-200);
  --sp-addon-bg: var(--n-800);
  --sp-hover: color-mix(in srgb, var(--n-700) 80%, transparent);
  --sp-ghost-hover: var(--n-800);
  --sp-track: var(--n-700);
  --sp-toggle-off: var(--n-700);
  --sp-row-border: var(--n-700);
  --sp-row-bg: var(--n-900);
  --sp-row-bg-on: var(--n-900);
  --sp-rowx-bg: color-mix(in srgb, var(--n-800) 50%, var(--n-900));
  --sp-soft-divider: color-mix(in srgb, var(--n-800) 80%, transparent);
  --sp-tag-bg: var(--n-800);
  --sp-tag-border: var(--n-700);
  --sp-disabled-bg: var(--n-900);
  --sp-disabled-border: var(--n-800);
  --sp-readonly-bg: color-mix(in srgb, var(--n-900) 60%, transparent);
  --sp-readonly-text: var(--n-300);
  --sp-btn-bg: var(--n-800);
  --sp-ghost-text: var(--n-300);
  --sp-toggle-on: var(--accent);
  --sp-score-good: #34d399;
  --sp-knob-off: var(--n-300);
  --sp-danger-border: #f87171;
  --sp-danger-ring: rgba(248, 113, 113, 0.35);
  --sp-danger-text: #fca5a5;
}

.content-wrapper .content:has(> .sp-page) {
  padding: 0;
}
.sp-page {
  padding: 32px 32px 64px;
  line-height: 1.5;
}
.sp-wrap {
  --sp-wrap-max: 960px;
  max-width: var(--sp-wrap-max);
}

/* Header */
.sp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms;
}
.sp-crumbs a:hover {
  color: var(--sp-label);
}
.sp-crumbs-sep {
  color: var(--sp-faint);
}
.sp-crumbs [aria-current="page"] {
  color: var(--sp-label);
  font-weight: 500;
}
.sp-head {
  margin-bottom: 24px;
}
.sp-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sp-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sp-title);
}
.sp-head h1.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
}
.sp-head > p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}

/* Card and sections */
.sp-card {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  overflow: hidden;
}
.sp-card > * + *,
.sp-pane > * + * {
  border-top: 1px solid var(--sp-border);
}
/* Cards that draw their own separators (head border, table, footer) opt
   out of the section divider, otherwise the lines double up. */
.sp-dcard > * + *,
.sp-tcard > * + *,
.sp-list-card > * + *,
.sp-qsearch > * + *,
.sp-config-menu > * + *,
.sp-kpi > * + *,
.sp-kpi2 > * + * {
  border-top: 0;
}
.sp-section {
  padding: 24px;
}
.sp-section-head {
  margin-bottom: 20px;
}
.sp-section-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--sp-title);
}
.sp-section-head p {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-stack > * + * {
  margin-top: 16px;
}
.sp-stack-3 > * + * {
  margin-top: 12px;
}
.sp-w540 {
  max-width: 540px;
}
.sp-w640 {
  max-width: 640px;
}
/* Record forms (Stitch "v3 clair/sombre — Fiche utilisateur / Fiche hôte
   virtuel : titres à gauche"): the section title and its help on the
   left, the fields across the rest of the row, so the card has no empty
   band on the right. Below 992px the sections stack as before. */
.sp-wrap:has(.sp-split) {
  --sp-wrap-max: 1040px;
}
@media (min-width: 992px) {
  .sp-split .sp-section {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  .sp-split .sp-section > .sp-section-head {
    grid-column: 1;
    grid-row: 1 / span 30;
    margin-bottom: 0;
  }
  .sp-split .sp-section > :not(.sp-section-head) {
    grid-column: 2;
  }
  .sp-split .sp-section-head h2 {
    font-size: 15px;
  }
  .sp-split .sp-w540,
  .sp-split .sp-w640 {
    max-width: none;
  }
}
.sp-grid-2,
.sp-grid-3 {
  display: grid;
  gap: 16px;
}
.sp-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sp-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sp-grid-4 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Radio cards: one choice among a few described options (domain type) */
.sp-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sp-choice.one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 540px;
}
.sp-choice-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px;
  background: var(--sp-row-bg);
  border: 1px solid var(--sp-row-border);
  border-radius: 8px;
  cursor: pointer;
}
.sp-choice-item > span > span {
  display: block;
}
.sp-choice-item input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}
.sp-choice-item:has(input:checked),
.sp-choice-item.on {
  background: var(--sp-row-bg-on);
  border-color: var(--accent);
}
.sp-choice-item.on {
  cursor: default;
}
.sp-choice-item:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.sp-span-2 {
  grid-column: span 2 / span 2;
}
.sp-pt-1 {
  padding-top: 4px;
}

/* Fields */
.sp-label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--sp-label);
}
.sp-label .req {
  color: #ef4444;
}
.sp-label .opt {
  color: var(--sp-faint);
  font-weight: 400;
}
.sp-input {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  background: var(--sp-input-bg);
  border: 1px solid var(--sp-input-border);
  border-radius: 6px;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sp-text);
  outline: none;
  appearance: none;
}
.sp-input.mono,
.sp-tags-input.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.sp-input::placeholder,
.sp-tags-input::placeholder {
  color: var(--sp-faint);
  opacity: 1;
}
.sp-input:focus,
.sp-tags:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.sp-input[readonly] {
  background: var(--sp-readonly-bg);
  color: var(--sp-readonly-text);
  cursor: not-allowed;
}
.sp-group {
  display: flex;
}
.sp-group > .sp-input {
  flex: 1;
  min-width: 0;
  border-radius: 0;
}
.sp-group > .sp-input:first-child {
  border-radius: 6px 0 0 6px;
}
.sp-group > .sp-input:last-child {
  border-radius: 0 6px 6px 0;
}
.sp-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--sp-addon-bg);
  border: 1px solid var(--sp-input-border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--sp-muted);
  user-select: none;
  white-space: nowrap;
}
.sp-addon:first-child {
  border-right: 0;
  border-radius: 6px 0 0 6px;
}
.sp-addon:last-child {
  border-left: 0;
  border-radius: 0 6px 6px 0;
}
.sp-addon.icon {
  font-family: inherit;
  font-size: 14px;
  color: var(--sp-faint);
}
/* Invalid field (js/form-validation.js): red frame on the control, or
   on the box that draws it (input group, select, tags, tom-select), and
   the reason below (.sp-field-error). */
.sp-input.is-invalid,
.sp-group.is-invalid > *,
.sp-tags.is-invalid,
.ts-wrapper.is-invalid .ts-control {
  border-color: var(--sp-danger-border) !important;
}
.sp-input.is-invalid:focus,
.sp-group.is-invalid > .sp-input:focus,
.sp-tags.is-invalid:focus-within,
.ts-wrapper.is-invalid.focus .ts-control {
  box-shadow: 0 0 0 2px var(--sp-danger-ring) !important;
}
input[type="checkbox"].is-invalid,
input[type="radio"].is-invalid {
  outline: 2px solid var(--sp-danger-border);
  outline-offset: 1px;
}
.sp-field-error {
  align-items: flex-start;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.sp-field-error .sp-icon {
  margin-top: 1px;
  width: 14px;
  height: 14px;
}
.sp-help {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-help.lg {
  font-size: 13px;
}
.sp-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-danger-text);
}
.sp-icon {
  flex-shrink: 0;
}

/* Select with chevron, input with unit suffix */
.sp-select-wrap,
.sp-suffix-wrap {
  position: relative;
}
.sp-select-wrap > .sp-input {
  padding-right: 36px;
  cursor: pointer;
}
.sp-select-wrap > .sp-icon,
.sp-suffix {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  margin: auto 0;
  pointer-events: none;
}
.sp-select-wrap > .sp-icon {
  color: var(--sp-faint);
}
.sp-suffix-wrap > .sp-input {
  padding-right: 40px;
}
.sp-suffix {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-muted);
}

/* Password */
.sp-pw {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-pw-field {
  position: relative;
  flex: 1;
}
.sp-pw-input {
  padding-right: 40px;
  letter-spacing: 0.05em;
}
.sp-pw-eye {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
  background: none;
  border: 0;
  color: var(--sp-faint);
  transition: color 150ms;
}
.sp-pw-eye:hover {
  color: var(--n-600);
}
.sp-meter {
  padding-top: 4px;
}
.sp-meter-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  height: 6px;
}
.sp-meter-bars > div {
  border-radius: 9999px;
  background: var(--sp-track);
}
.sp-meter[data-level="1"] .sp-meter-bars > div:nth-child(-n+1) { background: #ef4444; }
.sp-meter[data-level="2"] .sp-meter-bars > div:nth-child(-n+2) { background: #f59e0b; }
.sp-meter[data-level="3"] .sp-meter-bars > div:nth-child(-n+3),
.sp-meter[data-level="4"] .sp-meter-bars > div:nth-child(-n+4) { background: #10b981; }
.sp-meter-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-meter-score {
  font-weight: 500;
}
.sp-meter[data-level="1"] .sp-meter-score { color: #dc2626; }
.sp-meter[data-level="2"] .sp-meter-score { color: #d97706; }
.sp-meter[data-level="3"] .sp-meter-score,
.sp-meter[data-level="4"] .sp-meter-score { color: var(--sp-score-good); }

/* Buttons */
.sp-btn,
.sp-btn-secondary,
.sp-btn-primary,
.sp-btn-ghost {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.sp-btn {
  height: 40px;
  gap: 6px;
  padding: 0 14px;
  background: var(--sp-btn-bg);
  border: 1px solid var(--sp-input-border);
  font-size: 13px;
  color: var(--sp-strong);
}
.sp-btn:hover,
.sp-btn-secondary:hover {
  background: var(--sp-hover);
}
.sp-btn .sp-btn-icon {
  color: var(--sp-muted);
}
.sp-btn-secondary {
  height: 40px;
  padding: 0 16px;
  background: var(--sp-btn-bg);
  border: 1px solid var(--sp-input-border);
  font-size: 14px;
  color: var(--sp-strong);
}
.sp-btn-primary {
  height: 40px;
  gap: 8px;
  padding: 0 20px;
  background: var(--accent);
  border: 0;
  font-size: 14px;
  color: var(--on-accent);
}
.sp-btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}
.sp-btn-ghost {
  gap: 6px;
  padding: 8px 16px;
  background: none;
  border: 0;
  font-size: 14px;
  color: var(--sp-ghost-text);
}
.sp-btn-ghost:hover {
  background: var(--sp-ghost-hover);
  color: var(--sp-title);
}
.sp-btn-ghost.danger {
  color: #dc2626;
}
.sp-btn-ghost.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

/* Chip input */
.sp-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px;
  background: var(--sp-input-bg);
  border: 1px solid var(--sp-input-border);
  border-radius: 6px;
  cursor: text;
}
.sp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--sp-tag-bg);
  border: 1px solid var(--sp-tag-border);
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sp-strong);
}
.sp-tag > button {
  display: inline-flex;
  margin-left: 2px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sp-faint);
}
.sp-tag > button:hover {
  color: var(--n-600);
}
.sp-error[hidden] {
  display: none;
}
.sp-tags-input {
  flex: 1;
  min-width: 200px;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--sp-label);
}

/* Toggle rows */
.sp-row {
  padding: 14px;
  background: var(--sp-row-bg);
  border: 1px solid var(--sp-row-border);
  border-radius: 8px;
}
.sp-row:has(> .sp-row-top .sp-toggle input:checked),
.sp-row:has(> .sp-toggle input:checked) {
  background: var(--sp-row-bg-on);
}
.sp-row,
.sp-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-row.stacked {
  display: block;
}
/* A row that warns (user form: deleting the mailbox when it goes). */
.sp-row.warn,
.sp-row.warn:has(> .sp-row-top .sp-toggle input:checked) {
  background: var(--tone-amber-bg);
  border-color: var(--tone-amber-border);
}
.sp-row.warn:has(> .sp-row-top .sp-toggle input:checked) .sp-row-title {
  color: var(--tone-amber-text);
}
/* Fields of the other way (mailbox or redirection) are out of the form. */
[data-sp-mailbox][hidden] {
  display: none !important;
}
.sp-row-text {
  padding-right: 16px;
}
.sp-row-title {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--sp-title);
}
.sp-row-desc {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-row-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--sp-soft-divider);
}
.sp-row-sub > label {
  flex-shrink: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-label);
}
.sp-row-sub .sp-select-wrap,
.sp-row-sub .sp-suffix-wrap {
  width: 256px;
}
.sp-row-sub .sp-input {
  height: 32px;
  border-radius: 4px;
  font-size: 13px;
}
.sp-row-sub .sp-select-wrap > .sp-input {
  padding-right: 32px;
}
.sp-row-sub .sp-select-wrap > .sp-icon {
  right: 10px;
}
.sp-row-sub:has(.sp-input:disabled) > label {
  color: var(--sp-faint);
}
.sp-input:disabled {
  background: var(--sp-disabled-bg);
  border-color: var(--sp-disabled-border);
  color: var(--sp-faint);
  cursor: not-allowed;
}
.sp-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  background: var(--sp-toggle-off);
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
}
.sp-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.sp-toggle > span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  pointer-events: none;
  transition: transform 200ms ease-in-out;
}
.sp-toggle:has(input:checked) {
  background: var(--sp-toggle-on);
}
.sp-toggle:not(:has(input:checked)) > span {
  background: var(--sp-knob-off);
}
.sp-toggle:has(input:checked) > span {
  transform: translateX(20px);
}
.sp-toggle:has(input:focus-visible) {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4);
}

/* Lists edited in place (redirections, protected locations) */
.sp-list {
  border: 1px solid var(--sp-row-border);
  border-radius: 8px;
  overflow: hidden;
}
.sp-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 8px 6px 14px;
  background: var(--sp-row-bg);
  font-size: 13px;
  color: var(--sp-label);
}
.sp-list-row + .sp-list-row {
  border-top: 1px solid var(--sp-row-border);
}
.sp-list-row .mono,
.sp-input.mono,
.sp-inline-add .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.sp-list-arrow {
  color: var(--sp-faint);
}
.sp-list-grow {
  flex: 1;
  min-width: 0;
}
.sp-list-grow.mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-checklist {
  max-height: 320px;
  overflow-y: auto;
}
.sp-check {
  cursor: pointer;
}
.sp-check[hidden] {
  display: none;
}
.sp-check input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.sp-check-meta {
  color: var(--sp-muted);
  font-size: 12px;
}
.sp-list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-inline-add {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.sp-inline-add > div:first-child {
  width: 180px;
}
.sp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--sp-faint);
  transition: background-color 150ms, color 150ms;
}
.sp-icon-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}
.sp-textarea {
  height: auto;
  min-height: 96px;
  padding: 8px 12px;
  font-size: 13px;
  resize: vertical;
}
.sp-card-gap {
  margin-top: 16px;
}
.sp-section-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sp-section-head-row > div {
  min-width: 0;
}

/* Tom Select inside the Stitch forms looks like .sp-input */
.sp-card .ts-wrapper .ts-control {
  min-height: 40px;
  padding: 6px 36px 6px 8px;
  background: var(--sp-input-bg);
  border: 1px solid var(--sp-input-border);
  border-radius: 6px;
  box-shadow: none;
  font-size: 14px;
  color: var(--sp-text);
}
.sp-card .ts-wrapper.focus .ts-control {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.sp-card .ts-wrapper.multi .ts-control > .item {
  margin: 0 6px 0 0;
  padding: 2px 8px;
  background: var(--sp-tag-bg);
  border: 1px solid var(--sp-tag-border);
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--sp-strong);
}
.sp-card .ts-control input::placeholder {
  color: var(--sp-faint);
}
.sp-card .ts-dropdown {
  background: var(--sp-card);
  border-color: var(--sp-input-border);
  color: var(--sp-text);
  font-size: 14px;
}

/* Folded advanced options (admins) */
.sp-advanced > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none;
}
.sp-advanced > summary::-webkit-details-marker {
  display: none;
}
.sp-advanced > summary > .sp-icon {
  color: var(--sp-faint);
  transform: rotate(-90deg);
  transition: transform 150ms;
}
.sp-advanced[open] > summary > .sp-icon {
  transform: none;
}
.sp-advanced-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-title);
}
.sp-advanced-desc {
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-advanced > .sp-section {
  border-top: 1px solid var(--sp-border);
}

/* Footer bar */
.sp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: var(--sp-card);
}
/* The form's buttons (Delete, Suspend, Cancel, Save…) stay on screen:
   the footer is anchored to the bottom of the content, as "Apply
   changes" is to its top, and the Configuration save bar with it. Its
   top edge continues the line of the sidebar's "Switch domain" (60.5px,
   the 8px padding of .sidebar-wrapper and the 1px under it). The
   buttons line up with the form column (.sp-wrap, left-aligned, up to
   --sp-wrap-max). The content keeps 80px free under it (custom.css,
   .content-wrapper). */
:root {
  --sp-bar-h: 69.5px;
  --sp-bar-left: var(--lte-sidebar-width, 248px);
  --sp-gutter: 32px;
}
body.sidebar-collapse {
  --sp-bar-left: 0px;
}
@media (max-width: 991.98px) {
  :root {
    --sp-bar-left: 0px;
  }
}
@media (max-width: 639.98px) {
  :root {
    --sp-gutter: 16px;
  }
}
.content-wrapper .sp-footer,
.content-wrapper .sp-savebar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: var(--sp-bar-left);
  z-index: 1030;
  box-sizing: border-box;
  min-height: var(--sp-bar-h);
  margin: 0;
  padding: 8px max(var(--sp-gutter), calc(100% - var(--sp-bar-left) - var(--sp-gutter) - var(--sp-wrap-max, 960px))) 8px var(--sp-gutter);
  background: var(--sp-card);
  border: 0;
  border-top: 1px solid var(--sp-border);
  border-radius: 0;
  box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 0.12);
  transition: left var(--lte-transition-speed, 0.3s) var(--lte-transition-fn, ease-in-out);
}
.sp-footer-end {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-hint {
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-static {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  background: var(--sp-readonly-bg);
  border: 1px solid var(--sp-input-border);
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--sp-strong);
}
/* A read-only value that is text, not an identifier (role, company). */
.sp-static.plain {
  font-family: inherit;
  font-size: 14px;
}

@media (max-width: 639.98px) {
  .sp-page,
  .content-wrapper .content {
    padding: 16px 16px 48px;
  }
  .page-header {
    flex-wrap: wrap;
    padding: 16px 16px 0;
  }
  .sp-grid-2,
  .sp-grid-3,
  .sp-choice {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sp-span-2 {
    grid-column: auto;
  }
  .sp-hint {
    display: none;
  }
  .sp-footer {
    flex-wrap: wrap;
  }
  .sp-row-sub,
  .sp-inline-add {
    flex-wrap: wrap;
  }
  .sp-inline-add > div:first-child {
    width: 100%;
  }
}

/* Scrollbars as in the Stitch mockups (6px, slate thumb). */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--n-400);
}

/* ==========================================================================
   Processes (Stitch "v2 clair — Processus"): session cards with a compact
   table, underline tabs, one-line filter bar.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --sp-thead-bg: var(--n-50);
  --sp-err-border: #fecaca;
  --sp-err-head: rgba(254, 242, 242, 0.6);
  --sp-err-row: rgba(254, 242, 242, 0.2);
  --sp-err-pill-bg: #fee2e2;
  --sp-err-pill-text: #b91c1c;
  --sp-err-pill-border: #fca5a5;
  --sp-chip-bg: var(--n-100);
  --sp-log-bg: var(--n-50);
}
[data-bs-theme="dark"] {
  --sp-thead-bg: var(--n-900);
  --sp-err-border: rgba(248, 113, 113, 0.35);
  --sp-err-head: rgba(127, 29, 29, 0.25);
  --sp-err-row: rgba(127, 29, 29, 0.12);
  --sp-err-pill-bg: rgba(239, 68, 68, 0.15);
  --sp-err-pill-text: #fca5a5;
  --sp-err-pill-border: rgba(248, 113, 113, 0.4);
  --sp-chip-bg: var(--n-700);
  --sp-log-bg: var(--n-900);
}

.sp-wrap.wide {
  --sp-wrap-max: 1300px;
}
.sp-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.sp-head-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}
.sp-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-dot-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-dot-item.strong {
  font-weight: 500;
  color: var(--sp-strong);
}
.sp-dot-item.danger {
  font-weight: 500;
  color: #dc2626;
}
.sp-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sp-faint);
}
.sp-dot.amber { background: #f59e0b; }
.sp-dot.red { background: #ef4444; }
.sp-dot.green { background: #10b981; }

/* Small buttons (32px header, 28px session actions) */
.sp-btn.sm,
.sp-btn-primary.sm {
  height: 32px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 4px;
  font-size: 12px;
}
.sp-btn.sm {
  border-color: var(--sp-border);
}
.sp-btn-primary.sm {
  padding: 0 14px;
  font-weight: 600;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.sp-btn.xs,
.sp-btn-primary.xs,
.sp-btn-ghost.xs,
.sp-btn-danger.xs {
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
}
.sp-btn-primary.xs,
.sp-btn-danger.xs {
  padding: 0 12px;
  font-weight: 600;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.sp-btn-ghost.xs {
  color: var(--sp-muted);
}
.sp-btn-danger {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: #dc2626;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 150ms;
}
.sp-btn-danger:hover {
  background: #b91c1c;
}
.sp-auto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 10px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--sp-strong);
}
.sp-toggle.sm {
  width: 28px;
  height: 16px;
}
.sp-toggle.sm > span {
  width: 12px;
  height: 12px;
}
.sp-toggle.sm:has(input:checked) {
  background: var(--accent);
}
.sp-toggle.sm:has(input:checked) > span {
  transform: translateX(12px);
}

/* Underline tabs */
.sp-utabs {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 4px 0 20px;
  padding-top: 4px;
  border-bottom: 1px solid var(--sp-border);
}
.sp-utabs > button,
.sp-utabs > a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 0 0 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-muted);
}
.sp-utabs > button:hover,
.sp-utabs > a:hover {
  color: var(--sp-title);
}
.sp-utabs > button.active,
.sp-utabs > a.active {
  font-weight: 600;
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sp-count {
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.sp-count.accent { background: var(--accent-soft); color: var(--accent); }
.sp-count.red { background: var(--sp-err-pill-bg); color: #dc2626; }

/* Filter bar */
.sp-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
}
.sp-filter .sp-select-wrap {
  flex-shrink: 0;
}
.sp-input.xs {
  height: 32px;
  padding: 0 10px;
  border-color: var(--sp-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-strong);
}
.sp-select-wrap > .sp-input.xs {
  padding-right: 28px;
}
.sp-select-wrap > .sp-input.xs + .sp-icon {
  right: 8px;
}
.sp-search {
  position: relative;
  flex: 1;
  min-width: 160px;
}
.sp-search > .sp-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin: auto 0;
  color: var(--sp-faint);
  pointer-events: none;
}
.sp-search > .sp-input {
  padding-left: 32px;
  font-weight: 400;
}

/* Session cards */
.sp-pgroups > * + * {
  margin-top: 16px;
}
.sp-pgroup {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  overflow: hidden;
}
.sp-pgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-border);
}
.sp-pgroup.collapsed .sp-pgroup-head {
  border-bottom: 0;
}
.sp-pgroup.collapsed .sp-pgroup-body {
  display: none;
}
.sp-pgroup-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sp-pgroup-toggle {
  display: inline-flex;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sp-faint);
  transition: transform 150ms, color 150ms;
}
.sp-pgroup-toggle:hover {
  color: var(--sp-muted);
}
.sp-pgroup.collapsed .sp-pgroup-toggle {
  transform: rotate(-90deg);
}
.sp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--n-900);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
[data-bs-theme="dark"] .sp-avatar {
  background: var(--n-200);
  color: var(--n-900);
}
.sp-avatar.red,
[data-bs-theme="dark"] .sp-avatar.red {
  background: #dc2626;
  color: #fff;
}
.sp-pgroup-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-pgroup-meta .strong {
  font-weight: 600;
  color: var(--sp-title);
}
.sp-pgroup-meta .medium {
  font-weight: 500;
  color: var(--sp-strong);
}
.sp-pgroup-meta .sep,
.sp-pgroup-meta .muted {
  color: var(--sp-faint);
}
.sp-chip {
  padding: 2px 6px;
  background: var(--sp-chip-bg);
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--sp-label);
}
.sp-pgroup-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
.sp-pgroup.has-error {
  border-color: var(--sp-err-border);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.sp-pgroup.has-error .sp-pgroup-head {
  background: var(--sp-err-head);
  border-bottom-color: var(--sp-err-border);
}
.sp-pgroup.has-error .sp-pgroup-toggle {
  color: #ef4444;
}
.sp-pgroup.has-error .sp-chip {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--sp-err-border);
}
[data-bs-theme="dark"] .sp-pgroup.has-error .sp-chip {
  background: var(--sp-chip-bg);
}

/* Pills (process status) */
.sp-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.sp-pill.strong { font-weight: 700; }
.sp-pill.amber { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); color: #b45309; }
.sp-pill.accent { background: var(--accent-soft); border-color: var(--accent-muted); color: var(--accent-ink); }
.sp-pill.red { background: var(--sp-err-pill-bg); border-color: var(--sp-err-pill-border); color: var(--sp-err-pill-text); }
.sp-pill.grey { background: var(--sp-chip-bg); color: var(--sp-muted); }
[data-bs-theme="dark"] .sp-pill.amber { color: #fcd34d; }

/* Compact table */
.sp-ptable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
}
.sp-ptable thead tr {
  background: var(--sp-thead-bg);
  border-bottom: 1px solid var(--sp-border);
}
.sp-ptable th {
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-muted);
}
.sp-ptable th.w-pid { width: 85px; }
.sp-ptable th.w-status { width: 110px; }
.sp-ptable th.w-age { width: 80px; }
.sp-ptable th.w-actions { width: 75px; text-align: right; }
.sp-ptable tbody tr {
  height: 40px;
  transition: background-color 150ms;
}
.sp-ptable tbody tr + tr {
  border-top: 1px solid var(--sp-border);
}
.sp-ptable tbody tr:hover {
  background: color-mix(in srgb, var(--n-50) 70%, transparent);
}
[data-bs-theme="dark"] .sp-ptable tbody tr:hover {
  background: color-mix(in srgb, var(--n-900) 40%, transparent);
}
.sp-ptable td {
  padding: 8px 16px;
  vertical-align: middle;
  color: var(--sp-strong);
}
.sp-ptable .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.sp-ptable .p-pid { color: var(--sp-faint); white-space: nowrap; }
.sp-ptable .p-label { font-weight: 500; color: var(--sp-label); }
.sp-ptable .p-type { font-size: 10px; color: var(--sp-faint); }
.sp-ptable .p-target { color: var(--sp-strong); overflow-wrap: anywhere; }
.sp-ptable .p-host { color: var(--sp-muted); }
.sp-ptable .p-age { color: var(--sp-muted); white-space: nowrap; }
.sp-ptable .p-actions { text-align: right; white-space: nowrap; }
.sp-ptable .sp-icon-btn {
  width: 24px;
  height: 24px;
}
.sp-ptable .sp-icon-btn.view:hover {
  background: var(--sp-ghost-hover);
  color: var(--sp-strong);
}
.sp-ptable tr.is-error {
  background: var(--sp-err-row);
}
.sp-ptable tr.is-error .p-pid {
  font-weight: 600;
  color: #dc2626;
}
.sp-ptable tr.is-error .p-label {
  color: var(--sp-title);
}

/* Error log block */
.sp-plog {
  padding: 16px;
  background: var(--sp-log-bg);
  border-top: 1px solid var(--sp-err-border);
}
.sp-plog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--sp-strong);
}
.sp-plog-head .strong {
  font-weight: 600;
}
.sp-plog-body {
  margin: 0;
  padding: 14px;
  background: var(--n-900);
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.625;
  color: var(--n-200);
  white-space: pre-wrap;
  word-break: break-word;
}
.sp-pempty {
  padding: 48px 24px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-pempty .strong {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-title);
}
.sp-pempty[hidden],
.sp-pgroup[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  .sp-head-row,
  .sp-pgroup-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .sp-filter {
    flex-wrap: wrap;
  }
  .sp-filter .sp-select-wrap {
    width: calc(50% - 6px) !important;
  }
  .sp-pgroup-body {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Configuration (Stitch "ISPMan Console - Configuration"): module list on
   the left, settings rows on the right, save bar once something changed.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --sp-dirty-bg: #fffbeb;
  --sp-nav-active-bg: var(--accent-soft);
  --sp-nav-active-border: var(--accent-line);
}
[data-bs-theme="dark"] {
  --sp-dirty-bg: rgba(245, 158, 11, 0.08);
  --sp-nav-active-bg: var(--accent-muted);
  --sp-nav-active-border: var(--accent-line);
}
.sp-config {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sp-config-nav {
  position: sticky;
  top: 72px;
}
.sp-config-menu {
  padding: 12px;
}
.sp-config-menu .sp-search {
  margin-bottom: 12px;
}
.sp-config-menu nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-config-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  color: var(--sp-strong);
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.sp-config-link:hover {
  background: var(--sp-ghost-hover);
  color: var(--sp-title);
}
.sp-config-link > .sp-icon {
  color: var(--sp-faint);
}
.sp-config-link.active {
  background: var(--sp-nav-active-bg);
  border-color: var(--sp-nav-active-border);
  font-weight: 500;
  color: var(--accent);
}
.sp-config-link.active > .sp-icon {
  color: var(--accent);
}
.sp-config-name {
  flex: 1;
  min-width: 0;
}
.sp-config-count {
  min-width: 22px;
  padding: 1px 6px;
  background: var(--sp-chip-bg);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: var(--sp-muted);
}
.sp-config-link.active .sp-config-count {
  background: var(--accent);
  color: var(--on-accent);
}
.sp-config-sep {
  height: 1px;
  margin: 12px 0;
  background: var(--sp-border);
}
/* KPIs next to the Configuration menu: as many columns as the width allows. */
.sp-config-main .sp-kpis {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.sp-config-group {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-faint);
}
.sp-config-head .sp-section-head {
  margin-bottom: 0;
}
.sp-config-head .sp-section-head p {
  max-width: 640px;
}
.sp-crow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-top: 1px solid var(--sp-border);
  border-left: 3px solid transparent;
}
.sp-crow[hidden] {
  display: none;
}
.sp-crow.is-dirty {
  background: var(--sp-dirty-bg);
  border-left-color: #f59e0b;
}
.sp-crow-text {
  flex: 1;
  min-width: 0;
}
.sp-crow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sp-crow-title label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-title);
}
.sp-crow-dirty {
  display: none;
}
.sp-crow.is-dirty .sp-crow-dirty {
  display: inline-flex;
}
.sp-crow-var {
  margin-top: 2px;
  font-size: 11px;
  color: var(--sp-faint);
}
.sp-crow-desc {
  margin-top: 4px;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-crow-desc code,
.sp-crow-desc b {
  color: var(--sp-strong);
}
.sp-crow-ctrl {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 280px;
  padding-top: 2px;
}
.sp-crow-ctrl > .sp-pw-field {
  flex: 1;
}
.sp-crow-ctrl .sp-input:not(.sp-pw-input) {
  padding-right: 12px;
}
.sp-locked {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  background: var(--sp-readonly-bg);
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-locked > .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-link {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}
.sp-link:hover {
  text-decoration: underline;
}
.sp-cempty {
  justify-content: center;
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-savebar {
  position: sticky;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.sp-savebar[hidden] {
  display: none;
}
.sp-savebar .sp-pill {
  gap: 6px;
  font-size: 12px;
}
.sp-savebar .sp-hint {
  flex: 1;
}
.sp-savebar .sp-footer-end {
  margin-left: auto;
}

@media (max-width: 991.98px) {
  .sp-config {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-config-nav {
    position: static;
  }
  .sp-crow {
    flex-direction: column;
    gap: 12px;
  }
  .sp-crow-ctrl {
    width: 100%;
  }
}

/* ==========================================================================
   Clients (Stitch "v2 clair — Clients"): one-line toolbar, compact table
   with domain usage, row menu, pager.
   ========================================================================== */
.sp-list-card {
  overflow: visible;
}
.sp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px;
  border-bottom: 1px solid var(--sp-border);
  white-space: nowrap;
}
/* Controls keep their size; the toolbar wraps instead of squeezing them. */
.sp-toolbar > * {
  flex-shrink: 0;
}
/* Same search field and count as the DataTables listings. */
.sp-toolbar .sp-search > .sp-input {
  background-color: var(--sp-search-bg);
  font-size: 12px;
}
.sp-toolbar .sp-search > .sp-input:not(:placeholder-shown) {
  background-color: var(--sp-card);
  border-color: var(--accent);
  font-weight: 500;
}
.sp-toolbar .sp-search > .sp-input:focus {
  background-color: var(--sp-card);
}
.sp-tcount {
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-muted);
}
.sp-tcount strong {
  font-weight: 600;
  color: var(--sp-strong);
}
.sp-tcount span {
  font-weight: 400;
  color: var(--sp-faint);
}
.sp-toolbar-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.sp-w260 {
  width: 260px;
  flex: 0 0 260px;
}
.sp-input.sm {
  height: 36px;
  padding: 0 12px;
  border-color: var(--sp-border);
  font-size: 13px;
}
.sp-select-wrap > .sp-input.sm {
  padding-right: 32px;
  font-weight: 500;
  color: var(--sp-strong);
}
.sp-select-wrap > .sp-input.sm + .sp-icon {
  right: 10px;
}
.sp-search > .sp-input.sm {
  padding-left: 36px;
}
.sp-search > .sp-input.sm + .sp-icon,
.sp-w260 > .sp-icon {
  left: 12px;
}
.sp-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-muted);
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.sp-chip-btn:hover {
  background: var(--sp-hover);
}
.sp-chip-btn .sp-dot {
  width: 6px;
  height: 6px;
}
.sp-chip-btn[aria-pressed="true"] {
  background: var(--sp-nav-active-bg);
  border-color: var(--sp-nav-active-border);
  color: var(--accent);
}
.sp-btn.sm-36 {
  height: 36px;
  padding: 0 12px;
  border-color: var(--sp-border);
}

.sp-ctable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.sp-ctable thead tr {
  background: var(--sp-thead-bg);
  border-bottom: 1px solid var(--sp-border);
}
.sp-ctable th {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-muted);
}
.sp-ctable .end {
  text-align: right;
}
.sp-ctable tbody {
  font-size: 13px;
}
.sp-ctable tbody tr {
  height: 40px;
  transition: background-color 150ms;
}
.sp-ctable tbody tr + tr {
  border-top: 1px solid var(--sp-border);
}
.sp-ctable tbody tr:hover {
  background: color-mix(in srgb, var(--n-50) 70%, transparent);
}
[data-bs-theme="dark"] .sp-ctable tbody tr:hover {
  background: color-mix(in srgb, var(--n-900) 40%, transparent);
}
.sp-ctable td {
  padding: 8px 16px;
  vertical-align: middle;
}
.sp-ctable .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}
.sp-ctable .c-uid { color: var(--sp-strong); }
.sp-ctable .c-name { font-weight: 500; color: var(--sp-title); }
.sp-ctable .c-reseller { color: var(--sp-muted); }
.sp-ctable .c-id { color: var(--sp-muted); }
.sp-ctable-empty td {
  padding: 32px 16px;
  text-align: center;
  color: var(--sp-muted);
}
.sp-ctable tr[hidden] {
  display: none;
}
/* Its expandable rows (js/row-details.js), over the hover of both modes. */
.sp-ctable th.sp-dt-toggle-col,
.sp-ctable td.sp-dt-toggle {
  width: 36px;
  padding-right: 0;
}
.sp-ctable tbody tr.sp-dt-open,
.sp-ctable tbody tr.sp-rowx-row,
:root .sp-ctable tbody tr.sp-dt-open:hover,
:root .sp-ctable tbody tr.sp-rowx-row:hover {
  background: var(--sp-rowx-bg);
}
.sp-ctable tbody tr.sp-rowx-row > td {
  padding: 0;
}
.sp-usage {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--sp-muted);
}
.sp-usage-bar {
  width: 60px;
  height: 6px;
  overflow: hidden;
  background: var(--sp-chip-bg);
  border-radius: 9999px;
}
.sp-usage-bar > div {
  height: 100%;
  background: var(--accent);
  border-radius: 9999px;
}
.sp-usage.full {
  font-weight: 500;
  color: #e11d48;
}
.sp-usage.full .sp-usage-bar > div {
  background: #f43f5e;
}
.sp-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.sp-badge.green { background: #ecfdf5; border-color: rgba(167, 243, 208, 0.6); color: #047857; }
.sp-badge.amber { background: #fffbeb; border-color: rgba(253, 230, 138, 0.8); color: #b45309; }
[data-bs-theme="dark"] .sp-badge.green { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; }
[data-bs-theme="dark"] .sp-badge.amber { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; }
/* Category and account-status badges (domain type, DNS record type, PHP
   version, active / suspended) take a tone of the colour theme; the plain
   green / amber / red ones stay fixed status colours. */
.sp-badge.t-accent,
.sp-badge.t-sky,
.sp-badge.t-coral,
.sp-badge.t-amber,
.sp-badge.t-green {
  background: color-mix(in srgb, var(--tone) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone) 30%, transparent);
  color: var(--tone);
}
.sp-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 24px;
}
.sp-row-actions > .dropdown {
  display: flex;
}
.sp-icon-btn.neutral {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.sp-icon-btn.neutral:hover {
  background: var(--sp-ghost-hover);
  color: var(--sp-strong);
}
.sp-menu {
  min-width: 220px;
  padding: 6px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.sp-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color: var(--sp-strong);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sp-menu-item > .sp-icon {
  color: var(--sp-faint);
}
.sp-menu-item:hover {
  background: var(--sp-ghost-hover);
  color: var(--sp-title);
}
.sp-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}
.sp-menu-item.disabled {
  color: var(--sp-faint);
  cursor: not-allowed;
}
.sp-menu-item.disabled:hover {
  background: none;
  color: var(--sp-faint);
}
.sp-menu-sep {
  height: 1px;
  margin: 6px 0;
  background: var(--sp-border);
}
.sp-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 16px;
  border-top: 1px solid var(--sp-border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-muted);
}
.sp-pager-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-pager-pages[hidden] {
  display: none;
}
.sp-pager-pages > button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--sp-strong);
  transition: background-color 150ms;
}
.sp-pager-pages > button:hover:not(:disabled) {
  background: var(--sp-ghost-hover);
  color: var(--sp-title);
}
.sp-pager-pages > button:disabled {
  color: var(--sp-faint);
  opacity: 0.6;
  cursor: default;
}
.sp-pager-pages > button.current {
  background: var(--sp-page-active-bg);
  font-weight: 600;
  color: var(--sp-page-active-text);
}
.sp-pager-pages .fas {
  font-size: 12px;
}
.sp-pager-gap {
  min-width: 24px;
  text-align: center;
  color: var(--sp-faint);
}

@media (max-width: 1099.98px) {
  .sp-list-card {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Dashboard (Stitch "v2 clair — Tableau de bord"): quick search, KPI cards,
   pending changes, recently changed domains, quick actions.
   ========================================================================== */
.sp-qsearch {
  margin-bottom: 24px;
  padding: 16px;
  overflow: visible;
}
.sp-qsearch-box {
  position: relative;
}
.sp-qsearch-box > .sp-icon {
  position: absolute;
  top: 15px;
  left: 14px;
  color: var(--sp-faint);
  pointer-events: none;
}
.sp-qsearch-box > .sp-input {
  height: 48px;
  padding: 0 80px 0 44px;
  border-color: var(--sp-border);
}
.sp-qsearch.picking .sp-qsearch-box > .sp-input {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.sp-kbd {
  position: absolute;
  top: 13px;
  right: 12px;
  padding: 2px 8px;
  background: var(--sp-addon-bg);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--sp-faint);
  pointer-events: none;
}
/* Help page: shortcut list (label left, keys right) and numbered steps. */
.sp-keys {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  font-size: 14px;
}
.sp-keys dt,
.sp-keys dd {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--sp-soft-divider);
}
.sp-keys dt:first-of-type,
.sp-keys dd:first-of-type {
  border-top: 0;
}
.sp-keys dt {
  font-weight: 400;
  color: var(--sp-label);
}
.sp-keys dd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 12px;
}
.sp-key {
  min-width: 24px;
  padding: 2px 7px;
  background: var(--sp-addon-bg);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  box-shadow: none;
  color: var(--sp-strong);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  text-align: center;
}
.sp-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sp-label);
}
.sp-steps li + li {
  margin-top: 8px;
}
.sp-qresults {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 20;
  display: block;
}
.sp-qresults[hidden] {
  display: none;
}
.sp-menu-item.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
}
.sp-menu-item.active {
  background: var(--sp-nav-active-bg);
  color: var(--accent);
}
.sp-qrecent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
}
.sp-qrecent[hidden] {
  display: none;
}
.sp-qrecent-label {
  margin-right: 4px;
  font-weight: 500;
  color: var(--sp-faint);
}
.sp-qchip {
  padding: 4px 10px;
  background: var(--sp-tag-bg);
  border: 1px solid color-mix(in srgb, var(--n-200) 60%, transparent);
  border-radius: 4px;
  font-size: 12px;
  color: var(--sp-strong);
  text-decoration: none;
  transition: background-color 150ms;
}
.sp-qchip:hover {
  background: var(--sp-border);
  color: var(--sp-title);
}
.sp-qchip.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.sp-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.sp-kpi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
}
.sp-kpi p {
  margin: 0;
}
.sp-kpi-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-kpi-value {
  margin-top: 4px !important;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--sp-title);
}
.sp-kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: color-mix(in srgb, var(--tone, var(--accent)) 12%, transparent);
  border-radius: 4px;
  color: var(--tone, var(--accent));
}

.sp-dash {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sp-dash-main > * + * {
  margin-top: 24px;
}
.sp-dcard {
  padding: 20px;
}
.sp-dcard.flush {
  padding: 0;
}
.sp-dcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sp-soft-divider);
}
.sp-dcard.flush .sp-dcard-head {
  padding: 20px 20px 12px;
}
.sp-dcard-head.plain {
  border-bottom: 0;
}
.sp-dcard-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-dcard-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sp-title);
}
.sp-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: #f59e0b;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.sp-dcard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dashboard (Stitch "v3 clair/sombre — Tableau de bord client"): the
   domains of the session as a cloud of names, pending changes last. */
.sp-count-badge.neutral {
  background: var(--sp-tag-bg);
  color: var(--sp-muted);
  font-weight: 600;
}
[data-bs-theme="dark"] .sp-count-badge.neutral {
  background: var(--n-700);
  color: var(--n-300);
}
.sp-dlink {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.sp-dlink:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}
.sp-dcloud-card {
  margin-bottom: 24px;
}
/* Pending changes and recently changed domains side by side, same
   height, between the quick actions and the cloud. */
.sp-dash-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.sp-dcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
}
.sp-dchip {
  padding: 6px 12px;
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--n-700);
  text-decoration: none;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.sp-dchip.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.sp-dchip:hover,
.sp-dchip:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.sp-dchip.more {
  background: none;
  border-style: dashed;
  color: var(--n-500);
}
[data-bs-theme="dark"] .sp-dchip {
  background: var(--n-900);
  border-color: var(--n-700);
  color: var(--n-300);
}
[data-bs-theme="dark"] .sp-dchip.more {
  background: none;
  color: var(--n-400);
}
.sp-btn-ghost.sm {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--sp-muted);
}
.sp-dlist > * + * {
  border-top: 1px solid var(--sp-soft-divider);
}
.sp-dlist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.sp-dlist-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sp-dlist-who p {
  margin: 0;
}
.sp-dlist-who .strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-title);
}
.sp-dlist-who .muted {
  margin-top: 2px;
  font-size: 12px;
  color: var(--sp-muted);
}
.sp-dlist .mono,
.sp-dalert .mono,
.sp-dtable .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.sp-dlist .faint,
.sp-dtable .faint {
  font-size: 12px;
  color: var(--sp-faint);
  white-space: nowrap;
}
.sp-avatar.soft {
  width: 32px;
  height: 32px;
  background: var(--sp-tag-bg);
  border: 1px solid var(--sp-border);
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-strong);
}
[data-bs-theme="dark"] .sp-avatar.soft {
  background: var(--sp-tag-bg);
  color: var(--sp-strong);
}
.sp-dalert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  background: #fff1f2;
  border: 1px solid rgba(254, 205, 211, 0.8) !important;
  border-radius: 6px;
  font-size: 12px;
}
.sp-dlist > .sp-dalert {
  border-top: 1px solid rgba(254, 205, 211, 0.8);
}
.sp-dalert-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: #9f1239;
}
.sp-dalert-text > .sp-icon {
  color: #e11d48;
}
.sp-dalert a {
  font-weight: 600;
  color: #be123c;
  text-decoration: none;
}
.sp-dalert a:hover {
  text-decoration: underline;
}
[data-bs-theme="dark"] .sp-dalert {
  background: rgba(225, 29, 72, 0.1);
  border-color: rgba(251, 113, 133, 0.3) !important;
}
[data-bs-theme="dark"] .sp-dalert-text,
[data-bs-theme="dark"] .sp-dalert a {
  color: #fda4af;
}
.sp-dempty {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-dcard.flush .sp-dempty {
  margin: 0;
  padding: 0 20px 20px;
}
.sp-dtable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.sp-dtable thead {
  background: var(--sp-thead-bg);
  border-top: 1px solid var(--sp-border);
  border-bottom: 1px solid var(--sp-border);
}
.sp-dtable th {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-muted);
}
.sp-dtable th:first-child,
.sp-dtable td:first-child {
  padding-left: 20px;
}
.sp-dtable th:last-child,
.sp-dtable td:last-child {
  padding-right: 20px;
}
.sp-dtable .end {
  text-align: right;
}
.sp-dtable tbody tr + tr {
  border-top: 1px solid var(--sp-border);
}
.sp-dtable tbody tr:hover {
  background: color-mix(in srgb, var(--n-50) 80%, transparent);
}
[data-bs-theme="dark"] .sp-dtable tbody tr:hover {
  background: color-mix(in srgb, var(--n-900) 40%, transparent);
}
.sp-dtable td {
  padding: 12px 16px;
}
.sp-dtable td.mono a {
  font-weight: 500;
  color: var(--sp-label);
  text-decoration: none;
  transition: color 150ms;
}
.sp-dtable td.mono a:hover {
  color: var(--accent);
}
.sp-dtable .muted {
  color: var(--sp-muted);
}
/* Quick actions: one row of equal tiles under the search, the icon
   above a label of two lines at most (three columns under 992px, two on
   a phone). */
.sp-actions {
  margin-bottom: 24px;
}
.sp-actions nav {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 12px;
  padding-top: 16px;
}
.sp-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 10px 12px;
  text-align: center;
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sp-strong);
  text-decoration: none;
  transition: color 150ms, border-color 150ms, background-color 150ms;
}
.sp-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--sp-addon-bg);
  border-radius: 4px;
  color: var(--sp-muted);
  transition: background-color 150ms, color 150ms;
}
.sp-action-label {
  text-wrap: balance;
}
.sp-action:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  color: var(--accent);
}
.sp-action:hover .sp-action-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

@media (max-width: 991.98px) {
  .sp-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sp-dash,
  .sp-dash-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-actions nav {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 639.98px) {
  .sp-actions nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Domain page (Stitch "v2 clair — Fiche domaine").
   ========================================================================== */
.sp-head h1.sp-h1-lg {
  font-size: 30px;
}
.sp-pill.green { background: #ecfdf5; border-color: rgba(167, 243, 208, 0.7); color: #047857; }
[data-bs-theme="dark"] .sp-pill.green { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; }
.sp-pill.dot {
  gap: 6px;
  font-size: 13px;
}
.sp-pill.dot .sp-dot {
  width: 6px;
  height: 6px;
}
.sp-dot.grey { background: var(--sp-faint); }
.sp-btn-square {
  width: 40px;
  padding: 0;
  justify-content: center;
}
.sp-head-actions .dropdown {
  display: flex;
}

.sp-kpis.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sp-kpi2 {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.sp-kpi2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--sp-strong);
}
.sp-kpi2-icon {
  color: var(--tone, var(--accent));
}
.sp-kpi2-value {
  margin-top: 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--sp-title);
}
.sp-kpi2-value small {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sp-faint);
}
.sp-kpi2-value small.unit {
  margin-left: 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--sp-strong);
}
.sp-kpi2-bar {
  height: 4px;
  margin-top: 14px;
  overflow: hidden;
  background: var(--sp-chip-bg);
  border-radius: 9999px;
}
.sp-kpi2-bar > div {
  height: 100%;
  background: var(--tone, var(--accent));
  border-radius: 9999px;
}

.sp-dash-side > * + * {
  margin-top: 24px;
}
.sp-tcard {
  overflow: hidden;
}
.sp-tcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sp-border);
}
.sp-tcard-head h2 {
  font-size: 16px;
}
.sp-tcard-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-w280 {
  width: 280px;
}
.sp-count-soft {
  padding: 1px 8px;
  background: var(--sp-chip-bg);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-strong);
}
.sp-btn-primary.sm-36,
.sp-btn.sm-36 {
  height: 36px;
  padding: 0 14px;
  gap: 6px;
  font-size: 13px;
}
.sp-tcard .sp-ctable td {
  padding: 10px 20px;
}
.sp-tcard .sp-ctable th {
  padding: 10px 20px;
}
.sp-row-link {
  cursor: pointer;
}
.sp-trunc {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-tcard {
  container-type: inline-size;
}
.sp-tcard .sp-ctable th {
  white-space: nowrap;
}
@container (max-width: 760px) {
  .sp-tcard .col-wide {
    display: none;
  }
  .sp-tcard .sp-trunc {
    max-width: 160px;
  }
  .sp-tcard .sp-ctable th,
  .sp-tcard .sp-ctable td {
    padding-left: 14px;
    padding-right: 14px;
  }
}
.sp-fqdn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sp-fqdn > .sp-icon {
  color: var(--sp-faint);
}
.sp-ctable .faint,
.sp-ctable em.faint {
  font-size: 12px;
  color: var(--sp-faint);
}
.sp-badge.grey { background: var(--sp-chip-bg); border-color: var(--sp-border); color: var(--sp-muted); }
.sp-tcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--sp-border);
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-tcard-foot a {
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.sp-tcard-foot a:hover {
  text-decoration: underline;
}
.sp-tcard .sp-dempty {
  margin: 0;
  padding: 20px;
}

.sp-title-icon {
  color: var(--sp-muted);
}
.sp-title-icon.green {
  color: #10b981;
}
.sp-props {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 16px;
  margin: 16px 0 0;
  font-size: 14px;
}
.sp-props dt {
  font-weight: 400;
  color: var(--sp-muted);
}
.sp-props dd {
  margin: 0;
  text-align: right;
  color: var(--sp-label);
  overflow-wrap: anywhere;
}
.sp-props dd.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
}
.sp-props-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--sp-soft-divider);
  font-size: 13px;
  color: var(--sp-muted);
}
.sp-chip-soft {
  padding: 2px 10px;
  background: var(--sp-chip-bg);
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--sp-strong);
}
.sp-dtext {
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sp-muted);
}
.sp-dcard > .sp-row:last-child {
  margin-top: 0;
}
.sp-activity {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.sp-activity li {
  position: relative;
  padding: 0 0 14px 20px;
  font-size: 13px;
}
.sp-activity li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--accent);
}
.sp-activity li.pending::before { background: #f59e0b; }
.sp-activity li.error::before { background: #ef4444; }
.sp-activity .strong {
  font-weight: 500;
  color: var(--sp-title);
}
.sp-activity .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}
.sp-activity .muted {
  margin-top: 2px;
  font-size: 12px;
  color: var(--sp-faint);
}
.sp-whois {
  margin-top: 12px;
}
.sp-whois .sp-props {
  margin-top: 0;
}
.sp-whois .sp-props dd.mono div + div {
  margin-top: 4px;
}
.sp-pre.tall {
  max-height: none;
}

@media (max-width: 1199.98px) {
  .sp-kpis.five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.data-table-shell .faint { color: var(--sp-faint); }

/* Row actions in the shared listings: same 24px icon button + menu as the
   Clients page; header height not stretched by the sort arrows. */
.data-table-shell .sp-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 24px;
}
.data-table-shell .sp-row-actions > .dropdown {
  display: flex;
}
.data-table-shell .sp-icon-btn.neutral i {
  font-size: 13px;
}
.data-table-shell .data-table-responsive > thead > tr > th span.dt-column-order {
  height: 18px;
}
.data-table-shell .data-table-responsive > tbody > tr > td.actions {
  width: 1%;
  white-space: nowrap;
}
.sp-menu-item i.fas {
  width: 16px;
  text-align: center;
  color: var(--sp-faint);
}

.sp-ptable .sp-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 24px;
}
.sp-ptable .sp-row-actions > .dropdown {
  display: flex;
}

/* --------------------------------------------------------------------------
   Modals (Stitch "v2 clair — Suppression hôte virtuel"): white dialog,
   12px corners, round icon badge before the title, grey footer. Applies
   to every Bootstrap modal (confirmation, forms, password, processes).
   -------------------------------------------------------------------------- */
.modal.modern-modal .modal-dialog,
#confirmModal .modal-dialog {
  max-width: 584px;
}
.modal .modal-dialog .modal-content {
  overflow: hidden;
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-menu-border);
  border-radius: 12px;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--n-900) 25%, transparent);
  color: var(--shell-menu-title);
  animation: none;
}
.modal .modal-dialog .modal-header {
  align-items: center;
  gap: 16px;
  padding: 24px 28px 20px;
  background: transparent;
  border-bottom: 1px solid var(--shell-menu-divider);
  border-radius: 0;
  color: var(--shell-menu-title);
}
.modal .modal-dialog .modal-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: var(--shell-menu-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.modal .modal-dialog .modal-title > i {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tone-accent-bg);
  color: var(--accent-ink);
  font-size: 16px;
}
.modal .modal-dialog .modal-header.modal-danger,
.modal .modal-dialog .modal-header.modal-warning,
.modal .modal-dialog .modal-header.modal-success,
.modal .modal-dialog .modal-header.modal-info,
.modal .modal-dialog .modal-header.modal-primary {
  background: transparent;
  color: var(--shell-menu-title);
}
.modal .modal-header.modal-danger .modal-title > i { background: var(--tone-red-bg); color: #dc2626; }
.modal .modal-header.modal-warning .modal-title > i { background: var(--tone-amber-bg); color: #d97706; }
.modal .modal-header.modal-success .modal-title > i { background: rgba(16, 185, 129, 0.12); color: #059669; }
.modal .modal-dialog .modal-header .btn-close {
  margin: 0 0 0 auto;
  padding: 8px;
  opacity: 0.6;
  filter: none;
}
.modal .modal-dialog .modal-header .btn-close:hover {
  opacity: 1;
}
.modal .modal-dialog .modal-header .btn-close:focus {
  box-shadow: none;
}
.modal .modal-dialog .modal-header .btn-close:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-ring);
}
[data-bs-theme="dark"] .modal .modal-dialog .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.modal .modal-dialog .modal-body {
  padding: 24px 28px;
  background: transparent;
  color: var(--sp-label);
  font-size: 14px;
  line-height: 1.6;
}
.modal .modal-dialog .modal-body strong {
  color: var(--shell-menu-title);
}
.modal.modern-modal .modal-body .danger-text,
.modal.modern-modal .modal-body .warning-text,
.modal.modern-modal .modal-body .info-text {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--sp-row-bg);
  border: 1px solid var(--sp-row-border);
  border-radius: 8px;
  color: var(--sp-label);
  font-size: 13px;
}
.modal.modern-modal .modal-body .danger-text {
  background: var(--tone-red-bg);
  border-color: var(--tone-red-border);
  color: var(--tone-red-text);
}
.modal.modern-modal .modal-body .warning-text {
  background: var(--tone-amber-bg);
  border-color: var(--tone-amber-border);
  color: var(--tone-amber-text);
}
.modal .modal-dialog .modal-footer {
  gap: 12px;
  padding: 16px 28px;
  background: var(--shell-menu-sub);
  border-top: 1px solid var(--shell-menu-border);
  border-radius: 0;
}
.modal .modal-dialog .modal-footer > * {
  margin: 0;
}
.modal .modal-dialog .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  transform: none;
}
.modal .modal-dialog .modal-footer .btn-secondary {
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-menu-border);
  color: var(--shell-menu-title);
}
.modal .modal-dialog .modal-footer .btn-secondary:hover {
  background: var(--tone-grey-bg);
}
.modal .modal-dialog .modal-footer .btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
}
.modal .modal-dialog .modal-footer .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.modal .modal-dialog .modal-footer .btn-danger {
  background: #ef4444;
  border: 1px solid #ef4444;
  color: #fff;
}
.modal .modal-dialog .modal-footer .btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}
.modal .modal-dialog .modal-footer .btn-secondary .fa-times {
  display: none;
}
.modal-backdrop.show {
  opacity: 1;
  background: var(--pal-overlay);
}

/* DNS page: zone settings card above the records table */
.sp-dns-zone {
  margin-bottom: 16px;
}
/* Record editor, in place (dns/all): the edited row gives way to its
   form, a tinted row like the expandable rows; the add form opens in a
   card above the table. One line of fields when they fit: type, name,
   the value fields of the type, TTL; a TXT text takes the next line. */
.sp-dns-addslot,
.sp-inline-addslot {
  margin-bottom: 16px;
}
.sp-dns-addslot[hidden],
.sp-inline-addslot[hidden],
.data-table-shell .data-table-responsive > tbody > tr.sp-dns-editing,
.data-table-shell .data-table-responsive > tbody > tr.sp-inline-editing {
  display: none;
}
.sp-dns-editor,
.sp-inline-editor {
  padding: 16px 20px;
  text-align: left;
  white-space: normal;
}
.sp-dns-editor-title,
.sp-inline-editor-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-title);
}
.sp-dns-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
}
.sp-dns-fields > * {
  min-width: 0;
}
.sp-dns-fields .f-type {
  flex: 0 0 112px;
}
.sp-dns-fields .f-name {
  flex: 1 1 240px;
}
.sp-dns-fields .f-wide {
  flex: 2 1 240px;
}
.sp-dns-fields .f-num {
  flex: 0 0 112px;
}
.sp-dns-fields .f-full {
  flex: 1 1 100%;
}
.sp-dns-fields .d-none {
  display: none;
}
.sp-dns-editor-foot,
.sp-inline-editor-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}
.sp-dns-helps .sp-help {
  margin: 0;
}
.sp-dns-helps .sp-help + .sp-help:not(.d-none) {
  margin-top: 2px;
}
.sp-dns-editor-actions,
.sp-inline-editor-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  margin-left: auto;
}
@media (max-width: 575.98px) {
  .sp-dns-editor,
  .sp-inline-editor {
    padding: 12px;
  }
  .sp-dns-fields .f-type,
  .sp-dns-fields .f-num {
    flex: 1 1 100px;
  }
  .sp-dns-editor-foot,
  .sp-inline-editor-foot {
    flex-wrap: wrap;
  }
  .sp-inline-editor-grid {
    grid-template-columns: 1fr;
  }
}
/* Password change, unfolded under its button (components/_change_password_panel),
   on the edit pages and in the rows of a listing. */
.sp-pwchange-panel {
  max-width: 640px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  background: var(--sp-rowx-bg);
}
.sp-pwchange-panel[hidden] {
  display: none;
}
.sp-pwchange-panel .sp-inline-editor-actions {
  justify-content: flex-end;
  margin-top: 12px;
}
/* Process detail, in place (processes/list): the row gives way to the
   editor, tinted like the expandable rows. */
.sp-ptable tbody tr.sp-proc-editing {
  display: none;
}
.sp-ptable tbody tr.sp-proc-editrow,
.sp-ptable tbody tr.sp-proc-editrow:hover {
  background: var(--sp-rowx-bg);
}
.sp-ptable tbody tr.sp-proc-editrow > td {
  padding: 0;
}
.sp-inline-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 24px;
}
.sp-inline-editor-grid .sp-pre {
  margin: 4px 0 0;
  max-height: 160px;
  overflow: auto;
}
.sp-faint {
  color: var(--sp-faint);
}

/* Preformatted value (process parameters, raw payloads) */
.sp-pre {
  margin: 0;
  padding: 10px 12px;
  max-height: 240px;
  overflow: auto;
  background: var(--sp-row-bg);
  border: 1px solid var(--sp-row-border);
  border-radius: 6px;
  color: var(--sp-label);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
.modal .sp-props {
  margin-top: 0;
}
.sp-props-chips {
  justify-content: flex-end;
}

/* NS Checker: progress of a background check */
.sp-progress {
  height: 6px;
  overflow: hidden;
  background: var(--tone-grey-bg);
  border-radius: 999px;
}
.sp-progress > div {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.sp-progress.done > div { background: #10b981; }
.sp-progress.failed > div { background: #ef4444; }

/* --------------------------------------------------------------------------
   Login (Stitch "v3 clair — Connexion"). The page stays dark in both themes,
   like the sidebar; only the card follows the theme.
   -------------------------------------------------------------------------- */
body.sp-login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--sb-bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sp-login {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 24px;
}
.sp-login-brand {
  margin-bottom: 32px;
}
.sp-login-brand img {
  display: block;
  height: 32px;
  width: auto;
}
.sp-login-card {
  width: 400px;
  max-width: 100%;
  padding: 32px;
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-menu-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--n-900) 5%, transparent);
}
.sp-login-card h1 {
  margin: 0;
  color: var(--shell-menu-title);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.sp-login-sub {
  margin: 4px 0 24px;
  color: var(--shell-menu-text);
  font-size: 14px;
}
.sp-login-card > .sp-error,
.sp-login-card > .sp-help {
  margin: -8px 0 20px;
}
.sp-login-card .sp-pw-field {
  position: relative;
}
.sp-login-card .sp-stack > * + * {
  margin-top: 20px;
}
.sp-login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--sp-label);
  font-size: 14px;
  cursor: pointer;
}
.sp-login-remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.sp-login-submit {
  width: 100%;
  justify-content: center;
}
.sp-login-legal {
  width: 400px;
  max-width: 100%;
  margin-top: 24px;
  color: var(--n-400);
  font-size: 12px;
  line-height: 1.6;
}
.sp-login-legal h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--n-300);
  font-size: 12px;
  font-weight: 600;
}
.sp-login-legal p {
  margin: 0 0 6px;
}
.sp-login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  color: var(--n-500);
  font-size: 12px;
}
.sp-login-theme {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--n-400);
}
.sp-login-theme:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}


/* --------------------------------------------------------------------------
   Error pages (Stitch "v3 clair/sombre — Page introuvable (404)" and
   "— Erreur interne (500)"): the login page with an error card.
   -------------------------------------------------------------------------- */
/* Without the configured logo (directory unreachable), the name in text. */
.sp-login-brand .sp-brand-text {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sp-error-card {
  --sp-err-title: var(--n-900);
  --sp-err-text: var(--n-600);
  --sp-err-muted: var(--n-500);
  --sp-err-danger: #dc2626;
  --sp-err-chip-bg: var(--n-100);
  --sp-err-chip-border: var(--n-200);
  --sp-err-chip-text: var(--n-700);
  width: 440px;
  max-width: 100%;
  padding: 36px;
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-menu-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
[data-bs-theme="dark"] .sp-error-card {
  --sp-err-title: var(--n-100);
  --sp-err-text: var(--n-300);
  --sp-err-muted: var(--n-400);
  --sp-err-danger: #f87171;
  --sp-err-chip-bg: var(--n-900);
  --sp-err-chip-border: var(--n-700);
  --sp-err-chip-text: var(--n-200);
}
.sp-error-code {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sp-error-code.danger {
  color: var(--sp-err-danger);
}
.sp-error-card h1 {
  margin: 0 0 14px;
  color: var(--sp-err-title);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}
.sp-error-text {
  margin: 0 0 20px;
  color: var(--sp-err-text);
  font-size: 14px;
  line-height: 1.6;
}
.sp-error-path {
  margin: 0 0 24px;
  padding: 10px 12px;
  background: var(--sp-err-chip-bg);
  border: 1px solid var(--sp-err-chip-border);
  border-radius: 8px;
  color: var(--sp-err-chip-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.sp-error-ref {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--sp-err-muted);
  font-size: 13px;
}
.sp-error-ref code {
  padding: 4px 8px;
  background: var(--sp-err-chip-bg);
  border: 1px solid var(--sp-err-chip-border);
  border-radius: 6px;
  color: var(--sp-err-chip-text);
  font-size: 13px;
}
.sp-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sp-error-actions .sp-btn-primary,
.sp-error-actions .sp-btn-secondary {
  gap: 8px;
  border-radius: 8px;
}

/* ── Mail telemetry (Service::Telemetry): space used against the quota the
   store applies, last login, dormant accounts (Stitch "v3 — Utilisateurs :
   occupation et dernière connexion", "— Tableau de bord : boîtes aux
   lettres", "— Boîtes aux lettres : tous les domaines"). ── */
.sp-meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--sp-strong);
}
.sp-meter-bar {
  width: 120px;
  height: 6px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--sp-chip-bg);
  border-radius: 9999px;
}
.sp-meter-bar > span {
  display: block;
  height: 100%;
  background: #10b981;
  border-radius: inherit;
}
.sp-meter.warn .sp-meter-bar > span { background: #f59e0b; }
.sp-meter.danger .sp-meter-bar > span { background: #ef4444; }
.sp-meter.free .sp-meter-bar > span {
  background: repeating-linear-gradient(135deg, var(--sp-toggle-off) 0 4px, transparent 4px 8px);
}
.sp-meter.warn .sp-meter-text { color: #b45309; }
.sp-meter.danger .sp-meter-text { color: #dc2626; font-weight: 600; }
.sp-meter.none .sp-meter-text { color: var(--sp-faint); }
[data-bs-theme="dark"] .sp-meter.warn .sp-meter-text { color: #fcd34d; }
[data-bs-theme="dark"] .sp-meter.danger .sp-meter-text { color: #fca5a5; }
.sp-meter.compact .sp-meter-bar { width: 72px; }

.sp-proto {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--sp-chip-bg);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  font-family: var(--bs-font-monospace, "JetBrains Mono", monospace);
  font-size: 11px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.sp-seen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sp-strong);
}
.sp-seen.old > span:first-child { color: #c2410c; }
[data-bs-theme="dark"] .sp-seen.old > span:first-child { color: #fdba74; }

.sp-cell-2 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.sp-cell-2 > .mono { font-size: 12px; }
.sp-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}
.sp-badge.slate {
  gap: 4px;
  background: color-mix(in srgb, #64748b 12%, transparent);
  border-color: color-mix(in srgb, #64748b 30%, transparent);
  color: #475569;
}
[data-bs-theme="dark"] .sp-badge.slate { color: #cbd5e1; }

/* Filter chips of a listing toolbar (components/_data_table `chips`). */
.sp-seg {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  background: var(--sp-addon-bg);
  border: 1px solid var(--sp-border);
  border-radius: 6px;
}
.sp-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-muted);
  white-space: nowrap;
}
.sp-seg button:hover { color: var(--sp-strong); }
.sp-seg button.active {
  background: var(--sp-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  color: var(--sp-title);
}
.sp-seg-count {
  padding: 0 6px;
  background: var(--sp-chip-bg);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-strong);
}

/* Dashboard section "Boîtes aux lettres": three cards of the same height,
   then the freshness of the reports (administrators). */
.sp-dmail {
  margin-bottom: 24px;
}
.sp-dmail-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.sp-dmail-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--sp-title);
}
.sp-dmail-head .muted,
.sp-dmail .muted { font-size: 12px; color: var(--sp-muted); }
.sp-dmail-more { margin-left: auto; }
.sp-dmail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.sp-dmail-grid > .sp-dcard {
  display: flex;
  flex-direction: column;
}
.sp-dmail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.sp-dmail-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
  color: var(--sp-strong);
  text-decoration: none;
}
.sp-dmail-who .mono {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-dmail-who:hover .mono { color: var(--accent); }
.sp-dmail-who-2 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-dmail-who-2 > .muted { font-size: 11px; }
.sp-dmail-pct {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  color: #b45309;
}
.sp-dmail-pct.danger { color: #dc2626; }
[data-bs-theme="dark"] .sp-dmail-pct { color: #fcd34d; }
[data-bs-theme="dark"] .sp-dmail-pct.danger { color: #fca5a5; }
.sp-dmail-help { margin: 12px 0 0; }
.sp-dmail-empty { margin: 16px 0 0; }
.sp-dmail-foot {
  margin: auto 0 0;
  padding-top: 14px;
  font-size: 12px;
}
.sp-dmail-hosts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
}
.sp-dmail-host {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  font-size: 13px;
  color: var(--sp-strong);
  text-decoration: none;
}
.sp-dmail-host:hover .mono { color: var(--accent); }
.sp-dmail-hostbar {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  background: var(--sp-chip-bg);
  border-radius: 9999px;
}
.sp-dmail-hostbar > span {
  display: block;
  height: 100%;
  background: #64748b;
  border-radius: inherit;
}
.sp-dmail-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-muted);
  border-radius: 6px;
  font-size: 12px;
  color: var(--accent-ink);
}
.sp-dmail-note > span { flex: 1; }
.sp-dmail-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--sp-strong);
}
.sp-dmail-status .sp-dot-item { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 991.98px) {
  .sp-dmail-grid { grid-template-columns: minmax(0, 1fr); }
}
.sp-help-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--sp-muted);
}
.page-header-actions .sp-select-wrap { width: 170px; }
.page-header-actions .sp-select-wrap > .sp-input.xs { height: 36px; }
/* Domain page: dormant accounts under the Users count. */
.sp-kpi2-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--sp-muted);
  text-decoration: none;
}
.sp-kpi2-sub:hover { color: var(--accent); }
.sp-meter-text { white-space: nowrap; }
.sp-dmail-row > .sp-dmail-who,
.sp-dmail-row > .sp-dmail-who-2 { flex: 1; min-width: 0; }
.sp-dmail-row > .sp-meter { flex-shrink: 0; }