/* Tech-forward font: Sora */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

/* Correct CSS variable scope */
:root {
  --brand-cyan-contrast: #0f2b2c;
  --brand-cyan-50: rgba(80, 201, 206, 0.5);
  --brand-cyan-30: rgba(80, 201, 206, 0.3);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(255, 255, 255, 0.08) inset;
  --radius-lg: 16px;
  --radius-md: 12px;
  --navbar-height: 64px;
  --sidebar-width: 280px;

  --brand-primary: #0F2628;
  /* placeholder: primary brand/dark */
  --brand-secondary: #0C1D1F;
  /* placeholder */
  --brand-accent-cyan: #50C9CE;
  /* keep cyan accent unless brand provides a different cyan */
  --text-primary: #F6F8F9;
  /* default white text */
  --text-secondary: rgba(246, 248, 249, 0.78);
  --surface-1: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.12);
  --border-color: rgba(255, 255, 255, 0.28);
  --brand-cyan: var(--brand-accent-cyan);
  --icon-color: var(--brand-accent-cyan);
  --icon-color-plusminus: var(--text-primary);
  --glass-bg: var(--surface-1);
  --glass-bg-strong: var(--surface-2);
  --glass-border: var(--border-color);
  --brand-accent: var(--brand-cyan);
}

html,
body {
  background:
    /* Top-left cyan tint to center (smooth, non-radial) */
    linear-gradient(135deg,
      rgba(80, 201, 206, 0.10) 0%,
      rgba(80, 201, 206, 0.06) 12%,
      rgba(80, 201, 206, 0.00) 40%),
    /* Top-right blue tint to center */
    linear-gradient(225deg,
      rgba(59, 130, 246, 0.08) 0%,
      rgba(59, 130, 246, 0.04) 14%,
      rgba(59, 130, 246, 0.00) 44%),
    /* Bottom-left purple tint to center */
    linear-gradient(45deg,
      rgba(139, 92, 246, 0.08) 0%,
      rgba(139, 92, 246, 0.04) 16%,
      rgba(139, 92, 246, 0.00) 46%),
    /* Bottom-right cyan tint to center */
    linear-gradient(315deg,
      rgba(80, 201, 206, 0.08) 0%,
      rgba(80, 201, 206, 0.04) 12%,
      rgba(80, 201, 206, 0.00) 42%),
    /* Base vertical gradient (dark blue -> black -> dark blue) */
    linear-gradient(to bottom, #0a0f1e 0%, #000000 50%, #0a0f1e 100%) !important;
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  width: 100%;
  position: relative;
  min-height: 100%;
  margin: 0;
  /* eliminate default whitespace that can show as lines */
  color: #F6F8F9;
  font-family: 'Sora', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
}


/* Provide a neutral backdrop behind modals and panels */
body::before {
  content: none !important;
  display: none !important;
  position: fixed;
  inset: 0;
  backdrop-filter: saturate(120%) contrast(105%);
  pointer-events: none;
  z-index: -1;
}

/* Utility: opt-out class to disable glass on specific elements */
.no-glass {
  background: unset !important;
  box-shadow: unset !important;
  backdrop-filter: unset !important;
  -webkit-backdrop-filter: unset !important;
  border: unset !important;
}

/* Ensure connectors/pipelines/tasks card texts use the same white color */
.cards-container .medium-text,
.cards-container .card-text {
  color: #F6F8F9 !important;
}

.card,
.card_with_shadow,
.card_with_shadow_pipelines,
.card-config-connectors {
  border-image: linear-gradient(45deg, rgba(80, 201, 206, 0.6), rgba(255, 255, 255, 0.25)) 1;
}

/* Text and small cyan accents inside cards */
.card .card-title,
.card_with_shadow .card-title,
.card_with_shadow_pipelines .card-title,
.card-config-connectors .card-title,
.card .card-text a,
.card_with_shadow .card-text a,
.card_with_shadow_pipelines .card-text a,
.card-config-connectors .card-text a {
  color: var(--brand-cyan) !important;
}

/* Buttons inside glassy surfaces */
.card .btn,
.modal-content .btn,
.glass .btn {
  background: linear-gradient(180deg, rgba(80, 201, 206, 0.75), rgba(80, 201, 206, 0.55));
  color: #032b2c;
  border: 1px solid rgba(80, 201, 206, 0.6);
  border-radius: var(--radius-md);
}

.card .btn:hover,
.modal-content .btn:hover,
.glass .btn:hover {
  filter: brightness(1.05) saturate(1.1);
}

/* Modals backdrop */
.modal-backdrop.show {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85));
  opacity: 1 !important;
}

.modal-content {
  border-radius: var(--radius-lg) !important;
}

.modal-header,
.modal-footer {
  --_accent: var(--brand-accent, var(--brand-cyan, #50C9CE));
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--_accent) 16%, transparent) 0%,
      color-mix(in oklab, var(--_accent) 6%, transparent) 100%) !important;
  border-color: color-mix(in oklab, var(--_accent) 38%, transparent) !important;
  color: var(--_accent) !important;
  border-radius: 15px 15px 0px 0px !important;
}

/* Inputs on glass */
input.form-control,
textarea.form-control,
select.form-select {
  background: rgba(8, 20, 22, 0.55) !important;
  color: #E8F3F3 !important;
  border: 1px solid rgba(80, 201, 206, 0.35) !important;
  border-radius: var(--radius-md) !important;
  caret-color: var(--brand-cyan) !important;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(80, 201, 206, 0.22) !important;
  border-color: rgba(80, 201, 206, 0.6) !important;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
  color: rgba(232, 243, 243, 0.65) !important;
}

/* Layout wrappers share the page gradient (handled by comprehensive navbar/footer rules below) */
.sidebar-container {
  background: transparent !important;
  border-right: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.small-text,
.medium-text {
  color: var(--text-primary) !important;
}

/* Ensure global Sora font everywhere, even over inline Roboto */
body,
body * {
  font-family: 'Sora', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Selection colors to avoid white highlight in dark theme */
::selection {
  background: rgba(80, 201, 206, 0.28);
  color: #E8F3F3;
}

::-moz-selection {
  background: rgba(80, 201, 206, 0.28);
  color: #E8F3F3;
}

input::selection,
textarea::selection {
  background: rgba(80, 201, 206, 0.28);
  color: #E8F3F3;
}

/* Neutralize browser autofill (Chrome/Safari) white/yellow backgrounds */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #E8F3F3 !important;
  transition: background-color 100000s ease-in-out 0s !important;
  box-shadow: 0 0 0px 1000px rgba(8, 20, 22, 0.55) inset !important;
  border: 1px solid rgba(80, 201, 206, 0.45) !important;
}

/* Floating labels: themed focus color */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
  color: var(--brand-cyan) !important;
}

/* Ensure floating labels never show white on any state (Bootstrap overrides) */
.form-floating>label,
.form-floating>label::after,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label,
.form-floating:focus-within>label,
.form-floating:focus-within>label::after {
  background: rgba(8, 20, 22, 0.70) !important;
  color: var(--brand-cyan) !important;
}

/* Selection color for labels themselves */
.form-floating>label::selection,
label::selection {
  background: rgba(80, 201, 206, 0.28) !important;
  color: #E8F3F3 !important;
}

/* Extra hardening for WebKit autofill interacting with floating labels */
input.form-control:-webkit-autofill~label,
input.form-control:-webkit-autofill:focus~label,
textarea.form-control:-webkit-autofill~label,
select.form-select:-webkit-autofill~label {
  background: rgba(8, 20, 22, 0.55) !important;
  color: var(--brand-cyan) !important;
}

/* Compact floating label chip to avoid gaps */
.form-floating>label {
  padding: 0 0.35rem !important;
  line-height: 1.1 !important;
}

.form-floating>label::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* Global tweak: extra top padding for floating label inputs */
.form-floating>.form-control,
.form-floating>textarea.form-control,
.form-floating>select.form-select {
  padding-top: 1.55rem !important;
  padding-bottom: 0.6rem !important;
}

/* Footer transparency hardening (incl. login pages) */
footer,
.footer,
.footer-container,
.footer .container,
.footer .container-fluid,
.footer [class*="bg-"],
.footer-container [class*="bg-"],
footer *,
.footer *,
.footer-container * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.footer,
.footer-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Extra hardening for navbar on auth pages */
.login-container~.navbar,
.login-container~.navbar .container,
.login-container~.navbar .container-fluid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Harden navbar transparency across variants; normalize footer-navbar spacing */
.navbar,
.navbar [class*="bg-"],
.navbar.bg-light,
.navbar.bg-white,
.navbar.bg-body,
.navbar.bg-body-tertiary,
.navbar.navbar-light,
.navbar.navbar-dark,
.navbar[data-bs-theme="light"],
.navbar[data-bs-theme="dark"],
.navbar .container,
.navbar .container-fluid,
.navbar .navbar-collapse,
.navbar .navbar-nav,
.navbar .navbar-brand,
.navbar .navbar-toggler,
.navbar .dropdown-menu,
.navbar .offcanvas,
.navbar .offcanvas-body {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.navbar {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 1030;
  background: transparent !important;
  --bs-bg-opacity: 0 !important;
}

footer.navbar,
.footer .navbar,
.footer-container .navbar,
.navbar.footer-navbar {
  min-height: unset !important;
  padding: 0 !important;
}

footer.navbar .container,
footer.navbar .container-fluid,
.footer .navbar .container,
.footer .navbar .container-fluid,
.footer-container .navbar .container,
.footer-container .navbar .container-fluid,
.navbar.footer-navbar .container,
.navbar.footer-navbar .container-fluid {
  padding: 0 !important;
}

/* Ensure custom navbar wrappers are transparent too */
.navbar-container,
.navbar-menu-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* --- Nov 2025: Card body radii — remove top radius to avoid mismatched corner colors --- */
/* Keep card top corners rounded via header; make card-body top corners square, bottom corners rounded */
.card .card-header:first-child,
.card_with_shadow .card-header:first-child,
.card_with_shadow_pipelines .card-header:first-child,
.card-config-connectors .card-header:first-child,
.dash-bootstrap .card .card-header:first-child {
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}



/* Base glassmorphism panel style */
.glass,
.card,
.card_with_shadow,
.card_with_shadow_pipelines,
.card-config-connectors,
.modal-content,
.dash-bootstrap .modal-content,
.dash-bootstrap .Card,
.dash-bootstrap .card {
  background: linear-gradient(145deg, var(--glass-bg), var(--glass-bg-strong)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  border-radius: var(--radius-lg) !important;
}

/* Cards: cyan accent details */
.card .card-header,
.card_with_shadow .card-header,
.card_with_shadow_pipelines .card-header,
.card-config-connectors .card-header,
.glass .card-header {
  color: var(--brand-cyan);
  background: linear-gradient(180deg, rgba(80, 201, 206, 0.18), rgba(80, 201, 206, 0.04));
  border-bottom: 1px solid rgba(80, 201, 206, 0.35);
}

/* Cards: cyan accent details */
.card .card-footer,
.card_with_shadow .card-footer,
.card_with_shadow_pipelines .card-footer,
.card-config-connectors .card-footer,
.glass .card-footer {
  color: var(--brand-cyan);
  background: linear-gradient(180deg, rgba(80, 201, 206, 0.18), rgba(80, 201, 206, 0.04));
  border-top: 1px solid rgba(80, 201, 206, 0.35);
}

.modal-title {
  color: var(--brand-accent, var(--brand-cyan, #50C9CE)) !important;
}

/* --- Nov 2025: Absolute navbar transparency — remove any overlay/pseudo-element that could darken it --- */
.navbar::before,
.navbar::after,
.navbar *::before,
.navbar *::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Ensure no filters/blending affect the navbar region */
.navbar,
.navbar * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Sidebar sits below fixed navbar and fills visible viewport */
.sidebar {
  top: var(--navbar-height) !important;
  height: calc(100svh - var(--navbar-height)) !important;
}

/* Ensure main wrappers start below the fixed navbar */
.content,
.content-container {
  padding-top: var(--navbar-height) !important;
  min-height: calc(100svh - var(--navbar-height)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Auth and landing containers: safety in case page-specific CSS was reverted */
.login-container,
.landing-container {
  padding-top: var(--navbar-height) !important;
  min-height: calc(100svh - var(--navbar-height)) !important;
}

/* Button variants */
.btn.btn-primary,
button.btn-primary {
  background: linear-gradient(180deg, rgba(80, 201, 206, .75), rgba(80, 201, 206, .55)) !important;
  color: #0f2b2c !important;
  border: 1px solid rgba(80, 201, 206, .6) !important;
  border-radius: var(--radius-md, 12px) !important;
}

.btn.btn-primary:hover,
button.btn-primary:hover {
  filter: brightness(1.05) saturate(1.05);
}

.btn.btn-outline-secondary,
button.btn-outline-secondary {
  background: transparent !important;
  color: var(--brand-cyan, #50C9CE) !important;
  border: 1px solid rgba(80, 201, 206, .45) !important;
}

.btn.btn-outline-secondary:hover {
  background: rgba(8, 20, 22, .35) !important;
}

/* Tabs: cyan underline for active, transparent base */
.nav-tabs {
  --bs-nav-tabs-border-color: transparent !important;
}

.nav-tabs .nav-link {
  color: rgba(232, 243, 243, .78) !important;
  background: transparent !important;
  border: none !important;
}

.nav-tabs .nav-link:hover {
  color: var(--brand-cyan, #50C9CE) !important;
  background: linear-gradient(145deg, rgba(80, 201, 206, 0.08), rgba(80, 201, 206, 0.04)) !important;
  backdrop-filter: blur(8px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(118%) !important;
  border-radius: var(--radius-md, 12px) !important;
}

.nav-tabs .nav-link.active {
  color: var(--brand-cyan, #50C9CE) !important;
  border: none !important;
  position: relative;
  background: linear-gradient(160deg,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 22%, transparent) 0%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 14%, transparent) 52%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 8%, transparent) 100%) !important;
  backdrop-filter: blur(12px) saturate(125%) contrast(104%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) contrast(104%) !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 6px 18px rgba(0, 0, 0, 0.25),
    0 0 12px color-mix(in oklab, var(--brand-cyan, #50C9CE) 18%, transparent) inset !important;
}

.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -2px;
  height: 2px;
  background: var(--brand-cyan, #50C9CE);
  border-radius: 2px;
  box-shadow: 0 0 8px color-mix(in oklab, var(--brand-cyan, #50C9CE) 40%, transparent);
}

/* Responsive content width when sidebar is present */
@media (max-width: 992px) {

  .content,
  .content-container {
    width: 100% !important;
    padding-top: 0 !important;
    /* Navbar is now relative */
    margin-top: 0 !important;
    float: none !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove 10px gap on mobile since navbar/sidebar are relative */
  .content-container>*:first-child {
    margin-top: 0 !important;
  }

  /* Override fixed sidebar height on mobile from global rule */
  .sidebar {
    height: auto !important;
    top: 0 !important;
  }

  /* Force remove padding/height constraints on mobile for auth/landing */
  .login-container,
  .landing-container {
    padding-top: 0 !important;
    min-height: auto !important;
  }
}

/* Desktop-only: content offset for sidebar */
@media (min-width: 993px) {
  .content {
    width: calc(100% - var(--sidebar-width, 280px)) !important;
    float: right !important;
    min-height: calc(100svh - var(--navbar-height)) !important;
    margin: auto !important;
    box-sizing: border-box;
    padding-top: var(--navbar-height) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
  }
}

.content-container {
  width: 100% !important;
  margin: auto !important;
  /* Fill visible viewport minus fixed navbar; avoid seams under navbar */
  min-height: calc(100svh - var(--navbar-height)) !important;
  padding-top: var(--navbar-height) !important;
  box-sizing: border-box;
}

/* Consolidated global badge styling (from content.css, Nov 2025) */
.badge {
  padding-top: .28rem;
  border-radius: 15px !important;
}

/* Consolidated avatar glass styles (from content.css, Nov 2025) */
.avatar-glass {
  /* Glassmorphism container for the avatar */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--glass-bg, rgba(255, 255, 255, 0.06)), var(--glass-bg-strong, rgba(255, 255, 255, 0.12))) !important;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.28)) !important;
  box-shadow: var(--glass-shadow, 0 10px 30px rgba(0, 0, 0, 0.25)) !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  position: relative;
  /* needed for the glow pseudo-element */
  z-index: 0;
  transition: box-shadow 220ms ease, border-color 220ms ease !important;
}

/* Backlight layer: same halo effect as cards */
.avatar-glass::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* behind the avatar container */
  inset: -14px;
  /* slightly larger to create halo */
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  filter: blur(18px);
  transition: opacity 260ms ease, transform 360ms ease, filter 360ms ease;
  --accent: var(--accent-color, var(--brand-cyan, #50C9CE));
  background: radial-gradient(circle at 50% 55%,
      color-mix(in oklab, var(--accent) 32%, transparent) 0%,
      color-mix(in oklab, var(--accent) 18%, transparent) 28%,
      color-mix(in oklab, var(--accent) 10%, transparent) 50%,
      transparent 75%);
}

/* Reveal and expand glow on hover/focus, same as cards */
.avatar-glass:hover::before,
.avatar-glass:focus-within::before {
  opacity: 1;
  transform: scale(1);
  filter: blur(22px);
}

/* Hover/focus state: match card elevated shadow and subtle neutral accent */
.avatar-glass:hover,
.avatar-glass:focus-within {
  --accent-color: hsl(200 12% 72%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in oklab, var(--accent-color, #BFC8CB) 42%, transparent),
    0 12px 28px color-mix(in oklab, var(--accent-color, #BFC8CB) 18%, transparent),
    0 0 18px color-mix(in oklab, var(--accent-color, #BFC8CB) 22%, transparent) inset !important;
  border-color: color-mix(in oklab, var(--accent-color, #BFC8CB) 55%, transparent) !important;
}

.avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 2px solid color-mix(in srgb, var(--icon-color, #6ea8fe) 80%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 480px) {
  .avatar-img {
    width: 84px;
    height: 84px;
  }
}

/* --- Nov 2025: Card backlight hover accent (cyan) --- */
/* Adds a subtle illuminated glow as if light is behind the glass card. */
.card,
.card_with_shadow,
.card_with_shadow_pipelines,
.card-config-connectors,
.glass,
.dash-bootstrap .card {
  position: relative !important;
  /* establish containing block for pseudo */
  overflow: visible !important;
  /* allow the glow to spread beyond edges */
  transition: box-shadow 220ms ease, border-color 220ms ease !important;
}

/* Backlight layer: sits behind the card and softly glows with the brand cyan */
.card::before,
.card_with_shadow::before,
.card_with_shadow_pipelines::before,
.card-config-connectors::before,
.glass::before,
.dash-bootstrap .card::before {
  content: "";
  position: absolute;
  /*z-index: -1;              !* behind the card itself *!*/
  inset: -18px;
  /* slightly larger than the card to create halo */
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  filter: blur(18px);
  transition: opacity 260ms ease, transform 360ms ease, filter 360ms ease;
  /* Use CSS var if provided, fallback to brand cyan */
  --accent: var(--accent-color, var(--brand-cyan, #50C9CE));
  /* Soft radial cyan glow that fades outward */
  background: radial-gradient(circle at 50% 55%,
      color-mix(in oklab, var(--accent) 32%, transparent) 0%,
      color-mix(in oklab, var(--accent) 18%, transparent) 28%,
      color-mix(in oklab, var(--accent) 10%, transparent) 50%,
      transparent 75%);
}

/* Hover/focus: reveal and slightly expand the glow */
.card:hover::before,
.card:focus-within::before,
.card_with_shadow:hover::before,
.card_with_shadow:focus-within::before,
.card_with_shadow_pipelines:hover::before,
.card_with_shadow_pipelines:focus-within::before,
.card-config-connectors:hover::before,
.card-config-connectors:focus-within::before,
.glass:hover::before,
.glass:focus-within::before,
.dash-bootstrap .card:hover::before,
.dash-bootstrap .card:focus-within::before {
  opacity: 1;
  transform: scale(1);
  filter: blur(22px);
}

/* Add layered neutral, lighter outer glow on hover for extra depth */
.card:hover,
.card:focus-within,
.card_with_shadow:hover,
.card_with_shadow:focus-within,
.card_with_shadow_pipelines:hover,
.card_with_shadow_pipelines:focus-within,
.card-config-connectors:hover,
.card-config-connectors:focus-within,
.glass:hover,
.glass:focus-within,
.dash-bootstrap .card:hover,
.dash-bootstrap .card:focus-within {
  /* Switch hover accent to a lighter, more neutral tone */
  --accent-color: hsl(200 12% 72%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in oklab, var(--accent-color, #BFC8CB) 42%, transparent),
    0 12px 28px color-mix(in oklab, var(--accent-color, #BFC8CB) 18%, transparent),
    0 0 18px color-mix(in oklab, var(--accent-color, #BFC8CB) 22%, transparent) inset !important;
  border-color: color-mix(in oklab, var(--accent-color, #BFC8CB) 55%, transparent) !important;
}

/* Optional: a stronger accent variant if needed on specific cards */
.accent-cyan-strong,
.accent-cyan-strong .card {
  --accent-color: var(--brand-cyan, #50C9CE);
}

/* Spacing: keep content just below navbar with a ~10px visual gap across breakpoints */
.content-container>*:first-child {
  margin-top: 10px !important;
}

/* Page-scoped helper to remove top padding/margin gap when needed (e.g., full-canvas pages) */
.content-container.no-gap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: calc(100svh - var(--navbar-height)) !important;
  height: calc(100svh - var(--navbar-height)) !important;
  overflow: hidden !important;
}

.content-container.no-gap>*:first-child {
  margin-top: 0 !important;
}

/* Reassert glass background on modal-content to match cards exactly */
.modal-content,
.dash-bootstrap .modal-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.16)) !important;
  /* same as cards */
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(18px) saturate(135%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) contrast(105%) !important;
  border-radius: var(--radius-lg, 16px) !important;
  color: var(--text-primary, #F6F8F9) !important;
}

/* Buttons inside modals follow the accent automatically */
.modal-content .btn,
.dash-bootstrap .modal-content .btn {
  --_accent: var(--brand-accent, var(--brand-cyan, #50C9CE));
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--_accent) 78%, transparent),
      color-mix(in oklab, var(--_accent) 58%, transparent)) !important;
  color: color-mix(in oklab, var(--_accent) 15%, #071416) !important;
  border: 1px solid color-mix(in oklab, var(--_accent) 60%, transparent) !important;
  border-radius: var(--radius-md, 12px) !important;
}

.modal-content .btn:hover,
.dash-bootstrap .modal-content .btn:hover {
  filter: brightness(1.05) saturate(1.08);
}

/* Inputs in modals: borders and focus ring use accent */
.modal-content input.form-control,
.modal-content textarea.form-control,
.modal-content select.form-select {
  background: rgba(8, 20, 22, 0.55) !important;
  color: #E8F3F3 !important;
  border: 1px solid color-mix(in oklab, var(--brand-accent, var(--brand-cyan, #50C9CE)) 38%, transparent) !important;
  border-radius: var(--radius-md, 12px) !important;
  caret-color: var(--brand-accent, var(--brand-cyan, #50C9CE)) !important;
}

.modal-content input.form-control:focus,
.modal-content textarea.form-control:focus,
.modal-content select.form-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent, var(--brand-cyan, #50C9CE)) 22%, transparent) !important;
  border-color: color-mix(in oklab, var(--brand-accent, var(--brand-cyan, #50C9CE)) 60%, transparent) !important;
}

/* Close button visible on dark glass */
.modal-header .btn-close {
  filter: invert(1) grayscale(1) opacity(.85);
}

/* Ensure modal internals don't introduce a gray fill and match card glass */
.modal-dialog,
.modal-header,
.modal-footer,
.modal-body {
  background: transparent !important;
  /* let .modal-content glass show through */
}

/* Ensure all top-level wrappers remain transparent so the global gradient shows through */
.landing,
.landing-container,
.landing-sub-container,
.landing-logo-container,
.landing-footer,
.content,
.content-container,
.sidebar,
.sidebar-container,
.login-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Safety: keep landing/login containers offset below fixed navbar and fill viewport */
.landing-container,
.login-container {
  padding-top: var(--navbar-height) !important;
  /* min-height: calc(100svh - var(--navbar-height)) !important; */
}


/* --- Nov 2025: Vertical divider between sidebar and content --- */
/* Use a pseudo-element so we don't affect layout width (no scrollbars). */
.sidebar::after {
  content: none !important;
  display: none !important;
  position: absolute;
  top: 0;
  right: 0;
  width: 0.5px;
  /* thinner divider */
  height: 100%;
  /* Cyan‑tinted glass line with soft glow to match glassmorphism + accent */
  background: linear-gradient(to bottom,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 45%, rgba(255, 255, 255, 0.18)) 0%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 35%, rgba(255, 255, 255, 0.18)) 50%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 45%, rgba(255, 255, 255, 0.18)) 100%);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--brand-cyan, #50C9CE) 30%, transparent),
    /* thinner outline so it doesn't look thicker */
    0 0 12px color-mix(in oklab, var(--brand-cyan, #50C9CE) 18%, transparent);
  pointer-events: none;
  opacity: 0.95;
}

/* Base sidebar item: transparent, no borders to let background show through */
.sidebar-container .list-group-item {
  background: transparent !important;
  border: 0 !important;
  /* no borders per requirement */
  color: var(--text-secondary, rgba(246, 248, 249, 0.78)) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 8px 12px !important;
  transition: background 220ms ease, color 160ms ease, box-shadow 220ms ease, transform 120ms ease;
}

/* Hover hint: subtle glass wash (no border) */
.sidebar-item-container:hover .list-group-item,
.sidebar-container .list-group-item:hover,
.sidebar-container .list-group-item:focus-visible {
  background: linear-gradient(145deg, rgba(80, 201, 206, 0.10), rgba(80, 201, 206, 0.06)) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(0, 0, 0, 0.25) !important;
  color: var(--text-primary, #F6F8F9) !important;
}

/* Active/selected state: accent-tinted glass fill, no border, strong visibility */
.sidebar-container .list-group-item.active,
.sidebar-container .list-group-item[aria-current="page"],
.sidebar-container .list-group-item[aria-current="true"],
.sidebar-container .list-group-item[aria-selected="true"],
.sidebar-container .list-group-item[data-active="true"],
.sidebar-item-container:focus-within .list-group-item {
  /* Cyan accent glassmorphism fill */
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 28%, transparent) 0%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 18%, transparent) 52%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 10%, transparent) 100%) !important;
  backdrop-filter: blur(14px) saturate(130%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) contrast(105%) !important;
  /* No borders; emphasize with soft inner/outer glow */
  border: 0 !important;
  box-shadow:
    0 0 0 0 rgba(0, 0, 0, 0),
    0 10px 26px rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(255, 255, 255, 0.08) inset,
    0 0 18px color-mix(in oklab, var(--brand-cyan, #50C9CE) 22%, transparent) inset !important;
  color: var(--text-primary, #F6F8F9) !important;
}

/* Keep consistent active hover — slightly brighter */
.sidebar-container .list-group-item.active:hover,
.sidebar-container .list-group-item[aria-current="page"]:hover,
.sidebar-container .list-group-item[aria-current="true"]:hover,
.sidebar-container .list-group-item[aria-selected="true"]:hover,
.sidebar-container .list-group-item[data-active="true"]:hover {
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 34%, transparent) 0%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 22%, transparent) 52%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 12%, transparent) 100%) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 1px 2px rgba(255, 255, 255, 0.10) inset,
    0 0 22px color-mix(in oklab, var(--brand-cyan, #50C9CE) 26%, transparent) inset !important;
}

/* Enhanced: when the container has an active/hover link, fill the whole row (icon + label) with glass accent */
.sidebar-item-container:has(.list-group-item.active),
.sidebar-item-container:has(.list-group-item[aria-current="page"]),
.sidebar-item-container:has(.list-group-item[aria-current="true"]),
.sidebar-item-container:has(.list-group-item[aria-selected="true"]),
.sidebar-item-container:has(.list-group-item[data-active="true"]) {
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 22%, transparent) 0%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 14%, transparent) 52%,
      color-mix(in oklab, var(--brand-cyan, #50C9CE) 8%, transparent) 100%) !important;
  backdrop-filter: blur(12px) saturate(125%) contrast(104%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) contrast(104%) !important;
  border-radius: var(--radius-md, 12px) !important;
}

.sidebar-item-container:has(.list-group-item:hover),
.sidebar-item-container:has(.list-group-item:focus-visible) {
  background: linear-gradient(145deg, rgba(80, 201, 206, 0.08), rgba(80, 201, 206, 0.05)) !important;
  backdrop-filter: blur(8px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(118%) !important;
  border-radius: var(--radius-md, 12px) !important;
}