/* connect2store v3.1 – dark default, light alternate, space login */
:root,
[data-bs-theme="dark"] {
  /* Fallbacks; per-app @brand-black / @brand-primary override via inline style */
  --brand-black: #282828;
  --brand-primary: #42bdf7;
  --brand-cool: #7ff4f1;
  /* brand-info = cool (legacy “info” / cyan accent – not Bootstrap default blue) */
  --brand-info: var(--brand-cool, #7ff4f1);
  --c2s-bg: var(--brand-black, #282828);
  --c2s-bg-elevated: color-mix(in srgb, var(--brand-black, #282828) 86%, #ffffff);
  --c2s-border: rgba(255, 255, 255, 0.08);
  --c2s-text: #e8eefc;
  /* Legacy LESS: darken(@brand-white, 35%) */
  --c2s-muted: color-mix(in srgb, var(--brand-white, #ffffff) 65%, #000000 35%);
  --c2s-primary: var(--brand-primary, #42bdf7);
  --c2s-primary-hover: color-mix(in srgb, var(--brand-primary, #42bdf7) 82%, #ffffff);
  --c2s-info: var(--brand-info);
  --c2s-danger: #ff6b7a;
  --c2s-glass: color-mix(in srgb, var(--brand-black, #282828) 72%, transparent);
  --c2s-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --bs-info: var(--brand-info);
  --bs-info-rgb: 127, 244, 241;
  --bs-link-color: var(--brand-info);
  --bs-link-hover-color: color-mix(in srgb, var(--brand-info) 78%, #ffffff);
}

[data-bs-theme="light"] {
  /* --brand-primary / --brand-black come from inline app theme (base.twig) */
  --c2s-bg: #f3f5fa;
  --c2s-bg-elevated: rgba(255, 255, 255, 0.92);
  --c2s-border: rgba(15, 23, 42, 0.08);
  --c2s-text: #0f172a;
  --c2s-muted: #64748b;
  --c2s-primary: var(--brand-primary, #3b6ef5);
  --c2s-primary-hover: color-mix(in srgb, var(--brand-primary, #3b6ef5) 78%, #000000);
  --c2s-danger: #dc3545;
  --c2s-glass: rgba(255, 255, 255, 0.75);
  --c2s-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

html, body {
  min-height: 100%;
}

body {
  background: var(--c2s-bg);
  color: var(--c2s-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.text-secondary { color: var(--c2s-muted) !important; }
.text-info { color: var(--brand-info, var(--brand-cool, #7ff4f1)) !important; }
code { color: var(--c2s-primary); }

/* Content links only (not menu): brand-info / cool */
.app-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.c2s-breadcrumb-module-label):not(.c2s-breadcrumb-link):not(.c2s-breadcrumb-current) {
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
}
.app-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.c2s-breadcrumb-module-label):not(.c2s-breadcrumb-link):hover {
  color: color-mix(in srgb, var(--brand-info, var(--brand-cool, #7ff4f1)) 78%, #ffffff);
}
.login-page a:not(.btn) {
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
}

.glass {
  background: var(--c2s-glass);
  border: 1px solid var(--c2s-border);
  box-shadow: var(--c2s-shadow);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

.app-navbar {
  background: var(--c2s-bg-elevated) !important;
  border-color: var(--c2s-border) !important;
  backdrop-filter: blur(12px);
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--c2s-primary));
  box-shadow: 0 0 12px var(--c2s-primary);
}

.card.glass .card-body { color: var(--c2s-text); }

.btn-primary {
  background: var(--c2s-primary);
  border-color: var(--c2s-primary);
}
.btn-primary:hover {
  background: var(--c2s-primary-hover);
  border-color: var(--c2s-primary-hover);
}

/* Brand primary (= legacy @brand-primary) */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary, var(--c2s-primary));
  --bs-btn-border-color: var(--brand-primary, var(--c2s-primary));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c2s-primary-hover);
  --bs-btn-hover-border-color: var(--c2s-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 66, 189, 247);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--c2s-primary-hover);
  --bs-btn-active-border-color: var(--c2s-primary-hover);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn-brand:hover,
.btn-brand:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-outline-brand {
  --bs-btn-color: var(--brand-primary, var(--c2s-primary));
  --bs-btn-border-color: var(--brand-primary, var(--c2s-primary));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary, var(--c2s-primary));
  --bs-btn-hover-border-color: var(--brand-primary, var(--c2s-primary));
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary, var(--c2s-primary));
  --bs-btn-active-border-color: var(--brand-primary, var(--c2s-primary));
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

/* warning = @brand-yellow (cookie CTA etc.) */
.btn-outline-warning {
  --bs-btn-color: var(--brand-yellow, #f1c400);
  --bs-btn-border-color: var(--brand-yellow, #f1c400);
  --bs-btn-hover-color: #111;
  --bs-btn-hover-bg: var(--brand-yellow, #f1c400);
  --bs-btn-hover-border-color: var(--brand-yellow, #f1c400);
  --bs-btn-active-color: #111;
  --bs-btn-active-bg: var(--brand-yellow, #f1c400);
  --bs-btn-active-border-color: var(--brand-yellow, #f1c400);
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background: transparent;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.form-check-input:checked {
  background-color: var(--brand-primary, var(--c2s-primary));
  border-color: var(--brand-primary, var(--c2s-primary));
}
.form-check-input:focus {
  border-color: var(--brand-primary, var(--c2s-primary));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, var(--c2s-primary)) 25%, transparent);
}

/* —— Login / space —— */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  /* Same base as app shell HUD */
  background-color: var(--brand-black, #282828);
  color: #e8eefc;
}

.space-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#space-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Legacy class kept; brand nebula lives on .space-gradient-app */
.space-gradient {
  position: absolute;
  inset: 0;
}

.form-signin {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 380px;
  padding: 1.25rem;
}

.login-card.glass {
  border-radius: 1.25rem;
  padding: 2rem 1.5rem 1.5rem;
  background: color-mix(in srgb, var(--brand-black, #282828) 38%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Light edge that follows the rounded corners (brighter on top / rim) */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

/* Login inputs: same pills as dashboard */
.login-page .form-control,
.login-page .form-floating > .form-control {
  border-radius: 50rem !important;
}

.login-logo-link {
  max-width: 68%;
  text-decoration: none;
  outline: none !important;
  box-shadow: none !important;
}
.login-logo-link:focus,
.login-logo-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.login-logo-link .login-logo,
.login-logo {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}
.login-logo-link .login-logo {
  display: block;
  width: 100%;
}

.login-version {
  opacity: 0.55;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

/* White fields (override Bootstrap dark theme) */
html[data-bs-theme="dark"] .login-page .form-floating > .form-control,
.login-page .form-floating > .form-control {
  background-color: var(--brand-white, #fff) !important;
  color: #222 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html[data-bs-theme="dark"] .login-page .form-floating > .form-control:focus,
.login-page .form-floating > .form-control:focus {
  background-color: var(--brand-white, #fff) !important;
  color: #111 !important;
  border-color: var(--brand-primary, #42bdf7) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, #42bdf7) 25%, transparent);
}

/* Placeholder only as BS hook – never paint it (label carries the text) */
.login-page .form-floating > .form-control::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* Floating labels: no plate; stay readable when floated (not white-on-white) */
.login-page .form-floating > label {
  color: #555 !important;
  background: transparent !important;
  background-color: transparent !important;
  z-index: 4;
  pointer-events: none;
}
.login-page .form-floating > label::after {
  /* BS5.3 cover plate – transparent, keep for layout */
  background-color: transparent !important;
  background: transparent !important;
}
/* Floated: same muted tone as intended placeholder (brand-white darkened) */
.login-page .form-floating > .form-control:focus ~ label,
.login-page .form-floating > .form-control:not(:placeholder-shown) ~ label,
.login-page .form-floating > .form-control:-webkit-autofill ~ label {
  color: color-mix(in srgb, var(--brand-white, #fff) 38%, var(--brand-black, #111) 62%) !important;
  background: transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.login-page .form-control.is-invalid {
  border-color: var(--brand-danger, #c91235) !important;
}
.login-page .form-check-label {
  color: rgba(255, 255, 255, 0.85);
}
.login-page .password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  text-decoration: none;
  z-index: 5;
  padding: 0.25rem 0.5rem;
}
.login-page .password-toggle:hover {
  color: #111;
}
.login-page .login-forgot {
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.login-page .login-forgot:hover,
.login-page .login-forgot:focus {
  color: var(--brand-primary, #42bdf7);
}

/* Cookie banner */
.cookies {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100%;
  /* light dim so card blur can still read the scene */
  background: rgba(10, 14, 28, 0.45);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  z-index: 1050;
  display: none;
}

.cookies .cookie-card,
#card-cookie-banner {
  width: 350px;
  max-width: 85%;
  bottom: -50%;
  position: relative;
  transition: bottom 0.5s ease, opacity 0.35s ease;
  /* glass like login-card: blur only, no solid fill */
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  color: #fff;
}

.cookies .card b {
  font-size: 1.05rem;
}

/* —— App shell / header / offcanvas (Bootstrap 5.3 + c2s tokens) —— */
.app-shell {
  min-height: 100vh;
  padding-top: 5.25rem; /* fixed header */
  background-color: var(--brand-black, var(--c2s-bg));
  position: relative;
  overflow-x: hidden;
}

/* Space behind shell (stars from space.js); brand-black remains the base */
.app-shell .space-scene-app {
  z-index: 0;
}
/* Shared nebula for login + app shell (on brand-black) */
.space-gradient-app {
  background:
    radial-gradient(
      ellipse 90% 55% at 50% 110%,
      color-mix(in srgb, var(--brand-primary, #42bdf7) 18%, transparent),
      transparent 62%
    ),
    radial-gradient(
      circle at 12% 20%,
      color-mix(in srgb, var(--brand-secondary, #7ff4f1) 10%, transparent),
      transparent 42%
    ),
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--brand-primary, #42bdf7) 12%, transparent),
      transparent 38%
    );
  background-color: transparent;
}
.login-page #space-canvas,
.app-shell #space-canvas {
  opacity: 0.72;
}
/* Light theme: no starfield distraction */
[data-bs-theme="light"] .app-shell .space-scene-app {
  display: none;
}
[data-bs-theme="light"] .app-shell {
  background-color: var(--c2s-bg);
}

/* HUD sci-fi titles (layout/colors unchanged) */
.app-shell .crud-page h1,
.app-shell .app-main h1,
.app-shell .app-main .h1,
.app-shell .app-main .h2,
.app-shell .app-main .h3,
.app-shell .offcanvas-title {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Bottom-left signet (tenant logo/connect2store_signet.svg → _default) */
.c2s-signet {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  bottom: 0;
  left: 0;
  margin-bottom: -10%;
  margin-left: -8%;
  width: 33%;
  min-width: 200px;
  max-width: 500px;
  aspect-ratio: 1;
  background-position: bottom left;
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: 0.95;
}
/*
 * Stacking: main content below header; offcanvas (menu + edit) above header.
 * Edit offcanvas lives in shell_overlays (outside .app-main) so it is not trapped.
 */
.app-header {
  position: relative;
  z-index: 1040;
}
.app-main {
  position: relative;
  z-index: 1;
}
.app-shell > .offcanvas,
.app-shell .app-offcanvas.offcanvas {
  z-index: 1060;
}
.app-shell .offcanvas-backdrop {
  z-index: 1055;
}

/*
 * Shared content width: header + main aligned.
 * col-12 / col-xxl-11 + m-auto; px-xxl-0 at large screens (side gap from 11/12).
 */
.c2s-shell-inner {
  box-sizing: border-box;
}

/* Header bar: stronger HUD glass, no solid fill */
.app-header .c2s-navbar {
  z-index: 1040;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: color-mix(in srgb, var(--brand-black, #282828) 42%, transparent) !important;
  background-color: color-mix(in srgb, var(--brand-black, #282828) 42%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
[data-bs-theme="light"] .app-header .c2s-navbar {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  background-color: rgba(255, 255, 255, 0.55) !important;
}

/* Optional utility */
.c2s-blur {
  background: transparent !important;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

/*
 * Content cards – HUD glass: more transparent, slightly angular
 * (pills stay on inputs/buttons; cards = eckiger Sci-Fi panel)
 */
.app-main .card.glass {
  --bs-card-border-radius: 0.75rem;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 2px solid color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, transparent);
  background: color-mix(in srgb, var(--brand-black, #282828) 38%, transparent) !important;
  /* Rim highlight follows radius – brighter on top edge / corners */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  color: var(--c2s-text);
  overflow: hidden;
}
[data-bs-theme="light"] .app-main .card.glass {
  border-color: rgba(15, 23, 42, 0.08);
  border-left-color: color-mix(in srgb, var(--brand-primary, #3b6ef5) 45%, transparent);
  background: rgba(255, 255, 255, 0.62) !important;
  border-radius: 0.75rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(15, 23, 42, 0.08);
}
.app-main .card.glass > .card-body {
  padding: 1.25rem 1rem;
  color: var(--c2s-text);
}
@media (min-width: 768px) {
  .app-main .card.glass > .card-body {
    padding: 1.5rem 1.25rem;
  }
}

/* App forms (not login): pill inputs ready for all modules */
.app-shell:not(.login-page) .form-control,
.app-shell:not(.login-page) .form-select,
.app-main .form-control,
.app-main .form-select {
  border-radius: 50rem !important;
}
.app-main .form-floating > .form-control,
.app-main .form-floating > .form-select {
  border-radius: 50rem !important;
}
/* Select value: BS .form-select-sm uses padding-left:.5rem (inputs feel like .75rem);
 * nudge selects so text lines up with form-control / floating labels (esp. iOS). */
.app-shell .form-select,
.app-main .form-select,
.app-offcanvas .form-select,
.crud-edit-form .form-select,
.c2s-apps-add-form .form-select {
  padding-left: 0.75rem;
}
.app-shell .form-select-sm,
.app-main .form-select-sm,
.app-offcanvas .form-select-sm,
.crud-edit-form .form-select-sm,
.c2s-apps-add-form .form-select-sm {
  padding-left: 0.75rem;
}
/* Textareas: card.glass radius, not pill */
.app-shell:not(.login-page) textarea.form-control,
.app-main textarea.form-control,
.app-offcanvas textarea.form-control,
.crud-edit-form textarea.form-control,
.c2s-apps-add-form textarea.form-control {
  border-radius: 0.75rem !important;
}

/* Focus ring always brand-primary (override Bootstrap’s default blue) */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --bs-focus-ring-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 25%, transparent);
}
.app-shell .form-control:focus,
.app-shell .form-select:focus,
.app-shell .form-control:focus-visible,
.app-shell .form-select:focus-visible,
.app-main .form-control:focus,
.app-main .form-select:focus,
.app-main .form-control:focus-visible,
.app-main .form-select:focus-visible,
.app-offcanvas .form-control:focus,
.app-offcanvas .form-select:focus,
.app-offcanvas .form-control:focus-visible,
.app-offcanvas .form-select:focus-visible,
.crud-edit-form .form-control:focus,
.crud-edit-form .form-select:focus,
.crud-edit-form .form-control:focus-visible,
.crud-edit-form .form-select:focus-visible,
.login-page .form-control:focus,
.login-page .form-select:focus {
  border-color: var(--brand-primary, var(--c2s-primary, #42bdf7)) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, var(--c2s-primary, #42bdf7)) 25%, transparent) !important;
  outline: 0 !important;
}

/* Floating labels: no white plate – transparent / match field */
.app-shell .form-floating > label,
.app-offcanvas .form-floating > label,
.crud-edit-form .form-floating > label {
  color: var(--c2s-muted);
  background: transparent !important;
  background-color: transparent !important;
}
.app-shell .form-floating > label::after,
.app-offcanvas .form-floating > label::after,
.crud-edit-form .form-floating > label::after {
  background: transparent !important;
  background-color: transparent !important;
}
.app-shell .form-floating > .form-control:focus ~ label,
.app-shell .form-floating > .form-control:not(:placeholder-shown) ~ label,
.app-shell .form-floating > .form-select:focus ~ label,
.app-shell .form-floating > .form-select:not(:placeholder-shown) ~ label,
.app-offcanvas .form-floating > .form-control:focus ~ label,
.app-offcanvas .form-floating > .form-control:not(:placeholder-shown) ~ label,
.app-offcanvas .form-floating > .form-select:focus ~ label,
.app-offcanvas .form-floating > .form-select:not(:placeholder-shown) ~ label,
.crud-edit-form .form-floating > .form-control:focus ~ label,
.crud-edit-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
.crud-edit-form .form-floating > .form-select:focus ~ label,
.crud-edit-form .form-floating > .form-select:not(:placeholder-shown) ~ label {
  background: transparent !important;
  color: var(--c2s-muted);
  opacity: 1;
}

.app-header .logo img,
.login-logo-header {
  max-height: 40px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.app-header .c2s-header-bar {
  gap: 0.5rem 0.75rem;
}
.app-header .c2s-header-actions {
  gap: 0.55rem 0.75rem;
}
.app-header .c2s-header-version {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--c2s-muted);
  opacity: 0.38;
  margin-right: 0.35rem !important;
  user-select: none;
}
/* Quicklinks (browser icon) – Hyperlinks + Grok/AnyDesk */
.app-header .c2s-quicklinks-toggle {
  color: var(--c2s-text);
  line-height: 1;
  padding: 0.15rem 0.35rem;
  opacity: 0.85;
}
.app-header .c2s-quicklinks-toggle:hover,
.app-header .c2s-quicklinks-toggle:focus-visible,
.app-header .c2s-quicklinks-toggle.show {
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  opacity: 1;
  outline: none;
}
.app-header .c2s-quicklinks-menu {
  --bs-dropdown-spacer: 0.75rem;
  min-width: 16rem;
  max-width: min(22rem, 90vw);
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  margin-top: 0.35rem !important;
  padding: 0.35rem 0 0.5rem;
  border-radius: 0.85rem !important;
  background: color-mix(in srgb, var(--brand-black, #282828) 72%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.35);
}
.app-header .c2s-quicklinks-title {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c2s-muted);
}
.app-header .c2s-quicklinks-menu .dropdown-header {
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  font-weight: 600;
  font-size: 0.72rem;
  padding-top: 0.55rem;
}
.app-header .c2s-quicklinks-menu .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  color: var(--c2s-text);
  border-radius: 0.55rem;
  margin: 0 0.35rem;
  width: auto;
  white-space: normal;
}
.app-header .c2s-quicklinks-menu .dropdown-item:hover,
.app-header .c2s-quicklinks-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 16%, transparent);
  color: var(--c2s-text);
}
.app-header .c2s-quicklinks-menu .c2s-quicklink-offline {
  font-style: italic;
  text-decoration: line-through;
  opacity: 0.55;
}
.app-header .c2s-quicklinks-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 0.4rem 0.75rem;
}
[data-bs-theme="light"] .app-header .c2s-quicklinks-menu {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}
[data-bs-theme="light"] .app-header .c2s-quicklinks-menu .dropdown-divider {
  border-color: rgba(15, 23, 42, 0.08);
}

/* Portal search: header icon + fullscreen blur cover */
.app-header .c2s-header-search-toggle {
  color: var(--c2s-text);
  line-height: 1;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  opacity: 0.85;
}
.app-header .c2s-header-search-toggle:hover,
.app-header .c2s-header-search-toggle:focus-visible {
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  opacity: 1;
  outline: none;
}
body.c2s-search-overlay-open {
  overflow: hidden;
}
.c2s-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: min(18vh, 8rem) 1rem 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.c2s-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.c2s-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--brand-black, #0a0c10) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
[data-bs-theme="light"] .c2s-search-overlay__backdrop {
  background: rgba(255, 255, 255, 0.72);
}
.c2s-search-overlay__panel {
  position: relative;
  z-index: 1;
  width: min(40rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transform: translateY(-0.5rem) scale(0.98);
  transition: transform 0.2s ease;
}
.c2s-search-overlay.is-open .c2s-search-overlay__panel {
  transform: translateY(0) scale(1);
}
.c2s-search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.15rem 0.15rem 0.15rem 0.35rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.c2s-search-overlay__input {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--c2s-text) !important;
  font-size: 1.25rem !important;
  padding: 0.65rem 1rem !important;
  border-radius: 999px !important;
}
.c2s-search-overlay__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, rgba(255, 255, 255, 0.35)) !important;
  box-shadow: none !important;
}
[data-bs-theme="light"] .c2s-search-overlay__input {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}
[data-bs-theme="light"] .c2s-search-overlay__input:focus {
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 50%, rgba(15, 23, 42, 0.25)) !important;
}
.c2s-search-overlay__close {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--c2s-text);
  line-height: 1;
  cursor: pointer;
}
.c2s-search-overlay__close:hover,
.c2s-search-overlay__close:focus-visible {
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, rgba(255, 255, 255, 0.35));
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  outline: none;
}
[data-bs-theme="light"] .c2s-search-overlay__close {
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}
[data-bs-theme="light"] .c2s-search-overlay__close:hover,
[data-bs-theme="light"] .c2s-search-overlay__close:focus-visible {
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 50%, rgba(15, 23, 42, 0.25));
  color: var(--brand-primary, #42bdf7);
}
.c2s-search-overlay__close .bi {
  font-size: 1rem;
  line-height: 1;
}
.c2s-search-overlay__results {
  max-height: min(52vh, 24rem);
  overflow-y: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.25rem 0.15rem;
}
.c2s-search-overlay__results:empty {
  display: none;
}
.c2s-search-overlay__group-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c2s-muted, #9aa4b2);
  padding: 0.65rem 0.85rem 0.2rem;
}
.c2s-search-overlay__item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  color: var(--c2s-text);
  border-radius: 0.75rem;
}
.c2s-search-overlay__item:hover,
.c2s-search-overlay__item:focus {
  background: color-mix(in srgb, var(--c2s-text, #fff) 8%, transparent);
  color: var(--c2s-text);
  outline: none;
}
[data-bs-theme="light"] .c2s-search-overlay__item:hover,
[data-bs-theme="light"] .c2s-search-overlay__item:focus {
  background: rgba(15, 23, 42, 0.06);
}
.c2s-search-overlay__item-title {
  font-size: 1rem;
  font-weight: 600;
}
.c2s-search-overlay__item-sub {
  font-size: 0.78rem;
  color: var(--c2s-muted, #9aa4b2);
}
.c2s-search-overlay__empty {
  padding: 0.85rem;
  color: var(--c2s-muted, #9aa4b2);
  font-size: 0.9rem;
  text-align: center;
}

.app-header .c2s-header-refresh {
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  line-height: 1;
  padding: 0.15rem 0.35rem;
}
.app-header .c2s-header-refresh:hover,
.app-header .c2s-header-refresh:focus-visible {
  color: color-mix(in srgb, var(--brand-info, var(--brand-cool, #7ff4f1)) 78%, #ffffff);
  outline: none;
}
.app-header .c2s-header-refresh.is-spinning .bi-arrow-clockwise {
  animation: c2s-refresh-spin 0.7s linear infinite;
}
@keyframes c2s-refresh-spin {
  to { transform: rotate(360deg); }
}

.app-header .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--c2s-text);
}
[data-bs-theme="light"] .app-header .btn-outline-light {
  border-color: rgba(15, 23, 42, 0.2);
  color: var(--c2s-text);
}
.app-header .btn-outline-light:hover {
  background: var(--brand-primary, var(--c2s-primary));
  border-color: var(--brand-primary, var(--c2s-primary));
  color: #fff;
}

/* Kill Bootstrap/browser blue focus ring on header controls & links */
.app-shell a:focus,
.app-shell a:focus-visible,
.app-shell button:focus,
.app-shell button:focus-visible,
.app-shell .btn:focus,
.app-shell .btn:focus-visible,
.app-shell .nav-link:focus,
.app-shell .nav-link:focus-visible,
.app-shell .dropdown-item:focus,
.app-shell .dropdown-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Logout: icon + dropdown in brand-danger */
.app-header .logout-toggle,
.app-header .logout-toggle i {
  color: var(--brand-danger, var(--c2s-danger, #c91235)) !important;
}
.app-header .logout-toggle:hover,
.app-header .logout-toggle:focus,
.app-header .logout-toggle:focus-visible,
.app-header .logout-toggle.show {
  color: var(--brand-danger, var(--c2s-danger, #c91235)) !important;
  outline: none !important;
  box-shadow: none !important;
}
.app-header .logout-menu {
  --bs-dropdown-bg: var(--brand-danger, var(--c2s-danger, #c91235));
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-hover-color: color-mix(in srgb, #fff 75%, var(--brand-black, #111));
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-spacer: 0.85rem;
  margin-top: 0.35rem !important;
  --bs-dropdown-min-width: 10rem;
  background: var(--brand-danger, var(--c2s-danger, #c91235)) !important;
  padding: 0.35rem;
  border-radius: 0.65rem;
}
.app-header .logout-menu .logout-confirm {
  color: #fff !important;
  background: transparent !important;
  border: 0;
  border-radius: 0.45rem;
  text-align: center;
  font-weight: 600;
}
.app-header .logout-menu .logout-confirm:hover,
.app-header .logout-menu .logout-confirm:focus,
.app-header .logout-menu .logout-confirm:focus-visible,
.app-header .logout-menu .logout-confirm:active {
  color: color-mix(in srgb, #fff 72%, #000) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.app-main {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

.app-offcanvas {
  background: color-mix(in srgb, var(--brand-black, #282828) 55%, transparent) !important;
  color: var(--c2s-text);
  max-width: 22rem;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="light"] .app-offcanvas {
  background: rgba(255, 255, 255, 0.88) !important;
  border-right-color: rgba(15, 23, 42, 0.08) !important;
}
.app-offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.app-offcanvas .offcanvas-header .offcanvas-title {
  margin-right: auto;
}
.app-offcanvas .offcanvas-header [data-bs-dismiss="offcanvas"] {
  margin-left: auto;
  float: right;
}
.nav-menu-tree > li {
  margin-bottom: 0.55rem;
}
.nav-menu-tree > li:last-child {
  margin-bottom: 0;
}
.app-offcanvas .btn-toggle {
  display: flex;
  align-items: center;
  color: var(--c2s-text);
  background: transparent;
  border: 0;
  padding: 0.55rem 0.85rem;
  gap: 0.15rem;
}
.app-offcanvas .btn-toggle:hover,
.app-offcanvas .btn-toggle:focus {
  background: color-mix(in srgb, var(--brand-primary, var(--c2s-primary)) 14%, transparent);
  color: var(--c2s-text);
}
.app-offcanvas .btn-toggle.active,
.app-offcanvas .btn-toggle.is-open[aria-expanded="true"] {
  background: color-mix(in srgb, var(--brand-primary, var(--c2s-primary)) 12%, transparent);
}
/* Plus → X via rotate (legacy parity) */
.app-offcanvas .btn-toggle .toggle-plus,
.app-offcanvas .btn-toggle i.bi-plus-lg {
  margin-left: auto;
  font-size: 0.9rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
  display: inline-block;
}
.app-offcanvas .btn-toggle .toggle-plus::before,
.app-offcanvas .btn-toggle i.bi-plus-lg::before {
  display: inline-block;
  transition: transform 0.2s ease;
}
.app-offcanvas .btn-toggle[aria-expanded="true"] .toggle-plus::before,
.app-offcanvas .btn-toggle[aria-expanded="true"] i.bi-plus-lg::before {
  transform: rotate(135deg);
}
.app-offcanvas .btn-toggle-nav {
  padding-left: 1.75rem;
  margin-top: 0.25rem;
}
.app-offcanvas .btn-toggle-nav > li + li {
  margin-top: 0.2rem;
}
.app-offcanvas .btn-toggle-nav a {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--brand-white, #ffffff) !important;
  text-decoration: none;
  border-radius: 999px;
  opacity: 0.88;
}
.app-offcanvas .btn-toggle-nav a:hover,
.app-offcanvas .btn-toggle-nav a:focus {
  color: var(--brand-white, #ffffff) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--brand-primary, var(--c2s-primary)) 12%, transparent);
}
.app-offcanvas .btn-toggle-nav a.active {
  color: #fff;
  background: color-mix(in srgb, var(--brand-primary, var(--c2s-primary)) 28%, transparent);
  font-weight: 600;
}

/* Light theme: menu child links dark; active = dark chip + white text */
[data-bs-theme="light"] .app-offcanvas .btn-toggle-nav a {
  color: var(--brand-black, #0f172a) !important;
  opacity: 0.82;
}
[data-bs-theme="light"] .app-offcanvas .btn-toggle-nav a:hover,
[data-bs-theme="light"] .app-offcanvas .btn-toggle-nav a:focus {
  color: var(--brand-black, #0f172a) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--brand-black, #282828) 8%, transparent);
}
[data-bs-theme="light"] .app-offcanvas .btn-toggle-nav a.active {
  color: #fff !important;
  background: var(--brand-black, #282828) !important;
  opacity: 1;
  font-weight: 600;
}
[data-bs-theme="light"] .app-offcanvas .btn-toggle.active,
[data-bs-theme="light"] .app-offcanvas .btn-toggle.is-open[aria-expanded="true"] {
  color: var(--brand-black, #0f172a);
  background: color-mix(in srgb, var(--brand-black, #282828) 10%, transparent);
  font-weight: 600;
}

.nav-menu-tree .bi-plus-lg {
  font-size: 0.85rem;
  opacity: 0.55;
}

/* —— CRUD admin (apps, pages, …) —— */

/* Module breadcrumb: Modul (primary/fett) › Tool / Tool / [aktiv glass] */
.c2s-breadcrumb {
  margin: 0 0 0.35rem;
  padding-top: 0;
}
.c2s-breadcrumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0;
  background: transparent;
  padding: 0;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.82rem;
  position: relative;
  z-index: 1;
}
/* Default: no separator; only after module → arrow, then between tools → / */
.c2s-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: none;
  padding: 0;
  float: none;
}
.c2s-breadcrumb .breadcrumb-item.c2s-breadcrumb-after-module::before {
  content: "›";
  color: var(--c2s-muted);
  padding: 0 0.45rem;
  font-weight: 500;
}
.c2s-breadcrumb .breadcrumb-item:not(.c2s-breadcrumb-module):not(.c2s-breadcrumb-after-module)::before {
  content: "/";
  color: var(--c2s-muted);
  padding: 0 0.4rem;
  font-weight: 500;
  opacity: 0.75;
}
.c2s-breadcrumb-module-label {
  color: var(--brand-primary, var(--c2s-primary)) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}
a.c2s-breadcrumb-module-label:hover {
  color: var(--c2s-primary-hover, var(--brand-primary)) !important;
  text-decoration: none;
}
.c2s-breadcrumb-link {
  color: var(--c2s-muted);
  text-decoration: none;
  font-weight: 500;
}
.c2s-breadcrumb-link:hover {
  color: var(--brand-primary, var(--c2s-primary));
}
/* Active tool: glass pill like .card.glass (mobile + fallback) */
.c2s-breadcrumb-current {
  display: inline-block;
  color: var(--c2s-text);
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: 50rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--brand-black, #282828) 38%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
[data-bs-theme="light"] .c2s-breadcrumb-current {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Desktop: sliding glass pill follows hover / active tool */
.c2s-breadcrumb-desktop {
  position: relative;
  max-width: 100%;
  vertical-align: middle;
}
.c2s-breadcrumb-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 50rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--brand-black, #282828) 38%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0);
  will-change: transform, width, height;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}
.c2s-breadcrumb-desktop.is-ready .c2s-breadcrumb-pill {
  opacity: 1;
}
[data-bs-theme="light"] .c2s-breadcrumb-pill {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Labels share hit area; glass comes from the sliding pill */
.c2s-breadcrumb-desktop [data-c2s-bc-target] {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 50rem;
}
.c2s-breadcrumb-desktop .c2s-breadcrumb-current {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.c2s-breadcrumb-desktop .c2s-breadcrumb-link {
  color: var(--c2s-muted);
}
.c2s-breadcrumb-desktop .c2s-breadcrumb-link:hover,
.c2s-breadcrumb-desktop .breadcrumb-item.active .c2s-breadcrumb-current {
  color: var(--c2s-text);
}
@media (prefers-reduced-motion: reduce) {
  .c2s-breadcrumb-pill {
    transition: opacity 0.15s ease;
  }
}

/* Mobile breadcrumb: Modul › [active ▾] — no wrap / overflow */
.c2s-breadcrumb-mobile {
  gap: 0.15rem;
  max-width: 100%;
}
.c2s-breadcrumb-mobile-sep {
  color: var(--c2s-muted);
  padding: 0 0.35rem;
  flex: 0 0 auto;
  font-weight: 500;
}
.c2s-breadcrumb-dd {
  max-width: min(100%, 14rem);
}
.c2s-breadcrumb-dd-toggle {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 100%;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: start;
}
.c2s-breadcrumb-dd-toggle::after {
  margin-left: 0.4rem;
  vertical-align: 0.15em;
  opacity: 0.75;
}
.c2s-breadcrumb-dd-menu {
  min-width: 10rem;
  max-width: min(18rem, 85vw);
  padding: 0.35rem !important;
  border-radius: 0.75rem !important;
  background: color-mix(in srgb, var(--brand-black, #282828) 78%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.c2s-breadcrumb-dd-menu .dropdown-item {
  border-radius: 50rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c2s-text);
  padding: 0.4rem 0.85rem;
}
.c2s-breadcrumb-dd-menu .dropdown-item:hover,
.c2s-breadcrumb-dd-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 18%, transparent);
  color: var(--c2s-text);
}
.c2s-breadcrumb-dd-menu .dropdown-item.active {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 28%, transparent);
  color: #fff;
}
[data-bs-theme="light"] .c2s-breadcrumb-dd-toggle {
  border-color: rgba(15, 23, 42, 0.1);
}
[data-bs-theme="light"] .c2s-breadcrumb-dd-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}
[data-bs-theme="light"] .c2s-breadcrumb-dd-menu .dropdown-item {
  color: var(--c2s-text);
}
[data-bs-theme="light"] .c2s-breadcrumb-dd-menu .dropdown-item:hover,
[data-bs-theme="light"] .c2s-breadcrumb-dd-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--brand-primary, #3b6ef5) 12%, transparent);
}
[data-bs-theme="light"] .c2s-breadcrumb-dd-menu .dropdown-item.active {
  background: color-mix(in srgb, var(--brand-primary, #3b6ef5) 22%, transparent);
  color: var(--c2s-text);
}

.page-hero-title {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-hero-info {
  width: 100%;
  max-width: none;
  line-height: 1.35;
  opacity: 0.9;
}
@media (min-width: 768px) {
  .page-hero-info {
    width: auto;
    max-width: 18rem;
    flex: 0 1 auto;
  }
}
.page-hero-hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-primary, #42bdf7) 28%, rgba(255, 255, 255, 0.18));
  opacity: 1;
  margin: 0.65rem 0 0.85rem;
}
[data-bs-theme="light"] .page-hero-hr {
  border-top-color: color-mix(in srgb, var(--brand-primary, #3b6ef5) 25%, rgba(15, 23, 42, 0.12));
}

/* Intro: justified prose, max 3 lines preview, toggle only if overflow */
.page-hero-intro {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.55;
  margin: 0;
}
.page-hero-intro.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.page-hero-intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.page-hero-intro-toggle {
  color: var(--brand-primary, var(--c2s-primary)) !important;
  text-decoration: none !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.page-hero-intro-toggle:hover,
.page-hero-intro-toggle:focus-visible {
  color: var(--c2s-primary-hover, var(--brand-primary)) !important;
}
.page-hero-intro-toggle .bi {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: 0.85em;
}
.page-hero-intro-toggle:not(.collapsed) .bi {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-intro-toggle .bi {
    transition: none;
  }
}

/* Slightly less air under fixed header for module pages */
.app-main .crud-page {
  margin-top: -0.35rem;
}

/* DataTables toolbar / pager – pill controls matching search field */
.c2s-datatable .c2s-dt-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.c2s-datatable .c2s-dt-toolbar-row {
  width: 100%;
}
.c2s-datatable .c2s-dt-toolbar-row .dataTables_length,
.c2s-datatable .c2s-dt-toolbar-row .dt-buttons {
  margin: 0;
}
.c2s-datatable .c2s-dt-toolbar-search,
.c2s-datatable .c2s-dt-toolbar-search .dataTables_filter,
.c2s-datatable .c2s-dt-toolbar-search .dataTables_filter label {
  width: 100%;
}
.c2s-datatable .dataTables_length label,
.c2s-datatable .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--c2s-muted);
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .c2s-datatable .c2s-dt-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .c2s-datatable .c2s-dt-toolbar-row {
    width: auto;
    flex: 0 0 auto;
  }
  .c2s-datatable .c2s-dt-toolbar-search {
    width: auto;
    margin-left: auto;
  }
  .c2s-datatable .c2s-dt-toolbar-search .dataTables_filter,
  .c2s-datatable .c2s-dt-toolbar-search .dataTables_filter label {
    width: auto;
  }
}
/* Length + export: one real BI chevron (no BS dropdown-toggle caret / DT arrow) */
.c2s-datatable .c2s-dt-length-wrap,
.c2s-datatable .c2s-dt-export {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.c2s-datatable .c2s-dt-chevron-icon {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c2s-muted);
  font-size: 0.75rem;
  line-height: 1;
  z-index: 2;
}
/* Kill Bootstrap dropdown-toggle caret + DataTables down-arrow */
.c2s-datatable .c2s-dt-export.dropdown-toggle::after,
.c2s-datatable .c2s-dt-export.buttons-collection::after,
.c2s-datatable .c2s-dt-export::before,
.c2s-datatable .c2s-dt-export .dt-down-arrow,
.c2s-datatable .c2s-dt-export .dt-button-down-arrow,
.c2s-datatable .dt-buttons .dt-down-arrow,
.c2s-datatable .dt-button-down-arrow {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.c2s-datatable .dataTables_length select,
.c2s-datatable .dataTables_filter input,
.c2s-datatable .dt-buttons .btn.c2s-dt-export,
.c2s-datatable .c2s-dt-export {
  border-radius: 50rem !important;
  background: color-mix(in srgb, var(--brand-black, #282828) 45%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--c2s-text) !important;
  box-shadow: none !important;
}
.c2s-datatable .dataTables_length select {
  padding: 0.35rem 1.85rem 0.35rem 0.85rem;
  appearance: none;
  -webkit-appearance: none;
  min-width: 3.75rem;
  cursor: pointer;
  width: auto;
}
.c2s-datatable .dataTables_filter input {
  padding: 0.35rem 0.9rem;
  margin-left: 0 !important;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}
@media (min-width: 768px) {
  .c2s-datatable .dataTables_filter input {
    width: auto;
    min-width: 10rem;
  }
}
.c2s-datatable .dt-buttons .btn.c2s-dt-export,
.c2s-datatable .c2s-dt-export {
  padding: 0.35rem 1.85rem 0.35rem 0.95rem !important;
  font-size: 0.85rem;
  font-weight: 500;
}
.c2s-datatable .dt-buttons .btn.c2s-dt-export:hover,
.c2s-datatable .c2s-dt-export:hover,
.c2s-datatable .dataTables_filter input:focus,
.c2s-datatable .dataTables_length select:focus {
  border-color: var(--brand-primary, #42bdf7) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, transparent) !important;
  outline: 0;
  color: var(--c2s-text) !important;
  background: color-mix(in srgb, var(--brand-black, #282828) 30%, transparent) !important;
}
.c2s-datatable .dt-button-collection {
  background: color-mix(in srgb, var(--brand-black, #282828) 72%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0.75rem !important;
  padding: 0.35rem !important;
}
.c2s-datatable .dt-button-collection .dt-button {
  border-radius: 50rem !important;
  color: var(--c2s-text) !important;
  background: transparent !important;
  border: 0 !important;
}
.c2s-datatable .dt-button-collection .dt-button:hover {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 16%, transparent) !important;
}
.c2s-datatable .dataTables_info {
  color: var(--c2s-muted);
  font-size: 0.85rem;
  padding-top: 0.35rem !important;
}
.c2s-datatable .dataTables_paginate {
  padding-top: 0.15rem !important;
}
.c2s-datatable .pagination {
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.c2s-datatable .page-link {
  border-radius: 50rem !important;
  min-width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--c2s-text);
  padding: 0 0.55rem;
}
/* Phones: pager one row + centered (DT defaults to text-align:right) */
@media (max-width: 767.98px) {
  .c2s-datatable .c2s-dt-footer {
    --bs-gutter-x: 0.5rem;
  }
  .c2s-datatable .c2s-dt-footer > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .c2s-datatable .c2s-dt-footer .dataTables_info {
    text-align: center;
  }
  .c2s-datatable .c2s-dt-footer .dataTables_paginate,
  .c2s-datatable div.dataTables_wrapper div.dataTables_paginate {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    max-width: 100%;
    float: none !important;
    text-align: center !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .c2s-datatable .c2s-dt-footer .dataTables_paginate::-webkit-scrollbar {
    display: none;
  }
  .c2s-datatable .c2s-dt-footer .pagination,
  .c2s-datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0.2rem;
    width: max-content;
    max-width: none;
    margin: 0 auto !important;
    float: none !important;
  }
  .c2s-datatable .page-link {
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.35rem;
    font-size: 0.8rem;
  }
}
.c2s-datatable .page-item.active .page-link {
  background: transparent !important;
  border-color: var(--brand-primary, #42bdf7) !important;
  color: var(--c2s-text) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #42bdf7) 35%, transparent);
}
.c2s-datatable .page-item.disabled .page-link {
  opacity: 0.4;
  background: transparent;
  color: var(--c2s-muted);
  border-color: rgba(255, 255, 255, 0.08);
}
.c2s-datatable .page-link:hover {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 45%, transparent);
  color: var(--c2s-text);
}
.c2s-datatable table.dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.c2s-datatable div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0;
}

/* Light mode: length / export / search must stay light (not brand-black glass) */
[data-bs-theme="light"] .c2s-datatable .dataTables_length select,
[data-bs-theme="light"] .c2s-datatable .dataTables_filter input,
[data-bs-theme="light"] .c2s-datatable .dt-buttons .btn.c2s-dt-export,
[data-bs-theme="light"] .c2s-datatable .c2s-dt-export {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: var(--c2s-text) !important;
}
[data-bs-theme="light"] .c2s-datatable .dt-buttons .btn.c2s-dt-export:hover,
[data-bs-theme="light"] .c2s-datatable .c2s-dt-export:hover,
[data-bs-theme="light"] .c2s-datatable .dataTables_filter input:focus,
[data-bs-theme="light"] .c2s-datatable .dataTables_length select:focus {
  background: #ffffff !important;
  border-color: var(--brand-primary, #3b6ef5) !important;
  color: var(--c2s-text) !important;
}
[data-bs-theme="light"] .c2s-datatable .c2s-dt-chevron-icon {
  color: var(--c2s-muted);
}
[data-bs-theme="light"] .c2s-datatable .dt-button-collection {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-bs-theme="light"] .c2s-datatable .dt-button-collection .dt-button {
  color: var(--c2s-text) !important;
}
[data-bs-theme="light"] .c2s-datatable .page-link {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--c2s-text);
}
[data-bs-theme="light"] .c2s-datatable .page-item.disabled .page-link {
  border-color: rgba(15, 23, 42, 0.08);
}

/* HUD table: transparent, sci-fi header labels */
/* Horizontal scroll here; sticky header via JS clone (.c2s-dt-sticky-head) —
   CSS position:sticky cannot stick to the viewport inside overflow-x containers. */
.c2s-datatable .table-responsive {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
/* Horizontal sticky identity cols (# / Bild / Kürzel) */
.app-main .crud-table thead th.c2s-dt-col-sticky,
.app-main .crud-table tbody td.c2s-dt-col-sticky {
  position: sticky;
  z-index: 2;
  background: color-mix(in srgb, var(--brand-black, #282828) 94%, #000000);
}
.app-main .crud-table thead th.c2s-dt-col-sticky {
  z-index: 4;
  background: color-mix(in srgb, var(--brand-black, #282828) 96%, #000000);
}
.app-main .crud-table tbody tr.crud-row:hover td.c2s-dt-col-sticky,
.app-main .crud-table tbody tr.crud-row.table-active td.c2s-dt-col-sticky {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 14%, var(--brand-black, #282828));
}
.app-main .crud-table .c2s-dt-col-sticky-last {
  box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.55);
}
[data-bs-theme="light"] .app-main .crud-table thead th.c2s-dt-col-sticky,
[data-bs-theme="light"] .app-main .crud-table tbody td.c2s-dt-col-sticky {
  background: rgba(255, 255, 255, 0.98);
}
[data-bs-theme="light"] .app-main .crud-table tbody tr.crud-row:hover td.c2s-dt-col-sticky,
[data-bs-theme="light"] .app-main .crud-table tbody tr.crud-row.table-active td.c2s-dt-col-sticky {
  background: color-mix(in srgb, var(--brand-primary, #3b6ef5) 10%, #ffffff);
}
[data-bs-theme="light"] .app-main .crud-table .c2s-dt-col-sticky-last {
  box-shadow: 6px 0 10px -6px rgba(15, 23, 42, 0.18);
}
.c2s-dt-sticky-head .c2s-dt-col-sticky {
  position: relative;
  z-index: 5;
  background: color-mix(in srgb, var(--brand-black, #282828) 96%, #000000);
}
[data-bs-theme="light"] .c2s-dt-sticky-head .c2s-dt-col-sticky {
  background: rgba(255, 255, 255, 0.98);
}
.c2s-dt-sticky-head .c2s-dt-col-sticky-last {
  box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.55);
}

/* App/user avatar thumbnails (served via auth /avatar/{id}) — image only, no chrome */
.c2s-avatar-thumb {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: cover;
  vertical-align: middle;
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.c2s-avatar-thumb--lg {
  width: 4rem;
  height: 4rem;
  border-radius: 0.55rem;
  object-fit: contain;
}

.c2s-avatar-picker__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.c2s-avatar-picker__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  min-width: 0;
}
.c2s-avatar-upload-btn {
  cursor: pointer;
}
.c2s-avatar-upload-btn input[type="file"] {
  display: none;
}
.c2s-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 0.55rem;
  font-size: 1.5rem;
  color: var(--c2s-muted);
  background: color-mix(in srgb, var(--brand-black, #282828) 80%, #fff);
  border: 1px dashed rgba(255, 255, 255, 0.18);
}
[data-bs-theme="light"] .c2s-avatar-placeholder {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.14);
}

.c2s-avatar-library {
  max-height: 11rem;
  overflow: auto;
  padding: 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: color-mix(in srgb, var(--brand-black, #282828) 55%, transparent);
}
[data-bs-theme="light"] .c2s-avatar-library {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.55);
}
.c2s-avatar-library__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.c2s-avatar-library__item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.2rem;
  border-radius: 0.4rem;
  cursor: pointer;
  line-height: 0;
}
.c2s-avatar-library__item:hover,
.c2s-avatar-library__item:focus-visible {
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 65%, transparent);
  outline: none;
}
.c2s-avatar-library__item.is-selected {
  border-color: var(--brand-primary, #42bdf7);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary, #42bdf7) 45%, transparent);
}
.app-main .crud-table,
.c2s-dt-sticky-head .crud-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--c2s-text);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-hover-bg: color-mix(in srgb, var(--brand-primary, #42bdf7) 10%, transparent);
  --bs-table-hover-color: var(--c2s-text);
  --bs-table-striped-bg: transparent;
  border-collapse: separate;
  border-spacing: 0;
}
.app-main .crud-table thead th,
.c2s-dt-sticky-head .crud-table thead th {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c2s-muted);
  background: color-mix(in srgb, var(--brand-black, #282828) 92%, #000000);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary, #42bdf7) 35%, transparent) !important;
  white-space: nowrap;
  padding: 0.9rem 1.1rem;
}
.app-main .crud-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  vertical-align: middle;
  padding: 0.85rem 1.1rem;
}
/* Optical center: DT sort arrows sit on the right of th */
.app-main .crud-table thead th.text-center,
.app-main .crud-table tbody td.text-center,
.c2s-dt-sticky-head .crud-table thead th.text-center {
  padding-left: 1.1rem;
  padding-right: 1.85rem;
}
.app-main .crud-table tbody tr.crud-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.crud-table tbody tr.crud-row.table-active {
  --bs-table-bg: color-mix(in srgb, var(--brand-primary, #42bdf7) 18%, transparent);
}
[data-bs-theme="light"] .app-main .crud-table,
[data-bs-theme="light"] .c2s-dt-sticky-head .crud-table {
  --bs-table-border-color: rgba(15, 23, 42, 0.08);
  --bs-table-hover-bg: color-mix(in srgb, var(--brand-primary, #3b6ef5) 8%, transparent);
}
[data-bs-theme="light"] .app-main .crud-table thead th,
[data-bs-theme="light"] .c2s-dt-sticky-head .crud-table thead th {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: color-mix(in srgb, var(--brand-primary, #3b6ef5) 30%, transparent) !important;
}

/* Floating thead clone (datatable.js) — sits under fixed navbar while scrolling */
.c2s-dt-sticky-head {
  display: none;
  position: fixed;
  z-index: 1035;
  overflow: hidden;
  pointer-events: auto;
  background: color-mix(in srgb, var(--brand-black, #282828) 96%, #000000);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="light"] .c2s-dt-sticky-head {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.c2s-dt-sticky-head .crud-table,
.c2s-dt-sticky-head .c2s-dt-sticky-head-table {
  margin: 0 !important;
  max-width: none !important;
  /* width set inline from measured columns; avoid Bootstrap .w-100 */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.c2s-dt-sticky-head .crud-table thead th {
  cursor: pointer;
  box-sizing: border-box;
}

.crud-edit-offcanvas {
  width: min(22rem, 100vw);
}

/* Apps /add: hints align with pill input text; submit matches floating field height */
.c2s-apps-add-form .c2s-field-hint {
  padding-left: 1.05rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
}
.c2s-apps-add-form .c2s-apps-add-submit {
  display: flex;
  align-items: stretch;
  /* Same height as Bootstrap .form-floating > .form-control */
  height: 3.5rem;
}
.c2s-apps-add-form .c2s-apps-add-submit .btn {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

/* Search / filter stays pill; panel chrome stays angular */
.crud-page .form-control.rounded-pill {
  background: color-mix(in srgb, var(--brand-black, #282828) 45%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--c2s-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.crud-page .form-control.rounded-pill::placeholder {
  color: var(--c2s-muted);
}
.crud-page .form-control.rounded-pill:focus {
  background: color-mix(in srgb, var(--brand-black, #282828) 30%, transparent);
  border-color: var(--brand-primary, #42bdf7);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, transparent);
  color: var(--c2s-text);
}
[data-bs-theme="light"] .crud-page .form-control.rounded-pill {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--c2s-text);
}
.crud-edit-form .form-control,
.crud-edit-form .form-select {
  background: color-mix(in srgb, var(--c2s-bg, #111) 70%, #fff 8%);
  border-color: var(--c2s-border);
  color: var(--c2s-text);
}
.crud-edit-id {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c2s-muted);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}
/*
 * Form switches: indent to align with rounded-pill field text
 * (same optical line as .c2s-field-hint / floating input content).
 * – Offcanvas / stacked: indent each .form-check
 * – Add forms: wrap horizontal switches in .c2s-switch-group
 */
.crud-edit-form .form-check.form-switch,
.app-offcanvas .crud-edit-form .form-check.form-switch {
  padding-left: 3rem;
  margin-left: 0.15rem;
}
.app-main .c2s-apps-add-form .c2s-switch-group {
  /* only optical align with pill text; .form-switch already adds ~2.5em */
  padding-left: 0.5rem;
  margin-left: 0;
}

/* —— Grok floating bot (UI shell; API later) —— */
.c2s-grok-bot {
  --c2s-grok-eye: #111;
  --c2s-grok-fab: 3.85rem;
  --c2s-grok-gap: 1.4rem;
  --c2s-grok-scale: 0.8; /* ~20% smaller while chat closed */
  position: fixed;
  right: 0;
  bottom: 1.35rem;
  z-index: 1085;
  pointer-events: none;
}
.c2s-grok-bot[data-state="open"] {
  --c2s-grok-scale: 1;
}
/* Keep the floating bot above fullscreen blur + chat panel */
body.c2s-grok-fullscreen-open .c2s-grok-bot {
  z-index: 2110;
}
body.c2s-grok-fullscreen-open .c2s-grok-bot__fab {
  position: relative;
  z-index: 2120; /* above backdrop (2090) and chat (2095) inside same stacking context */
}
.c2s-grok-bot__fab {
  pointer-events: auto;
  position: relative;
  right: 0;
  width: var(--c2s-grok-fab);
  height: var(--c2s-grok-fab);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand-white, #fff);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  cursor: pointer;
  overflow: visible;
}
/* Stable hit area – does not move with peek, prevents hover flicker */
.c2s-grok-bot__fab::before {
  content: "";
  position: absolute;
  inset: -10px 0 -10px -14px;
  z-index: -1;
}
.c2s-grok-bot__mark {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.c2s-grok-bot__head {
  transition: opacity 0.3s ease;
}
/* Eyes always visible; look around + blink (x.ai/bot vibe) */
.c2s-grok-bot__eyes {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s ease;
}
.c2s-grok-bot__eye {
  transform-box: fill-box;
  transform-origin: center;
}
.c2s-grok-bot.is-blinking .c2s-grok-bot__eye {
  animation: c2s-grok-blink 0.16s ease-in-out;
}
@keyframes c2s-grok-blink {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.12); }
}
/*
 * Face looks left (SVG flipped). Stay mostly off-screen; only "look" nudges slightly.
 * Hover must NOT change translateX (that caused enter/leave flicker).
 */
.c2s-grok-bot[data-state="edge"] .c2s-grok-bot__fab {
  /* ~16px further left than before so eyes stay readable */
  transform: translateX(calc(62% - 16px)) scale(var(--c2s-grok-scale));
  opacity: 0.88;
}
.c2s-grok-bot[data-state="peek"] .c2s-grok-bot__fab {
  transform: translateX(calc(52% - 16px)) scale(var(--c2s-grok-scale));
  opacity: 0.92;
}
.c2s-grok-bot[data-state="look"] .c2s-grok-bot__fab {
  transform: translateX(calc(40% - 14px)) scale(var(--c2s-grok-scale));
  opacity: 1;
}
.c2s-grok-bot[data-state="open"] .c2s-grok-bot__fab {
  transform: translateX(-0.95rem) scale(var(--c2s-grok-scale));
  opacity: 1;
}
.c2s-grok-bot[data-state="hidden"] .c2s-grok-bot__fab {
  transform: translateX(calc(78% - 12px)) scale(var(--c2s-grok-scale));
  opacity: 0.4;
}
.c2s-grok-bot__fab:hover {
  opacity: 1 !important;
}
.c2s-grok-chat {
  pointer-events: auto;
  position: absolute;
  right: 0.85rem;
  /* clear gap above the fully visible bot */
  bottom: calc(var(--c2s-grok-fab) + var(--c2s-grok-gap));
  width: min(26.5rem, calc(100vw - 1.25rem));
  height: min(34rem, calc(100vh - 9rem));
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 1rem;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease;
  background: color-mix(in srgb, var(--brand-black, #282828) 55%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 48px rgba(0, 0, 0, 0.4);
}

.c2s-grok-chat.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Fullscreen Grok — same blur cover vibe as portal search */
.c2s-grok-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2090;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--brand-black, #0a0c10) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: opacity 0.2s ease;
}
[data-bs-theme="light"] .c2s-grok-chat-backdrop {
  background: rgba(255, 255, 255, 0.72);
}
.c2s-grok-chat-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.c2s-grok-fullscreen-open {
  overflow: hidden;
}
.c2s-grok-chat.is-fullscreen {
  position: fixed;
  z-index: 2095;
  left: 50%;
  right: auto;
  top: min(10vh, 4.5rem);
  bottom: auto;
  width: min(44rem, calc(100vw - 1.5rem));
  height: min(78vh, calc(100vh - 6rem));
  transform: translateX(-50%);
  border-radius: 1.15rem;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  backdrop-filter: none;
}
.c2s-grok-chat.is-fullscreen.is-open {
  transform: translateX(-50%);
}
[data-bs-theme="light"] .c2s-grok-chat.is-fullscreen {
  border-color: rgba(15, 23, 42, 0.14);
  background: transparent !important;
}
.c2s-grok-chat.is-fullscreen .c2s-grok-chat__header,
.c2s-grok-chat.is-fullscreen .c2s-grok-chat__composer,
.c2s-grok-chat.is-fullscreen .c2s-grok-chat__footer {
  border-color: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="light"] .c2s-grok-chat.is-fullscreen .c2s-grok-chat__header,
[data-bs-theme="light"] .c2s-grok-chat.is-fullscreen .c2s-grok-chat__composer,
[data-bs-theme="light"] .c2s-grok-chat.is-fullscreen .c2s-grok-chat__footer {
  border-color: rgba(15, 23, 42, 0.08);
}
.c2s-grok-chat.is-fullscreen .c2s-grok-msg--bot {
  background: color-mix(in srgb, var(--c2s-text, #fff) 6%, transparent);
}
[data-bs-theme="light"] .c2s-grok-chat.is-fullscreen .c2s-grok-msg--bot {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}

.c2s-grok-chat__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.c2s-grok-chat__title {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.c2s-grok-chat__messages {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.c2s-grok-msg {
  max-width: 92%;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.c2s-grok-msg--bot {
  align-self: flex-start;
  background: color-mix(in srgb, var(--brand-black, #111) 40%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.c2s-grok-msg--user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #42bdf7) 45%, transparent);
}
.c2s-grok-msg__link {
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.c2s-grok-msg--bot code {
  font-size: 0.85em;
  padding: 0.05em 0.35em;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--c2s-text, #fff) 10%, transparent);
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
}
.c2s-grok-msg--typing {
  opacity: 0.65;
  font-style: italic;
}
.c2s-grok-chat__composer {
  display: flex;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.c2s-grok-chat__composer .form-control {
  background: color-mix(in srgb, var(--brand-black, #282828) 45%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--c2s-text);
}
.c2s-grok-chat__footer {
  padding: 0.35rem 0.85rem 0.65rem;
  line-height: 1.3;
}
/* Light: keep white bot, dark outline; eyes as stroke only */
[data-bs-theme="light"] .c2s-grok-bot {
  --c2s-grok-eye: transparent;
}
[data-bs-theme="light"] .c2s-grok-bot__fab {
  color: #ffffff;
}
[data-bs-theme="light"] .c2s-grok-bot__head {
  stroke: #1a1a1a;
  stroke-width: 7;
  paint-order: stroke fill;
}
[data-bs-theme="light"] .c2s-grok-bot__eyes {
  fill: none !important;
  stroke: #1a1a1a;
  stroke-width: 3.5;
  stroke-linejoin: round;
}
[data-bs-theme="light"] .c2s-grok-chat {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
[data-bs-theme="light"] .c2s-grok-msg--bot {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.08);
}
[data-bs-theme="light"] .c2s-grok-chat__composer .form-control {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--c2s-text);
}
@media (max-width: 575.98px) {
  .c2s-grok-bot[data-state="edge"] .c2s-grok-bot__fab {
    transform: translateX(calc(55% - 12px)) scale(var(--c2s-grok-scale));
  }
  .c2s-grok-bot[data-state="peek"] .c2s-grok-bot__fab {
    transform: translateX(calc(45% - 12px)) scale(var(--c2s-grok-scale));
  }
  .c2s-grok-bot[data-state="look"] .c2s-grok-bot__fab {
    transform: translateX(calc(38% - 10px)) scale(var(--c2s-grok-scale));
  }
  .c2s-grok-bot[data-state="hidden"] .c2s-grok-bot__fab {
    transform: translateX(calc(70% - 10px)) scale(var(--c2s-grok-scale));
  }
}

/* Global toasts – bottom-right (Plesk-like), all modules */
.c2s-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem; /* leave room for Grok FAB */
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  max-width: min(24rem, calc(100vw - 1.5rem));
  pointer-events: none;
}
.c2s-toast-host .toast {
  pointer-events: auto;
  min-width: 14rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  color: #fff;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 36px rgba(0, 0, 0, 0.35);
}
.c2s-toast-host .toast .toast-body {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.35;
}
.c2s-toast-host .toast .c2s-toast-icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1.2;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
}
.c2s-toast-host .toast .btn-close {
  margin-left: 0.35rem;
  filter: invert(1) opacity(0.85);
}
.c2s-toast-host .toast.c2s-toast-success {
  background: color-mix(in srgb, var(--brand-success, #198754) 78%, #000 12%);
  border-color: color-mix(in srgb, var(--brand-success, #198754) 65%, #fff 20%);
}
.c2s-toast-host .toast.c2s-toast-danger {
  background: color-mix(in srgb, var(--brand-danger, #c91235) 78%, #000 12%);
  border-color: color-mix(in srgb, var(--brand-danger, #c91235) 65%, #fff 20%);
}
.c2s-toast-host .toast.c2s-toast-info {
  background: color-mix(in srgb, var(--brand-info, var(--brand-primary, #42bdf7)) 72%, #0b1e2a 18%);
  border-color: color-mix(in srgb, var(--brand-info, var(--brand-primary, #42bdf7)) 55%, #fff 25%);
}
[data-bs-theme="light"] .c2s-toast-host .toast {
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
[data-bs-theme="light"] .c2s-toast-host .toast .btn-close {
  filter: invert(1) opacity(0.8);
}

/* Mobile logout in offcanvas – danger look, no blue focus ring */
.app-offcanvas .btn-logout-mobile {
  color: #fff;
  background: var(--brand-danger, var(--c2s-danger, #c91235));
  border: 1px solid var(--brand-danger, var(--c2s-danger, #c91235));
}
.app-offcanvas .btn-logout-mobile:hover,
.app-offcanvas .btn-logout-mobile:focus,
.app-offcanvas .btn-logout-mobile:focus-visible,
.app-offcanvas .btn-logout-mobile:active {
  color: color-mix(in srgb, #fff 80%, #000);
  background: var(--brand-danger, var(--c2s-danger, #c91235));
  border-color: var(--brand-danger, var(--c2s-danger, #c91235));
  outline: none !important;
  box-shadow: none !important;
}

/* —— Loading: top progress bar + soft overlay spinner —— */
/* Track = always full viewport. Fill uses real width % (not scaleX).
   Exit = fill translates to the right after width is 100%. */
.c2s-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 100%;
  height: 3px;
  /* Above search overlay (2000) so the bar stays visible while searching */
  z-index: 2100;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  background: transparent;
  transition: opacity 0.12s ease;
}
.c2s-topbar.is-active {
  opacity: 1;
}
.c2s-topbar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  max-width: 100%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(
    90deg,
    var(--brand-primary, #42bdf7),
    color-mix(in srgb, var(--brand-primary, #42bdf7) 40%, #fff)
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, transparent);
  transform: translateX(0);
  will-change: width, transform, opacity;
}
.c2s-topbar.is-trickling .c2s-topbar__fill {
  transition: width 0.28s cubic-bezier(0.15, 0.55, 0.25, 1);
}
.c2s-topbar.is-finishing .c2s-topbar__fill {
  transition: width 0.25s cubic-bezier(0.15, 0.9, 0.2, 1);
}
/* Full fill slides off screen to the right */
.c2s-topbar.is-flicking .c2s-topbar__fill {
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.75, 0.15),
    opacity 0.32s ease 0.05s;
}
.c2s-topbar__peg {
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 100%;
  box-shadow:
    0 0 12px var(--brand-primary, #42bdf7),
    0 0 4px color-mix(in srgb, var(--brand-primary, #42bdf7) 80%, #fff);
  opacity: 0.9;
}

.c2s-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c2s-bg, #111) 72%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.c2s-page-loader.is-visible {
  opacity: 1;
  visibility: visible;
}
.c2s-page-loader[hidden] {
  display: none !important;
}
.c2s-page-loader.is-visible[hidden] {
  display: flex !important;
}
.c2s-page-loader__panel {
  text-align: center;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  background: var(--c2s-glass, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--c2s-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--c2s-shadow, 0 16px 40px rgba(0, 0, 0, 0.35));
  min-width: 10rem;
}

/* Modern dual-ring spinner in brand color (no GIF required) */
.c2s-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  position: relative;
}
.c2s-spinner__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--brand-primary, #42bdf7);
  border-right-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 35%, transparent);
  animation: c2s-spin 0.85s linear infinite;
}
.c2s-spinner__ring--delay {
  inset: 7px;
  border-top-color: var(--brand-secondary, var(--brand-cool, #7ff4f1));
  border-right-color: transparent;
  animation-duration: 1.15s;
  animation-direction: reverse;
}
.c2s-spinner__core {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand-primary, #42bdf7) 45%, transparent);
  animation: c2s-pulse 1.1s ease-in-out infinite;
}
@keyframes c2s-spin {
  to { transform: rotate(360deg); }
}
@keyframes c2s-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50% { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------
 * Lightweight HTML editor (textarea.c2s-html-editor → toolbar + surface)
 * Reusable: translations/add, later products descriptions, etc.
 * ------------------------------------------------------------------ */
.c2s-html-editor {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.c2s-html-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem 0.4rem;
  border-radius: 50rem;
  background: color-mix(in srgb, var(--brand-black, #282828) 35%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="light"] .c2s-html-editor__toolbar {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 23, 42, 0.1);
}
.c2s-html-editor__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--c2s-text, #eee);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.c2s-html-editor__btn:hover,
.c2s-html-editor__btn:focus-visible {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, transparent);
  color: var(--brand-primary, #42bdf7);
  outline: 0;
}
.c2s-html-editor__btn.is-active,
.c2s-html-editor.is-source .c2s-html-editor__btn--source {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 28%, transparent);
  color: var(--brand-primary, #42bdf7);
}
.c2s-html-editor.is-source .c2s-html-editor__btn:not(.c2s-html-editor__btn--source) {
  opacity: 0.35;
  pointer-events: none;
}
/* Beat .app-shell:not(.login-page) .form-control { border-radius: 50rem !important } */
.app-shell:not(.login-page) .c2s-html-editor__surface.form-control,
.app-main .c2s-html-editor__surface.form-control {
  border-radius: 0.75rem !important;
  min-height: 8rem;
  overflow-y: auto;
  white-space: normal;
  line-height: 1.45;
}
.c2s-html-editor__surface:empty:before {
  content: attr(data-placeholder);
  color: var(--c2s-muted, #888);
  pointer-events: none;
}
.c2s-html-editor__surface--source {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  white-space: pre-wrap;
}
.c2s-html-editor__surface a {
  color: var(--brand-cool, #7ff4f1);
  text-decoration: underline;
}
.c2s-html-editor__surface ul {
  margin: 0.25rem 0 0.25rem 1.25rem;
  padding: 0;
}
.c2s-html-editor__input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fullscreen JSON editor (connections namespace, …)
 * Must sit above .app-offcanvas (z-index 1060) — BS modal default is 1055. */
.c2s-json-field .c2s-json-expand {
  color: var(--c2s-muted) !important;
  text-decoration: none !important;
  line-height: 1;
}
.c2s-json-field .c2s-json-expand:hover,
.c2s-json-field .c2s-json-expand:focus-visible {
  color: var(--brand-primary, var(--c2s-primary)) !important;
}
/* JSON + HTML fullscreen editors must sit above .app-offcanvas (1060) */
.c2s-json-editor-modal,
.c2s-html-editor-modal {
  z-index: 1080 !important;
}
body:has(.c2s-json-editor-modal.show) .modal-backdrop,
body:has(.c2s-html-editor-modal.show) .modal-backdrop,
.modal-backdrop.c2s-over-offcanvas-backdrop {
  z-index: 1075 !important;
}
.c2s-json-editor-modal .modal-content,
.c2s-html-editor-modal .modal-content {
  background: color-mix(in srgb, var(--brand-black, #282828) 92%, #000);
  color: var(--c2s-text);
}
[data-bs-theme="light"] .c2s-json-editor-modal .modal-content,
[data-bs-theme="light"] .c2s-html-editor-modal .modal-content {
  background: #f7f8fa;
}
.c2s-json-editor-modal .modal-body,
.c2s-html-editor-modal .modal-body {
  min-height: 0;
}
.c2s-json-editor-modal .c2s-json-editor-area {
  min-height: 60vh;
  resize: vertical;
  font-size: 0.875rem;
  line-height: 1.45;
  border-radius: 0.75rem !important;
  tab-size: 2;
}
.c2s-html-editor-modal .c2s-html-editor {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.c2s-html-editor-modal .c2s-html-editor__surface {
  flex: 1 1 auto;
  min-height: 55vh !important;
  border-radius: 0.75rem !important;
}

/* connections/check status badges */
.c2s-check-badge {
  min-width: 4.5rem;
  justify-content: center;
}

/* Release notes timeline */
.bg-brand-soft {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, transparent) !important;
  color: var(--c2s-text) !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #42bdf7) 35%, transparent);
}
.c2s-notes-item:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Space error pages (403 / 404) — legacy “lost in space” props + zero-g motion */
.error-page {
  overflow: hidden;
}
.error-page .c2s-error-main {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  pointer-events: none;
}
.error-page .c2s-error-main .btn,
.error-page .c2s-error-main form {
  pointer-events: auto;
}
.error-page .c2s-error-card {
  max-width: 34rem;
  width: 100%;
  padding: 1.5rem 0.5rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: transform;
  animation: c2s-error-card-float 12s ease-in-out infinite alternate;
}
.error-page .c2s-error-code {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 20vw, 8rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--c2s-text);
  text-shadow:
    0 0 28px color-mix(in srgb, var(--brand-primary, #42bdf7) 45%, transparent),
    0 0 60px rgba(0, 0, 0, 0.55);
  margin-bottom: 0.5rem;
}
.error-page .c2s-error-oops {
  font-size: 1.2rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
.error-page .c2s-error-lead {
  font-size: 1.05rem;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.error-page .c2s-error-objects {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.error-page .c2s-error-rocket {
  position: absolute;
  top: 72%;
  left: 6%;
  width: 48px;
  height: auto;
  z-index: 4;
  filter: none;
  animation: c2s-rocket-fly 180s linear infinite;
}
.error-page .c2s-error-moon {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 128px;
  height: auto;
  z-index: 1;
  filter: none;
  animation: c2s-drift-moon 110s ease-in-out infinite alternate;
}
.error-page .c2s-error-astronaut-box {
  position: absolute;
  right: 6%;
  bottom: -6%;
  width: min(52vw, 460px);
  z-index: 2;
  animation: c2s-move-astronaut 55s ease-in-out infinite alternate;
}
.error-page .c2s-error-astronaut {
  width: 100%;
  height: auto;
  display: block;
  animation: c2s-rotate-astronaut 180s linear infinite alternate;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
.error-page .c2s-error-glow-stars .c2s-error-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.35;
  animation: c2s-glow-star 2.4s ease-in-out infinite alternate;
}
.error-page .c2s-error-glow-stars .c2s-error-star:nth-child(1) { top: 78%; left: 22%; animation-delay: 0.5s; }
.error-page .c2s-error-glow-stars .c2s-error-star:nth-child(2) { top: 18%; left: 42%; animation-delay: 1.2s; }
.error-page .c2s-error-glow-stars .c2s-error-star:nth-child(3) { top: 28%; left: 70%; animation-delay: 1.8s; }
.error-page .c2s-error-glow-stars .c2s-error-star:nth-child(4) { top: 62%; left: 82%; animation-delay: 0.2s; }
.error-page .c2s-error-glow-stars .c2s-error-star:nth-child(5) { top: 88%; left: 48%; animation-delay: 2.4s; }

/* Nose-up SVG → clockwise ~45° so tip points upper-right along flight path */
@keyframes c2s-rocket-fly {
  0% { transform: translate(0, 0) rotate(40deg); opacity: 0.9; }
  8% { opacity: 1; }
  100% { transform: translate(115vw, -75vh) rotate(46deg); opacity: 0.12; }
}
@keyframes c2s-drift-moon {
  from { transform: translate(0, 0); }
  to { transform: translate(14px, -10px); }
}
@keyframes c2s-move-astronaut {
  from { transform: translate(0, 0); }
  to { transform: translate(-140px, -120px); }
}
@keyframes c2s-rotate-astronaut {
  from { transform: rotate(8deg); }
  to { transform: rotate(-28deg); }
}
@keyframes c2s-glow-star {
  from { opacity: 0.25; transform: scale(1); }
  to { opacity: 1; transform: scale(1.35); }
}
@keyframes c2s-error-card-float {
  from { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  to { transform: translate3d(0, -14px, 0) rotate(0.5deg); }
}

@media (max-width: 767.98px) {
  .error-page .c2s-error-rocket {
    top: 58%;
    width: 40px;
    animation-duration: 220s;
  }
  .error-page .c2s-error-moon {
    top: 10%;
    left: 6%;
    width: 96px;
  }
  .error-page .c2s-error-astronaut-box {
    right: -8%;
    bottom: 8%;
    width: min(78vw, 320px);
  }
  .error-page .c2s-error-lead {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error-page .c2s-error-rocket,
  .error-page .c2s-error-moon,
  .error-page .c2s-error-astronaut-box,
  .error-page .c2s-error-astronaut,
  .error-page .c2s-error-glow-stars .c2s-error-star,
  .error-page .c2s-error-card {
    animation: none !important;
  }
}
.c2s-check-type .c2s-check-update .spinner-grow {
  width: 0.65rem;
  height: 0.65rem;
  vertical-align: -0.05rem;
}

/* bootstrap-select: one shell matching .crud-edit-form .form-select, transparent toggle */
.app-shell .bootstrap-select,
.app-main .bootstrap-select,
.app-offcanvas .bootstrap-select,
.crud-edit-form .bootstrap-select,
.c2s-apps-add-form .bootstrap-select {
  width: 100% !important;
}

.c2s-floating-select {
  position: relative;
}
.c2s-floating-select > .form-label {
  position: absolute;
  z-index: 2;
  top: 0.65rem;
  left: 0.85rem;
  margin: 0;
  padding: 0 0.2rem;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--c2s-muted);
  pointer-events: none;
  background: transparent;
}
/* Match other offcanvas fields — NOT var(--bs-body-bg) (too light on dark glass) */
.c2s-floating-select .bootstrap-select,
.crud-edit-form .c2s-floating-select .bootstrap-select.form-select {
  border: 1px solid var(--c2s-border, var(--bs-border-color)) !important;
  border-radius: 50rem !important;
  background: color-mix(in srgb, var(--c2s-bg, #111) 70%, #fff 8%) !important;
  background-image: none !important; /* kill .form-select chevron */
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.c2s-floating-select .bootstrap-select:hover,
.c2s-floating-select .bootstrap-select:focus-within,
.c2s-floating-select .bootstrap-select.show {
  border-color: var(--brand-primary, var(--c2s-primary, #42bdf7)) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, var(--c2s-primary, #42bdf7)) 25%, transparent) !important;
}
.c2s-floating-select .bootstrap-select > .dropdown-toggle,
.c2s-floating-select .bootstrap-select > .dropdown-toggle.btn,
.c2s-floating-select .bootstrap-select > .dropdown-toggle.c2s-select-toggle,
.crud-edit-form .c2s-floating-select .bootstrap-select > .dropdown-toggle.btn {
  --bs-btn-color: var(--c2s-text, var(--bs-body-color));
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--c2s-text, var(--bs-body-color));
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--c2s-text, var(--bs-body-color));
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: transparent;
  width: 100% !important;
  min-height: calc(3.5rem + 2px);
  padding: 1.35rem 2.25rem 0.45rem 0.75rem !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  text-align: left !important;
  border: 0 !important;
  border-radius: 50rem !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--c2s-text, var(--bs-body-color)) !important;
}
.c2s-floating-select .bootstrap-select > .dropdown-toggle:hover,
.c2s-floating-select .bootstrap-select > .dropdown-toggle:focus,
.c2s-floating-select .bootstrap-select > .dropdown-toggle:active,
.c2s-floating-select .bootstrap-select > .dropdown-toggle.show,
.c2s-floating-select .bootstrap-select > .dropdown-toggle:focus-visible,
.crud-edit-form .c2s-floating-select .bootstrap-select > .dropdown-toggle:hover,
.crud-edit-form .c2s-floating-select .bootstrap-select > .dropdown-toggle:focus,
.crud-edit-form .c2s-floating-select .bootstrap-select > .dropdown-toggle.show {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--c2s-text, var(--bs-body-color)) !important;
}
.c2s-floating-select .bootstrap-select .filter-option,
.c2s-floating-select .bootstrap-select .filter-option-inner,
.c2s-floating-select .bootstrap-select .filter-option-inner-inner {
  color: var(--c2s-text, var(--bs-body-color)) !important;
  background: transparent !important;
  background-color: transparent !important;
}
.c2s-floating-select .bootstrap-select .dropdown-toggle .bs-caret,
.c2s-floating-select .bootstrap-select .dropdown-toggle::after {
  right: 0.85rem;
}
/* Allow dropdown + search inside offcanvas */
.app-offcanvas.crud-edit-offcanvas,
.app-offcanvas.crud-edit-offcanvas .offcanvas-body.overflow-visible {
  overflow: visible !important;
}

.app-shell .bootstrap-select .dropdown-menu,
.app-main .bootstrap-select .dropdown-menu,
.app-offcanvas .bootstrap-select .dropdown-menu,
.crud-edit-form .bootstrap-select .dropdown-menu,
.c2s-apps-add-form .bootstrap-select .dropdown-menu,
body > .bootstrap-select .dropdown-menu {
  z-index: 2000 !important;
  width: auto !important;
  min-width: 12rem;
  max-width: min(22rem, 92vw);
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--c2s-text, #fff) 18%, transparent);
  background: color-mix(in srgb, var(--brand-black, #282828) 94%, #000) !important;
  backdrop-filter: blur(10px);
  padding: 0.35rem;
}
[data-bs-theme="light"] .bootstrap-select .dropdown-menu {
  background: #f7f8fa !important;
  border-color: rgba(0, 0, 0, 0.12);
}
.app-shell .bootstrap-select .dropdown-menu .bs-searchbox .form-control,
.app-offcanvas .bootstrap-select .dropdown-menu .bs-searchbox .form-control,
body > .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
  border-radius: 50rem !important;
  padding-left: 0.75rem;
  background: transparent;
  color: var(--c2s-text, var(--bs-body-color));
}
.app-shell .bootstrap-select .dropdown-menu .dropdown-item,
.app-offcanvas .bootstrap-select .dropdown-menu .dropdown-item,
body > .bootstrap-select .dropdown-menu .dropdown-item {
  border-radius: 0.5rem;
  color: var(--c2s-muted, #a6a6a6);
}
.app-shell .bootstrap-select .dropdown-menu .dropdown-item:hover,
.app-shell .bootstrap-select .dropdown-menu .dropdown-item:focus,
.app-shell .bootstrap-select .dropdown-menu .dropdown-item.active,
.app-shell .bootstrap-select .dropdown-menu .dropdown-item.selected,
.app-offcanvas .bootstrap-select .dropdown-menu .dropdown-item:hover,
.app-offcanvas .bootstrap-select .dropdown-menu .dropdown-item.active,
.app-offcanvas .bootstrap-select .dropdown-menu .dropdown-item.selected,
body > .bootstrap-select .dropdown-menu .dropdown-item:hover,
body > .bootstrap-select .dropdown-menu .dropdown-item.active,
body > .bootstrap-select .dropdown-menu .dropdown-item.selected {
  color: var(--c2s-text, #e6e6e6);
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 16%, transparent);
}
.app-shell .bootstrap-select .dropdown-menu .bs-actionsbox .btn,
.app-offcanvas .bootstrap-select .dropdown-menu .bs-actionsbox .btn,
body > .bootstrap-select .dropdown-menu .bs-actionsbox .btn {
  border-radius: 50rem;
  font-size: 0.8rem;
}

/* User profile: page ACL tree — indent only children */
.c2s-user-page--child {
  margin-left: 1.25rem;
}
.c2s-user-pages .c2s-user-page--child .form-check-label {
  font-weight: 400;
}

/* ── Internal messages (iMessage-like) ── */
.c2s-msg-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: 0;
  min-height: min(70vh, 40rem);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--brand-black, #1a1a1a) 55%, transparent);
}
[data-bs-theme="light"] .c2s-msg-layout {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.55);
}
.c2s-msg-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 0;
}
[data-bs-theme="light"] .c2s-msg-sidebar {
  border-right-color: rgba(15, 23, 42, 0.08);
}
.c2s-msg-sidebar-toolbar {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.c2s-msg-thread-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.c2s-msg-thread-item {
  display: flex;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--c2s-text);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}
.c2s-msg-thread-item:hover,
.c2s-msg-thread-item.is-active {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 14%, transparent);
}
.c2s-msg-thread-item.is-unread .c2s-msg-thread-title {
  font-weight: 700;
}
.c2s-msg-thread-avatar {
  position: relative;
  flex-shrink: 0;
}
.c2s-msg-unread-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brand-danger, #ff5c5c);
  box-shadow: 0 0 0 2px var(--brand-black, #1a1a1a);
}
.c2s-msg-thread-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.c2s-msg-thread-title {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c2s-msg-thread-preview {
  font-size: 0.78rem;
  color: var(--c2s-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c2s-msg-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.c2s-msg-main-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.c2s-msg-conversation {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.c2s-msg-chat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.c2s-msg-chat-avatars {
  display: flex;
  margin-right: 0.25rem;
}
.c2s-msg-chat-avatars .c2s-msg-avatar {
  margin-left: -0.35rem;
  border: 2px solid var(--brand-black, #1a1a1a);
}
.c2s-msg-chat-avatars .c2s-msg-avatar:first-child {
  margin-left: 0;
}
.c2s-msg-chat-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.c2s-msg-bubbles {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 12rem;
}
.c2s-msg-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  max-width: min(85%, 32rem);
}
.c2s-msg-bubble-row.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.c2s-msg-bubble {
  border-radius: 1.15rem;
  padding: 0.45rem 0.8rem 0.35rem;
  background: color-mix(in srgb, var(--c2s-text, #fff) 10%, transparent);
  max-width: 100%;
}
.c2s-msg-bubble-row.is-mine .c2s-msg-bubble {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, #1a6fa8);
  color: #fff;
}
.c2s-msg-bubble-name {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.75;
  margin-bottom: 0.1rem;
}
.c2s-msg-bubble-text {
  font-size: 0.92rem;
  line-height: 1.35;
  word-break: break-word;
}
.c2s-msg-bubble-time {
  font-size: 0.65rem;
  opacity: 0.55;
  text-align: right;
  margin-top: 0.15rem;
}
.c2s-msg-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.c2s-msg-composer-input {
  border-radius: 1.25rem !important;
  resize: none;
  max-height: 8rem;
  background: color-mix(in srgb, var(--c2s-text, #fff) 6%, transparent) !important;
}
.c2s-msg-send-btn {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c2s-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.c2s-msg-avatar--fallback {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 30%, #333);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.c2s-msg-suggest-item {
  display: flex;
  align-items: center;
  background: transparent;
  color: var(--c2s-text);
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.c2s-msg-sel-chip .btn-close {
  font-size: 0.55rem;
  vertical-align: middle;
}
.c2s-msg-compose-offcanvas {
  --bs-offcanvas-width: min(28rem, 100vw);
}

/* Header messages dropdown (mirrors quicklinks) */
.app-header .c2s-messages-toggle {
  color: var(--c2s-text);
  line-height: 1;
  padding: 0.15rem 0.35rem;
  opacity: 0.85;
  position: relative;
}
.app-header .c2s-messages-toggle:hover,
.app-header .c2s-messages-toggle:focus-visible,
.app-header .c2s-messages-toggle.show {
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  opacity: 1;
  outline: none;
}
.app-header .c2s-messages-badge {
  position: absolute;
  top: -0.1rem;
  right: -0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05rem;
  border-radius: 999px;
  background: var(--brand-danger, #e35d5d);
  color: #fff;
  text-align: center;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-black, #282828) 80%, transparent);
}
.app-header .c2s-messages-menu {
  --bs-dropdown-spacer: 0.75rem;
  min-width: 18rem;
  max-width: min(24rem, 92vw);
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  margin-top: 0.35rem !important;
  padding: 0.35rem 0 0.5rem;
  border-radius: 0.85rem !important;
  background: color-mix(in srgb, var(--brand-black, #282828) 72%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.35);
}
.app-header .c2s-messages-title {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c2s-muted);
}
.app-header .c2s-messages-menu .dropdown-item {
  display: block;
  color: var(--c2s-text);
  border-radius: 0.55rem;
  margin: 0 0.35rem;
  width: auto;
  white-space: normal;
}
.app-header .c2s-messages-menu .dropdown-item:hover,
.app-header .c2s-messages-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 16%, transparent);
  color: var(--c2s-text);
}
.app-header .c2s-messages-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 0.4rem 0.75rem;
}
.app-header .c2s-msg-preview-title {
  font-weight: 600;
  font-size: 0.88rem;
}
.app-header .c2s-msg-preview-body {
  font-size: 0.78rem;
  color: var(--c2s-muted);
}
[data-bs-theme="light"] .app-header .c2s-messages-menu {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}
[data-bs-theme="light"] .app-header .c2s-messages-menu .dropdown-divider {
  border-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 767.98px) {
  .c2s-msg-layout {
    grid-template-columns: 1fr;
    min-height: min(75vh, 36rem);
  }
  .c2s-msg-main {
    display: none;
  }
  .c2s-msg--chat-open .c2s-msg-sidebar {
    display: none;
  }
  .c2s-msg--chat-open .c2s-msg-main {
    display: flex;
  }
}

/* Messages page: chat fills the glass card */
.crud-page[data-crud-resource="messages"] .card.glass > .card-body {
  padding: 0 !important;
}
.crud-page[data-crud-resource="messages"] .c2s-msg-layout {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: min(72vh, 42rem);
}

/* Messages search (toolbar) */
.c2s-msg-search {
  position: relative;
  display: flex;
  align-items: center;
}
.c2s-msg-search-icon {
  position: absolute;
  left: 0.7rem;
  z-index: 1;
  font-size: 0.85rem;
  color: var(--c2s-muted);
  pointer-events: none;
  opacity: 0.75;
}
.c2s-msg-search-input {
  padding-left: 2rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: color-mix(in srgb, var(--c2s-text, #fff) 6%, transparent) !important;
  color: var(--c2s-text) !important;
  box-shadow: none !important;
}
.c2s-msg-search-input::placeholder {
  color: var(--c2s-muted);
  opacity: 0.8;
}
.c2s-msg-search-input:focus {
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, transparent) !important;
  background: color-mix(in srgb, var(--c2s-text, #fff) 9%, transparent) !important;
}
[data-bs-theme="light"] .c2s-msg-search-input {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1a1a1a !important;
}
.c2s-msg-new-btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0 !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c2s-msg-compose-search {
  border-radius: 0.75rem !important;
}

/* User profile: xl split — fields | avatar + switches */
@media (min-width: 1200px) {
  .c2s-user-profile-aside {
    position: sticky;
    top: 5.5rem;
  }
}
.c2s-user-profile-aside #userAvatarMount {
  margin-bottom: 0.25rem;
}

/* Module hub (parent menu landing) */
.c2s-hub-card {
  color: var(--c2s-text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.c2s-hub-card:hover {
  color: var(--c2s-text);
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 45%, transparent) !important;
  transform: translateY(-1px);
}
.c2s-hub-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 16%, transparent);
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  flex-shrink: 0;
}

/* —— Left filter panel (HUD theme-panel vibe, always left) —— */
.c2s-filter-toggle {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1050;
  transform: translateY(-50%);
  width: 2.55rem;
  height: 4rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #42bdf7) 45%, rgba(255, 255, 255, 0.18));
  border-left: 0;
  border-radius: 0 0.95rem 0.95rem 0;
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, var(--brand-black, #282828) 78%);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 32px rgba(0, 0, 0, 0.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, width 0.15s ease;
}
.c2s-filter-toggle .bi {
  font-size: 1.2rem;
  line-height: 1;
}
.c2s-filter-toggle:hover,
.c2s-filter-toggle:focus-visible,
.c2s-filter-toggle[aria-expanded="true"] {
  width: 2.85rem;
  color: #fff;
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, var(--brand-black, #282828) 45%);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px color-mix(in srgb, var(--brand-primary, #42bdf7) 40%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.42);
}
.c2s-filter-toggle.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 48%, var(--brand-black, #282828) 52%);
}
.c2s-filter-toggle__dot {
  position: absolute;
  top: 0.5rem;
  right: 0.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brand-danger, #c91235);
  border: 0;
  box-shadow: none;
}
[data-bs-theme="light"] .c2s-filter-toggle {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 18%, #ffffff 82%);
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 35%, rgba(15, 23, 42, 0.12));
  color: var(--brand-primary, #0d6efd);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
[data-bs-theme="light"] .c2s-filter-toggle:hover,
[data-bs-theme="light"] .c2s-filter-toggle:focus-visible,
[data-bs-theme="light"] .c2s-filter-toggle[aria-expanded="true"],
[data-bs-theme="light"] .c2s-filter-toggle.is-active {
  color: #fff;
  background: var(--brand-primary, #42bdf7);
}

.c2s-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.c2s-filter-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.c2s-filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1060;
  width: min(20.5rem, 92vw);
  height: 100vh;
  height: 100dvh;
  transform: translateX(-105%);
  transition: transform 0.22s ease;
  pointer-events: none;
}
.c2s-filter-panel.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.c2s-filter-panel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: color-mix(in srgb, var(--brand-black, #282828) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    12px 0 40px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="light"] .c2s-filter-panel__inner {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: rgba(15, 23, 42, 0.1);
  box-shadow: 12px 0 36px rgba(15, 23, 42, 0.12);
}

.c2s-filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-bs-theme="light"] .c2s-filter-panel__header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
.c2s-filter-panel__title {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--c2s-text);
}
.c2s-filter-panel__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.c2s-filter-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.c2s-filter-panel__footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-bs-theme="light"] .c2s-filter-panel__footer {
  border-top-color: rgba(15, 23, 42, 0.08);
}
.c2s-filter-panel__body .form-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c2s-muted);
  margin-bottom: 0.35rem;
}
.c2s-filter-panel__body .form-control,
.c2s-filter-panel__body .form-select {
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--c2s-text, #fff) 6%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--c2s-text);
}
[data-bs-theme="light"] .c2s-filter-panel__body .form-control,
[data-bs-theme="light"] .c2s-filter-panel__body .form-select {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
  color: #1a1a1a;
}
.c2s-filter-panel__section {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.c2s-filter-hint {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--c2s-muted, #9aa4b2);
}

/* Active filter chips above tables */
.c2s-filter-badges__label {
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}
.c2s-filter-badge {
  font-weight: 500;
  font-size: 0.78rem;
  padding: 0.4em 0.75em;
  max-width: 100%;
}
.c2s-filter-badge__value {
  font-weight: 600;
  margin-left: 0.2em;
}
.c2s-filter-badge--open {
  cursor: pointer;
}
.c2s-filter-badge--open:hover,
.c2s-filter-badge--open:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.c2s-filter-badge--reset {
  opacity: 0.85;
}
.c2s-filter-badge--reset:hover {
  opacity: 1;
}
/* Prefer brand tones for info/warning badges in filter chips */
.c2s-filter-badges .text-bg-info {
  background-color: color-mix(in srgb, var(--brand-info, var(--brand-cool, #7ff4f1)) 82%, #000) !important;
  color: #041016 !important;
}
[data-bs-theme="dark"] .c2s-filter-badges .text-bg-info {
  background-color: color-mix(in srgb, var(--brand-info, var(--brand-cool, #7ff4f1)) 35%, transparent) !important;
  color: var(--brand-info, var(--brand-cool, #7ff4f1)) !important;
  border: 1px solid color-mix(in srgb, var(--brand-info, var(--brand-cool, #7ff4f1)) 45%, transparent);
}
.c2s-filter-badges .text-bg-warning {
  background-color: color-mix(in srgb, var(--brand-yellow, #f1c400) 88%, #000) !important;
  color: #1a1400 !important;
}
[data-bs-theme="dark"] .c2s-filter-badges .text-bg-warning {
  background-color: color-mix(in srgb, var(--brand-yellow, #f1c400) 28%, transparent) !important;
  color: var(--brand-yellow, #f1c400) !important;
  border: 1px solid color-mix(in srgb, var(--brand-yellow, #f1c400) 40%, transparent);
}

/* User-log: impersonation rows – soft warning tint (more transparent than .table-warning) */
.c2s-log-impersonation > * {
  background-color: color-mix(in srgb, var(--brand-yellow, #f1c400) 14%, transparent) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand-yellow, #f1c400) 55%, transparent);
}
[data-bs-theme="light"] .c2s-log-impersonation > * {
  background-color: color-mix(in srgb, var(--brand-yellow, #f1c400) 10%, transparent) !important;
}
.c2s-log-impersonation:hover > * {
  background-color: color-mix(in srgb, var(--brand-yellow, #f1c400) 22%, transparent) !important;
}
[data-bs-theme="light"] .c2s-log-impersonation:hover > * {
  background-color: color-mix(in srgb, var(--brand-yellow, #f1c400) 16%, transparent) !important;
}
.c2s-filter-panel__section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
[data-bs-theme="light"] .c2s-filter-panel__section {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

@media (max-width: 575.98px) {
  .c2s-filter-panel {
    width: min(100vw, 22rem);
  }
}

/* —— Date range picker (filter panel + shared) ——
   Plugin CSS loads after app.css in page head → !important where needed. */
.c2s-daterange {
  width: 100%;
}
.c2s-daterange .input-group-text,
.c2s-daterange__icon {
  border-radius: 0.65rem 0 0 0.65rem;
  background: color-mix(in srgb, var(--c2s-text, #fff) 6%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--brand-info, var(--brand-cool, #7ff4f1));
  padding: 0.35rem 0.65rem;
}
.c2s-daterange__icon .bi {
  color: inherit !important;
  font-size: 0.95rem;
  line-height: 1;
}
[data-bs-theme="light"] .c2s-daterange .input-group-text,
[data-bs-theme="light"] .c2s-daterange__icon,
[data-bs-theme="light"] .c2s-filter-panel__body .c2s-daterange .input-group-text,
[data-bs-theme="light"] .c2s-filter-panel__body .c2s-daterange__icon {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: var(--brand-primary, #42bdf7) !important;
}
[data-bs-theme="light"] .c2s-daterange .form-control,
[data-bs-theme="light"] .c2s-filter-panel__body .c2s-daterange .form-control {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}
.c2s-daterange .form-control {
  border-radius: 0 0.65rem 0.65rem 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.c2s-daterange .form-control:focus {
  border-color: color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, transparent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, transparent);
}

.daterangepicker {
  z-index: 1085 !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
  color: var(--c2s-text, #e8eefc) !important;
  background: color-mix(in srgb, var(--brand-black, #282828) 94%, #000) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 56px rgba(0, 0, 0, 0.45) !important;
  padding: 0.35rem !important;
  margin-top: 0.45rem !important;
}
[data-bs-theme="light"] .daterangepicker {
  color: #0f172a !important;
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
}
.daterangepicker:before,
.daterangepicker:after {
  display: none !important;
}

.daterangepicker .ranges {
  margin: 0 !important;
  padding: 0.35rem !important;
  float: none !important;
  min-width: 11.5rem;
}
.daterangepicker .ranges ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.daterangepicker .ranges li {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 0.45rem 0.75rem !important;
  margin: 0.15rem 0 !important;
  border-radius: 999px !important;
  color: var(--c2s-text, #e8eefc) !important;
  background: transparent !important;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-bs-theme="light"] .daterangepicker .ranges li {
  color: #334155 !important;
}
.daterangepicker .ranges li:hover {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, transparent) !important;
  color: #fff !important;
}
[data-bs-theme="light"] .daterangepicker .ranges li:hover {
  color: var(--brand-primary, #42bdf7) !important;
}
.daterangepicker .ranges li.active,
.daterangepicker .ranges li.active:hover {
  background: var(--brand-primary, #42bdf7) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.daterangepicker .drp-calendar {
  max-width: none;
}
.daterangepicker .calendar-table {
  background: transparent !important;
  border: 0 !important;
}
.daterangepicker .calendar-table table {
  background: transparent !important;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  color: inherit !important;
  border-radius: 0.55rem;
  min-width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.8rem;
  background: transparent !important;
}
.daterangepicker .calendar-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c2s-muted, #9aa4b2) !important;
  font-weight: 600;
}
.daterangepicker .calendar-table .month {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c2s-text, #e8eefc) !important;
}
[data-bs-theme="light"] .daterangepicker .calendar-table .month {
  color: #0f172a !important;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 22%, transparent) !important;
  color: inherit !important;
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background: transparent !important;
  color: color-mix(in srgb, var(--c2s-muted, #9aa4b2) 55%, transparent) !important;
}
.daterangepicker td.in-range {
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 18%, transparent) !important;
  color: inherit !important;
  border-radius: 0;
}
.daterangepicker td.start-date {
  border-radius: 0.55rem 0 0 0.55rem;
}
.daterangepicker td.end-date {
  border-radius: 0 0.55rem 0.55rem 0;
}
.daterangepicker td.start-date.end-date {
  border-radius: 0.55rem;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--brand-primary, #42bdf7) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  border-color: var(--c2s-muted, #9aa4b2) !important;
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  background: color-mix(in srgb, var(--c2s-text, #fff) 8%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.45rem !important;
  color: inherit !important;
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
}
[data-bs-theme="light"] .daterangepicker select.monthselect,
[data-bs-theme="light"] .daterangepicker select.yearselect {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}

.daterangepicker .drp-buttons {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0.65rem 0.75rem !important;
}
[data-bs-theme="light"] .daterangepicker .drp-buttons {
  border-top-color: rgba(15, 23, 42, 0.08) !important;
}
.daterangepicker .drp-selected {
  font-size: 0.75rem !important;
  color: var(--c2s-muted, #9aa4b2) !important;
  font-variant-numeric: tabular-nums;
}
.daterangepicker .drp-buttons .btn {
  font-size: 0.78rem !important;
  padding: 0.3rem 0.85rem !important;
  border-radius: 999px !important;
}
.daterangepicker .drp-buttons .cancelBtn {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--c2s-muted, #9aa4b2) !important;
  background: transparent !important;
}
[data-bs-theme="light"] .daterangepicker .drp-buttons .cancelBtn {
  border-color: rgba(15, 23, 42, 0.18) !important;
  color: #475569 !important;
  background: #fff !important;
}
.daterangepicker .drp-buttons .applyBtn {
  background: var(--brand-primary, #42bdf7) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.daterangepicker .drp-buttons .applyBtn:disabled {
  opacity: 0.45;
}

/* Ranges-only popup (no calendars): compact card next to filter */
.daterangepicker:not(.show-calendar) {
  min-width: 12.5rem;
}
.daterangepicker:not(.show-calendar) .ranges {
  float: none !important;
  display: block !important;
}
.daterangepicker:not(.show-calendar) .drp-calendar {
  display: none !important;
}

/* Mobile: prevent iOS zoom-on-focus (needs ≥16px on inputs) */
@media (max-width: 991.98px) {
  .app-shell input,
  .app-shell select,
  .app-shell textarea,
  .app-shell .form-control,
  .app-shell .form-select,
  .app-shell .form-control-sm,
  .app-shell .form-select-sm,
  .c2s-filter-panel .form-control,
  .c2s-filter-panel .form-select,
  .c2s-filter-panel .form-control-sm,
  .c2s-filter-panel .form-select-sm,
  .offcanvas .form-control,
  .offcanvas .form-select,
  .offcanvas .form-control-sm,
  .offcanvas .form-select-sm {
    font-size: 16px !important;
  }
}

/* —— VPN stage: network mesh behind boards + table —— */
.card.glass.c2s-vpn-stage {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand-black, #0b0b0b) 22%, transparent) !important;
  box-shadow: none !important;
}
.card.glass.c2s-vpn-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  background-color: var(--brand-primary, #42bdf7);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='640' viewBox='0 0 900 640'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M40 80L140 160L260 60L390 200L520 90L660 180L820 100'/%3E%3Cpath d='M70 420L190 300L330 450L470 280L610 400L760 260L860 380'/%3E%3Cpath d='M140 160L190 300M260 60L330 450M390 200L470 280M520 90L610 400M660 180L760 260'/%3E%3Cpath d='M120 240L250 220L380 320L510 180L640 300L780 220'/%3E%3Cpath d='M80 520L220 480L360 560L500 470L650 540L800 490'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='40' cy='80' r='2.6'/%3E%3Ccircle cx='140' cy='160' r='2.6'/%3E%3Ccircle cx='260' cy='60' r='2.6'/%3E%3Ccircle cx='390' cy='200' r='2.6'/%3E%3Ccircle cx='520' cy='90' r='2.6'/%3E%3Ccircle cx='660' cy='180' r='2.6'/%3E%3Ccircle cx='820' cy='100' r='2.6'/%3E%3Ccircle cx='70' cy='420' r='2.6'/%3E%3Ccircle cx='190' cy='300' r='2.6'/%3E%3Ccircle cx='330' cy='450' r='2.6'/%3E%3Ccircle cx='470' cy='280' r='2.6'/%3E%3Ccircle cx='610' cy='400' r='2.6'/%3E%3Ccircle cx='760' cy='260' r='2.6'/%3E%3Ccircle cx='250' cy='220' r='2.2'/%3E%3Ccircle cx='380' cy='320' r='2.2'/%3E%3Ccircle cx='510' cy='180' r='2.2'/%3E%3Ccircle cx='640' cy='300' r='2.2'/%3E%3Ccircle cx='220' cy='480' r='2.2'/%3E%3Ccircle cx='500' cy='470' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='640' viewBox='0 0 900 640'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M40 80L140 160L260 60L390 200L520 90L660 180L820 100'/%3E%3Cpath d='M70 420L190 300L330 450L470 280L610 400L760 260L860 380'/%3E%3Cpath d='M140 160L190 300M260 60L330 450M390 200L470 280M520 90L610 400M660 180L760 260'/%3E%3Cpath d='M120 240L250 220L380 320L510 180L640 300L780 220'/%3E%3Cpath d='M80 520L220 480L360 560L500 470L650 540L800 490'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='40' cy='80' r='2.6'/%3E%3Ccircle cx='140' cy='160' r='2.6'/%3E%3Ccircle cx='260' cy='60' r='2.6'/%3E%3Ccircle cx='390' cy='200' r='2.6'/%3E%3Ccircle cx='520' cy='90' r='2.6'/%3E%3Ccircle cx='660' cy='180' r='2.6'/%3E%3Ccircle cx='820' cy='100' r='2.6'/%3E%3Ccircle cx='70' cy='420' r='2.6'/%3E%3Ccircle cx='190' cy='300' r='2.6'/%3E%3Ccircle cx='330' cy='450' r='2.6'/%3E%3Ccircle cx='470' cy='280' r='2.6'/%3E%3Ccircle cx='610' cy='400' r='2.6'/%3E%3Ccircle cx='760' cy='260' r='2.6'/%3E%3Ccircle cx='250' cy='220' r='2.2'/%3E%3Ccircle cx='380' cy='320' r='2.2'/%3E%3Ccircle cx='510' cy='180' r='2.2'/%3E%3Ccircle cx='640' cy='300' r='2.2'/%3E%3Ccircle cx='220' cy='480' r='2.2'/%3E%3Ccircle cx='500' cy='470' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  /* fade edges */
  opacity: 0.18;
}
.card.glass.c2s-vpn-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 35%, transparent 20%, color-mix(in srgb, var(--c2s-bg, #0b0b0b) 88%, transparent) 78%);
}
[data-bs-theme="light"] .card.glass.c2s-vpn-stage {
  background: rgba(255, 255, 255, 0.35) !important;
}
[data-bs-theme="light"] .card.glass.c2s-vpn-stage::before {
  opacity: 0.12;
}
[data-bs-theme="light"] .card.glass.c2s-vpn-stage::after {
  background: radial-gradient(ellipse at 50% 35%, transparent 20%, rgba(255, 255, 255, 0.75) 80%);
}
.card.glass.c2s-vpn-stage > .card-body {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

/* Transparent board panels (mesh shows through) */
.c2s-vpn-panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0.15rem 0.1rem;
}
.c2s-vpn-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.15rem;
  margin-bottom: 0.2rem;
}
.c2s-vpn-panel__eyebrow {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--c2s-text) 55%, transparent);
  line-height: 1.15;
}
.c2s-vpn-panel__title {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-height: 1.5rem;
  margin-bottom: 0.65rem;
  color: var(--c2s-text);
}
.c2s-vpn-panel__title--spacer {
  visibility: hidden;
  user-select: none;
}
.c2s-vpn-chassis__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c2s-text) 65%, transparent);
  line-height: 1.15;
  flex: 0 0 auto;
}
.c2s-vpn-chassis__meta--spacer {
  visibility: hidden;
  min-width: 4.5rem;
}
.c2s-vpn-live-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 7px rgba(46, 204, 113, 0.95);
  animation-name: c2s-vpn-hdd-flash;
  animation-duration: 0.95s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.c2s-vpn-chassis__empty {
  text-align: left;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--c2s-text) 55%, transparent);
}
.c2s-vpn-split {
  display: grid;
  grid-template-columns: minmax(18rem, 1.35fr) minmax(0, 1fr);
  gap: 0.75rem 1.1rem;
  align-items: start;
  justify-items: stretch;
  min-height: 0;
}
.c2s-vpn-split--clients {
  grid-template-columns: 11.5rem minmax(0, 1fr);
}
@media (max-width: 575.98px) {
  .c2s-vpn-split,
  .c2s-vpn-split--clients {
    grid-template-columns: 1fr;
  }
}
.c2s-vpn-split__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-self: start;
  gap: 0.45rem;
  text-align: left;
  min-width: 0;
  padding-top: 0;
}
.c2s-vpn-split--clients .c2s-vpn-split__side {
  width: 11.5rem;
  max-width: 11.5rem;
}
.c2s-vpn-kvgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.35rem;
  width: 100%;
  align-items: start;
}
.c2s-vpn-kvgrid__col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
@media (max-width: 419.98px) {
  .c2s-vpn-kvgrid {
    grid-template-columns: 1fr;
  }
}
.c2s-vpn-split__chart {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  align-self: start;
}
.c2s-vpn-line-wrap,
.c2s-vpn-donut-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 130px;
  max-height: 130px;
  min-height: 130px;
}
/* Donut stays compact top-right; line uses full cell width (legend inside left) */
.c2s-vpn-donut-wrap {
  max-width: 130px;
  margin-left: auto;
}
.c2s-vpn-donut-wrap canvas {
  position: relative;
  z-index: 2;
}
.c2s-vpn-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.c2s-vpn-donut-center__value {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c2s-text);
}
.c2s-vpn-donut-center__label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c2s-text) 55%, transparent);
  margin-top: 0.2rem;
}
/* Label …… Value (leader dots), values column-aligned on the right */
.c2s-vpn-kv {
  display: grid;
  grid-template-columns: auto minmax(0.75rem, 1fr) auto;
  align-items: baseline;
  column-gap: 0.35rem;
  width: 100%;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.c2s-vpn-kv__label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  opacity: 0.55;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
.c2s-vpn-kv__dots {
  border-bottom: 1px dotted color-mix(in srgb, var(--c2s-text) 28%, transparent);
  transform: translateY(-0.28em);
  min-width: 0.5rem;
}
.c2s-vpn-kv__value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--c2s-text);
  white-space: nowrap;
  text-align: right;
}
.c2s-vpn-legend__swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.c2s-vpn-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  vertical-align: middle;
  flex: 0 0 auto;
}
.c2s-vpn-dot--on {
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.9);
  animation-name: c2s-vpn-hdd-flash;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.c2s-vpn-dot--off {
  background: #e74c3c;
  opacity: 0.85;
}

/* VPN client detail (right of table) */
.c2s-vpn-detail {
  position: sticky;
  top: 5.5rem;
  min-height: 12rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--brand-black, #111) 18%, transparent);
}
[data-bs-theme="light"] .c2s-vpn-detail {
  background: rgba(255, 255, 255, 0.4);
}
.c2s-vpn-detail__empty {
  padding: 1.5rem 0.25rem;
}
.c2s-vpn-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.c2s-vpn-detail__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.c2s-vpn-detail__name {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.15;
  margin: 0;
}
.c2s-vpn-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}
.c2s-vpn-detail__form .form-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.c2s-vpn-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
#vpnClientsTable tbody tr {
  cursor: pointer;
}
#vpnClientsTable tbody tr.is-selected {
  outline: 1px solid color-mix(in srgb, var(--brand-primary, #42bdf7) 55%, transparent);
  background: color-mix(in srgb, var(--brand-primary, #42bdf7) 12%, transparent);
}
.c2s-vpn-copy {
  color: color-mix(in srgb, var(--c2s-text) 55%, transparent);
  line-height: 1;
  vertical-align: baseline;
}
.c2s-vpn-copy:hover,
.c2s-vpn-copy.is-copied {
  color: var(--brand-primary, #42bdf7);
}
.c2s-vpn-detail__name .c2s-vpn-copy {
  font-size: 0.95rem;
}
.c2s-vpn-detail.is-saving {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.15s ease;
}