/* 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;
}

.card .card-body,
.card_with_shadow .card-body,
.card_with_shadow_pipelines .card-body,
.card-config-connectors .card-body,
.dash-bootstrap .card .card-body {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-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; }
.nav-tabs .nav-link.active { color: var(--brand-cyan, #50C9CE) !important; border: none !important; position: relative; }
.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; }

/* Responsive content width when sidebar is present */
@media (max-width: 992px) {
  .content, .content-container { width: 100% !important; }
}

.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: 150px;
  height: 150px;
  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;
}


/* --- Nov 2025: Smooth load/transition animations (left-to-right) and loading shimmer --- */
/* Keyframes */
@keyframes slideFadeInLeft {
  from { opacity: 0; transform: translateX(-12px); filter: blur(2px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Entry animation: apply softly from left to right on main content areas */
/* Limit to the main content area, exclude navbar/sidebar elements */
.content-container > * {
  animation: slideFadeInLeft 480ms cubic-bezier(.22,.61,.36,1) both;
}

/* Stagger for first children to create a gentle left-to-right cascade */
.content-container > *:nth-child(1) { animation-delay: 40ms; }
.content-container > *:nth-child(2) { animation-delay: 80ms; }
.content-container > *:nth-child(3) { animation-delay: 120ms; }
.content-container > *:nth-child(4) { animation-delay: 160ms; }
.content-container > *:nth-child(5) { animation-delay: 200ms; }
.content-container > *:nth-child(6) { animation-delay: 240ms; }

/* Lists of cards/rows: stagger within containers as well */
.cards-container > * { animation: slideFadeInLeft 420ms ease both; }
.cards-container > *:nth-child(1) { animation-delay: 40ms; }
.cards-container > *:nth-child(2) { animation-delay: 80ms; }
.cards-container > *:nth-child(3) { animation-delay: 120ms; }
.cards-container > *:nth-child(4) { animation-delay: 160ms; }
.cards-container > *:nth-child(5) { animation-delay: 200ms; }

/* Rows/cols common in Bootstrap layouts */
.row > [class^="col"], .row > [class*=" col"], .row > .col, .row > .col-md-4, .row > .col-md-6, .row > .col-md-12 {
  animation: slideFadeInLeft 420ms ease both;
}
.row > *:nth-child(1) { animation-delay: 40ms; }
.row > *:nth-child(2) { animation-delay: 80ms; }
.row > *:nth-child(3) { animation-delay: 120ms; }
.row > *:nth-child(4) { animation-delay: 160ms; }

/* Loading state: add a subtle shimmer overlay to glassy surfaces while callbacks run */
/* Dash marks updating components with [data-dash-is-loading="true"] */
[data-dash-is-loading="true"] {
  cursor: progress;
  pointer-events: none;
}

[data-dash-is-loading="true"] .card,
[data-dash-is-loading="true"] .glass,
[data-dash-is-loading="true"] .card_with_shadow,
[data-dash-is-loading="true"] .card_with_shadow_pipelines,
[data-dash-is-loading="true"] .card-config-connectors,
[data-dash-is-loading="true"] .modal-content {
  position: relative;
  overflow: hidden;
}

[data-dash-is-loading="true"] .card::after,
[data-dash-is-loading="true"] .glass::after,
[data-dash-is-loading="true"] .card_with_shadow::after,
[data-dash-is-loading="true"] .card_with_shadow_pipelines::after,
[data-dash-is-loading="true"] .card-config-connectors::after,
[data-dash-is-loading="true"] .modal-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0.02) 8%,
    rgba(255,255,255,0.12) 18%,
    rgba(255,255,255,0.02) 33%
  );
  background-size: 200% 100%;
  animation: shimmer 1200ms ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Prefer reduced motion: disable non-essential animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Adding border to the bottom of the cards only, not the top */
.card-config-connectors,
.card-config-tasks {
  border-radius: 0px 0px 15px 15px !important;
}