/* DragonCore theme-only skin
   This file changes the look only. It does not replace dashboards, buttons,
   tables, links, routes, forms or page markup. */
:root {
  --dc-bg: #04070d;
  --dc-bg-soft: #07111d;
  --dc-sidebar: #070c14;
  --dc-topbar: #05070c;
  --dc-card: #111827;
  --dc-card-2: #151f31;
  --dc-card-3: #0d1522;
  --dc-border: rgba(92, 116, 150, .28);
  --dc-border-strong: rgba(31, 224, 255, .44);
  --dc-text: #f1f6ff;
  --dc-soft: #9aaabe;
  --dc-muted: #74859a;
  --dc-cyan: #18dcff;
  --dc-teal: #22e7b2;
  --dc-purple: #6f5cff;
  --dc-yellow: #f7c85f;
  --dc-red: #ff5578;
  --dc-radius: 20px;
  --dc-shadow: 0 18px 46px rgba(0, 0, 0, .36);
}

html body.dark-layout,
body.dragoncore-modern,
body.dark-layout {
  background:
    radial-gradient(circle at 0 0, rgba(24, 220, 255, .12), transparent 28rem),
    radial-gradient(circle at 100% 0, rgba(111, 92, 255, .15), transparent 32rem),
    linear-gradient(135deg, var(--dc-bg), #07101c 55%, #04070d) !important;
  color: var(--dc-text) !important;
  font-family: Rubik, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.dark-layout:before,
body.dragoncore-modern:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(24, 220, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 220, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .36;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
  z-index: -1;
}

.app-content,
.content-wrapper,
.content-body,
.content-overlay {
  background: transparent !important;
}

.content-wrapper {
  padding: 1.8rem 1.8rem 3rem !important;
}

/* Top bar */
.header-navbar,
.header-navbar.navbar-dark,
.header-navbar .navbar-container {
  background: linear-gradient(180deg, rgba(5, 7, 12, .98), rgba(6, 10, 18, .95)) !important;
  color: var(--dc-text) !important;
}

.header-navbar {
  border-bottom: 1px solid rgba(92, 116, 150, .18) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32) !important;
}

.header-navbar .navbar-container {
  min-height: 72px !important;
}

.header-msg,
.dhr-marquee {
  color: var(--dc-soft) !important;
  font-size: .85rem;
}

.header-navbar .user-name,
.header-navbar .nav-link,
.header-navbar .ficon {
  color: var(--dc-text) !important;
}

/* Sidebar */
.main-menu,
.main-menu.menu-dark,
.main-menu .navbar-header,
.main-menu .navigation,
.main-menu .main-menu-content {
  background: linear-gradient(180deg, rgba(7, 12, 20, .98), rgba(5, 9, 16, .98)) !important;
}

.main-menu {
  border-right: 1px solid rgba(24, 220, 255, .16) !important;
  box-shadow: 16px 0 42px rgba(0, 0, 0, .32) !important;
}

.main-menu .navbar-header {
  border-bottom: 1px solid rgba(92, 116, 150, .18) !important;
}

.main-menu .navbar-brand img,
.main-menu .logo {
  max-width: 165px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 16px rgba(24, 220, 255, .18));
}

.main-menu .navigation .navigation-header span {
  color: var(--dc-cyan) !important;
  font-size: .64rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.main-menu .navigation > li > a {
  margin: .18rem .72rem !important;
  border-radius: 14px !important;
  color: var(--dc-soft) !important;
  min-height: 42px;
  display: flex !important;
  align-items: center !important;
}

.main-menu .navigation > li > a > i,
.main-menu .navigation i.bx,
.dc-menu-icon {
  width: 22px !important;
  min-width: 22px !important;
  font-size: 21px !important;
  margin-right: .65rem !important;
  color: #8aa5d7 !important;
}

.main-menu .navigation li a:hover,
.main-menu .navigation li.active > a,
.main-menu .navigation li.open > a {
  background: linear-gradient(90deg, rgba(24, 220, 255, .17), rgba(111, 92, 255, .10)) !important;
  color: var(--dc-text) !important;
  box-shadow: inset 3px 0 0 var(--dc-cyan);
}

.main-menu .navigation li a:hover > i,
.main-menu .navigation li.active > a > i,
.main-menu .navigation li.open > a > i {
  color: var(--dc-cyan) !important;
}

.main-menu .navigation .menu-content {
  background: rgba(24, 220, 255, .035) !important;
  border-radius: 14px !important;
  margin: .25rem .72rem .65rem !important;
  padding: .35rem 0 !important;
}

.main-menu .navigation .menu-content li a {
  color: var(--dc-muted) !important;
  border-radius: 10px !important;
}

.main-menu .navigation .menu-content li a:hover,
.main-menu .navigation .menu-content li.active a {
  color: var(--dc-cyan) !important;
  background: rgba(24, 220, 255, .09) !important;
}

/* Cards */
.card,
.card.bg-authentication {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(23, 32, 50, .96), rgba(13, 22, 36, .96)) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius) !important;
  box-shadow: var(--dc-shadow) !important;
  color: var(--dc-text) !important;
}

.card:after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -56px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 220, 255, .22), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.card:nth-of-type(3n+1):after { background: radial-gradient(circle, rgba(34, 231, 178, .19), transparent 68%); }
.card:nth-of-type(3n+2):after { background: radial-gradient(circle, rgba(111, 92, 255, .20), transparent 68%); }

.card > * {
  position: relative;
  z-index: 1;
}

.card-header {
  background: rgba(9, 18, 31, .72) !important;
  border-bottom: 1px solid rgba(92, 116, 150, .20) !important;
  padding: 1.05rem 1.25rem !important;
}

.card-body {
  padding: 1.25rem !important;
}

.card-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--dc-text) !important;
  font-weight: 800;
}

.text-muted,
.card .text-muted,
label,
small {
  color: var(--dc-soft) !important;
}

/* Dashboard stat card helper from core/layout.php */
.dc-stat-card .card-body {
  min-height: 116px;
}
.dc-stat-topline {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dc-cyan), var(--dc-purple), var(--dc-teal));
}
.dc-stat-label {
  display: inline-flex;
  margin-bottom: .45rem;
  color: #a9b8cf;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dc-stat-value {
  color: var(--dc-text) !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}
.dc-stat-subtitle {
  margin-top: .65rem !important;
  color: var(--dc-soft) !important;
}
.icon-box-success,
.icon.icon-box-success {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
}
.icon-item,
.card .icon-item,
.bx.icon-item {
  color: var(--dc-cyan) !important;
  font-size: 1.2rem;
}

/* Buttons: same buttons, screenshot-like colors */
.btn {
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  box-shadow: none !important;
}
.btn-primary,
.btn-info,
.btn-outline-primary:hover,
.btn-outline-info:hover {
  background: linear-gradient(135deg, var(--dc-cyan), #3d8bff) !important;
  border-color: transparent !important;
  color: #03111d !important;
}
.btn-success,
.btn-outline-success:hover {
  background: linear-gradient(135deg, var(--dc-teal), #15b985) !important;
  border-color: transparent !important;
  color: #03120f !important;
}
.btn-outline-primary,
.btn-outline-info,
.btn-outline-success {
  background: rgba(24, 220, 255, .05) !important;
  border-color: rgba(24, 220, 255, .58) !important;
  color: var(--dc-cyan) !important;
}
.btn-warning {
  background: linear-gradient(135deg, var(--dc-yellow), #ff9f43) !important;
  border-color: transparent !important;
  color: #1d1300 !important;
}
.btn-danger {
  background: linear-gradient(135deg, var(--dc-red), #c9184a) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.btn-light-secondary,
.btn-secondary {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: var(--dc-text) !important;
}

/* Forms */
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="url"] {
  background: rgba(5, 12, 22, .86) !important;
  border: 1px solid rgba(92, 116, 150, .28) !important;
  color: var(--dc-text) !important;
  border-radius: 13px !important;
}
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--dc-cyan) !important;
  box-shadow: 0 0 0 3px rgba(24, 220, 255, .14) !important;
  outline: none !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(154, 170, 190, .68) !important;
}

/* Tables */
.table {
  color: var(--dc-text) !important;
  margin-bottom: 0 !important;
}
.table thead th {
  background: rgba(7, 15, 27, .94) !important;
  color: var(--dc-cyan) !important;
  border-color: rgba(24, 220, 255, .22) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: .95rem 1.15rem !important;
}
.table td,
.table th {
  border-color: rgba(92, 116, 150, .20) !important;
  vertical-align: middle !important;
}
.table tbody tr:hover {
  background: rgba(24, 220, 255, .06) !important;
}
.table-responsive {
  border-radius: 0 0 var(--dc-radius) var(--dc-radius) !important;
}

/* Dropdowns and modals */
.dropdown-menu {
  background: rgba(13, 22, 36, .98) !important;
  border: 1px solid rgba(24, 220, 255, .28) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .42) !important;
}
.dropdown-item {
  color: var(--dc-soft) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(24, 220, 255, .10) !important;
  color: var(--dc-text) !important;
}
.dropdown-divider {
  border-color: rgba(92, 116, 150, .22) !important;
}
.avatar.bg-success,
.badge-success,
.bg-success {
  background: linear-gradient(135deg, var(--dc-teal), #16bd8b) !important;
  color: #03120f !important;
}
.badge,
.badge-primary,
.badge-info {
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.modal-content {
  background: var(--dc-card) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius) !important;
  box-shadow: var(--dc-shadow) !important;
}
.modal-header,
.modal-footer {
  border-color: var(--dc-border) !important;
}
.alert {
  border-radius: 14px !important;
}

/* Login/auth page uses the same palette without changing layout. */
.blank-page .card.bg-authentication {
  border-color: rgba(24, 220, 255, .22) !important;
}
.blank-page .disable-rounded-right {
  background: rgba(11, 18, 30, .98) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #050a12; }
::-webkit-scrollbar-thumb { background: rgba(92, 116, 150, .42); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(24, 220, 255, .65); }

@media (max-width: 767.98px) {
  .content-wrapper { padding: 1.05rem .9rem 2rem !important; }
  .card-header { align-items: flex-start !important; }
}

/* DragonCore safe top-spacing hotfix
   Fixes page content being hidden behind the fixed topbar without changing
   the navbar button/user/marquee layout. */
html body.navbar-sticky .app-content .content-wrapper,
body.navbar-sticky .app-content .content-wrapper,
body.vertical-layout.navbar-sticky .app-content .content-wrapper {
  margin-top: 5rem !important;
  padding-top: 1.35rem !important;
}

.header-navbar,
.header-navbar.fixed-top,
.header-navbar.main-header-navbar,
.header-navbar .navbar-wrapper,
.header-navbar .navbar-container,
.header-navbar #navbar-mobile {
  overflow: visible !important;
}

/* Keep the original Frest navbar height and alignment.  Do not force 76px. */
.header-navbar.fixed-top,
.header-navbar.main-header-navbar {
  min-height: 4rem !important;
  height: auto !important;
}

.header-navbar .navbar-container {
  min-height: 4rem !important;
}

.header-navbar #navbar-mobile {
  min-height: 4rem !important;
  align-items: center !important;
}

.header-navbar .bookmark-wrapper {
  min-height: 4rem !important;
  align-items: center !important;
}

.header-msg {
  height: 4rem !important;
  line-height: 4rem !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dhr-marquee {
  height: 4rem !important;
  line-height: 4rem !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-navbar .nav-item.dropdown.d-none.d-lg-block {
  height: 4rem !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 .65rem 0 0 !important;
  padding: 0 !important;
}

.header-navbar .nav-item.dropdown.d-none.d-lg-block .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  line-height: 1 !important;
  padding: .65rem 1.15rem !important;
}

.header-navbar .navbar-container ul.nav li a.dropdown-user-link {
  min-height: 4rem !important;
  height: 4rem !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.header-navbar .user-nav,
.header-navbar .user-name,
.header-navbar .avatar,
.header-navbar .avatar-content {
  line-height: 1.2 !important;
}

.main-menu .navbar-header {
  min-height: 4rem !important;
  height: auto !important;
  overflow: visible !important;
}

/* DragonCore sidebar/search hotfix
   Scope: visual alignment only. Keeps navbar buttons, routes, API and security code untouched. */

/* Keep table search inputs inside the card header instead of clipping into the table. */
.card .card-header:has(#searchServ) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-height: 66px !important;
  overflow: visible !important;
}

.card .card-header:has(#searchServ) .card-title {
  margin: 0 !important;
  min-width: 0 !important;
}

.card .card-header:has(#searchServ) .heading-elements {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: auto !important;
  cursor: default !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}

#searchServ.form-control,
#searchServ {
  width: 230px !important;
  max-width: 38vw !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: .55rem .9rem !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

/* When the sidebar is minimized, hide only the large logo and keep the
   collapse/expand control visible and clickable. */
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header {
  width: 78px !important;
  min-height: 4rem !important;
  overflow: visible !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .navbar-nav {
  width: 78px !important;
  height: 4rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .nav-item.mr-auto,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .navbar-brand {
  display: none !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .nav-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .modern-nav-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: rgba(24, 220, 255, .10) !important;
  border: 1px solid rgba(24, 220, 255, .28) !important;
  color: var(--dc-cyan) !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .modern-nav-toggle .toggle-icon,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .modern-nav-toggle i {
  display: block !important;
  margin: 0 !important;
  color: var(--dc-cyan) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

/* Compact menu item alignment in collapsed mode: icon stays centered, no cropped text. */
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li > a {
  width: 52px !important;
  min-height: 44px !important;
  margin: .18rem auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li > a > i,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation i.bx,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .dc-menu-icon {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  line-height: 1 !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li > a .menu-title,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li > a .badge {
  display: none !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-header {
  height: .65rem !important;
  min-height: 0 !important;
  margin: .55rem 0 .15rem !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 767.98px) {
  .card .card-header:has(#searchServ) {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .card .card-header:has(#searchServ) .heading-elements,
  #searchServ.form-control,
  #searchServ {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* DragonCore sidebar width stability hotfix
   Prevent the sidebar from expanding unpredictably when submenus open. */
@media (min-width: 992px) {
  body.vertical-layout.vertical-menu-modern .main-menu,
  body.vertical-layout.vertical-menu-modern .main-menu.menu-dark {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    overflow-x: hidden !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content,
  body.vertical-layout.vertical-menu-modern .main-menu .navbar-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .app-content,
  body.vertical-layout.vertical-menu-modern .footer,
  body.vertical-layout.vertical-menu-modern .navbar.fixed-top {
    margin-left: 260px !important;
  }

  body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded),
  body.vertical-layout.vertical-menu-modern.menu-hide .main-menu {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .footer,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar.fixed-top,
  body.vertical-layout.vertical-menu-modern.menu-hide .app-content,
  body.vertical-layout.vertical-menu-modern.menu-hide .footer,
  body.vertical-layout.vertical-menu-modern.menu-hide .navbar.fixed-top {
    margin-left: 80px !important;
  }

  body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .navigation-header {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a .menu-title,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .navigation-header span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content {
    overflow: hidden !important;
  }
}

/* DragonCore top welcome-bar alignment hotfix
   Fixes the detached/offset marquee bar after sidebar width stabilization. */
@media (min-width: 992px) {
  body.vertical-layout.vertical-menu-modern .navbar.fixed-top,
  body.vertical-layout.vertical-menu-modern .header-navbar {
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  body.vertical-layout.vertical-menu-modern .header-navbar .navbar-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .header-navbar .bookmark-wrapper,
  body.vertical-layout.vertical-menu-modern .header-navbar #navbar-mobile,
  body.vertical-layout.vertical-menu-modern .header-navbar .navbar-nav {
    min-width: 0 !important;
  }

  body.vertical-layout.vertical-menu-modern .header-msg,
  body.vertical-layout.vertical-menu-modern .dhr-marquee {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  body.vertical-layout.vertical-menu-modern .dhr-marquee {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

/* DragonCore topbar follows sidebar collapse hotfix
   The fixed header must use left/right positioning, not inherited margins,
   so it follows both expanded and collapsed sidebar widths. */
@media (min-width: 992px) {
  body.vertical-layout.vertical-menu-modern .header-navbar.fixed-top,
  body.vertical-layout.vertical-menu-modern .header-navbar.main-header-navbar,
  body.vertical-layout.vertical-menu-modern .navbar.fixed-top {
    left: 260px !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.fixed-top,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.main-header-navbar,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar.fixed-top,
  body.vertical-layout.vertical-menu-modern.menu-hide .header-navbar.fixed-top,
  body.vertical-layout.vertical-menu-modern.menu-hide .header-navbar.main-header-navbar,
  body.vertical-layout.vertical-menu-modern.menu-hide .navbar.fixed-top {
    left: 80px !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
  }

  body.vertical-layout.vertical-menu-modern .header-navbar .navbar-wrapper,
  body.vertical-layout.vertical-menu-modern .header-navbar .navbar-container,
  body.vertical-layout.vertical-menu-modern .header-navbar #navbar-mobile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .header-navbar .bookmark-wrapper {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.vertical-layout.vertical-menu-modern .header-msg,
  body.vertical-layout.vertical-menu-modern .dhr-marquee {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* DragonCore sidebar submenu crop hotfix
   Keeps dropdown/submenu options inside the fixed sidebar width. */
@media (min-width: 992px) {
  body.vertical-layout.vertical-menu-modern .main-menu .navigation li.open,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation li.has-sub,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation li.nav-item {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a {
    width: calc(100% - 1.44rem) !important;
    max-width: calc(100% - 1.44rem) !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content {
    width: calc(100% - 1.44rem) !important;
    max-width: calc(100% - 1.44rem) !important;
    margin: .25rem .72rem .65rem !important;
    padding: .35rem .35rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a {
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    min-height: 38px !important;
    margin: .05rem 0 !important;
    padding: .58rem .62rem !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a i,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a .bx,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a svg {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    font-size: 17px !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a span,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li a .menu-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation li.has-sub > a:after,
  body.vertical-layout.vertical-menu-modern .main-menu .navigation li.open > a:after {
    right: .8rem !important;
  }
}

/* DragonCore sidebar scroll hotfix
   The lower menu items were not missing; the sidebar content had no vertical scroll. */
@media (min-width: 992px) {
  body.vertical-layout.vertical-menu-modern .main-menu,
  body.vertical-layout.vertical-menu-modern .main-menu.menu-dark {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navbar-header {
    flex: 0 0 4rem !important;
    min-height: 4rem !important;
    max-height: 4rem !important;
    overflow: visible !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content,
  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content.ps,
  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content.ps-container {
    height: calc(100vh - 4rem) !important;
    max-height: calc(100vh - 4rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(24, 220, 255, .45) rgba(5, 10, 18, .35) !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation {
    min-height: auto !important;
    padding-bottom: 2.25rem !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content::-webkit-scrollbar {
    width: 7px !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content::-webkit-scrollbar-track {
    background: rgba(5, 10, 18, .35) !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content::-webkit-scrollbar-thumb {
    background: rgba(24, 220, 255, .45) !important;
    border-radius: 999px !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(24, 220, 255, .70) !important;
  }
}

@media (max-width: 991.98px) {
  body.vertical-layout.vertical-menu-modern .main-menu,
  body.vertical-layout.vertical-menu-modern .main-menu.menu-dark {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content,
  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content.ps,
  body.vertical-layout.vertical-menu-modern .main-menu .main-menu-content.ps-container {
    height: calc(100vh - 4rem) !important;
    max-height: calc(100vh - 4rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu .navigation {
    padding-bottom: 2.25rem !important;
  }
}

/* DragonCore mobile sidebar toggle hotfix
   Keeps the hamburger clickable and lets the sidebar slide in/out on phones. */
@media (max-width: 991.98px) {
  body.vertical-layout.vertical-menu-modern .header-navbar.fixed-top,
  body.vertical-layout.vertical-menu-modern .header-navbar.main-header-navbar,
  body.vertical-layout.vertical-menu-modern .navbar.fixed-top {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    z-index: 1045 !important;
    transform: none !important;
  }

  body.vertical-layout.vertical-menu-modern .header-navbar .navbar-container,
  body.vertical-layout.vertical-menu-modern .header-navbar .navbar-wrapper,
  body.vertical-layout.vertical-menu-modern .header-navbar #navbar-mobile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  body.vertical-layout.vertical-menu-modern .header-navbar .nav-toggle,
  body.vertical-layout.vertical-menu-modern .header-navbar .modern-nav-toggle,
  body.vertical-layout.vertical-menu-modern .header-navbar .navbar-toggler,
  body.vertical-layout.vertical-menu-modern .header-navbar .menu-toggle,
  body.vertical-layout.vertical-menu-modern .header-navbar [data-toggle="collapse"],
  body.vertical-layout.vertical-menu-modern .header-navbar [data-toggle="menu"] {
    position: relative !important;
    z-index: 1060 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu:not(.expanded) {
    left: 0 !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    transform: translate3d(-110%, 0, 0) !important;
    transition: transform .25s ease !important;
    pointer-events: none !important;
    z-index: 1040 !important;
  }

  body.vertical-layout.vertical-menu-modern.menu-open .main-menu,
  body.vertical-layout.vertical-menu-modern .main-menu.expanded {
    left: 0 !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
    z-index: 1050 !important;
  }

  body.vertical-layout.vertical-menu-modern .app-content,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
  body.vertical-layout.vertical-menu-modern.menu-hide .app-content,
  body.vertical-layout.vertical-menu-modern .footer,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .footer,
  body.vertical-layout.vertical-menu-modern.menu-hide .footer {
    margin-left: 0 !important;
  }

  body.vertical-layout.vertical-menu-modern .sidenav-overlay,
  body.vertical-layout.vertical-menu-modern .content-overlay {
    z-index: 1048 !important;
  }

  body.vertical-layout.vertical-menu-modern:not(.menu-open) .sidenav-overlay,
  body.vertical-layout.vertical-menu-modern:not(.menu-open) .content-overlay {
    pointer-events: none !important;
  }
}

/* DragonCore login positioning hotfix
   The login page uses the same body classes as the dashboard, so the sidebar/topbar
   spacing rules must be disabled on blank auth pages. */
body.blank-page.vertical-layout.vertical-menu-modern,
body.blank-page.vertical-layout.vertical-menu-modern.dark-layout {
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body.blank-page.vertical-layout.vertical-menu-modern .main-menu,
body.blank-page.vertical-layout.vertical-menu-modern .header-navbar,
body.blank-page.vertical-layout.vertical-menu-modern .footer {
  display: none !important;
}

body.blank-page.vertical-layout.vertical-menu-modern .app-content,
body.blank-page.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
body.blank-page.vertical-layout.vertical-menu-modern.menu-hide .app-content,
body.blank-page.vertical-layout.navbar-sticky .app-content,
body.blank-page.vertical-layout.vertical-menu-modern .content.app-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  transform: none !important;
}

body.blank-page.vertical-layout.vertical-menu-modern .app-content .content-wrapper,
body.blank-page.vertical-layout.navbar-sticky .app-content .content-wrapper,
html body.blank-page.navbar-sticky .app-content .content-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.blank-page .content-body {
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.blank-page #auth-login.flexbox-container,
body.blank-page #auth-login {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 2rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.blank-page #auth-login > .col-xl-8,
body.blank-page #auth-login > .col-11 {
  flex: 0 1 1080px !important;
  max-width: 1080px !important;
  width: min(1080px, calc(100vw - 2rem)) !important;
  margin: 0 auto !important;
}

body.blank-page .card.bg-authentication {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.blank-page .card.bg-authentication .row.m-0 {
  min-height: 520px !important;
}

body.blank-page .card.bg-authentication .disable-rounded-right {
  min-height: 520px !important;
}

@media (max-width: 767.98px) {
  body.blank-page .app-content .content-wrapper,
  body.blank-page .content-body,
  body.blank-page #auth-login.flexbox-container,
  body.blank-page #auth-login {
    min-height: 100dvh !important;
  }

  body.blank-page #auth-login {
    padding: 1rem !important;
  }

  body.blank-page #auth-login > .col-xl-8,
  body.blank-page #auth-login > .col-11 {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  body.blank-page .card.bg-authentication .row.m-0,
  body.blank-page .card.bg-authentication .disable-rounded-right {
    min-height: auto !important;
  }
}