/**
 * 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 {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

.navbar-list .theme-toggle-btn.theme-toggle-btn--compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 0 0 0.5rem !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #1e293b !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  line-height: 0 !important;
}

.navbar-list .theme-toggle-btn.theme-toggle-btn--compact:hover {
  background: #0f172a !important;
}

.navbar-list .theme-toggle-btn .theme-icon {
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !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 {
  color: #facc15 !important;
}

html.deep-blue .navbar-list .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 {
  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;
}