:root {
  --tagtronix-admin-primary: #111827;
  --tagtronix-admin-primary-hover: #1f2937;
  --tagtronix-admin-primary-border: #374151;
  --tagtronix-admin-primary-soft: #f3f4f6;
  --ttx-nav-bg: #111827;
  --ttx-nav-bg-alt: #0f172a;
  --ttx-nav-bg-2: #0f172a;
  --ttx-nav-bg-hover: #1f2937;
  --ttx-nav-hover: #1f2937;
  --ttx-nav-text: #f9fafb;
  --ttx-nav-muted: #d1d5db;
  --ttx-nav-icon: #f3f4f6;
  --ttx-nav-border: #374151;
  --ttx-danger: #dc2626;
}

/* TagTroniX ESL Cloud premium graphite admin theme. Presentation-only override. */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
.skin-blue .main-header li.user-header,
.main-header .navbar,
.main-header .logo,
.navbar.navbar-static-top {
  background-color: var(--tagtronix-admin-primary) !important;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .logo:hover,
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a,
.main-header .navbar .nav .open > a:hover,
.main-header .navbar .nav .open > a:focus {
  background-color: var(--tagtronix-admin-primary-hover) !important;
}

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side,
.main-sidebar,
.left-side {
  background-color: var(--tagtronix-admin-primary) !important;
}

.skin-blue .sidebar-menu > li.header {
  color: #9ca3af !important;
  background: #0b1220 !important;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a,
.skin-blue .sidebar-menu > li > .treeview-menu,
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background-color: var(--tagtronix-admin-primary-hover) !important;
  border-left-color: #ffffff !important;
}

.skin-blue .sidebar-menu > li > a,
.skin-blue .treeview-menu > li > a,
.sidebar-menu > li > a,
.treeview-menu > li > a {
  color: #d1d5db !important;
}

.skin-blue .treeview-menu,
.treeview-menu {
  background: #0b1220 !important;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover,
.treeview-menu > li.active > a,
.treeview-menu > li > a:hover {
  color: #ffffff !important;
  background: var(--tagtronix-admin-primary-hover) !important;
}

.btn-primary,
.bg-light-blue,
.label-primary,
.modal-primary .modal-body,
.modal-primary .modal-header,
.box.box-primary,
.box.box-solid.box-primary > .box-header,
.nav-tabs-custom > .nav-tabs > li.active {
  border-color: var(--tagtronix-admin-primary-border) !important;
}

.btn-primary,
.bg-light-blue,
.label-primary,
.modal-primary .modal-body,
.modal-primary .modal-header,
.box.box-solid.box-primary > .box-header,
.pagination > .active > a,
.pagination > .active > span,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--tagtronix-admin-primary) !important;
  border-color: var(--tagtronix-admin-primary-border) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--tagtronix-admin-primary-hover) !important;
  border-color: var(--tagtronix-admin-primary-border) !important;
}

a,
.text-light-blue,
.text-primary {
  color: var(--tagtronix-admin-primary) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--tagtronix-admin-primary) !important;
}


/* TagTroniX navbar/sidebar icon visibility fix. Keep graphite nav; restore icon/text contrast. */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
.skin-blue .main-header li.user-header,
.main-header,
.main-header .navbar,
.main-header .logo,
.navbar.navbar-static-top,
.top-navbar,
.navbar {
  background-color: var(--ttx-nav-bg) !important;
  color: var(--ttx-nav-text) !important;
}

/* Top-level navbar controls: icons, labels, arrows, refresh/fullscreen/settings/user/menu links. */
.skin-blue .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .navbar-custom-menu > .navbar-nav > li > a,
.skin-blue .main-header .navbar .navbar-right > li > a,
.main-header .navbar a,
.main-header .navbar button,
.main-header .navbar .dropdown-toggle,
.main-header .navbar .nav-link,
.main-header .navbar .sidebar-toggle,
.main-header .navbar .navbar-custom-menu > .navbar-nav > li > a,
.main-header .logo,
.main-header .logo-lg,
.main-header .logo-mini,
.top-navbar a,
.top-navbar button,
.top-navbar .dropdown-toggle,
.top-navbar .nav-link {
  color: var(--ttx-nav-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.skin-blue .main-header .navbar .nav > li > a > i,
.skin-blue .main-header .navbar .nav > li > a > .fa,
.skin-blue .main-header .navbar .nav > li > a > .glyphicon,
.main-header .navbar i,
.main-header .navbar .fa,
.main-header .navbar .glyphicon,
.main-header .navbar .ion,
.main-header .navbar svg,
.main-header .navbar [class^="fa-"],
.main-header .navbar [class*=" fa-"],
.main-header .navbar [class^="glyphicon-"],
.main-header .navbar [class*=" glyphicon-"],
.top-navbar i,
.top-navbar .fa,
.top-navbar .glyphicon,
.top-navbar svg {
  color: var(--ttx-nav-icon) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.main-header .navbar a:hover,
.main-header .navbar a:focus,
.main-header .navbar button:hover,
.main-header .navbar button:focus,
.main-header .navbar .dropdown-toggle:hover,
.main-header .navbar .dropdown-toggle:focus,
.main-header .navbar .open > a,
.main-header .navbar .open > a:hover,
.main-header .navbar .open > a:focus,
.top-navbar a:hover,
.top-navbar button:hover,
.top-navbar .dropdown-toggle:hover {
  background-color: var(--ttx-nav-bg-hover) !important;
  color: #ffffff !important;
}

.main-header .navbar a:hover i,
.main-header .navbar a:focus i,
.main-header .navbar a:hover .fa,
.main-header .navbar a:focus .fa,
.main-header .navbar a:hover .glyphicon,
.main-header .navbar a:focus .glyphicon,
.main-header .navbar a:hover svg,
.main-header .navbar a:focus svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Keep counters visible without changing success/warning/error badge backgrounds. */
.main-header .navbar .label,
.main-header .navbar .badge,
.top-navbar .label,
.top-navbar .badge {
  color: #ffffff !important;
  opacity: 1 !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}

/* Dropdown panels are light; their internal links/icons must remain dark and readable. */
.main-header .navbar .dropdown-menu,
.main-header .navbar .dropdown-menu > li > a,
.main-header .navbar .dropdown-menu .menu > li > a,
.main-header .navbar .dropdown-menu .header,
.main-header .navbar .dropdown-menu .footer,
.main-header .navbar .dropdown-menu .footer > a,
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu,
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu a {
  color: #111827 !important;
}

.main-header .navbar .dropdown-menu i,
.main-header .navbar .dropdown-menu .fa,
.main-header .navbar .dropdown-menu .glyphicon,
.main-header .navbar .dropdown-menu svg {
  color: #374151 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

.main-header .navbar .dropdown-menu > li > a:hover,
.main-header .navbar .dropdown-menu .menu > li > a:hover,
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu a:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Sidebar icons and text: visible in normal, active, hover, treeview states. */
.skin-blue .main-sidebar,
.skin-blue .left-side,
.main-sidebar,
.left-side {
  background-color: var(--ttx-nav-bg) !important;
  color: var(--ttx-nav-muted) !important;
}

.skin-blue .sidebar a,
.skin-blue .sidebar-menu > li > a,
.skin-blue .treeview-menu > li > a,
.sidebar a,
.sidebar-menu > li > a,
.treeview-menu > li > a {
  color: var(--ttx-nav-muted) !important;
  opacity: 1 !important;
}

.skin-blue .sidebar i,
.skin-blue .sidebar .fa,
.skin-blue .sidebar .glyphicon,
.skin-blue .sidebar svg,
.skin-blue .sidebar-menu i,
.skin-blue .sidebar-menu .fa,
.skin-blue .sidebar-menu .glyphicon,
.sidebar i,
.sidebar .fa,
.sidebar .glyphicon,
.sidebar svg,
.sidebar-menu i,
.sidebar-menu .fa,
.sidebar-menu .glyphicon {
  color: var(--ttx-nav-icon) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a,
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover,
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a,
.treeview-menu > li.active > a,
.treeview-menu > li > a:hover {
  background-color: var(--ttx-nav-bg-hover) !important;
  color: #ffffff !important;
  border-left-color: #ffffff !important;
}

.skin-blue .sidebar-menu > li:hover > a i,
.skin-blue .sidebar-menu > li.active > a i,
.skin-blue .sidebar-menu > li.menu-open > a i,
.skin-blue .treeview-menu > li.active > a i,
.skin-blue .treeview-menu > li > a:hover i,
.sidebar-menu > li:hover > a i,
.sidebar-menu > li.active > a i,
.sidebar-menu > li.menu-open > a i,
.treeview-menu > li.active > a i,
.treeview-menu > li > a:hover i,
.sidebar-menu > li:hover > a .fa,
.sidebar-menu > li.active > a .fa,
.sidebar-menu > li:hover > a .glyphicon,
.sidebar-menu > li.active > a .glyphicon {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}


/* TagTroniX final white logo and dark user dropdown refinement. Presentation-only. */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
.skin-blue .main-header li.user-header,
.main-header,
.main-header .navbar,
.main-header .logo,
.navbar.navbar-static-top,
.top-navbar,
.navbar {
  background: var(--ttx-nav-bg) !important;
  background-color: var(--ttx-nav-bg) !important;
  color: var(--ttx-nav-text) !important;
  border-color: var(--ttx-nav-border) !important;
}

/* White-only TagTroniX Admin logo/text/icon. Removes old blue visual accents without changing markup. */
.main-header .logo,
.main-header .logo:hover,
.main-header .logo:focus,
.main-header .logo .logo-lg,
.main-header .logo .logo-mini,
.main-header .logo .logo-lg b,
.main-header .logo .logo-mini b,
.main-header .logo span,
.main-header .logo strong,
.main-header .logo i,
.main-header .logo .fa,
.main-header .logo .glyphicon,
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
  color: var(--ttx-nav-text) !important;
  background: var(--ttx-nav-bg) !important;
  background-color: var(--ttx-nav-bg) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.main-header .logo img,
.main-header .logo svg,
.main-header .navbar-brand img,
.main-header .navbar-brand svg {
  color: var(--ttx-nav-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: brightness(0) invert(1) grayscale(1) contrast(1.08) !important;
}

/* All top nav icons and controls stay white/light on graphite, including arrows/fullscreen/refresh/settings/user. */
.main-header .navbar a,
.main-header .navbar button,
.main-header .navbar .dropdown-toggle,
.main-header .navbar .nav-link,
.main-header .navbar .sidebar-toggle,
.main-header .navbar .navbar-custom-menu > .navbar-nav > li > a,
.main-header .navbar .navbar-right > li > a,
.main-header .navbar i,
.main-header .navbar .fa,
.main-header .navbar .glyphicon,
.main-header .navbar .ion,
.main-header .navbar svg,
.main-header .navbar .caret,
.top-navbar a,
.top-navbar button,
.top-navbar i,
.top-navbar svg {
  color: var(--ttx-nav-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.main-header .navbar a:hover,
.main-header .navbar a:focus,
.main-header .navbar button:hover,
.main-header .navbar button:focus,
.main-header .navbar .open > a,
.main-header .navbar .open > a:hover,
.main-header .navbar .open > a:focus,
.main-header .navbar .dropdown-toggle:hover,
.main-header .navbar .dropdown-toggle:focus {
  background: var(--ttx-nav-hover) !important;
  background-color: var(--ttx-nav-hover) !important;
  color: #ffffff !important;
}

.main-header .navbar a:hover i,
.main-header .navbar a:hover .fa,
.main-header .navbar a:hover .glyphicon,
.main-header .navbar a:hover svg,
.main-header .navbar a:focus i,
.main-header .navbar a:focus .fa,
.main-header .navbar a:focus .glyphicon,
.main-header .navbar a:focus svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Dark user/account dropdown. Keep dropdown behavior/layout; change only colors. */
.main-header .navbar .user-menu > .dropdown-menu,
.main-header .navbar .user-menu > .dropdown-menu > .user-header,
.main-header .navbar .user-menu > .dropdown-menu > .user-body,
.main-header .navbar .user-menu > .dropdown-menu > .user-footer,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-header,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-body,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  background: var(--ttx-nav-bg-2) !important;
  background-color: var(--ttx-nav-bg-2) !important;
  color: var(--ttx-nav-text) !important;
  border-color: var(--ttx-nav-border) !important;
}

.main-header .navbar .user-menu > .dropdown-menu,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu {
  border: 1px solid var(--ttx-nav-border) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38) !important;
}

.main-header .navbar .user-menu > .dropdown-menu a,
.main-header .navbar .user-menu > .dropdown-menu p,
.main-header .navbar .user-menu > .dropdown-menu small,
.main-header .navbar .user-menu > .dropdown-menu span,
.main-header .navbar .user-menu > .dropdown-menu i,
.main-header .navbar .user-menu > .dropdown-menu .fa,
.main-header .navbar .user-menu > .dropdown-menu .glyphicon,
.main-header .navbar .user-menu > .dropdown-menu svg,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu a,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu p,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu small,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu span,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu i,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu .fa,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu .glyphicon,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu svg {
  color: var(--ttx-nav-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

.main-header .navbar .user-menu > .dropdown-menu > .user-footer .btn,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn {
  border-radius: 4px !important;
  border: 1px solid var(--ttx-nav-border) !important;
  box-shadow: none !important;
}

/* Settings/profile button: dark gray. */
.main-header .navbar .user-menu > .dropdown-menu > .user-footer .pull-left .btn,
.main-header .navbar .user-menu > .dropdown-menu > .user-footer .btn-default,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-footer .pull-left .btn,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
  background: var(--ttx-nav-hover) !important;
  background-color: var(--ttx-nav-hover) !important;
  color: var(--ttx-nav-text) !important;
  border-color: var(--ttx-nav-border) !important;
}

/* Sign out button: red. Covers common Laravel-admin/AdminLTE logout markup. */
.main-header .navbar .user-menu > .dropdown-menu > .user-footer .pull-right .btn,
.main-header .navbar .user-menu > .dropdown-menu > .user-footer .btn-danger,
.main-header .navbar .user-menu > .dropdown-menu a[href*="logout"],
.main-header .navbar .user-menu > .dropdown-menu a[href*="auth/logout"],
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-footer .pull-right .btn,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-danger,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu a[href*="logout"],
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu a[href*="auth/logout"] {
  background: var(--ttx-danger) !important;
  background-color: var(--ttx-danger) !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}

.main-header .navbar .user-menu > .dropdown-menu > .user-footer .btn:hover,
.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn:hover {
  filter: brightness(1.08) !important;
}

/* Keep non-user dropdowns readable; only user dropdown becomes dark. */
.main-header .navbar .dropdown-menu:not(.user-menu > .dropdown-menu):not(.user-menu .dropdown-menu) {
  border-color: var(--ttx-nav-border) !important;
}

/* Mobile navbar inherits the same graphite contrast. */
@media (max-width: 767px) {
  .main-header .navbar,
  .main-header .logo,
  .skin-blue .main-header .navbar,
  .skin-blue .main-header .logo {
    background: var(--ttx-nav-bg) !important;
    color: var(--ttx-nav-text) !important;
  }

  .main-header .navbar a,
  .main-header .navbar i,
  .main-header .navbar .fa,
  .main-header .navbar .glyphicon,
  .main-header .navbar svg {
    color: var(--ttx-nav-text) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }
}


/* TagTroniX SVG mark injection for ESL Admin logo. White-only, presentation-only. */
.main-header .logo,
.skin-blue .main-header .logo {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--ttx-nav-text) !important;
  background: var(--ttx-nav-bg) !important;
  background-color: var(--ttx-nav-bg) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

.main-header .logo::before,
.skin-blue .main-header .logo::before {
  content: "" !important;
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  background-color: currentColor !important;
  color: #ffffff !important;
  -webkit-mask: url('/assets/branding/tagtronix-mark-white.svg?v=20260607-approved') center / contain no-repeat !important;
  mask: url('/assets/branding/tagtronix-mark-white.svg?v=20260607-approved') center / contain no-repeat !important;
  opacity: 1 !important;
}

.main-header .logo .logo-lg,
.main-header .logo .logo-mini,
.skin-blue .main-header .logo .logo-lg,
.skin-blue .main-header .logo .logo-mini {
  color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .main-header .logo::before,
  .skin-blue .main-header .logo::before {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }
}


/* TagTroniX collapsed sidebar logo behavior. Expanded: mark + text. Collapsed: centered mark only. */
.main-header .logo,
.skin-blue .main-header .logo {
  justify-content: center !important;
  min-height: 50px !important;
  line-height: normal !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.main-header .logo::before,
.skin-blue .main-header .logo::before,
.ttx-logo {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  margin: 0 !important;
}

.main-header .logo .logo-lg,
.skin-blue .main-header .logo .logo-lg,
.ttx-brand-text {
  display: inline-block !important;
  color: #ffffff !important;
  line-height: 36px !important;
  vertical-align: middle !important;
}

.sidebar-collapse .ttx-brand-text,
.mini-sidebar .ttx-brand-text,
.sidebar-mini.sidebar-collapse .ttx-brand-text,
.sidebar-collapse .main-header .logo .logo-lg,
.sidebar-collapse .main-header .logo .logo-mini,
.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg,
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini,
.mini-sidebar .main-header .logo .logo-lg,
.mini-sidebar .main-header .logo .logo-mini,
body.sidebar-collapse .main-header .logo .logo-lg,
body.sidebar-collapse .main-header .logo .logo-mini,
body.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg,
body.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini {
  display: none !important;
}

.sidebar-collapse .main-header .logo,
.mini-sidebar .main-header .logo,
.sidebar-mini.sidebar-collapse .main-header .logo,
body.sidebar-collapse .main-header .logo,
body.sidebar-mini.sidebar-collapse .main-header .logo {
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 9px 0 !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  text-align: center !important;
  overflow: hidden !important;
}

.sidebar-collapse .main-header .logo::before,
.mini-sidebar .main-header .logo::before,
.sidebar-mini.sidebar-collapse .main-header .logo::before,
body.sidebar-collapse .main-header .logo::before,
body.sidebar-mini.sidebar-collapse .main-header .logo::before,
.sidebar-collapse .ttx-logo,
.mini-sidebar .ttx-logo,
.sidebar-mini.sidebar-collapse .ttx-logo {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  margin: 0 auto !important;
  display: block !important;
}

@media (max-width: 767px) {
  .main-header .logo,
  .skin-blue .main-header .logo {
    justify-content: center !important;
    min-height: 50px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  .main-header .logo::before,
  .skin-blue .main-header .logo::before,
  .ttx-logo {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 auto !important;
  }
}


/* TagTroniX final exact logo placement override. Real DOM: header.main-header > a.logo > .logo-mini/.logo-lg. */
.main-header .logo,
.skin-blue .main-header .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 50px !important;
  line-height: normal !important;
  padding: 7px 12px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background: var(--ttx-nav-bg) !important;
  background-color: var(--ttx-nav-bg) !important;
  font-size: 0 !important;
  text-indent: 0 !important;
}

/* Remove old Laravel/AdminLTE logo HTML so only the controlled SVG mark and controlled text render. */
.main-header .logo .logo-lg,
.main-header .logo .logo-mini,
.skin-blue .main-header .logo .logo-lg,
.skin-blue .main-header .logo .logo-mini {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.main-header .logo::before,
.skin-blue .main-header .logo::before {
  content: "" !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  margin: 0 !important;
  background-image: url('/assets/branding/tagtronix-mark-white.svg?v=20260607-approved') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

.main-header .logo::after,
.skin-blue .main-header .logo::after {
  content: "TagTroniX" !important;
  display: inline-block !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 36px !important;
  letter-spacing: -0.03em !important;
  opacity: 1 !important;
}

.sidebar-collapse .main-header .logo,
.mini-sidebar .main-header .logo,
.sidebar-mini.sidebar-collapse .main-header .logo,
body.sidebar-collapse .main-header .logo,
body.sidebar-mini.sidebar-collapse .main-header .logo {
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 9px 0 !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  overflow: hidden !important;
}

.sidebar-collapse .main-header .logo::after,
.mini-sidebar .main-header .logo::after,
.sidebar-mini.sidebar-collapse .main-header .logo::after,
body.sidebar-collapse .main-header .logo::after,
body.sidebar-mini.sidebar-collapse .main-header .logo::after {
  display: none !important;
  content: "" !important;
}

.sidebar-collapse .main-header .logo::before,
.mini-sidebar .main-header .logo::before,
.sidebar-mini.sidebar-collapse .main-header .logo::before,
body.sidebar-collapse .main-header .logo::before,
body.sidebar-mini.sidebar-collapse .main-header .logo::before {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  margin: 0 auto !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
  .main-header .logo,
  .skin-blue .main-header .logo {
    justify-content: center !important;
    gap: 8px !important;
    min-height: 50px !important;
    padding: 9px 10px !important;
  }

  .main-header .logo::before,
  .skin-blue .main-header .logo::before {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  .main-header .logo::after,
  .skin-blue .main-header .logo::after {
    font-size: 20px !important;
    line-height: 28px !important;
  }
}

/* TagTroniX approved login brand mark. */
body.login-page .login-logo.login-title {
  margin-bottom: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 10px !important;
}

body.login-page .login-logo.login-title a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  color: #111827 !important;
  text-decoration: none !important;
  pointer-events: none !important;
}

body.login-page .login-logo.login-title a::before {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background-image: url("/icon.svg?v=20260607-approved");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

body.login-page .login-logo.login-title a::after {
  content: "TagTroniX";
  color: #111827;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

body.login-page .login-logo:not(.login-title) {
  color: #6b7280 !important;
}

/* TagTroniX approved in-card login brand. */
body.login-page .login-box-body::before {
  content: "TagTroniX";
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 38px;
  margin: 0 auto 16px;
  padding-left: 46px;
  color: #111827;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background-image: url("/icon.svg?v=20260607-approved");
  background-size: 36px 36px;
  background-position: left center;
  background-repeat: no-repeat;
}

body.login-page .login-logo.login-title {
  display: none !important;
}