/**
 * Panel theme switcher + Deep Blue overlay for Hope UI.
 * Light remains the default. Dark uses Hope UI data-bs-theme.
 * Deep Blue is html.deep-blue on top of the dark scheme.
 */

.navbar-list .lbrt-theme,
.navbar-list .sh-theme {
  position: relative;
}

.panel-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}

.panel-brand-logo .logo-main {
  display: flex;
  align-items: center;
}

.panel-brand-logo__img {
  height: 32px !important;
  width: auto !important;
  max-height: 32px !important;
  max-width: 148px !important;
  object-fit: contain;
  object-position: left center;
}

.sidebar .panel-brand-logo__img {
  height: 34px !important;
  max-height: 34px !important;
}

.panel-brand-logo__img--light {
  display: block !important;
}

.panel-brand-logo__img--dark {
  display: none !important;
}

html.dark-mode .panel-brand-logo__img--light,
html[data-bs-theme="dark"] .panel-brand-logo__img--light {
  display: none !important;
}

html.dark-mode .panel-brand-logo__img--dark,
html[data-bs-theme="dark"] .panel-brand-logo__img--dark {
  display: block !important;
}

.panel-brand-logo .logo-mini {
  display: none;
}

.panel-brand-logo .logo-mini .navbar-brand-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.sidebar.sidebar-base.sidebar-mini .logo-normal {
  display: none !important;
}

.sidebar.sidebar-base.sidebar-mini .logo-mini {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.sidebar.sidebar-base.sidebar-mini .sidebar-header {
  justify-content: center !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

.sidebar.sidebar-base.sidebar-mini .sidebar-header .panel-brand-logo {
  margin: 0 auto !important;
}

@media (min-width: 1200px) {
  .iq-navbar .navbar-brand.panel-brand-logo {
    display: none !important;
  }
}

.sidebar.sidebar-base:not(.sidebar-mini) .sidebar-header {
  justify-content: flex-start !important;
  padding-left: 16px !important;
}

.sidebar.sidebar-base:not(.sidebar-mini) .sidebar-header .panel-brand-logo {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 !important;
  z-index: 3;
}

.sidebar.sidebar-base:not(.sidebar-mini) .panel-brand-logo__img {
  object-position: left center;
}

@media (max-width: 1199.98px) {
  .iq-navbar {
    overflow: visible !important;
  }

  .iq-navbar .navbar-inner {
    position: relative;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    gap: 8px;
  }

  .iq-navbar .navbar-brand.panel-brand-logo {
    display: none !important;
  }
}

.navbar-list .sh-theme .dropdown-toggle::after,
.header-quick-actions .sh-theme .dropdown-toggle::after,
.iq-navbar .lbrt-theme .sh-theme .dropdown-toggle::after,
.panel-topbar .lbrt-theme .sh-theme .dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  font: unset !important;
}

.navbar-list .theme-toggle-btn.theme-toggle-btn--compact,
.header-quick-actions .theme-toggle-btn.theme-toggle-btn--compact,
.iq-navbar .lbrt-theme .theme-toggle-btn.theme-toggle-btn--compact,
.panel-topbar .lbrt-theme .theme-toggle-btn.theme-toggle-btn--compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #1e293b !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22) !important;
  line-height: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

.navbar-list .theme-toggle-btn.theme-toggle-btn--compact:hover,
.header-quick-actions .theme-toggle-btn.theme-toggle-btn--compact:hover,
.iq-navbar .lbrt-theme .theme-toggle-btn.theme-toggle-btn--compact:hover,
.panel-topbar .lbrt-theme .theme-toggle-btn.theme-toggle-btn--compact:hover {
  background: #0f172a !important;
  background-image: none !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.3) !important;
  transform: none !important;
}

.navbar-list .theme-toggle-btn .theme-icon,
.header-quick-actions .theme-toggle-btn .theme-icon,
.iq-navbar .lbrt-theme .theme-toggle-btn .theme-icon,
.panel-topbar .lbrt-theme .theme-toggle-btn .theme-icon {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: block !important;
  margin: 0 !important;
}

.header-quick-actions .lbrt-theme,
.iq-navbar .lbrt-theme {
  display: flex !important;
  align-items: center !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

html.dark-mode .navbar-list .theme-toggle-btn .theme-icon.fa-sun,
html[data-bs-theme="dark"] .navbar-list .theme-toggle-btn .theme-icon.fa-sun,
html.dark-mode .header-quick-actions .theme-toggle-btn .theme-icon.fa-sun,
html.dark-mode .panel-topbar .lbrt-theme .theme-toggle-btn .theme-icon.fa-sun {
  color: #facc15 !important;
}

html.deep-blue .navbar-list .theme-toggle-btn .theme-icon.fa-circle,
html.deep-blue .header-quick-actions .theme-toggle-btn .theme-icon.fa-circle,
html.deep-blue .panel-topbar .lbrt-theme .theme-toggle-btn .theme-icon.fa-circle {
  color: #8b9cff !important;
}

.sh-theme__menu {
  min-width: 196px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  z-index: 1080;
}

.sh-theme__item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  color: #0f172a;
  font-weight: 600;
  font-size: 14px;
}

.sh-theme__item:hover,
.sh-theme__item.is-active {
  background: #3a57e8 !important;
  color: #fff !important;
}

.sh-theme__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.sh-theme__swatch--light {
  background: #f8fafc;
}

.sh-theme__swatch--dark {
  background: #0f172a;
}

.sh-theme__swatch--deep {
  background: linear-gradient(135deg, #0c0e14 0%, #3a57e8 100%);
}

html.dark-mode .sh-theme__menu,
html[data-bs-theme="dark"] .sh-theme__menu {
  background: #151c2e;
  border-color: rgba(141, 162, 255, 0.16);
}

html.dark-mode .sh-theme__item,
html[data-bs-theme="dark"] .sh-theme__item {
  color: #e2e8f0;
}

html.deep-blue {
  color-scheme: dark;
  --db-canvas: #0c0e14;
  --db-canvas-2: #10131b;
  --db-surface: #161922;
  --db-surface-2: #1b1f2a;
  --db-surface-3: #222734;
  --db-border: rgba(255, 255, 255, 0.075);
  --db-border-strong: rgba(255, 255, 255, 0.12);
  --db-text: #f2f4f8;
  --db-muted: #8b92a5;
  --bs-body-bg: var(--db-canvas);
  --bs-body-color: var(--db-text);
  --bs-border-color: var(--db-border);
}

html.deep-blue body,
html.deep-blue body.g-sidenav-show,
html.deep-blue body.panel-guest {
  background-color: var(--db-canvas) !important;
  color: var(--db-text);
}

html.deep-blue .sidebar.sidebar-base,
html.deep-blue .sidebar.sidebar-white,
html.deep-blue .sidebar.sidebar-default,
html.deep-blue .sidebar.sidebar-guest {
  background-color: var(--db-surface) !important;
  border-color: var(--db-border) !important;
}

html.deep-blue .sidebar .logo-title,
html.deep-blue .sidebar .nav-link,
html.deep-blue .sidebar .item-name {
  color: var(--db-text) !important;
}

html.deep-blue .sidebar .nav-link:hover,
html.deep-blue .sidebar .nav-link.active {
  color: #9db0ff !important;
}

html.deep-blue .iq-navbar,
html.deep-blue .navbar.iq-navbar {
  background-color: var(--db-surface) !important;
  border-color: var(--db-border) !important;
}

html.deep-blue .iq-navbar-header {
  background-color: transparent !important;
  background-image: none !important;
}

html.deep-blue .main-content,
html.deep-blue .content-inner,
html.deep-blue .container-fluid.content-inner {
  background-color: transparent !important;
  color: var(--db-text);
}

html.deep-blue .card,
html.deep-blue .card-header,
html.deep-blue .card-body,
html.deep-blue .card-footer,
html.deep-blue .modal-content,
html.deep-blue .offcanvas,
html.deep-blue .dropdown-menu,
html.deep-blue .accordion-item,
html.deep-blue .accordion-button {
  background-color: var(--db-surface) !important;
  color: var(--db-text) !important;
  border-color: var(--db-border) !important;
}

html.deep-blue .accordion-button:not(.collapsed) {
  background-color: var(--db-surface-2) !important;
  color: #9db0ff !important;
}

html.deep-blue .form-control,
html.deep-blue .form-select,
html.deep-blue input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.deep-blue textarea,
html.deep-blue select,
html.deep-blue .select2-container--default .select2-selection--single,
html.deep-blue .select2-container--bootstrap4 .select2-selection--single {
  background-color: var(--db-surface-2) !important;
  color: var(--db-text) !important;
  border-color: var(--db-border-strong) !important;
}

html.deep-blue .table,
html.deep-blue .table th,
html.deep-blue .table td {
  color: var(--db-text) !important;
  border-color: var(--db-border) !important;
}

html.deep-blue .text-dark,
html.deep-blue h1,
html.deep-blue h2,
html.deep-blue h3,
html.deep-blue h4,
html.deep-blue h5,
html.deep-blue .breadcrumb,
html.deep-blue .breadcrumb-item a {
  color: var(--db-text) !important;
}

html.deep-blue .text-muted,
html.deep-blue .text-body-secondary {
  color: var(--db-muted) !important;
}

html.deep-blue .navbar-list .theme-toggle-btn.theme-toggle-btn--compact,
html.deep-blue .header-quick-actions .theme-toggle-btn.theme-toggle-btn--compact,
html.deep-blue .panel-topbar .lbrt-theme .theme-toggle-btn.theme-toggle-btn--compact {
  background: var(--db-surface-2) !important;
  border: 1px solid var(--db-border-strong) !important;
  box-shadow: none !important;
}

html.deep-blue .sh-theme__menu {
  background: var(--db-surface) !important;
  border-color: var(--db-border) !important;
}

html.deep-blue .sh-theme__item {
  color: var(--db-text) !important;
}

/* Dark vs Deep Blue tokens. Light stays untouched. */
html.dark-mode {
  --pt-canvas: #0f172a;
  --pt-surface: #1e293b;
  --pt-surface-2: #273449;
  --pt-input: #0f172a;
  --pt-text: #e2e8f0;
  --pt-muted: #94a3b8;
  --pt-border: rgba(148, 163, 184, 0.32);
}

html.deep-blue {
  --pt-canvas: var(--db-canvas, #0c0e14);
  --pt-surface: var(--db-surface, #161922);
  --pt-surface-2: var(--db-surface-2, #1b1f2a);
  --pt-input: var(--db-surface-2, #1b1f2a);
  --pt-text: var(--db-text, #f2f4f8);
  --pt-muted: var(--db-muted, #8b92a5);
  --pt-border: var(--db-border-strong, rgba(255, 255, 255, 0.12));
}

html.dark-mode .iq-navbar .btn-light,
html.dark-mode .iq-navbar #MessagesToggleBtn,
html.dark-mode .iq-navbar #ActivityToggleBtn,
html.dark-mode .iq-navbar #cartSidebarBtn {
  background: var(--pt-surface-2) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}

html.dark-mode .iq-navbar #MessagesToggleBtn #message-count,
html.dark-mode .iq-navbar #message-count.header-icon-badge,
html.dark-mode .iq-navbar #message-count.header-msg-count {
  background: #e11d48 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html.dark-mode #cartSidebar .offcanvas-body,
html.dark-mode #cartSidebar .offcanvas-footer {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
}

html.dark-mode #cartSidebar .cart-item-row {
  border-color: var(--pt-border) !important;
  color: var(--pt-text) !important;
}

html.dark-mode .select2-dropdown,
html.dark-mode .select2-container--default .select2-results__option,
html.dark-mode .select2-container--bootstrap4 .select2-results__option,
html.dark-mode .select2-container--bootstrap4 .select2-dropdown {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}

html.dark-mode .select2-container--bootstrap4 .select2-selection--single,
html.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
html.dark-mode .select2-container--bootstrap4.select2-container--open .select2-selection--single {
  background: var(--pt-input) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}

html.dark-mode body.orders-create-page .neworder-top .input-wrapper,
html.dark-mode body.orders-create-page .neworder-top #input_service3,
html.dark-mode body.orders-create-page .neworder-top #input_service3:focus,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .neworder-top .input-wrapper,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .neworder-top #input_service3,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .neworder-top #input_service3:focus,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #page_layout .neworder-top .input-wrapper,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #page_layout .neworder-top #input_service3,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #page_layout .neworder-top #input_service3:focus {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
  box-shadow: none !important;
}

html.dark-mode body.orders-create-page .neworder-top #input_service3::placeholder,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .neworder-top #input_service3::placeholder,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #page_layout .neworder-top #input_service3::placeholder {
  color: var(--pt-muted) !important;
}

html.dark-mode body.orders-create-page .input-wrapper__prepend,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .input-wrapper__prepend {
  color: var(--pt-muted) !important;
}

html.dark-mode body.orders-create-page #page_layout .orders-create-top-actions .btn-dark2,
html.dark-mode body.orders-create-page #page_layout .orders-create-top-actions .btn-dark2:hover,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #page_layout .orders-create-top-actions .btn-dark2,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #page_layout .orders-create-top-actions .btn-dark2:hover {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

html.dark-mode body.orders-create-page #contact.dvgh,
html.dark-mode body.orders-create-page .orders-create-left-col > .dvgh,
html.dark-mode body.orders-create-page .card-header3,
html.dark-mode body.orders-create-page #cat3,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #contact.dvgh,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .orders-create-left-col > .dvgh,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .card-header3,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #cat3 {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}

html.dark-mode body.orders-create-page .card-header3 h3.acc-item-title,
html.dark-mode body.orders-create-page .card-header3 .text-gradient-info,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .card-header3 h3.acc-item-title,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .card-header3 .text-gradient-info {
  -webkit-text-fill-color: #93c5fd !important;
  color: #93c5fd !important;
  background: none !important;
}

html.dark-mode body.orders-create-page .card-head-icon,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .card-head-icon {
  background: var(--pt-input) !important;
  color: #93c5fd !important;
}

html.dark-mode body.orders-create-page #cat3 label,
html.dark-mode body.orders-create-page #cat3 .form-control-label,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #cat3 label,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #cat3 .form-control-label {
  color: var(--pt-muted) !important;
}

html.dark-mode body.orders-create-page #Link,
html.dark-mode body.orders-create-page #quantity,
html.dark-mode body.orders-create-page #comments,
html.dark-mode body.orders-create-page #guest_email,
html.dark-mode body.orders-create-page #guest_payments,
html.dark-mode body.orders-create-page #cat3 .form-control,
html.dark-mode body.orders-create-page #cat3 input,
html.dark-mode body.orders-create-page #cat3 textarea,
html.dark-mode body.orders-create-page #cat3 select,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #Link,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #quantity,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #comments,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #guest_email,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #guest_payments,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #cat3 .form-control,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #cat3 input,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #cat3 textarea,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #cat3 select {
  background: var(--pt-input) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}

html.dark-mode body.orders-create-page #Link::placeholder,
html.dark-mode body.orders-create-page #quantity::placeholder,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #Link::placeholder,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #quantity::placeholder {
  color: var(--pt-muted) !important;
}

html.dark-mode body.orders-create-page .nwo-cat-btn,
html.dark-mode body.orders-create-page .btn_filter,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .nwo-cat-btn,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .btn_filter {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}

html.dark-mode body.orders-create-page .des-neworder .card.card-des,
html.dark-mode body.orders-create-page .orders-service-info-card,
html.dark-mode body.orders-create-page .des-neworder .card-body,
html.dark-mode body.orders-create-page .des-info-card,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .des-neworder .card.card-des,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .orders-service-info-card,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .des-neworder .card-body,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .des-info-card {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

html.dark-mode body.orders-create-page .des-info-card label,
html.dark-mode body.orders-create-page .des-info-card .text,
html.dark-mode body.orders-create-page #service-title-box,
html.dark-mode body.orders-create-page .progress-value,
html.dark-mode body.orders-create-page .progress-percent,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .des-info-card label,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .des-info-card .text,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] #service-title-box,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .progress-value,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .progress-percent {
  color: var(--pt-text) !important;
}

html.dark-mode body.orders-create-page .des-info-card label,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .des-info-card label {
  color: var(--pt-muted) !important;
}

html.dark-mode body.orders-create-page .progress-ring-circle-bg,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .progress-ring-circle-bg {
  stroke: var(--pt-border) !important;
}

html.dark-mode body.orders-create-page .select-items,
html.dark-mode body.orders-create-page .select-selected,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .select-items,
html.dark-mode #panel-ajax-content[data-panel-page="orders.create"] .select-selected {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
}

/* Sidebar shell — light mode: stay white (canvas tint is main-content only) */
html:not(.dark-mode):not(.deep-blue) body.g-sidenav-show .sidebar.sidebar-base.sidebar-white,
html:not(.dark-mode):not(.deep-blue) body.g-sidenav-show .sidebar.sidebar-base.sidebar-default {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none;
}

body.g-sidenav-show .sidebar.sidebar-base .sidebar-body,
body.g-sidenav-show .sidebar.sidebar-base .sidebar-list,
body.g-sidenav-show .sidebar.sidebar-base .sidebar-footer {
  background: transparent !important;
}

/* ── Post-login panel canvas (main area only; sidebar unchanged in light) ── */
html:not(.dark-mode):not(.deep-blue) body.g-sidenav-show:not(.panel-guest) {
  --panel-canvas-base: #eef2ff;
  background-color: var(--panel-canvas-base) !important;
  background-image:
    radial-gradient(ellipse 120% 90% at 100% -12%, rgba(59, 130, 246, 0.16) 0%, transparent 54%),
    radial-gradient(ellipse 90% 65% at -8% 102%, rgba(99, 102, 241, 0.09) 0%, transparent 50%),
    radial-gradient(ellipse 70% 45% at 48% 38%, rgba(255, 255, 255, 0.75) 0%, transparent 72%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 45%, #f1f5f9 100%) !important;
  background-attachment: fixed;
  min-height: 100dvh;
}

html.dark-mode:not(.deep-blue) body.g-sidenav-show:not(.panel-guest),
html[data-bs-theme="dark"]:not(.deep-blue) body.g-sidenav-show:not(.panel-guest) {
  background-color: #0f1419 !important;
  background-image:
    radial-gradient(ellipse 100% 75% at 100% 0%, rgba(37, 99, 235, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 80% 55% at 0% 100%, rgba(79, 70, 229, 0.14) 0%, transparent 52%),
    linear-gradient(180deg, #0f1419 0%, #121826 48%, #0f172a 100%) !important;
  background-attachment: fixed;
  min-height: 100dvh;
}

html.deep-blue body.g-sidenav-show:not(.panel-guest) {
  background-color: var(--db-canvas) !important;
  background-image:
    radial-gradient(ellipse 95% 70% at 92% -8%, rgba(58, 87, 232, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse 75% 50% at 4% 100%, rgba(30, 64, 175, 0.18) 0%, transparent 48%),
    linear-gradient(180deg, var(--db-canvas) 0%, var(--db-canvas-2) 100%) !important;
  background-attachment: fixed;
  min-height: 100dvh;
}

body.g-sidenav-show:not(.panel-guest) .main-content,
body.g-sidenav-show:not(.panel-guest) .main-content > .iq-banner,
body.g-sidenav-show:not(.panel-guest) #panel-ajax-content,
body.g-sidenav-show:not(.panel-guest) #page_layout.content-inner,
body.g-sidenav-show:not(.panel-guest) .content-inner.container-fluid {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Scrollbars — match pre-login landing (site-header.css) on authenticated panel (not admin) */
html:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) {
  scrollbar-width: thin;
  scrollbar-color: #3a57e8 #e8eeff;
}

html:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-track {
  background: #e8eeff;
  border-radius: 999px;
}

html:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-thumb {
  background: #3a57e8;
  border-radius: 999px;
}

html:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-thumb:hover {
  background: #2a43c7;
}

html.dark-mode:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) {
  scrollbar-color: #3a57e8 #1e293b;
}

html.dark-mode:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-track {
  background: #1e293b;
}

html.dark-mode:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-thumb {
  background: #3a57e8;
}

html.dark-mode:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-thumb:hover {
  background: #4f6ef0;
}

html.deep-blue:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) {
  scrollbar-color: #3a57e8 #0c0e14;
}

html.deep-blue:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-track {
  background: transparent;
}

html.deep-blue:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
}

html.deep-blue:has(body.g-sidenav-show:not(.panel-guest):not(.panel-admin)) ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

body.g-sidenav-show:not(.panel-guest):not(.panel-admin) .sidebar.sidebar-base .sidebar-body.data-scrollbar:not(.sidebar-scrollbar-idle) {
  scrollbar-color: #3a57e8 #e8eeff;
}

body.g-sidenav-show:not(.panel-guest):not(.panel-admin) .sidebar.sidebar-base .sidebar-body.data-scrollbar.sidebar-scrollbar-idle {
  scrollbar-color: transparent transparent;
}

body.g-sidenav-show:not(.panel-guest):not(.panel-admin) .sidebar.sidebar-base .sidebar-body.data-scrollbar.sidebar-scrollbar-idle::-webkit-scrollbar-thumb {
  background: transparent;
}

html.dark-mode body.g-sidenav-show:not(.panel-guest):not(.panel-admin) .sidebar.sidebar-base .sidebar-body.data-scrollbar:not(.sidebar-scrollbar-idle) {
  scrollbar-color: #3a57e8 #1e293b;
}

/* Admin panel — HopeUI-style subtle scrollbars (pre blue theme) */
html:has(body.panel-admin.g-sidenav-show) {
  scrollbar-width: thin;
  scrollbar-color: #d0d5dd transparent;
}

html:has(body.panel-admin.g-sidenav-show) ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

html:has(body.panel-admin.g-sidenav-show) ::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

html:has(body.panel-admin.g-sidenav-show) ::-webkit-scrollbar-track {
  background: var(--bs-body-bg, transparent);
  border-radius: 20px;
}

html:has(body.panel-admin.g-sidenav-show) ::-webkit-scrollbar-thumb {
  background: #eee;
  border-radius: 20px;
}

html:has(body.panel-admin.g-sidenav-show) ::-webkit-scrollbar-thumb:hover {
  background: #f0f0f0;
}

html.dark-mode:has(body.panel-admin.g-sidenav-show) {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

html.dark-mode:has(body.panel-admin.g-sidenav-show) ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

html.dark-mode:has(body.panel-admin.g-sidenav-show) ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

body.panel-admin.g-sidenav-show .sidebar.sidebar-base .sidebar-body.data-scrollbar:not(.sidebar-scrollbar-idle) {
  scrollbar-color: #d0d5dd transparent;
}

body.panel-admin.g-sidenav-show .sidebar.sidebar-base .sidebar-body.data-scrollbar:not(.sidebar-scrollbar-idle)::-webkit-scrollbar-thumb {
  background: rgba(208, 213, 221, 0.95);
}

body.panel-admin.g-sidenav-show .sidebar.sidebar-base .sidebar-body.data-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}