/* ============================================================
   LIQUID GLASS — performance-optimised
   backdrop-filter ONLY on large static containers (card, sidebar,
   navbar, modal, dropdown). Tint only everywhere else.
   ============================================================ */

:root {
  --lg-bg:          rgba(15, 19, 36, 0.58);
  --lg-border:      rgba(255,255,255,0.12);
  --lg-border-soft: rgba(255,255,255,0.07);
  --lg-specular:    rgba(255,255,255,0.16);
  --lg-radius:      22px;
  --lg-radius-md:   16px;
  --lg-radius-sm:   12px;
}

body { background: #0b0d18 !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 50% at 10%  5%,  rgba(50, 90,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 90% 10%,  rgba(100,50,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 80% 90%,  rgba(0, 110,210,0.12) 0%, transparent 58%),
    #0b0d18;
  will-change: transform;
  pointer-events: none;
}

/* === CARDS (blur OK — one/few per view) === */
.card, .panel {
  background: var(--lg-bg) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: 15px !important;
  box-shadow:
    inset 0 1.5px 0 var(--lg-specular),
    0 12px 44px rgba(0,0,0,0.52),
    0 2px 8px  rgba(0,0,0,0.28) !important;
  isolation: isolate;
  contain: paint;
}
.card-primary.card-outline { border-top: 2px solid rgba(76,169,255,0.52) !important; }
.card-header {
  background: rgba(255,255,255,0.032) !important;
  border-bottom: 1px solid var(--lg-border-soft) !important;
  border-radius: 15px 15px 0 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.card-body  { background: transparent !important; }
.card-footer {
  background: rgba(0,0,0,0.10) !important;
  border-top: 1px solid var(--lg-border-soft) !important;
  border-radius: 0 0 15px 15px !important;
}

/* === SIDEBAR (blur OK — single fixed element) === */
.app-sidebar {
  background: rgba(8, 11, 22, 0.76) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-right: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 6px 0 28px rgba(0,0,0,0.48) !important;
  isolation: isolate;
}
.app-sidebar .nav-link:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.app-sidebar .nav-link.active {
  background: rgba(76,169,255,0.16) !important;
  border-color: rgba(76,169,255,0.28) !important;
}

/* === NAVBAR (blur OK — single fixed element) === */
nav, .navbar, .navbar-light, .navbar-dark {
  background: rgba(6, 8, 18, 0.75) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.38) !important;
  isolation: isolate;
}

/* === MODALS (blur OK — one at a time, outside flow) === */
.modal-content {
  background: rgba(10, 14, 28, 0.86) !important;
  backdrop-filter: blur(36px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(165%) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 15px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.20),
    0 28px 80px rgba(0,0,0,0.65),
    0 8px 26px  rgba(0,0,0,0.38) !important;
  isolation: isolate;
}
.modal-header {
  background: rgba(255,255,255,0.028) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 15px 15px 0 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.modal-footer {
  background: rgba(0,0,0,0.12) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 0 15px 15px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.modal-backdrop.show { background: rgba(0,0,0,0.58) !important; }

/* === DROPDOWNS (blur OK — small overlay, one at a time) === */
.dropdown-menu {
  background: rgba(10, 14, 28, 0.90) !important;
  backdrop-filter: blur(28px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(165%) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 42px rgba(0,0,0,0.55) !important;
  isolation: isolate;
}
.dropdown-item { color: rgba(255,255,255,0.84) !important; border-radius: 10px !important; margin: 2px 4px !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255,255,255,0.08) !important; }
.dropdown-divider { border-top: 1px solid rgba(255,255,255,0.08) !important; }

/* === DATE PICKER (blur OK — single overlay) === */
.dp-dropdown {
  background: rgba(10, 14, 28, 0.92) !important;
  backdrop-filter: blur(28px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(165%) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: var(--lg-radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 16px 48px rgba(0,0,0,0.58) !important;
  isolation: isolate;
}
.dp-preset { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-radius: 10px !important; }
.dp-preset:hover, .dp-preset.active { background: rgba(76,169,255,0.22) !important; border-color: rgba(76,169,255,0.38) !important; }
.dp-cal-day { border-radius: 8px !important; }
.dp-cal-day:hover { background: rgba(255,255,255,0.09) !important; }
.dp-in-range      { background: rgba(76,169,255,0.14) !important; }
.dp-range-start, .dp-range-end { background: rgba(76,169,255,0.30) !important; }

/* === TOASTS (blur OK — one/two at a time) === */
.toast {
  background: rgba(10, 14, 28, 0.88) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 30px rgba(0,0,0,0.50) !important;
  isolation: isolate;
}
.toast-header { background: rgba(255,255,255,0.036) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; border-radius: 14px 14px 0 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.toast-body   { background: transparent !important; }

/* === BOOTSTRAP-SELECT (blur OK — overlay) === */
.bootstrap-select .dropdown-menu {
  background: rgba(10, 14, 28, 0.92) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
}
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active { background: rgba(76,169,255,0.22) !important; }

/* === TOOLBAR (tint only) === */
.toolbar {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 16px rgba(0,0,0,0.40) !important;
}

/* === BUTTONS (tint only — many instances) === */
.btn,
button:not(.dp-cal-day):not(.tracking-copy),
input[type="button"],
input[type="submit"] {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,0.92) ;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 2px 6px rgba(0,0,0,0.30) !important;
  transition: background .13s ease, box-shadow .13s ease, transform .10s ease !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.btn:hover, button:not(.dp-cal-day):not(.tracking-copy):hover {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.22) !important;
  transform: translateY(-1px) !important;
}
.btn:active { transform: translateY(0) !important; }
.btn:disabled, .btn.disabled { opacity: 0.50 !important; transform: none !important; }
.btn-primary  { background: rgba(76,169,255,0.22) !important; border-color: rgba(76,169,255,0.40) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 18px rgba(76,169,255,0.24) !important; }
.btn-primary:hover { background: rgba(76,169,255,0.32) !important; border-color: rgba(76,169,255,0.56) !important; }
.btn-success  { background: rgba(101,189,121,0.20) !important; border-color: rgba(101,189,121,0.36) !important; }
.btn-success:hover { background: rgba(101,189,121,0.30) !important; }
.btn-danger   { background: rgba(239,96,111,0.20) !important; border-color: rgba(239,96,111,0.36) !important; }
.btn-danger:hover { background: rgba(239,96,111,0.30) !important; }
.btn-warning  { background: rgba(251,191,36,0.18) !important; border-color: rgba(251,191,36,0.36) !important; color: rgba(255,235,160,0.95) !important; }
.btn-info     { background: rgba(20,184,166,0.18) !important; border-color: rgba(20,184,166,0.36) !important; }
.btn-light    { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.20) !important; color: rgba(255,255,255,0.90) !important; }
.btn-light:hover { background: rgba(255,255,255,0.16) !important; }
.btn-dark     { background: rgba(0,0,0,0.36) !important; border-color: rgba(255,255,255,0.13) !important; }
.btn-outline-secondary { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.14) !important; }
.btn-outline-secondary:hover { background: rgba(255,255,255,0.09) !important; }
.btn-outline-info { background: rgba(20,184,166,0.07) !important; border-color: rgba(20,184,166,0.33) !important; color: rgba(100,220,200,0.95) !important; }
.btn-outline-info:hover { background: rgba(20,184,166,0.16) !important; }
.btn-outline-warning { background: rgba(251,191,36,0.07) !important; border-color: rgba(251,191,36,0.33) !important; color: rgba(255,228,130,0.95) !important; }
.btn-outline-warning:hover { background: rgba(251,191,36,0.16) !important; }

.vt-btn {
  color: black !important;
}

/* === FORM CONTROLS (tint only — many instances) === */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select, .form-control, .custom-select, .bootstrap-select .dropdown-toggle {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--lg-radius-sm) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: inset 0 1.5px 4px rgba(0,0,0,0.24) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus, select:focus, .form-control:focus, .custom-select:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(76,169,255,0.55) !important;
  box-shadow: inset 0 1.5px 4px rgba(0,0,0,0.18), 0 0 0 3px rgba(76,169,255,0.20) !important;
  outline: none !important;
}
#contentEditor {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: var(--lg-radius-sm) !important;
  box-shadow: inset 0 1.5px 4px rgba(0,0,0,0.24) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.input-group-text {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.72) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* === DATATABLES (tint only — many rows) === */
.dataTables_wrapper {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 34px rgba(0,0,0,0.46) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.table thead th, table.dataTable thead th {
  background: rgba(255,255,255,0.038) !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  color: rgba(215,230,255,0.88) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.table tbody tr, table.dataTable tbody tr {
  background: rgba(255,255,255,0.020) !important;
  transition: background .12s ease !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.table tbody tr:hover, table.dataTable tbody tr:hover { background: rgba(255,255,255,0.050) !important; }
.dataTables_filter input[type="search"], .dataTables_length select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 50% !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(76,169,255,0.18) !important; border-color: rgba(76,169,255,0.30) !important; transform: translateY(-1px) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: rgba(76,169,255,0.28) !important; border-color: rgba(76,169,255,0.50) !important; }

/* === ALERTS, LIST GROUPS, BADGES, BREADCRUMB, FUNNEL (tint only) === */
.alert { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 14px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.alert-success { background: rgba(101,189,121,0.13) !important; border-color: rgba(101,189,121,0.26) !important; }
.alert-danger  { background: rgba(239, 96,111,0.13) !important; border-color: rgba(239, 96,111,0.26) !important; }
.alert-warning { background: rgba(251,191, 36,0.13) !important; border-color: rgba(251,191, 36,0.26) !important; }
.alert-info    { background: rgba( 76,169,255,0.13) !important; border-color: rgba( 76,169,255,0.26) !important; }
.list-group-item { background: rgba(255,255,255,0.032) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.list-group-item:hover { background: rgba(255,255,255,0.058) !important; }
.list-group-item:first-child { border-radius: 12px 12px 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 12px 12px !important; }
.badge { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.15) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
nav[aria-label='breadcrumb'] .breadcrumb { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.32) !important; }
.funnel-step { background: rgba(255,255,255,0.038) !important; border: 1px solid rgba(255,255,255,0.09) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.44) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mobile-sidebar-toggle { background: rgba(8, 11, 22, 0.80) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 18px rgba(0,0,0,0.50) !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(108,155,255,0.28); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(108,155,255,0.48); }

/* === UTILITY === */
.lg-glass {
  background: var(--lg-bg) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius) !important;
  box-shadow: inset 0 1.5px 0 var(--lg-specular), 0 10px 38px rgba(0,0,0,0.48) !important;
  isolation: isolate; contain: paint;
}