/*
  BoxTech ThingsBoard 4.2.1.1 Theme Override
  Full replacement stylesheet (v3012)

  v3012 changes:
  - Increased sidebar brand logo size (.boxtech-sidebar-brand-logo) to 95px for maximum visibility.
  - Optimized sidebar brand logo container margins and padding for perfect alignment.
*/

:root {
  --bx-green: #003d13;
  --bx-green-2: #005d1f;
  --bx-green-hover: #005d1f;
  --bx-bg: #f3f5f7;
  --bx-surface: #ffffff;
  --bx-text: #003d13;
  --bx-muted: #005d1f;
  --bx-border: #dbe2e6;
  --bx-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  --bx-topbar-h: 72px;
  --bx-sidebar-w: 280px;
  --bx-sidebar-collapsed-w: 64px;

  /* Issue 8: Scalable Angular Material Theme Color Variable Overrides */
  --mdc-theme-primary: var(--bx-green) !important;
  --mdc-theme-on-primary: #ffffff !important;
  --mdc-theme-accent: var(--bx-green) !important;
  --mdc-theme-on-accent: #ffffff !important;
  --mdc-theme-warn: #ef4444 !important;
  --mdc-theme-on-warn: #ffffff !important;
  --mdc-outlined-button-label-text-color: var(--bx-green) !important;
  --mdc-outlined-button-outline-color: var(--bx-green) !important;
  --mat-option-selected-state-label-text-color: var(--bx-green) !important;
  --mat-select-trigger-text-color: var(--bx-green) !important;
  --mat-tab-header-active-label-text-color: var(--bx-green) !important;
  --mat-tab-header-active-ripple-color: var(--bx-green) !important;
  --mat-tab-header-active-focus-label-text-color: var(--bx-green) !important;
  --mat-tab-header-active-hover-label-text-color: var(--bx-green) !important;
  --mat-tab-header-inactive-label-text-color: var(--bx-muted) !important;
  
  /* MD components primary and accent color variables */
  --mdc-filled-button-container-color: var(--bx-green) !important;
  --mdc-protected-button-container-color: var(--bx-green) !important;
  --mdc-switch-selected-icon-color: var(--bx-green) !important;
  --mdc-switch-selected-track-color: rgba(0, 93, 31, 0.45) !important;
  --mdc-switch-selected-handle-color: var(--bx-green) !important;
  --mdc-radio-selected-focus-icon-color: var(--bx-green) !important;
  --mdc-radio-selected-hover-icon-color: var(--bx-green) !important;
  --mdc-radio-selected-icon-color: var(--bx-green) !important;
  --mdc-radio-selected-pressed-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-checkmark-color: #ffffff !important;
  --mdc-checkbox-selected-focus-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-hover-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-pressed-icon-color: var(--bx-green) !important;
  
  /* General Angular Material tokens for primary and accent */
  --mat-sys-primary: var(--bx-green) !important;
  --mat-sys-on-primary: #ffffff !important;
  --mat-sys-primary-container: var(--bx-green) !important;
  --mat-sys-on-primary-container: #ffffff !important;
  --mat-sys-accent: var(--bx-green) !important;
  --mat-sys-on-accent: #ffffff !important;
  --mat-sys-accent-container: var(--bx-green) !important;
  --mat-sys-on-accent-container: #ffffff !important;

  /* Circular & Linear Progress colors */
  --mdc-circular-progress-active-indicator-color: var(--bx-green) !important;
  --mdc-circular-progress-track-color: transparent !important;
  --mdc-linear-progress-active-indicator-color: var(--bx-green) !important;
  --mdc-linear-progress-track-color: rgba(0, 93, 31, 0.15) !important;
}

/* ==========================================================================
   WIDGET COLOR ISOLATION (v3013)
   The tokens forced above at :root are CSS custom properties, so they
   inherit straight through into every dashboard widget's internal Material
   components (icons, switches, buttons, progress bars, etc.) and silently
   override whatever background/text/icon color a widget's own settings
   specify - this is why widgets were losing their customizable colors and
   coming out fixed green/white. Resetting each token to `initial` here
   makes it guaranteed-invalid *for that specific element*, which causes
   any var(--token, fallback) reference inside Angular Material's own
   component styles to fall back to its native default instead of our
   brand color - restoring per-widget customizability. No !important is
   used on purpose: this only needs to beat inheritance (which it does,
   since a direct declaration always wins over an inherited value), and
   staying non-important means a widget's own explicit inline color
   settings still win too.
   ========================================================================== */
tb-dashboard-widget, tb-dashboard-widget *,
.tb-widget, .tb-widget * {
  --mdc-theme-primary: initial;
  --mdc-theme-on-primary: initial;
  --mdc-theme-accent: initial;
  --mdc-theme-on-accent: initial;
  --mdc-theme-warn: initial;
  --mdc-theme-on-warn: initial;
  --mdc-outlined-button-label-text-color: initial;
  --mdc-outlined-button-outline-color: initial;
  --mat-option-selected-state-label-text-color: initial;
  --mat-select-trigger-text-color: initial;
  --mat-tab-header-active-label-text-color: initial;
  --mat-tab-header-active-ripple-color: initial;
  --mat-tab-header-active-focus-label-text-color: initial;
  --mat-tab-header-active-hover-label-text-color: initial;
  --mat-tab-header-inactive-label-text-color: initial;

  --mdc-filled-button-container-color: initial;
  --mdc-protected-button-container-color: initial;
  --mdc-switch-selected-icon-color: initial;
  --mdc-switch-selected-track-color: initial;
  --mdc-switch-selected-handle-color: initial;
  --mdc-switch-selected-focus-icon-color: initial;
  --mdc-switch-selected-hover-icon-color: initial;
  --mdc-switch-selected-pressed-icon-color: initial;
  --mdc-switch-selected-focus-handle-color: initial;
  --mdc-switch-selected-hover-handle-color: initial;
  --mdc-switch-selected-pressed-handle-color: initial;
  --mdc-switch-selected-focus-track-color: initial;
  --mdc-switch-selected-hover-track-color: initial;
  --mdc-switch-selected-pressed-track-color: initial;
  --mdc-radio-selected-focus-icon-color: initial;
  --mdc-radio-selected-hover-icon-color: initial;
  --mdc-radio-selected-icon-color: initial;
  --mdc-radio-selected-pressed-icon-color: initial;
  --mdc-checkbox-selected-checkmark-color: initial;
  --mdc-checkbox-selected-focus-icon-color: initial;
  --mdc-checkbox-selected-hover-icon-color: initial;
  --mdc-checkbox-selected-icon-color: initial;
  --mdc-checkbox-selected-pressed-icon-color: initial;
  --mdc-checkbox-unselected-focus-icon-color: initial;
  --mdc-checkbox-unselected-hover-icon-color: initial;
  --mdc-checkbox-unselected-icon-color: initial;
  --mdc-checkbox-unselected-pressed-icon-color: initial;
  --mat-mdc-checkbox-ripple-color: initial;

  --mat-sys-primary: initial;
  --mat-sys-on-primary: initial;
  --mat-sys-primary-container: initial;
  --mat-sys-on-primary-container: initial;
  --mat-sys-accent: initial;
  --mat-sys-on-accent: initial;
  --mat-sys-accent-container: initial;
  --mat-sys-on-accent-container: initial;

  --mdc-circular-progress-active-indicator-color: initial;
  --mdc-circular-progress-track-color: initial;
  --mdc-linear-progress-active-indicator-color: initial;
  --mdc-linear-progress-track-color: initial;

  --mdc-icon-button-icon-color: initial;
  --mdc-icon-button-disabled-icon-color: initial;
}

/* Base */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bx-bg) !important;
  color: var(--bx-text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Issue 4: Prevent login/public page background white-strip/scrolling and force beautiful off-white uniform background with robust flex centering */
html:has(.tb-login-form),
body:has(.tb-login-form),
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  min-height: 100vh !important;
  height: 100% !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* Enable scrolling if screen height is too small for the card */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:has(.tb-login-form) tb-root,
body:has(.tb-login-form) mat-sidenav-container,
body:has(.tb-login-form) mat-sidenav-content,
body:has(.tb-login-form) .tb-main-content,
body:has(.tb-login-form) .tb-layout-content,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-root,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-sidenav-container,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-sidenav-content,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-main-content,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-layout-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  margin: 0 !important;
  padding: 40px 16px !important; /* Spacious padding above/below to prevent card/button clipping */
  box-sizing: border-box !important;
  overflow: visible !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-login,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-signup,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-reset-password-request,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-change-password,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-register,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-login,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-signup,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-reset-password-request,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-change-password,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) :has(> mat-card),
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) :has(> * > mat-card) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  flex: none !important;
  background-color: transparent !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Ensure only the card itself and its internal elements have white backgrounds */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-card,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-card {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Hide all native toolbars, headers, and footers on the login page to eliminate white strips */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-toolbar,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) header,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) footer,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-toolbar,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-footer,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) tb-footer {
  display: none !important;
}

/* Hide the page until layout has mounted */
body:not(.boxtech-layout-active):not(.boxtech-force-reveal) {
  opacity: 0 !important;
}
body.boxtech-layout-active,
body.boxtech-force-reveal {
  opacity: 1 !important;
  transition: opacity 0.15s ease !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Issue 2: Green loading dots style */
.tb-loading-spinner .tb-bounce1,
.tb-loading-spinner .tb-bounce2,
.tb-loading-spinner .tb-bounce3,
#tb-loading-spinner div,
.tb-loading-spinner div {
  background-color: var(--bx-green) !important;
}

/* Hide native TB chrome that conflicts */
body.boxtech-layout-active mat-toolbar.tb-primary-toolbar,
body.boxtech-layout-active tb-breadcrumb,
body.boxtech-layout-active .tb-breadcrumb,
body.boxtech-layout-active mat-toolbar.tb-side-menu-toolbar,
body.boxtech-layout-active .tb-side-menu,
body.boxtech-layout-active tb-github-badge {
  display: none !important;
}

/* HARD hide ThingsBoard footer/branding in sidebar */
mat-sidenav.tb-site-sidenav .tb-powered-by,
mat-sidenav.tb-site-sidenav .powered-by,
mat-sidenav.tb-site-sidenav .tb-side-menu-footer,
mat-sidenav.tb-site-sidenav .tb-footer,
mat-sidenav.tb-site-sidenav a[href*="thingsboard.io"],
mat-sidenav.tb-site-sidenav img[src*="thingsboard"],
mat-sidenav.tb-site-sidenav img[src*="logo_title_white.svg"],
img.tb-logo-title[src="assets/logo_title_white.svg"],
mat-sidenav.tb-site-sidenav [class*="powered"],
mat-sidenav.tb-site-sidenav [class*="footer"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

tb-root,
tb-root > div,
mat-sidenav-container,
.mat-drawer-container,
mat-sidenav-content,
.mat-drawer-content,
.tb-main-content,
.tb-layout-content {
  background: var(--bx-bg) !important;
}

/* Hide custom header and sidebar if layout is inactive or login page is active */
body:not(.boxtech-layout-active) #boxtech-custom-header,
body.boxtech-login-page-active #boxtech-custom-header,
body:not(.boxtech-layout-active) #boxtech-custom-sidebar,
body.boxtech-login-page-active #boxtech-custom-sidebar {
  display: none !important;
}

/* Topbar (Azure style themed with Corporate Green) */
#boxtech-custom-header.boxtech-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100000 !important;
  pointer-events: auto !important;

  height: var(--bx-topbar-h);
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  padding: 0 16px;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
}

#boxtech-custom-header * {
  pointer-events: auto !important;
}

.boxtech-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.boxtech-topbar-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
  max-width: 600px !important; /* Nice wide search area like Azure */
  overflow: visible !important;
}

.boxtech-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

/* Azure Style Center Search Bar */
.boxtech-topbar-search-container {
  width: 100% !important;
  position: relative !important;
}

.boxtech-search-wrap {
  position: relative !important;
  width: 100% !important;
}

.boxtech-top-search {
  all: unset !important;
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 0 12px 0 34px !important; /* Spacing for a search icon or alignment */
  margin: 0 !important;
  transition: background-color 0.15s, border-color 0.15s !important;
}

.boxtech-top-search::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  opacity: 1 !important;
}

.boxtech-top-search:focus {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0d1e15 !important;
  border-color: #ffffff !important;
}

/* Add a beautiful search icon inside the translucent search field (Azure style) */
.boxtech-search-wrap::before {
  content: 'search';
  font-family: 'Material Icons';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
  z-index: 5;
}

.boxtech-search-wrap:has(.boxtech-top-search:focus)::before {
  color: #556b60;
}

/* Dropdown list stays completely on top of everything and is styled green */
.boxtech-search-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 280px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--bx-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  display: none;
  z-index: 100001 !important; /* Guaranteed to stay on top of sidebar and other layouts */
  max-height: 350px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}
.boxtech-search-item {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  color: var(--bx-text) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.boxtech-search-item:hover, .boxtech-search-item:focus {
  background: #f1f5f9 !important;
  outline: none !important;
}
.boxtech-search-no-res {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #64748b !important;
  text-align: center !important;
}

.boxtech-sidebar-toggle {
  height: 34px;
  min-width: 34px;
  border: 1px solid #b9c9be;
  border-radius: 8px;
  background: #fff;
  color: var(--bx-green);
  font-weight: 700;
  cursor: pointer;
}

.boxtech-nav-btn {
  border: none;
  background: transparent;
  color: var(--bx-green);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.boxtech-nav-btn:hover { background: #f1f6f3; }

.boxtech-nav-btn-dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.boxtech-dd-arrow { font-size: 10px; }

.boxtech-menu-group {
  position: relative !important;
  z-index: 2100 !important;
}

.boxtech-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  border: 1px solid #cfd8dc;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--bx-shadow);
  padding: 6px;
  display: none;
  flex-direction: column;
  z-index: 2200 !important;
}
.boxtech-dd-menu-right { right: 0; left: auto; }
.boxtech-menu-group.boxtech-open .boxtech-dd-menu { display: flex; }

.boxtech-dd-item {
  border: none;
  background: transparent;
  color: #1e3a37;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.boxtech-dd-item:hover { background: #f1f6f3; }

.boxtech-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: 7px;
}
.boxtech-slot button,
.boxtech-slot .mat-icon,
.boxtech-slot mat-icon {
  color: var(--bx-green) !important;
}

/* Issue 6: Styled topbar logo placed between dashboards and hamburger */
.boxtech-top-logo {
  height: 50px !important;
  max-height: 50px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-right: 24px !important;
  margin-left: 12px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Notification badge */
.boxtech-slot .mat-badge-content,
#boxtech-custom-header .mat-badge-content {
  background-color: var(--bx-green) !important;
  color: #ffffff !important;
}

/* Sidebar */
#boxtech-custom-sidebar.boxtech-sidebar {
  position: relative !important;
  z-index: 1500 !important;
  pointer-events: auto !important;

  width: var(--bx-sidebar-w);
  min-width: var(--bx-sidebar-w);
  max-width: var(--bx-sidebar-w);
  height: calc(100vh - var(--bx-topbar-h)) !important;
  margin-top: 0 !important;
  background: #fff;
  border-right: 1px solid var(--bx-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#boxtech-custom-sidebar * { pointer-events: auto !important; }

.boxtech-side-list {
  position: relative !important;
  z-index: 5 !important;
  overflow: auto;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Issue 5: Increased row height, font, and padding for sidebar items */
.boxtech-side-item {
  width: 100%;
  height: 44px !important;
  border: none;
  border-top: 1px solid #f1f3f5;
  margin-top: -1px;
  background: #fff;
  color: #082f2f;
  font-size: 16px !important;
  font-weight: 700;
  text-align: left;
  padding: 0 20px 0 16px !important;
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  cursor: pointer;
  letter-spacing: .2px;
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), gap 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
}
.boxtech-side-item:hover { background: #f4f8f6; }

.boxtech-side-item.boxtech-active {
  background: var(--bx-green);
  color: #fff;
  border-color: var(--bx-green);
}

.boxtech-side-icon {
  width: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px; /* Increased icon size */
  opacity: .95;
  transition: margin 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.boxtech-side-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  max-width: 300px;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.boxtech-side-group .boxtech-side-group-body {
  display: none;
  background: #fbfcfd;
}
body.boxtech-sidebar-collapsed .boxtech-side-group-body {
  display: none !important;
}
.boxtech-side-group.boxtech-group-open .boxtech-side-group-body {
  display: block;
}
.boxtech-side-group .boxtech-side-group-body .boxtech-side-item {
  height: 38px; /* Increased from 34px */
  font-size: 15px; /* Increased from 14px */
  padding-left: 44px !important; /* Beautifully indented nested subfields */
}
.boxtech-side-chevron {
  font-size: 11px;
  opacity: 1;
  max-width: 20px;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.boxtech-side-user {
  margin-top: auto;
  border-top: 1px solid #f1f3f5;
  padding: 12px 14px;
  position: relative;
  background: #fff;
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.boxtech-side-user-main {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), gap 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.boxtech-user-avatar {
  color: var(--bx-green);
  font-size: 20px;
  line-height: 1;
  width: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.boxtech-user-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  max-width: 200px;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.boxtech-user-name {
  color: #0b2f2f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.boxtech-user-role {
  color: #687b7a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.boxtech-user-menu-mount {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  height: 24px;
  opacity: 1;
  max-width: 40px;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
tb-user-menu.boxtech-relocated-user-menu,
tb-user-menu.boxtech-relocated-user-menu button,
tb-user-menu.boxtech-relocated-user-menu .mat-mdc-menu-trigger {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #003d13 !important;
  height: 24px !important;
  width: 24px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
tb-user-menu.boxtech-relocated-user-menu .tb-user-info {
  display: none !important;
}

/* Hide stray native primary headers and side menu toolbars, leaving other toolbars (dialogs, drawers, overlays, tables, etc.) fully intact */
body.boxtech-layout-active tb-toolbar,
body.boxtech-layout-active header.tb-nav-header,
body.boxtech-layout-active .tb-nav-header,
body.boxtech-layout-active mat-toolbar.tb-primary-toolbar,
body.boxtech-layout-active mat-toolbar.tb-side-menu-toolbar,
body.boxtech-layout-active mat-toolbar.tb-primary-header {
  display: none !important;
}
body.boxtech-layout-active img.tb-logo-title:not(#boxtech-custom-header img):not(.login-logo img) {
  display: none !important;
}

/* Collapsed sidebar */
body.boxtech-sidebar-collapsed #boxtech-custom-sidebar.boxtech-sidebar {
  width: var(--bx-sidebar-collapsed-w);
  min-width: var(--bx-sidebar-collapsed-w);
  max-width: var(--bx-sidebar-collapsed-w);
}
body.boxtech-sidebar-collapsed .boxtech-side-item {
  padding: 0 !important;
  justify-content: center;
  gap: 0 !important;
}
body.boxtech-sidebar-collapsed .boxtech-side-icon {
  margin: 0 !important;
}
body.boxtech-sidebar-collapsed .boxtech-side-label,
body.boxtech-sidebar-collapsed .boxtech-side-chevron,
body.boxtech-sidebar-collapsed .boxtech-user-text,
body.boxtech-sidebar-collapsed .boxtech-user-menu-mount {
  opacity: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.boxtech-sidebar-collapsed .boxtech-side-user {
  padding: 18px 0 !important;
}
body.boxtech-sidebar-collapsed .boxtech-side-user-main {
  padding-right: 0 !important;
  justify-content: center;
  gap: 0 !important;
}

/* Issue 1 & 4 & 7: Dynamic margin and width on mat-sidenav-content driven purely by body active state.
   This guarantees perfect responsive alignment, completely bypassing Angular's sibling shunting issues. */
.boxtech-outer-content {
  margin-top: var(--bx-topbar-h) !important;
  margin-left: var(--bx-sidebar-w) !important;
  margin-right: 0 !important;
  width: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

body.boxtech-layout-active .boxtech-outer-content {
  margin-top: var(--bx-topbar-h) !important;
  margin-left: var(--bx-sidebar-w) !important;
  margin-right: 0 !important;
  width: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* The top margin consumes viewport space. Subtract it from the native
     full-height drawer content so the bottom of pages remains reachable. */
  height: calc(100% - var(--bx-topbar-h)) !important;
  max-height: calc(100% - var(--bx-topbar-h)) !important;
}

body.boxtech-layout-active.boxtech-sidebar-collapsed .boxtech-outer-content {
  margin-top: var(--bx-topbar-h) !important;
  margin-left: var(--bx-sidebar-collapsed-w) !important;
  margin-right: 0 !important;
  width: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ThingsBoard's normal (non-auto-fill) dashboard mode is intentionally
   taller than the viewport. Keep that mode scrollable so lower chart rows
   are never clipped by the branded application shell. */
body.boxtech-layout-active #gridster-parent.tb-dashboard-content:not(.autofill-height) {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

/* Force native mat-sidenav's width to match our custom sidebar perfectly and prevent any inner elements from stretching it */
mat-sidenav.tb-site-sidenav {
  position: fixed !important;
  top: var(--bx-topbar-h) !important;
  left: 0 !important;
  height: calc(100vh - var(--bx-topbar-h)) !important;
  z-index: 1000 !important;
  display: block !important;
  visibility: visible !important;
  transform: none !important;
  background: #fff !important;
  border-right: 1px solid var(--bx-border) !important;
  width: var(--bx-sidebar-w) !important;
  min-width: var(--bx-sidebar-w) !important;
  max-width: var(--bx-sidebar-w) !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

body.boxtech-sidebar-collapsed mat-sidenav.tb-site-sidenav {
  width: var(--bx-sidebar-collapsed-w) !important;
  min-width: var(--bx-sidebar-collapsed-w) !important;
  max-width: var(--bx-sidebar-collapsed-w) !important;
}

body.boxtech-sidebar-collapsed .boxtech-side-icon {
  width: auto;
  font-size: 20px;
}

/* Login styling overrides for all public pages (login, reset password, etc.) */
body:not(.boxtech-layout-active) mat-card,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card,
mat-card:has(> mat-card-content .tb-login-form) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 9999 !important;
  margin: auto !important; /* Center card perfectly inside the flex container */
  width: 450px !important; /* Perfect square-like proportion */
  max-width: 95vw !important;
  min-width: 320px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important; /* Eliminate inline max-height constraint */
  overflow: visible !important; /* Completely remove inner scrollbar */
  overflow-y: visible !important;
  padding: 32px 36px 28px !important; /* Compact and elegant vertical/horizontal spacing */
  border-radius: 24px !important; /* Perfectly rounded square shape matching the reference */
  background: #ffffff !important; /* Pure white card background */
  border: 1px solid #e2e8f0 !important; /* Smooth clean border */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card * {
  box-sizing: border-box !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card > mat-card-content,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card form,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card mat-form-field,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card .mat-mdc-form-field,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card .mat-mdc-text-field-wrapper,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card .mdc-text-field {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card > mat-card-content {
  padding: 0 !important;
  overflow: visible !important;
  overflow-y: visible !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  flex: none !important;
}

form.tb-login-form,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) form {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: none !important;
}

.login-logo,
tb-logo.login-logo,
.tb-login-logo,
tb-login-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important; /* Compact padding around the logo container */
  margin-top: 0 !important;
  margin-bottom: 12px !important; /* Elegant reduced gap between logo and subtitle */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

.login-logo img.tb-logo-title,
tb-logo.login-logo img.tb-logo-title,
.tb-login-logo img,
tb-login-logo img {
  max-height: 95px !important; /* Larger and more prominent branding logo */
  height: 95px !important;
  width: auto !important;
  min-width: auto !important;
  padding: 0 !important; /* No extra padding */
  object-fit: contain !important;
  overflow: visible !important;
  display: block !important;
  margin: 0 auto !important;
}

.boxtech-login-subtitle {
  width: 100% !important;
  text-align: center !important;
  color: var(--bx-green-hover) !important;
  font-size: 11px !important; /* Compact and elegant */
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin: 6px 0 0 !important; /* Minimal spacing */
  padding-top: 6px !important;
  border-top: 1px solid #e2e8f0 !important; /* Divider line under the logo */
}

.boxtech-login-heading,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .boxtech-login-heading,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card-title,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-card-title,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .login-title,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) h1,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) h2,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) h3,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) [class*="title" i],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) [class*="heading" i],
body:not(.boxtech-layout-active) :is(mat-card-title, .mat-mdc-card-title, h1, h2, h3, .login-title, [class*="title" i], [class*="heading" i]) {
  color: var(--bx-green) !important;
  font-size: 19px !important; /* Compact display font size */
  font-weight: 700 !important;
  margin: 12px auto 20px !important; /* Clean margin spacing, auto-margins center block elements */
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-form-field,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field {
  margin-bottom: 6px !important; /* Compact margin bottom */
}

/* Hide empty height-spacer spans inside the login card/form */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card span[style*="height"],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card span[style*="height: 50px"],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card span[style*="height: 4px"],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card span[style*="height: 50px;"],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card span[style*="height: 4px;"] {
  height: 0 !important;
  min-height: 0 !important;
  display: none !important;
}

/* Hide the empty Angular Material subscript wrapper under inputs unless there is an active error */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field-subscript-wrapper {
  margin-top: 0 !important;
  padding: 0 !important;
}
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field-subscript-wrapper:not(:has(.mat-mdc-form-field-error)):not(:has(.mat-error)):not(:has(.mat-hint)):not(:has(mat-error)):not(:has(mat-hint)) {
  display: none !important;
}

/* Remove padding around the inner logo flex wrapper container to prevent extra height */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card .flex.flex-col.items-center.justify-start {
  padding: 0 !important;
}

/* Reset MDC Form Fields default backgrounds */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-text-field-wrapper,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: transparent !important;
  background: transparent !important;
}

/* Autofill background fix: force white background instead of default blue autofill */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) input:-webkit-autofill,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) input:-webkit-autofill:hover, 
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) input:-webkit-autofill:focus, 
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #153839 !important;
  transition: background-color 5000s ease-in-out 0s;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mdc-floating-label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) label.mdc-floating-label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field .mdc-floating-label {
  color: var(--bx-green-hover) !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field.mat-focused .mdc-floating-label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field .mdc-floating-label--float-above {
  color: var(--bx-green) !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field.mat-focused .mdc-line-ripple::after {
  border-bottom-color: var(--bx-green) !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) input,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-input-element,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mdc-text-field__input {
  color: var(--bx-green) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Green prefix and suffix icons for inputs */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-icon,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-icon,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-form-field [matPrefix],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-form-field .mat-mdc-form-field-icon-prefix,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-form-field .mat-mdc-form-field-icon-suffix {
  color: var(--bx-green) !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field.mat-form-field-invalid .mdc-line-ripple::before,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field.mat-form-field-invalid .mdc-line-ripple::after {
  border-bottom-color: #ef4444 !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field-error,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-error {
  color: #ef4444 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  text-align: left !important;
  display: block !important;
}

/* Neutralize absolute positioning of login action containers to prevent bottom sticking and negative-margin alignment issues */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-card-actions,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .actions,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-card-actions,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-card-actions {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 16px 0 0 0 !important; /* Force beautiful top margin, reset negative horizontal/bottom margins */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important; /* Spacing between main action and cancel buttons if side-by-side */
}

/* Style all public page main action buttons beautifully as corporate green */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button[type="submit"],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-raised-button,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-raised-button,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-unelevated-button,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-unelevated-button,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button[color="primary"] {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  height: 44px !important; /* Perfect visual height */
  border-radius: 8px !important;
  margin: 12px 0 6px !important; /* Reduced vertical margin */
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 12px rgba(0, 61, 19, 0.15) !important;
  transition: background-color 0.15s ease !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button[type="submit"]:not(:disabled):hover,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-raised-button:not(:disabled):hover,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-raised-button:not(:disabled):hover,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-unelevated-button:not(:disabled):hover,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-unelevated-button:not(:disabled):hover,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button[color="primary"]:not(:disabled):hover {
  background-color: var(--bx-green-hover) !important;
  background: var(--bx-green-hover) !important;
}

/* Force solid primary buttons (raised, unelevated) to always have White text/labels globally and on login pages */
.mat-mdc-raised-button.mat-primary .mdc-button__label,
.mat-mdc-unelevated-button.mat-primary .mdc-button__label,
.mat-raised-button.mat-primary .mdc-button__label,
.mat-unelevated-button.mat-primary .mdc-button__label,
button[color="primary"].mat-mdc-raised-button .mdc-button__label,
button[color="primary"].mat-mdc-unelevated-button .mdc-button__label,
button[color="primary"].mat-raised-button .mdc-button__label,
button[color="primary"].mat-unelevated-button .mdc-button__label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button[type="submit"] .mdc-button__label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-raised-button .mdc-button__label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-raised-button .mdc-button__label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-unelevated-button .mdc-button__label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-unelevated-button .mdc-button__label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button[color="primary"] .mdc-button__label {
  color: #ffffff !important;
}

/* Force disabled solid buttons to have gray text/labels and override any other text-color rule */
button:disabled .mdc-button__label,
button[disabled] .mdc-button__label,
.mat-mdc-button-disabled .mdc-button__label,
.mdc-button--disabled .mdc-button__label {
  color: #94a3b8 !important;
}

/* Green brand styling for links, labels, and Cancel options on all public pages */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) a,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-button,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-button,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .forgot-password,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .forgot-password a,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .forgot-password span,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-button .mdc-button__label,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) button.mat-mdc-button .mdc-button__label {
  color: var(--bx-green-hover) !important;
  font-weight: 600 !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .layout-padding,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) form .layout-padding,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) fieldset .layout-padding {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-action-button {
  order: 9 !important;
  width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  display: block !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .tb-action-button button {
  margin: 0 !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .forgot-password {
  order: 10 !important;
  text-align: right !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 12px !important; /* Perfect spacing underneath the Sign in button */
  margin-bottom: 0 !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .ng-trigger {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Generic layout - EXCLUDING actual widgets on dashboard so designers can set custom backgrounds and borders! */
mat-card:not(.tb-widget):not(tb-dashboard-widget mat-card),
.mat-mdc-card:not(.tb-widget):not(tb-dashboard-widget *),
.tb-card:not(.tb-widget):not(tb-dashboard-widget *) {
  border: 1px solid #e5eaee !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: #fff !important;
}

.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-raised-button.mat-primary,
.mat-unelevated-button.mat-primary {
  background: var(--bx-green) !important;
  color: #fff !important;
}

/* Issue 8: Outlined, stroked and other primary button types themed properly */
.mat-mdc-outlined-button.mat-primary,
.mat-mdc-button.mat-primary,
.mat-mdc-stroked-button.mat-primary,
.mat-stroked-button.mat-primary,
.mat-outlined-button.mat-primary,
button[color="primary"] {
  --mdc-outlined-button-label-text-color: var(--bx-green) !important;
  --mdc-outlined-button-outline-color: var(--bx-green) !important;
  color: var(--bx-green) !important;
  border-color: var(--bx-green) !important;
}

/* Restrict green overrides on disabled buttons to restore an intuitive, clean, and elegant disabled appearance */
.mat-mdc-raised-button.mat-primary[disabled],
.mat-mdc-unelevated-button.mat-primary[disabled],
.mat-mdc-raised-button.mat-primary:disabled,
.mat-mdc-unelevated-button.mat-primary:disabled,
.mat-mdc-raised-button.mat-primary.mat-mdc-button-disabled,
.mat-mdc-unelevated-button.mat-primary.mat-mdc-button-disabled,
.mat-mdc-button.mat-mdc-button-disabled,
.mat-mdc-raised-button.mat-mdc-button-disabled,
.mat-mdc-unelevated-button.mat-mdc-button-disabled,
.mat-mdc-outlined-button.mat-mdc-button-disabled,
.mat-mdc-stroked-button.mat-mdc-button-disabled,
.mat-raised-button[disabled],
.mat-raised-button:disabled,
.mat-button-disabled,
.mat-mdc-button-disabled,
.mdc-button--disabled,
button:disabled,
button[disabled],
.mat-mdc-button-disabled {
  background-color: #f1f5f9 !important;
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.65 !important;
}

/* Issue 5: Force CDK dropdown overlay menus to be green */
.mat-mdc-menu-panel .mat-mdc-menu-item,
.mat-menu-panel .mat-menu-item,
.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon,
.mat-mdc-menu-panel .mat-mdc-menu-item mat-icon,
.mat-menu-panel .mat-menu-item .mat-icon,
.mat-mdc-menu-content .mat-mdc-menu-item,
.mat-mdc-menu-content .mat-icon {
  color: var(--bx-green) !important;
}

.mat-mdc-menu-panel .mat-mdc-menu-item:hover {
  background-color: #f1f6f3 !important;
}

/* Issue 6: Styled Get Started circle indicators */
.tb-get-started .step-number,
.get-started .step-number,
.get-started-step .step-number,
.mat-step-icon-selected,
.mat-step-icon,
[class*="get-started"] [class*="circle"],
[class*="get-started"] [class*="step-icon"],
[class*="get-started"] [class*="number"] {
  background-color: var(--bx-green) !important;
  color: #fff !important;
}

.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-edit {
  background-color: var(--bx-green) !important;
  color: #ffffff !important;
}

/* Issue 8: Style the dashboard blue banner/band and fab toolbar background to green, matching our brand identity */
.mat-fab-toolbar-background,
.tb-dashboard-title-bar,
.tb-dashboard-toolbar,
mat-toolbar.tb-dashboard-toolbar,
.tb-dashboard-header,
[class*="dashboard-title-bar"],
[class*="dashboard-toolbar"],
[class*="fab-toolbar"],
.tb-primary-background,
.tb-primary-fill,
.mat-primary-navigation {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
}

@media (max-width: 1400px) and (min-width: 1161px) {
  .boxtech-nav-btn, .boxtech-dropdown-btn {
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
  .boxtech-topbar-center {
    gap: 2px !important;
  }
  .boxtech-search-wrap {
    width: 160px !important;
  }
}

@media (max-width: 1160px) {
  #boxtech-custom-header.boxtech-topbar {
    grid-template-columns: 1fr;
    height: auto;
  }
  .boxtech-topbar-center, .boxtech-topbar-right { width: 100%; }
}

/* Issue 7 & Squeezing Fix: Force-hide any native side menu elements, including tag-name and classes */
body.boxtech-layout-active tb-side-menu,
body.boxtech-layout-active .tb-side-menu,
body.boxtech-layout-active mat-toolbar.tb-side-menu-toolbar,
tb-side-menu {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Bulletproof Sidenav Isolation: Hide all direct children of mat-sidenav inner container except our custom sidebar */
mat-sidenav.tb-site-sidenav .mat-drawer-inner-container > *:not(#boxtech-custom-sidebar),
mat-sidenav.tb-site-sidenav > *:not(#boxtech-custom-sidebar):not(.mat-drawer-inner-container) {
  display: none !important;
}

/* Issue 10: Style the graph/chart line, fills, hover lines, hover states and tooltips to brand green */
svg [stroke="#305680" i], svg [stroke="#3f51b5" i], svg [stroke="#2196f3" i], svg [stroke="#1f77b4" i], svg [stroke="#007bff" i], svg [stroke="#8884d8" i], svg [stroke="#3b82f6" i], svg [stroke="#2563eb" i], svg [stroke="#1d4ed8" i], svg [stroke="#4285f4" i],
svg [fill="#305680" i], svg [fill="#3f51b5" i], svg [fill="#2196f3" i], svg [fill="#1f77b4" i], svg [fill="#007bff" i], svg [fill="#8884d8" i], svg [fill="#3b82f6" i], svg [fill="#2563eb" i], svg [fill="#1d4ed8" i], svg [fill="#4285f4" i],
[stroke="#305680" i], [stroke="#3f51b5" i], [stroke="#2196f3" i], [stroke="#1f77b4" i], [stroke="#007bff" i], [stroke="#8884d8" i], [stroke="#3b82f6" i], [stroke="#2563eb" i], [stroke="#1d4ed8" i], [stroke="#4285f4" i],
[fill="#305680" i], [fill="#3f51b5" i], [fill="#2196f3" i], [fill="#1f77b4" i], [fill="#007bff" i], [fill="#8884d8" i], [fill="#3b82f6" i], [fill="#2563eb" i], [fill="#1d4ed8" i], [fill="#4285f4" i],
svg path[stroke*="48" i][stroke*="86" i][stroke*="128" i],
path[stroke*="48" i][stroke*="86" i][stroke*="128" i] {
  stroke: var(--bx-green-hover) !important;
}

svg path[fill="#305680" i], svg path[fill="#305680"], path[fill="#305680" i], path[fill="#305680"], svg [fill="#305680" i], [fill="#305680" i],
svg path[fill="#3f51b5" i], path[fill="#3f51b5" i], svg [fill="#3f51b5" i], [fill="#3f51b5" i],
svg path[fill="#2196f3" i], path[fill="#2196f3" i], svg [fill="#2196f3" i], [fill="#2196f3" i],
svg path[fill="#1f77b4" i], path[fill="#1f77b4" i], svg [fill="#1f77b4" i], [fill="#1f77b4" i],
svg path[fill="#8884d8" i], path[fill="#8884d8" i], svg [fill="#8884d8" i], [fill="#8884d8" i],
svg path[fill="#3b82f6" i], path[fill="#3b82f6" i], svg [fill="#3b82f6" i], [fill="#3b82f6" i],
svg path[fill*="48" i][fill*="86" i][fill*="128" i],
path[fill*="48" i][fill*="86" i][fill*="128" i] {
  fill: rgba(0, 93, 31, 0.12) !important; /* Semi-transparent green background fill */
}

svg circle[stroke="#305680" i], svg circle[fill="#305680" i], circle[stroke="#305680" i], circle[fill="#305680" i],
svg circle[stroke="#3f51b5" i], svg circle[fill="#3f51b5" i], circle[stroke="#3f51b5" i], circle[fill="#3f51b5" i],
svg circle[stroke="#2196f3" i], svg circle[fill="#2196f3" i], circle[stroke="#2196f3" i], circle[fill="#2196f3" i],
svg circle[stroke="#1f77b4" i], svg circle[fill="#1f77b4" i], circle[stroke="#1f77b4" i], circle[fill="#1f77b4" i],
svg circle[stroke="#8884d8" i], svg circle[fill="#8884d8" i], circle[stroke="#8884d8" i], circle[fill="#8884d8" i],
svg circle[stroke="#3b82f6" i], svg circle[fill="#3b82f6" i], circle[stroke="#3b82f6" i], circle[fill="#3b82f6" i] {
  stroke: var(--bx-green-hover) !important;
  fill: var(--bx-green-hover) !important;
}

/* Bulletproof hover active lines, guides, cursors, and dots in Recharts, Flot, or other charts */
.recharts-tooltip-cursor,
.recharts-active-dot,
.recharts-reference-line,
[class*="recharts-tooltip-cursor"],
[class*="recharts-active-dot"],
svg [class*="cursor"],
svg [class*="hover-line"],
svg [class*="crosshair"],
svg line[class*="cursor"],
svg path[class*="cursor"],
svg line[stroke="#305680" i], svg line[stroke="#3f51b5" i], svg line[stroke="#2196f3" i], svg line[stroke="#1f77b4" i], svg line[stroke="#8884d8" i], svg line[stroke="#3b82f6" i],
line[stroke="#305680" i], line[stroke="#3f51b5" i], line[stroke="#2196f3" i], line[stroke="#1f77b4" i], line[stroke="#8884d8" i], line[stroke="#3b82f6" i] {
  stroke: var(--bx-green-hover) !important;
}

svg circle[class*="active"],
svg circle[class*="hover"],
svg circle[class*="dot"],
svg circle[class*="point"],
[class*="active-dot"] {
  stroke: var(--bx-green-hover) !important;
  fill: var(--bx-green-hover) !important;
}

/* Ensure line charts do not get filled with solid green block */
svg path.flot-line,
svg path[stroke-width],
path[stroke-width] {
  fill: none !important;
}

/* Ensure chart hover lines, point markers, and interactive paths turn Corporate Green instead of blue on hover */
svg g[class*="hover" i] path,
svg g[class*="active" i] path,
svg path[class*="hover" i],
svg path[class*="active" i],
svg .flot-hover,
svg .chart-hover,
svg .recharts-line-active,
svg path:hover,
svg circle:hover,
svg rect:hover,
svg g:hover > path,
svg g:hover > circle,
.flot-hover,
.chart-hover,
.recharts-line-hover,
.recharts-active-dot {
  stroke: var(--bx-green-hover) !important;
}

/* Color mapping for dynamically injected inline styles in tooltips, charts and legends */
[style*="305680" i], [style*="3f51b5" i], [style*="2196f3" i], [style*="1f77b4" i], [style*="8884d8" i], [style*="3b82f6" i], [style*="2563eb" i], [style*="007bff" i], [style*="4285f4" i], [style*="rgb(48, 86, 128)"], [style*="rgb(63, 81, 181)"], [style*="rgb(33, 150, 243)"], [style*="rgb(31, 119, 180)"], [style*="rgb(136, 132, 216)"], [style*="rgb(59, 130, 246)"], [style*="rgb(37, 99, 235)"], [style*="rgb(48, 86, 128)"], [style*="rgb(63, 81, 181)"], [style*="rgb(33, 150, 243)"], [style*="rgb(31, 119, 180)"], [style*="rgb(136, 132, 216)"], [style*="rgb(59, 130, 246)"], [style*="rgb(37, 99, 235)"] {
  --tb-tooltip-marker-color: var(--bx-green-hover) !important;
}

[style*="background-color"][style*="305680" i],
[style*="background-color"][style*="3f51b5" i],
[style*="background-color"][style*="2196f3" i],
[style*="background-color"][style*="1f77b4" i],
[style*="background-color"][style*="8884d8" i],
[style*="background-color"][style*="3b82f6" i],
[style*="background-color"][style*="2563eb" i],
[style*="background-color"][style*="007bff" i],
[style*="background-color"][style*="4285f4" i],
[style*="background-color"][style*="rgb(48, 86, 128)"],
[style*="background-color"][style*="rgb(63, 81, 181)"],
[style*="background-color"][style*="rgb(33, 150, 243)"],
[style*="background-color"][style*="rgb(31, 119, 180)"],
[style*="background-color"][style*="rgb(136, 132, 216)"],
[style*="background-color"][style*="rgb(59, 130, 246)"],
[style*="background-color"][style*="rgb(37, 99, 235)"],
.tb-flot-tooltipBoxValueSquare,
.flot-tooltip-value-square {
  background-color: var(--bx-green-hover) !important;
}

[style*="color"][style*="305680" i],
[style*="color"][style*="3f51b5" i],
[style*="color"][style*="2196f3" i],
[style*="color"][style*="1f77b4" i],
[style*="color"][style*="8884d8" i],
[style*="color"][style*="3b82f6" i],
[style*="color"][style*="2563eb" i],
[style*="color"][style*="007bff" i],
[style*="color"][style*="4285f4" i],
[style*="color"][style*="rgb(48, 86, 128)"],
[style*="color"][style*="rgb(63, 81, 181)"],
[style*="color"][style*="rgb(33, 150, 243)"],
[style*="color"][style*="rgb(31, 119, 180)"],
[style*="color"][style*="rgb(136, 132, 216)"],
[style*="color"][style*="rgb(59, 130, 246)"],
[style*="color"][style*="rgb(37, 99, 235)"] {
  color: var(--bx-green-hover) !important;
}

[style*="border-color"][style*="305680" i],
[style*="border-color"][style*="3f51b5" i],
[style*="border-color"][style*="2196f3" i],
[style*="border-color"][style*="1f77b4" i],
[style*="border-color"][style*="8884d8" i],
[style*="border-color"][style*="3b82f6" i],
[style*="border-color"][style*="2563eb" i],
[style*="border-color"][style*="007bff" i],
[style*="border-color"][style*="4285f4" i],
[style*="border-color"][style*="rgb(48, 86, 128)"],
[style*="border-color"][style*="rgb(63, 81, 181)"],
[style*="border-color"][style*="rgb(33, 150, 243)"],
[style*="border-color"][style*="rgb(31, 119, 180)"],
[style*="border-color"][style*="rgb(136, 132, 216)"],
[style*="border-color"][style*="rgb(59, 130, 246)"],
[style*="border-color"][style*="rgb(37, 99, 235)"] {
  border-color: var(--bx-green-hover) !important;
}

.legendColorBox > div > div,
.legendColorBox div,
.chart-legend div {
  border-color: var(--bx-green-hover) !important;
}

/* Style all Material & custom circular loading spinners to brand green */
mat-spinner,
mat-progress-spinner,
tb-spinner,
.mat-spinner,
.mat-progress-spinner,
.mat-mdc-progress-spinner,
.mat-mdc-circular-progress,
.tb-loading-spinner,
.tb-spinner,
[class*="spinner" i],
[class*="loader" i],
[class*="progress-spinner" i],
[class*="circular-progress" i] {
  --mdc-circular-progress-active-indicator-color: var(--bx-green) !important;
  --mdc-circular-progress-track-color: transparent !important;
  color: var(--bx-green) !important;
}

mat-spinner circle,
mat-progress-spinner circle,
tb-spinner circle,
.mat-spinner circle,
.mat-progress-spinner circle,
.mat-mdc-progress-spinner circle,
svg.mat-mdc-progress-spinner-indeterminate-animation circle,
.mdc-circular-progress__determinate-circle,
.mdc-circular-progress__indeterminate-circle-graphic,
.mdc-circular-progress__circle-clipper circle,
[class*="spinner" i] circle,
[class*="loader" i] circle,
[class*="progress" i] circle {
  stroke: var(--bx-green) !important;
}

/* Style all Material & custom linear progress loaders to brand green */
mat-progress-bar,
.mat-progress-bar,
.mat-mdc-progress-bar,
.mdc-linear-progress,
[class*="progress-bar" i],
[class*="linear-progress" i] {
  --mdc-linear-progress-active-indicator-color: var(--bx-green) !important;
  --mdc-linear-progress-track-color: rgba(0, 93, 31, 0.15) !important;
  color: var(--bx-green) !important;
}

mat-progress-bar .mat-progress-bar-fill::after,
.mat-progress-bar .mat-progress-bar-fill::after,
.mat-mdc-progress-bar .mdc-linear-progress__bar-inner,
.mdc-linear-progress__bar-inner,
[class*="progress-bar" i] [class*="bar" i],
[class*="linear-progress" i] [class*="bar" i] {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
}

mat-progress-bar .mat-progress-bar-buffer,
.mat-progress-bar .mat-progress-bar-buffer,
.mat-mdc-progress-bar .mdc-linear-progress__buffer-bar,
.mdc-linear-progress__buffer-bar,
[class*="progress-bar" i] [class*="buffer" i],
[class*="linear-progress" i] [class*="buffer" i] {
  background-color: rgba(0, 93, 31, 0.15) !important;
}


/* ==========================================================================
   GLOBAL COLOR CONVERSION: Turn all Black or Gray text and icons to Corporate Green
   ========================================================================== */

body.boxtech-layout-active {
  color: var(--bx-green) !important;
}

/* The rule above sets color on <body>, and since color inherits, any widget element
   that doesn't set its own explicit title/text color falls through the inheritance
   chain and lands on the forced brand green - this is why some widget headings were
   coming out green regardless of the widget's own settings. Give widgets an explicit,
   neutral baseline here (Material's default high-emphasis text color) so they stop
   inheriting our green. This is intentionally non-important and lower down the
   cascade only in the sense that it directly targets each widget descendant, so any
   color a widget's own settings apply (inline style or its own generated CSS) still
   wins over this baseline. */
body.boxtech-layout-active h1:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active h2:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active h3:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active h4:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active h5:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active h6:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active p:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active li:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active label:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active th:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active td:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active mat-cell:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active mat-header-cell:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-cell:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-header-cell:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-row:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-row:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-card-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-card-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-card-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .card-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-dashboard-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-details-panel:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .details-panel:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .entity-details:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .widget-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .widget-text:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-widget-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-widget-text:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-muted:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .muted:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .description:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active [class*="description"]:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active [class*="muted"]:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-dashboard-title-bar .tb-dashboard-title:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-tab-link:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-tab-label:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-tab:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-select-value:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-select-value:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-select-arrow:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-select-arrow:not(.tb-widget *):not(tb-dashboard-widget *) {
  color: var(--bx-green) !important;
}

/* Ensure secondary / muted text uses a slightly lighter shade of Corporate Green */
body.boxtech-layout-active .tb-muted:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .muted:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .description:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active [class*="description"]:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active [class*="muted"]:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-cell[class*="muted"]:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-cell[class*="muted"]:not(.tb-widget *):not(tb-dashboard-widget *) {
  color: var(--bx-green-hover) !important;
}

/* Force global icons that are black or gray to Corporate Green, excluding those inside green components, dashboard widgets, and selection toolbars */
body.boxtech-layout-active mat-icon:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(.mat-mdc-raised-button *):not([mat-raised-button] *):not(.mat-mdc-fab *):not([mat-fab] *):not(.boxtech-side-item.boxtech-active *):not(.boxtech-dashboard-toolbar-inner *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(mat-fab-toolbar *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active .mat-icon:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(.mat-mdc-raised-button *):not([mat-raised-button] *):not(.mat-mdc-fab *):not([mat-fab] *):not(.boxtech-side-item.boxtech-active *):not(.boxtech-dashboard-toolbar-inner *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(mat-fab-toolbar *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active .material-icons:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(.mat-mdc-raised-button *):not([mat-raised-button] *):not(.mat-mdc-fab *):not([mat-fab] *):not(.boxtech-side-item.boxtech-active *):not(.boxtech-dashboard-toolbar-inner *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(mat-fab-toolbar *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active svg.mdc-icon-button__icon:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(.mat-mdc-raised-button *):not([mat-raised-button] *):not(.mat-mdc-fab *):not([mat-fab] *):not(.boxtech-side-item.boxtech-active *):not(.boxtech-dashboard-toolbar-inner *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(mat-fab-toolbar *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *) {
  color: var(--bx-green) !important;
}

/* Outlined, text, and stroked buttons outside the green toolbar/active-sidebar, widgets, custom top bar, and selection toolbars */
body.boxtech-layout-active button.mat-mdc-outlined-button:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(.boxtech-side-item.boxtech-active *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active button.mat-mdc-button:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(.boxtech-side-item.boxtech-active *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active button.mat-mdc-stroked-button:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(.boxtech-side-item.boxtech-active *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active button[mat-button]:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(.boxtech-side-item.boxtech-active *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active button[mat-stroked-button]:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(.boxtech-side-item.boxtech-active *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active button[mat-icon-button]:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(.boxtech-side-item.boxtech-active *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *),
body.boxtech-layout-active button.mat-mdc-icon-button:not(#boxtech-custom-header *):not(.boxtech-topbar *):not(.tb-widget *):not(tb-dashboard-widget *):not(tb-dashboard-toolbar *):not(.tb-dashboard-toolbar *):not(.boxtech-side-item.boxtech-active *):not(.tb-entity-table-selection-header *):not(.tb-selection-toolbar *):not(.selection-toolbar *):not([class*="selection" i] *):not([class*="selected" i] *) {
  --mdc-outlined-button-label-text-color: var(--bx-green) !important;
  --mdc-outlined-button-outline-color: var(--bx-green) !important;
  color: var(--bx-green) !important;
  border-color: var(--bx-green) !important;
}

/* Global Form field texts and labels conversion to corporate green (excluding inside widgets) */
body.boxtech-layout-active mat-form-field:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-floating-label,
body.boxtech-layout-active mat-form-field:not(.tb-widget *):not(tb-dashboard-widget *) label,
body.boxtech-layout-active mat-form-field:not(.tb-widget *):not(tb-dashboard-widget *) input,
body.boxtech-layout-active mat-form-field:not(.tb-widget *):not(tb-dashboard-widget *) select,
body.boxtech-layout-active mat-form-field:not(.tb-widget *):not(tb-dashboard-widget *) mat-select,
body.boxtech-layout-active mat-form-field:not(.tb-widget *):not(tb-dashboard-widget *) textarea {
  color: var(--bx-green) !important;
}


/* Ensure dashboard toolbar is visible and beautifully styled on its green background */
body.boxtech-layout-active .boxtech-dashboard-toolbar-inner,
body.boxtech-layout-active mat-fab-toolbar mat-toolbar.mat-toolbar,
body.boxtech-layout-active tb-dashboard-toolbar mat-toolbar.mat-toolbar,
body.boxtech-layout-active .mat-fab-toolbar mat-toolbar.mat-toolbar,
body.boxtech-layout-active .tb-dashboard-toolbar mat-toolbar.mat-toolbar,
tb-dashboard-toolbar mat-toolbar.mat-toolbar,
mat-fab-toolbar mat-toolbar.mat-toolbar {
  display: flex !important;
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* All text, titles, options, and icons inside the dashboard toolbar must be white */
body.boxtech-layout-active .boxtech-dashboard-toolbar-inner *,
body.boxtech-layout-active tb-dashboard-toolbar *,
body.boxtech-layout-active .tb-dashboard-toolbar *,
body.boxtech-layout-active mat-fab-toolbar *,
body.boxtech-layout-active tb-entity-state-controller,
body.boxtech-layout-active tb-entity-state-controller *,
body.boxtech-layout-active .entity-state-controller,
body.boxtech-layout-active .entity-state-controller *,
body.boxtech-layout-active .state-entry,
body.boxtech-layout-active .state-entry * {
  color: #ffffff !important;
}

/* mat-icon/svg glyphs are painted via fill (and the MDC icon-button token), not the
   text color property above, so without these the icons on the right side of the
   dashboard toolbar (e.g. after selecting/entering edit mode) can render invisible. */
body.boxtech-layout-active .boxtech-dashboard-toolbar-inner :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active tb-dashboard-toolbar :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active .tb-dashboard-toolbar :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active mat-fab-toolbar :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons) {
  fill: #ffffff !important;
  --mdc-icon-button-icon-color: #ffffff !important;
}

body.boxtech-layout-active .boxtech-dashboard-toolbar-inner button[disabled] :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active tb-dashboard-toolbar button[disabled] :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active .tb-dashboard-toolbar button[disabled] :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active .boxtech-dashboard-toolbar-inner button:disabled :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active tb-dashboard-toolbar button:disabled :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active .tb-dashboard-toolbar button:disabled :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons) {
  color: rgba(255, 255, 255, 0.5) !important;
  fill: rgba(255, 255, 255, 0.5) !important;
  --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5) !important;
}

/* Outlined buttons inside dashboard toolbar (like Add widget, Edit Mode, Cancel) */
body.boxtech-layout-active tb-dashboard-toolbar button.mat-mdc-outlined-button,
body.boxtech-layout-active tb-dashboard-toolbar button[mat-stroked-button] {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

body.boxtech-layout-active tb-dashboard-toolbar button.mat-mdc-outlined-button:hover,
body.boxtech-layout-active tb-dashboard-toolbar button[mat-stroked-button]:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Raised buttons inside dashboard toolbar (like Save button) */
body.boxtech-layout-active tb-dashboard-toolbar button.mat-mdc-raised-button,
body.boxtech-layout-active tb-dashboard-toolbar button[mat-raised-button] {
  background-color: var(--bx-green-hover) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

body.boxtech-layout-active tb-dashboard-toolbar button.mat-mdc-raised-button:hover,
body.boxtech-layout-active tb-dashboard-toolbar button[mat-raised-button]:hover {
  background-color: var(--bx-green-2) !important;
}

/* Select element, values and dropdown arrows inside dashboard toolbar */
body.boxtech-layout-active tb-dashboard-toolbar mat-select,
body.boxtech-layout-active tb-dashboard-toolbar .mat-mdc-select-value,
body.boxtech-layout-active tb-dashboard-toolbar .mat-mdc-select-arrow svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* Issue 4: Prevent half-cut email and password input icons on all public pages (login, reset, etc.) and align with text baseline */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field-icon-prefix,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field-icon-suffix,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) [matPrefix],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) [matSuffix],
body:not(.boxtech-layout-active) .mat-mdc-form-field-icon-prefix,
body:not(.boxtech-layout-active) .mat-mdc-form-field-icon-suffix,
body:not(.boxtech-layout-active) [matPrefix],
body:not(.boxtech-layout-active) [matSuffix],
form.tb-login-form .mat-mdc-form-field-icon-prefix,
form.tb-login-form .mat-mdc-form-field-icon-suffix,
form.tb-login-form [matPrefix],
form.tb-login-form [matSuffix] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 24px !important;
  width: auto !important;
  min-width: 24px !important;
  align-self: flex-end !important; /* Keep aligned with actual entered text baseline */
  margin-bottom: 8px !important; /* Aligns perfectly with input baseline */
  overflow: visible !important;
  padding: 0 4px !important; /* Keep icon safe from clipping */
  transform: none !important;
}

body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-icon,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) mat-icon,
form.tb-login-form .mat-icon,
form.tb-login-form mat-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: normal !important;
  height: 24px !important;
  width: 24px !important;
  font-size: 24px !important;
  overflow: visible !important;
}


/* ==========================================================================
   TOP TOOLBAR FONT SIZE INCREASES & COLOR COHERENCE (Corporate Green Theme)
   ========================================================================== */
#boxtech-custom-header .boxtech-nav-btn {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  color: #ffffff !important;
  background: transparent !important;
  transition: background-color 0.15s !important;
}
#boxtech-custom-header .boxtech-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
}
#boxtech-custom-header .boxtech-top-search {
  font-size: 14px !important;
}
#boxtech-custom-header .boxtech-sidebar-toggle {
  font-size: 20px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  height: 36px !important;
  width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}
#boxtech-custom-header .boxtech-sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
}
#boxtech-custom-header .boxtech-dd-arrow {
  font-size: 10px !important;
  margin-left: 4px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Brand styling on topbar left */
.boxtech-top-logo {
  height: 50px !important;
  max-height: 50px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-left: 12px !important;
  margin-right: 12px !important;
  display: block !important;
  flex-shrink: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure full screen and notify slots inside header have white icons */
#boxtech-custom-header .boxtech-slot button,
#boxtech-custom-header .boxtech-slot mat-icon,
#boxtech-custom-header .boxtech-slot .material-icons,
#boxtech-custom-header .boxtech-slot svg {
  color: #ffffff !important;
  background: transparent !important;
}
#boxtech-custom-header .boxtech-slot button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
}

/* Perfect vertical centering globally for "View docs" and "How to create Device" and all buttons */
a[href*="docs"],
a[href*="thingsboard"],
a[href*="thingsboard.io"],
.tb-get-started a,
.get-started a,
.tb-doc-link,
a.tb-doc-link,
.mat-mdc-outlined-button,
.mat-mdc-stroked-button,
.mat-stroked-button,
.mat-mdc-button,
.mat-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: normal !important;
  text-align: center !important;
}

.mdc-button .mdc-button__label,
.mat-mdc-button .mdc-button__label,
.mat-mdc-outlined-button .mdc-button__label,
.mat-mdc-stroked-button .mdc-button__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: normal !important;
  text-align: center !important;
}

/* Custom header Dropdown Menus and Items explicitly styled to green */
.boxtech-dd-menu,
#boxtech-custom-header .boxtech-dd-menu {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid var(--bx-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  padding: 6px 0 !important;
  z-index: 10000 !important;
}

.boxtech-dd-item,
#boxtech-custom-header .boxtech-dd-item,
.boxtech-menu-group .boxtech-dd-item {
  color: var(--bx-green) !important; /* Dropdown text options explicitly green */
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  text-align: left !important;
  width: 100% !important;
  border: none !important;
  cursor: pointer !important;
  display: block !important;
}

.boxtech-dd-item:hover,
#boxtech-custom-header .boxtech-dd-item:hover,
.boxtech-menu-group .boxtech-dd-item:hover {
  background-color: #f1f6f3 !important; /* Soft brand-green highlight background */
  color: var(--bx-green-hover) !important;
}


/* ==========================================================================
   GLOBAL CHECKBOX OVERRIDES (Corporate Green)
   ========================================================================== */
body.boxtech-layout-active mat-checkbox:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-checkbox:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mdc-checkbox:not(.tb-widget *):not(tb-dashboard-widget *) {
  --mdc-checkbox-selected-focus-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-hover-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-pressed-icon-color: var(--bx-green) !important;
  --mdc-checkbox-unselected-focus-icon-color: var(--bx-green-hover) !important;
  --mdc-checkbox-unselected-hover-icon-color: var(--bx-green) !important;
  --mdc-checkbox-unselected-icon-color: var(--bx-green-hover) !important;
  --mdc-checkbox-unselected-pressed-icon-color: var(--bx-green) !important;
  --mdc-checkbox-selected-checkmark-color: #ffffff !important;
}

/* Checked and indeterminate state background and borders */
body.boxtech-layout-active .mdc-checkbox:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
body.boxtech-layout-active .mdc-checkbox:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,
body.boxtech-layout-active .mat-mdc-checkbox.mat-mdc-checkbox-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__background,
body.boxtech-layout-active .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__background,
body.boxtech-layout-active .mat-mdc-checkbox.mat-accent.mat-mdc-checkbox-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__background,
body.boxtech-layout-active .mat-mdc-checkbox.mat-warn.mat-mdc-checkbox-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__background {
  border-color: var(--bx-green) !important;
  background-color: var(--bx-green) !important;
}

/* Unchecked checkbox border */
body.boxtech-layout-active .mdc-checkbox:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__background,
body.boxtech-layout-active .mat-mdc-checkbox:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-checkbox__background {
  border-color: var(--bx-green-hover) !important;
}

/* Checkbox active ripple */
body.boxtech-layout-active .mat-mdc-checkbox .mat-ripple,
body.boxtech-layout-active .mat-mdc-checkbox .mat-mdc-checkbox-ripple {
  --mat-mdc-checkbox-ripple-color: var(--bx-green) !important;
}

/* Standard HTML checkbox */
body.boxtech-layout-active input[type="checkbox"] {
  accent-color: var(--bx-green) !important;
}


/* ==========================================================================
   TAB LABEL & ICON COLOR OVERRIDES (Corporate Green)
   ========================================================================== */
body.boxtech-layout-active .mat-mdc-tab-header:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-tab-link:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-tab-label:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-tab:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mdc-tab:not(.tb-widget *):not(tb-dashboard-widget *) {
  color: var(--bx-green) !important;
}

body.boxtech-layout-active .mat-mdc-tab:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-tab__text-label,
body.boxtech-layout-active .mat-mdc-tab-link:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-tab__text-label,
body.boxtech-layout-active .mdc-tab__text-label:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-tab:not(.tb-widget *):not(tb-dashboard-widget *) mat-icon,
body.boxtech-layout-active .mat-mdc-tab-link:not(.tb-widget *):not(tb-dashboard-widget *) mat-icon,
body.boxtech-layout-active .mat-tab-label:not(.tb-widget *):not(tb-dashboard-widget *) mat-icon,
body.boxtech-layout-active .mdc-tab:not(.tb-widget *):not(tb-dashboard-widget *) mat-icon,
body.boxtech-layout-active .mdc-tab-indicator__content:not(.tb-widget *):not(tb-dashboard-widget *) {
  color: var(--bx-green) !important;
}

body.boxtech-layout-active .mat-mdc-tab.mdc-tab--active:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-tab__text-label,
body.boxtech-layout-active .mat-mdc-tab-link.mdc-tab--active:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-tab__text-label,
body.boxtech-layout-active .mdc-tab--active:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-tab__text-label {
  color: var(--bx-green) !important;
  font-weight: 700 !important;
}

body.boxtech-layout-active .mdc-tab-indicator--active:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-tab-indicator__content--underline {
  border-color: var(--bx-green) !important;
}

/* Sidebar Header Layout */
.boxtech-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  border-bottom: none !important;
  width: 100% !important;
  height: 64px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2005 !important;
  flex-shrink: 0 !important;
  background: #fff !important;
}

/* Hamburger button in sidebar */
#boxtech-custom-sidebar .boxtech-sidebar-toggle {
  height: 36px !important;
  min-width: 36px !important;
  width: 36px !important;
  border: 1px solid #b9c9be !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--bx-green) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Search bar wrapper in sidebar */
#boxtech-custom-sidebar .boxtech-search-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 200px !important;
  flex-grow: 1 !important;
  opacity: 1 !important;
  transition: opacity 0.2s ease, max-width 0.2s ease, visibility 0.2s ease !important;
}

#boxtech-custom-sidebar .boxtech-top-search {
  width: 100% !important;
}

/* Collapsed sidebar adjustments */
body.boxtech-sidebar-collapsed .boxtech-sidebar-header {
  justify-content: center !important;
  padding: 12px 0 !important;
}

body.boxtech-sidebar-collapsed #boxtech-custom-sidebar .boxtech-search-wrap {
  display: flex !important;
  opacity: 0 !important;
  max-width: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Greeting style at Topbar Left */
.boxtech-greeting-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.boxtech-greeting-icon {
  font-size: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.boxtech-greeting-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bx-green) !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.2px !important;
}

/* Sidebar Brand Title below hamburger and search bar */
.boxtech-sidebar-brand {
  position: relative !important;
  z-index: 10 !important;
  padding: 16px 20px 8px 20px !important;
  background: #ffffff !important;
  border-bottom: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  opacity: 1 !important;
  max-height: 120px !important;
  transition: opacity 0.2s ease, max-height 0.2s ease, padding 0.2s ease, visibility 0.2s ease !important;
  overflow: hidden !important;
}

.boxtech-sidebar-brand-logo {
  height: 95px !important;          /* Increased from 60px to 95px */
  max-height: 95px !important;      /* Increased from 60px to 95px */
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.2s ease;
}

body.boxtech-sidebar-collapsed .boxtech-sidebar-brand {
  opacity: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   BOXTECH ADDITIONAL GREEN COLOR SCHEME OVERRIDES (v3012-patch)
   ========================================================================== */

/* Remove any blue focus outline/ring globally across all Material Design components */
:focus, 
:focus-within, 
:focus-visible, 
.mat-focused, 
.mat-mdc-button-toggle-focus-overlay,
.mat-mdc-button-toggle .mat-mdc-focus-indicator,
.mat-mdc-button-toggle .mat-focus-indicator {
  outline: none !important;
  box-shadow: none !important;
}

* {
  --mdc-focus-ring-color: transparent !important;
  --mdc-focus-ring-width: 0px !important;
}

/* Force pill shape (fully rounded) on all button toggle groups, button toggles, and slide toggles, EXCLUDING dashboard widgets */
body.boxtech-layout-active .mat-button-toggle-group:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-button-toggle-group:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-toggle-group:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-time-window-select:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-time-window-panel:not(.tb-widget *):not(tb-dashboard-widget *) {
  border-radius: 24px !important;
  overflow: hidden !important;
  border-width: 1px !important;
}

body.boxtech-layout-active .mat-button-toggle:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-button-toggle:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-toggle-item:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-toggle-select button:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .tb-toggle-group button:not(.tb-widget *):not(tb-dashboard-widget *) {
  border-radius: 20px !important;
}

/* Slide toggle track and handle rounded EXCLUDING dashboard widgets */
body.boxtech-layout-active .mdc-switch__track:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-slide-toggle .mdc-switch__track:not(.tb-widget *):not(tb-dashboard-widget *) {
  border-radius: 14px !important;
}
body.boxtech-layout-active .mdc-switch__handle:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-slide-toggle .mdc-switch__handle:not(.tb-widget *):not(tb-dashboard-widget *) {
  border-radius: 50% !important;
}
body.boxtech-layout-active .mat-slide-toggle-bar:not(.tb-widget *):not(tb-dashboard-widget *) {
  border-radius: 14px !important;
}
body.boxtech-layout-active .mat-slide-toggle-thumb:not(.tb-widget *):not(tb-dashboard-widget *) {
  border-radius: 50% !important;
}

/* Dialog, modal and details panel headers styling (Corporate Green) */
.mat-mdc-dialog-container mat-toolbar,
.mat-dialog-container mat-toolbar,
.cdk-overlay-pane mat-toolbar,
mat-drawer mat-toolbar,
.tb-details-panel mat-toolbar,
tb-widget-editor mat-toolbar,
.tb-widget-editor mat-toolbar,
tb-widget-settings mat-toolbar,
.tb-widget-settings mat-toolbar,
mat-toolbar.tb-widget-editor {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  color: #ffffff !important;
}

/* Close button / 'X' icon inside dialog titles, toolbars, and overlay headers - ALWAYS force white */
.mat-mdc-dialog-container .close-button,
.mat-mdc-dialog-container button[mat-dialog-close],
.mat-dialog-container .close-button,
.mat-dialog-container button[mat-dialog-close],
.tb-details-panel .close-button,
.tb-details-panel button[mat-dialog-close],
.cdk-overlay-pane .close-button,
.cdk-overlay-pane button[mat-dialog-close],
mat-toolbar button[aria-label*="Close" i],
mat-toolbar button[aria-label*="Dismiss" i],
mat-toolbar button[aria-label*="Cancel" i] {
  color: #ffffff !important;
}

.mat-mdc-dialog-container .close-button *,
.mat-mdc-dialog-container button[mat-dialog-close] *,
.mat-dialog-container .close-button *,
.mat-dialog-container button[mat-dialog-close] *,
.tb-details-panel .close-button *,
.tb-details-panel button[mat-dialog-close] *,
.cdk-overlay-pane .close-button *,
.cdk-overlay-pane button[mat-dialog-close] *,
mat-toolbar button[aria-label*="Close" i] *,
mat-toolbar button[aria-label*="Dismiss" i] *,
mat-toolbar button[aria-label*="Cancel" i] * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Ensure all text, icons, and buttons inside dark green headers, dialog titles, and drawer headers remain white (preventing green-on-green) */
.tb-details-panel mat-toolbar *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.tb-details-panel-header *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
tb-details-panel-header *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.mat-mdc-dialog-title *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.mat-dialog-title *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.mat-mdc-dialog-container mat-toolbar *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.cdk-overlay-pane mat-toolbar *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.tb-selection-toolbar *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.tb-dashboard-toolbar-inner *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
.tb-dashboard-toolbar *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *),
tb-dashboard-toolbar *:not(.mat-button-toggle-checked):not(.mat-button-toggle-checked *):not(.mat-mdc-button-toggle-checked):not(.mat-mdc-button-toggle-checked *) {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Normal (unselected) table headers and toolbars should have corporate green text and icons */
mat-toolbar:not(#boxtech-custom-header):not(.boxtech-topbar):not(.tb-selection-toolbar):not(.selection-toolbar):not(.mat-mdc-dialog-container mat-toolbar):not(.cdk-overlay-pane mat-toolbar):not(.tb-details-panel mat-toolbar) button,
mat-toolbar:not(#boxtech-custom-header):not(.boxtech-topbar):not(.tb-selection-toolbar):not(.selection-toolbar):not(.mat-mdc-dialog-container mat-toolbar):not(.cdk-overlay-pane mat-toolbar):not(.tb-details-panel mat-toolbar) mat-icon,
mat-toolbar:not(#boxtech-custom-header):not(.boxtech-topbar):not(.tb-selection-toolbar):not(.selection-toolbar):not(.mat-mdc-dialog-container mat-toolbar):not(.cdk-overlay-pane mat-toolbar):not(.tb-details-panel mat-toolbar) .material-icons,
mat-toolbar:not(#boxtech-custom-header):not(.boxtech-topbar):not(.tb-selection-toolbar):not(.selection-toolbar):not(.mat-mdc-dialog-container mat-toolbar):not(.cdk-overlay-pane mat-toolbar):not(.tb-details-panel mat-toolbar) svg {
  color: #ffffff;
}

/* Selection toolbar (when select all / rows selected) turns to corporate green with white text/icons */
mat-toolbar:has(.tb-entity-table-info),
.mat-toolbar:has(.tb-entity-table-info),
mat-toolbar:has(.tb-selection-toolbar),
mat-toolbar:has(.selection-toolbar),
.tb-entity-table-selection-header,
.tb-selection-toolbar,
.selection-toolbar,
mat-toolbar.tb-selection-toolbar,
mat-toolbar.tb-entity-table-selection-header,
.mat-toolbar.tb-entity-table-selection-header,
.tb-entity-table-selection-header mat-toolbar,
div.tb-entity-table-selection-header,
mat-toolbar:is([class*="selection" i], [class*="selected" i]),
.mat-toolbar:is([class*="selection" i], [class*="selected" i]),
[class*="selection-header" i],
[class*="selection-toolbar" i],
.mat-toolbar-tools:has(.tb-entity-table-info),
.mat-toolbar-tools:has([class*="selected" i]),
.mat-toolbar-tools:has([class*="selection" i]) {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  color: #ffffff !important;
}
mat-toolbar:has(.tb-entity-table-info) *,
.mat-toolbar:has(.tb-entity-table-info) *,
mat-toolbar:has(.tb-selection-toolbar) *,
mat-toolbar:has(.selection-toolbar) *,
.tb-entity-table-selection-header *,
.tb-selection-toolbar *,
.selection-toolbar *,
mat-toolbar.tb-selection-toolbar *,
mat-toolbar.tb-entity-table-selection-header *,
.mat-toolbar.tb-entity-table-selection-header *,
.tb-entity-table-selection-header mat-toolbar *,
div.tb-entity-table-selection-header *,
mat-toolbar:is([class*="selection" i], [class*="selected" i]) *,
.mat-toolbar:is([class*="selection" i], [class*="selected" i]) *,
[class*="selection-header" i] *,
[class*="selection-toolbar" i] *,
.mat-toolbar-tools:has(.tb-entity-table-info) *,
.mat-toolbar-tools:has([class*="selected" i]) *,
.mat-toolbar-tools:has([class*="selection" i]) * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Basic / Advanced toggle styling inside dialog/drawer headers (white pill with green/white text toggles) */
mat-toolbar .mat-button-toggle-group,
mat-toolbar mat-button-toggle-group,
.mat-mdc-dialog-container mat-toolbar .mat-button-toggle-group,
.cdk-overlay-pane mat-toolbar .mat-button-toggle-group,
body.boxtech-layout-active .mat-mdc-dialog-container mat-toolbar .mat-button-toggle-group,
body.boxtech-layout-active .mat-mdc-dialog-container mat-toolbar mat-button-toggle-group,
.tb-details-panel-header .mat-button-toggle-group,
.tb-details-panel .mat-button-toggle-group {
  border: 1.5px solid #ffffff !important;
  background: transparent !important;
  border-radius: 20px !important;
  overflow: visible !important; /* Allow rounded buttons to sit elegantly without being cut off */
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 12px 0 8px !important;
  padding: 1px !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  box-sizing: border-box !important;
}

mat-toolbar .mat-button-toggle,
mat-toolbar .mat-mdc-button-toggle,
.mat-mdc-dialog-container mat-toolbar .mat-button-toggle,
.mat-mdc-dialog-container mat-toolbar .mat-mdc-button-toggle,
.cdk-overlay-pane mat-toolbar .mat-button-toggle,
.cdk-overlay-pane mat-toolbar .mat-mdc-button-toggle,
.tb-details-panel .mat-button-toggle,
.tb-details-panel .mat-mdc-button-toggle,
.tb-details-panel-header .mat-button-toggle,
.tb-details-panel-header .mat-mdc-button-toggle {
  border: none !important;
  background: transparent !important;
  height: 100% !important;
  border-radius: 18px !important;
  min-width: 80px !important; /* Elegant structured spacing to prevent text clipping from right */
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Checked/active tab inside Basic / Advanced toggle (white background, green text) */
mat-toolbar .mat-button-toggle-checked,
mat-toolbar .mat-mdc-button-toggle-checked,
.mat-mdc-dialog-container mat-toolbar .mat-button-toggle-checked,
.mat-mdc-dialog-container mat-toolbar .mat-mdc-button-toggle-checked,
.cdk-overlay-pane mat-toolbar .mat-button-toggle-checked,
.cdk-overlay-pane mat-toolbar .mat-mdc-button-toggle-checked,
.tb-details-panel .mat-button-toggle-checked,
.tb-details-panel .mat-mdc-button-toggle-checked,
.tb-details-panel-header .mat-button-toggle-checked,
.tb-details-panel-header .mat-mdc-button-toggle-checked {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 18px !important;
}

/* SELECTED Toggle (White Pill background) gets corporate green text color */
.mat-mdc-dialog-container .mat-button-toggle-checked *,
.mat-mdc-dialog-container .mat-mdc-button-toggle-checked *,
.mat-dialog-container .mat-button-toggle-checked *,
.mat-dialog-container .mat-mdc-button-toggle-checked *,
.cdk-overlay-pane .mat-button-toggle-checked *,
.cdk-overlay-pane .mat-mdc-button-toggle-checked *,
.tb-details-panel .mat-button-toggle-checked *,
.tb-details-panel .mat-mdc-button-toggle-checked *,
mat-toolbar .mat-button-toggle-checked *,
mat-toolbar .mat-mdc-button-toggle-checked * {
  color: var(--bx-green) !important;
  font-weight: 700 !important;
}

/* UNSELECTED Toggle (transparent background) gets clean white text color */
.mat-mdc-dialog-container .mat-button-toggle:not(.mat-button-toggle-checked) *,
.mat-mdc-dialog-container .mat-mdc-button-toggle:not(.mat-mdc-button-toggle-checked) *,
.mat-dialog-container .mat-button-toggle:not(.mat-button-toggle-checked) *,
.mat-dialog-container .mat-mdc-button-toggle:not(.mat-mdc-button-toggle-checked) *,
.cdk-overlay-pane .mat-button-toggle:not(.mat-button-toggle-checked) *,
.cdk-overlay-pane .mat-mdc-button-toggle:not(.mat-mdc-button-toggle-checked) *,
.tb-details-panel .mat-button-toggle:not(.mat-button-toggle-checked) *,
.tb-details-panel .mat-mdc-button-toggle:not(.mat-mdc-button-toggle-checked) *,
mat-toolbar .mat-button-toggle:not(.mat-button-toggle-checked) *,
mat-toolbar .mat-mdc-button-toggle:not(.mat-mdc-button-toggle-checked) * {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Spacing and typography inside the label content */
mat-toolbar .mat-button-toggle-label-content,
mat-toolbar .mat-mdc-button-toggle-label-content,
.mat-mdc-dialog-container mat-toolbar .mat-button-toggle-label-content,
.mat-mdc-dialog-container mat-toolbar .mat-mdc-button-toggle-label-content,
.cdk-overlay-pane mat-toolbar .mat-button-toggle-label-content,
.cdk-overlay-pane mat-toolbar .mat-mdc-button-toggle-label-content {
  line-height: 28px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

/* Slide Toggle & Switch Components (Corporate Green) - EXCLUDING widgets */
body.boxtech-layout-active mat-slide-toggle:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-slide-toggle:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mdc-switch:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active tb-slide-toggle:not(.tb-widget *):not(tb-dashboard-widget *) {
  --mdc-switch-selected-focus-icon-color: var(--bx-green) !important;
  --mdc-switch-selected-hover-icon-color: var(--bx-green) !important;
  --mdc-switch-selected-icon-color: var(--bx-green) !important;
  --mdc-switch-selected-pressed-icon-color: var(--bx-green) !important;
  --mdc-switch-selected-focus-handle-color: var(--bx-green) !important;
  --mdc-switch-selected-hover-handle-color: var(--bx-green) !important;
  --mdc-switch-selected-handle-color: var(--bx-green) !important;
  --mdc-switch-selected-pressed-handle-color: var(--bx-green) !important;
  --mdc-switch-selected-focus-track-color: rgba(0, 93, 31, 0.45) !important;
  --mdc-switch-selected-hover-track-color: rgba(0, 93, 31, 0.45) !important;
  --mdc-switch-selected-track-color: rgba(0, 93, 31, 0.45) !important;
  --mdc-switch-selected-pressed-track-color: rgba(0, 93, 31, 0.45) !important;
}

/* Checked state handle & track overrides - EXCLUDING widgets */
body.boxtech-layout-active .mdc-switch--selected:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-switch__handle,
body.boxtech-layout-active .mat-mdc-slide-toggle.mat-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-switch__handle,
body.boxtech-layout-active .mat-slide-toggle.mat-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mat-slide-toggle-thumb {
  background-color: var(--bx-green) !important;
}

body.boxtech-layout-active .mdc-switch--selected:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-switch__track,
body.boxtech-layout-active .mat-mdc-slide-toggle.mat-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mdc-switch__track,
body.boxtech-layout-active .mat-slide-toggle.mat-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mat-slide-toggle-bar {
  background-color: rgba(0, 93, 31, 0.4) !important;
}

/* Checked/active button segmented/toggles in content body - EXCLUDING widgets */
body.boxtech-layout-active .mat-button-toggle-group:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-button-toggle-group:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-button-toggle-group-appearance-standard:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-button-toggle-group-appearance-standard:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-button-toggle:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-button-toggle:not(.tb-widget *):not(tb-dashboard-widget *) {
  border-color: var(--bx-green-hover) !important;
}

/* Solid corporate green background with white text for active body toggles - EXCLUDING widgets */
body.boxtech-layout-active .mat-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *),
body.boxtech-layout-active .mat-mdc-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *) {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  color: #ffffff !important;
}

body.boxtech-layout-active .mat-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mat-button-toggle-button,
body.boxtech-layout-active .mat-mdc-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *) .mat-mdc-button-toggle-button,
body.boxtech-layout-active .mat-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *) button,
body.boxtech-layout-active .mat-mdc-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *) button {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  color: #ffffff !important;
}

body.boxtech-layout-active .mat-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *) *,
body.boxtech-layout-active .mat-mdc-button-toggle-checked:not(.tb-widget *):not(tb-dashboard-widget *) * {
  color: #ffffff !important;
}

/* Inactive button segmented/toggles inside content body - EXCLUDING widgets and dark headers */
body.boxtech-layout-active .mat-button-toggle:not(.mat-button-toggle-checked):not(.tb-widget *):not(tb-dashboard-widget *):not(.tb-details-panel *):not(.mat-mdc-dialog-container *):not(.cdk-overlay-pane *):not(mat-toolbar *) .mat-button-toggle-button,
body.boxtech-layout-active .mat-mdc-button-toggle:not(.mat-button-toggle-checked):not(.tb-widget *):not(tb-dashboard-widget *):not(.tb-details-panel *):not(.mat-mdc-dialog-container *):not(.cdk-overlay-pane *):not(mat-toolbar *) .mat-mdc-button-toggle-button {
  background-color: transparent !important;
  color: var(--bx-green) !important;
}

body.boxtech-layout-active .mat-button-toggle:not(.mat-button-toggle-checked):not(.tb-widget *):not(tb-dashboard-widget *):not(.tb-details-panel *):not(.mat-mdc-dialog-container *):not(.cdk-overlay-pane *):not(mat-toolbar *) *,
body.boxtech-layout-active .mat-mdc-button-toggle:not(.mat-button-toggle-checked):not(.tb-widget *):not(tb-dashboard-widget *):not(.tb-details-panel *):not(.mat-mdc-dialog-container *):not(.cdk-overlay-pane *):not(mat-toolbar *) * {
  color: var(--bx-green) !important;
}

/* Segmented button/pills overrides - EXCLUDING widgets */
body.boxtech-layout-active .tb-toggle-group:not(.tb-widget *) .tb-toggle-item.tb-active,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) .tb-active,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) button.active,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) button.tb-active,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) .mat-button-toggle-checked,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) .mat-mdc-button-toggle-checked,
body.boxtech-layout-active .tb-toggle-group:not(.tb-widget *) button.active,
body.boxtech-layout-active .tb-toggle-group:not(.tb-widget *) button.tb-active {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  color: #ffffff !important;
  border-color: var(--bx-green) !important;
}

body.boxtech-layout-active .tb-toggle-group:not(.tb-widget *) .tb-toggle-item.tb-active *,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) .tb-active *,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) button.active *,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) button.tb-active *,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) .mat-button-toggle-checked *,
body.boxtech-layout-active .tb-toggle-select:not(.tb-widget *) .mat-mdc-button-toggle-checked *,
body.boxtech-layout-active .tb-toggle-group:not(.tb-widget *) button.active *,
body.boxtech-layout-active .tb-toggle-group:not(.tb-widget *) button.tb-active * {
  color: #ffffff !important;
}

/* Outlined primary/accent buttons and stroked buttons - EXCLUDING widgets */
body.boxtech-layout-active button.mat-mdc-outlined-button:not(.tb-widget *),
body.boxtech-layout-active button.mat-mdc-stroked-button:not(.tb-widget *),
body.boxtech-layout-active button.mat-stroked-button:not(.tb-widget *),
body.boxtech-layout-active button.mat-outlined-button:not(.tb-widget *),
body.boxtech-layout-active .tb-time-window-button:not(.tb-widget *) {
  border-color: var(--bx-green) !important;
}

body.boxtech-layout-active button.mat-mdc-outlined-button:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-mdc-stroked-button:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-stroked-button:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-outlined-button:not(.tb-widget *) *,
body.boxtech-layout-active .tb-time-window-button:not(.tb-widget *) *,
body.boxtech-layout-active button[color="primary"]:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.tb-widget *) *,
body.boxtech-layout-active button[color="accent"]:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.tb-widget *) *,
body.boxtech-layout-active button.active-stroked:not(.tb-widget *) * {
  color: var(--bx-green) !important;
}

/* Active outline buttons - EXCLUDING widgets */
body.boxtech-layout-active button.mat-mdc-outlined-button.mat-primary:not(.tb-widget *),
body.boxtech-layout-active button.mat-mdc-outlined-button.mat-accent:not(.tb-widget *),
body.boxtech-layout-active button.mat-mdc-stroked-button.mat-primary:not(.tb-widget *),
body.boxtech-layout-active button.mat-mdc-stroked-button.mat-accent:not(.tb-widget *),
body.boxtech-layout-active button.mat-stroked-button.mat-primary:not(.tb-widget *),
body.boxtech-layout-active button.mat-stroked-button.mat-accent:not(.tb-widget *),
body.boxtech-layout-active button[color="primary"]:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.tb-widget *),
body.boxtech-layout-active button[color="accent"]:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.tb-widget *),
body.boxtech-layout-active .tb-time-window-button.active:not(.tb-widget *),
body.boxtech-layout-active button.active-stroked:not(.tb-widget *) {
  border-color: var(--bx-green) !important;
}

body.boxtech-layout-active button.mat-mdc-outlined-button.mat-primary:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-mdc-outlined-button.mat-accent:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-mdc-stroked-button.mat-primary:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-mdc-stroked-button.mat-accent:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-stroked-button.mat-primary:not(.tb-widget *) *,
body.boxtech-layout-active button.mat-stroked-button.mat-accent:not(.tb-widget *) *,
body.boxtech-layout-active .tb-time-window-button.active:not(.tb-widget *) *,
body.boxtech-layout-active button.active-stroked:not(.tb-widget *) * {
  color: var(--bx-green) !important;
  font-weight: 700 !important;
}

/* Dynamic handling for active button states inside panels - EXCLUDING widgets */
body.boxtech-layout-active .tb-time-window-select:not(.tb-widget *) button.active,
body.boxtech-layout-active .tb-time-window-select:not(.tb-widget *) button.tb-active,
body.boxtech-layout-active .tb-time-window-panel:not(.tb-widget *) button.active,
body.boxtech-layout-active .tb-time-window-panel:not(.tb-widget *) button.tb-active {
  color: var(--bx-green) !important;
  border-color: var(--bx-green) !important;
  font-weight: 700 !important;
}

body.boxtech-layout-active .tb-time-window-select:not(.tb-widget *) button.active *,
body.boxtech-layout-active .tb-time-window-select:not(.tb-widget *) button.tb-active *,
body.boxtech-layout-active .tb-time-window-panel:not(.tb-widget *) button.active *,
body.boxtech-layout-active .tb-time-window-panel:not(.tb-widget *) button.tb-active * {
  color: var(--bx-green) !important;
}

/* ==========================================================================
   ANGULAR MATERIAL MDC CHIPS THEME OVERRIDES (Corporate Green Selectors)
   ========================================================================== */
.mat-mdc-chip-option.mat-mdc-chip-selected,
.mat-mdc-standard-chip.mat-mdc-chip-selected,
.mat-mdc-chip.mat-mdc-chip-selected,
mat-chip-option.mat-mdc-chip-selected,
mat-chip-row.mat-mdc-chip-selected,
mat-chip.mat-mdc-chip-selected,
.mat-chip-selected,
.mdc-chip--selected,
[selected].mat-mdc-chip-option,
[selected].mat-mdc-standard-chip {
  background-color: var(--bx-green) !important;
  color: #ffffff !important;
}

.mat-mdc-chip-option.mat-mdc-chip-selected .mdc-chip__background,
.mat-mdc-standard-chip.mat-mdc-chip-selected .mdc-chip__background,
.mat-mdc-chip.mat-mdc-chip-selected .mdc-chip__background {
  background-color: var(--bx-green) !important;
}

.mat-mdc-chip-option.mat-mdc-chip-selected .mdc-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip-selected .mdc-chip__text-label,
.mat-mdc-chip.mat-mdc-chip-selected .mdc-chip__text-label,
.mat-mdc-chip-option.mat-mdc-chip-selected *,
.mat-mdc-standard-chip.mat-mdc-chip-selected *,
.mat-mdc-chip.mat-mdc-chip-selected * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==========================================================================
   GLOBAL RADIO BUTTON OVERRIDES (Corporate Green)
   ========================================================================== */
body.boxtech-layout-active mat-radio-button,
body.boxtech-layout-active .mat-mdc-radio-button,
body.boxtech-layout-active .mdc-radio {
  --mdc-radio-selected-focus-icon-color: var(--bx-green) !important;
  --mdc-radio-selected-hover-icon-color: var(--bx-green) !important;
  --mdc-radio-selected-icon-color: var(--bx-green) !important;
  --mdc-radio-selected-pressed-icon-color: var(--bx-green) !important;
  --mdc-radio-unselected-focus-icon-color: var(--bx-green-hover) !important;
  --mdc-radio-unselected-hover-icon-color: var(--bx-green) !important;
  --mdc-radio-unselected-icon-color: var(--bx-green-hover) !important;
  --mdc-radio-unselected-pressed-icon-color: var(--bx-green) !important;
}

body.boxtech-layout-active .mat-mdc-radio-button.mat-mdc-radio-button-checked .mdc-radio__background,
body.boxtech-layout-active .mat-mdc-radio-button.mat-primary.mat-mdc-radio-button-checked .mdc-radio__background,
body.boxtech-layout-active .mat-mdc-radio-button.mat-accent.mat-mdc-radio-button-checked .mdc-radio__background {
  border-color: var(--bx-green) !important;
}

body.boxtech-layout-active .mat-mdc-radio-button .mdc-radio__native-control:checked ~ .mdc-radio__background .mdc-radio__outer-circle {
  border-color: var(--bx-green) !important;
}

body.boxtech-layout-active .mat-mdc-radio-button .mdc-radio__native-control:checked ~ .mdc-radio__background .mdc-radio__inner-circle {
  border-color: var(--bx-green) !important;
  background-color: var(--bx-green) !important;
}

body.boxtech-layout-active input[type="radio"] {
  accent-color: var(--bx-green) !important;
}

/* ==========================================================================
   PROGRESS SPINNERS & LOADER THEME OVERRIDES (Corporate Green)
   ========================================================================== */
.mat-mdc-progress-spinner,
.mat-progress-spinner,
mat-spinner,
mat-progress-spinner {
  --mdc-circular-progress-active-indicator-color: var(--bx-green) !important;
  stroke: var(--bx-green) !important;
}

.mat-mdc-progress-spinner circle,
.mat-progress-spinner circle,
mat-spinner circle,
mat-progress-spinner circle {
  stroke: var(--bx-green) !important;
}

.mat-mdc-progress-bar,
.mat-progress-bar,
mat-progress-bar {
  --mdc-linear-progress-active-indicator-color: var(--bx-green) !important;
  --mdc-linear-progress-track-color: rgba(0, 93, 31, 0.15) !important;
}

.mat-mdc-progress-bar .mdc-linear-progress__bar-inner,
.mat-progress-bar .mdc-linear-progress__bar-inner {
  background-color: var(--bx-green) !important;
}

/* ==========================================================================
   FAB & ROUND ACTION BUTTON OVERRIDES (Unconditional Green)
   ========================================================================== */
.mat-mdc-fab,
.mat-mdc-mini-fab,
.mat-fab,
.mat-mini-fab,
button[mat-fab],
button[mat-mini-fab],
button.mat-mdc-fab,
button.mat-mdc-mini-fab,
.tb-btn-fab,
button.tb-btn-fab,
.tb-fab,
[mat-fab],
[mat-mini-fab],
body.boxtech-layout-active .mat-mdc-fab,
body.boxtech-layout-active .mat-mdc-mini-fab {
  background-color: var(--bx-green) !important;
  background: var(--bx-green) !important;
  color: #ffffff !important;
}

.mat-mdc-fab:hover,
.mat-mdc-mini-fab:hover,
.mat-fab:hover,
.mat-mini-fab:hover,
button[mat-fab]:hover,
button[mat-mini-fab]:hover,
[mat-fab]:hover,
[mat-mini-fab]:hover,
button.mat-mdc-fab:hover,
button.mat-mdc-mini-fab:hover {
  background-color: var(--bx-green-hover) !important;
  background: var(--bx-green-hover) !important;
}

/* Icons inside FAB buttons must always be white */
.mat-mdc-fab mat-icon,
.mat-mdc-mini-fab mat-icon,
.mat-fab mat-icon,
.mat-mini-fab mat-icon,
button[mat-fab] mat-icon,
button[mat-mini-fab] mat-icon,
[mat-fab] mat-icon,
[mat-mini-fab] mat-icon,
.mat-mdc-fab .material-icons,
.mat-mdc-mini-fab .material-icons,
.mat-mdc-fab *,
.mat-mdc-mini-fab *,
.mat-fab *,
.mat-mini-fab * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==========================================================================
   UNCONDITIONAL PRIMARY BUTTON OVERRIDES (No ThingsBoard Blue Flashing)
   ========================================================================== */
.mat-mdc-button.mat-primary,
.mat-mdc-outlined-button.mat-primary,
.mat-mdc-icon-button.mat-primary,
.mat-button.mat-primary,
.mat-outlined-button.mat-primary,
.mat-icon-button.mat-primary {
  color: var(--bx-green) !important;
}

.mat-mdc-button.mat-primary:hover,
.mat-mdc-outlined-button.mat-primary:hover,
.mat-mdc-icon-button.mat-primary:hover,
.mat-button.mat-primary:hover,
.mat-outlined-button.mat-primary:hover,
.mat-icon-button.mat-primary:hover {
  background-color: rgba(0, 93, 31, 0.04) !important;
}

/* ==========================================================================
   FORM FIELD FOCUS & CARET GREEN OVERRIDES
   ========================================================================== */
.mat-mdc-form-field.mat-focused .mdc-floating-label,
.mat-form-field.mat-focused .mat-form-field-label,
.mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,
.mat-mdc-form-field.mat-focused .mdc-line-ripple::after {
  border-color: var(--bx-green) !important;
  color: var(--bx-green) !important;
}

.mat-mdc-form-field input,
.mat-mdc-form-field textarea {
  caret-color: var(--bx-green) !important;
}

/* ==========================================================================
   SEARCH BAR SUGGESTIONS Poland Overrides
   ========================================================================== */
.boxtech-search-dropdown-header {
  padding: 8px 16px 4px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #8a9895 !important;
  border-bottom: 1px solid #eef2f0 !important;
  margin-bottom: 4px !important;
}

/* ==========================================================================
   V3012 SPECIFIC SYSTEM FIXES & POLISHING
   ========================================================================== */

/* Issue 5: Page name titles should always appear in Corporate Green instead of black */
.tb-page-title,
.tb-title,
.mat-toolbar-row .tb-page-title,
.tb-details-panel-title,
.tb-dashboard-page-title,
.tb-header-title,
tb-dashboard-page h1,
.tb-entity-table h1,
.tb-details-panel h1,
h1[class*="title" i],
span[class*="title" i]:not(.tb-user-display-name, .boxtech-user-name),
div[class*="title" i]:not(.tb-user-display-name, .boxtech-user-name, .tb-widget) {
  color: var(--bx-green);
  font-weight: 700 !important;
}

/* Issue 7: Ensure white BoxTech top logo has a transparent background with no white bounding borders */
.boxtech-top-logo {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* Issue 8: Smoothly transition only the outer content canvas, avoiding clashing with JS-driven absolute coordinates on grids and widgets */
.boxtech-outer-content,
mat-sidenav-content,
.mat-sidenav-content,
.mat-drawer-content {
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================================
   Robust white icon override for the custom topbar elements on the right
   ========================================================================== */
#boxtech-custom-header .boxtech-topbar-right button:not(.boxtech-dd-item):not(.boxtech-dd-item *),
#boxtech-custom-header .boxtech-topbar-right mat-icon:not(.boxtech-dd-item *),
#boxtech-custom-header .boxtech-topbar-right .material-icons:not(.boxtech-dd-item *),
#boxtech-custom-header .boxtech-topbar-right svg:not(.boxtech-dd-item *),
#boxtech-custom-header .boxtech-slot button,
#boxtech-custom-header .boxtech-slot mat-icon,
#boxtech-custom-header .boxtech-slot .material-icons,
#boxtech-custom-header .boxtech-slot svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==========================================================================
   White selection header icons override (resolving green over green)
   ========================================================================== */
.tb-entity-table-selection-header button,
.tb-entity-table-selection-header mat-icon,
.tb-entity-table-selection-header .material-icons,
.tb-entity-table-selection-header svg,
.tb-selection-toolbar button,
.tb-selection-toolbar mat-icon,
.tb-selection-toolbar .material-icons,
.tb-selection-toolbar svg,
.selection-toolbar button,
.selection-toolbar mat-icon,
.selection-toolbar .material-icons,
.selection-toolbar svg,
mat-toolbar:is([class*="selection" i], [class*="selected" i]) button,
mat-toolbar:is([class*="selection" i], [class*="selected" i]) mat-icon,
mat-toolbar:is([class*="selection" i], [class*="selected" i]) .material-icons,
mat-toolbar:is([class*="selection" i], [class*="selected" i]) svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==========================================================================
   Align prefix/suffix icons vertically centered with the input field names
   ========================================================================== */
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field-icon-prefix,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) .mat-mdc-form-field-icon-suffix,
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) [matPrefix],
body:is(.boxtech-login-page-active, :has(tb-login), :has(tb-signup), :has(.tb-login), :has(form.tb-login-form)) [matSuffix],
body:not(.boxtech-layout-active) .mat-mdc-form-field-icon-prefix,
body:not(.boxtech-layout-active) .mat-mdc-form-field-icon-suffix,
body:not(.boxtech-layout-active) [matPrefix],
body:not(.boxtech-layout-active) [matSuffix],
form.tb-login-form .mat-mdc-form-field-icon-prefix,
form.tb-login-form .mat-mdc-form-field-icon-suffix,
form.tb-login-form [matPrefix],
form.tb-login-form [matSuffix] {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   .tb-default heading typography override (mat-h1 / mat-headline-5)
   ========================================================================== */
.tb-default .mat-h1,
.tb-default .mat-headline-5,
.tb-default .mat-typography .mat-h1,
.tb-default .mat-typography .mat-headline-5,
.tb-default .mat-typography h1 {
  font: 400 24px/32px Roboto, sans-serif;
  letter-spacing: normal;
  margin: 0px 2px 2px 35px;
}

/* ==========================================================================
   Centered head titles on all login/signup/reset/change public pages
   ========================================================================== */
body.boxtech-login-page-active h1,
body.boxtech-login-page-active h2,
body.boxtech-login-page-active h3,
body.boxtech-login-page-active h4,
body.boxtech-login-page-active h5,
body.boxtech-login-page-active h6,
body.boxtech-login-page-active .login-title,
body.boxtech-login-page-active .tb-login-title,
body.boxtech-login-page-active [class*="title" i],
body.boxtech-login-page-active [class*="heading" i],
body:not(.boxtech-layout-active) h1,
body:not(.boxtech-layout-active) h2,
body:not(.boxtech-layout-active) h3,
body:not(.boxtech-layout-active) .login-title,
body:not(.boxtech-layout-active) .tb-login-title,
body:not(.boxtech-layout-active) [class*="title" i],
body:not(.boxtech-layout-active) [class*="heading" i] {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ==========================================================================
   Comprehensive Form Field Sibling Icon Alignment & Layout Overrides
   ========================================================================== */
/* Ensure all public pages (login, reset-password, signup, etc.) are clean and symmetrical */
body:not(.boxtech-layout-active) {
  background-color: #f8fafc !important; /* Elegant modern slate-white background */
}

/* Perfect alignment for parent input rows */
body:not(.boxtech-layout-active) :is(.layout-row, .row, [layout="row"]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important; /* Top-align row so elements don't shift when errors appear */
  justify-content: flex-start !important;
  width: 100% !important;
}

/* Sibling icons next to form fields shifted relative to the input line area (excluding built-in prefixes/suffixes) */
body:not(.boxtech-layout-active) :is(.layout-row, .row, [layout="row"]) :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons):not(.mat-mdc-form-field-icon-prefix):not(.mat-mdc-form-field-icon-suffix):not([matPrefix]):not([matSuffix]) {
  align-self: flex-start !important;
  position: relative !important;
  top: 15px !important; /* Lower the icon to align centered with input content/line area */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 12px !important;
  color: var(--bx-green) !important; /* Corporate branding green */
}

/* Ensure form fields fill the rest of the row */
body:not(.boxtech-layout-active) mat-form-field,
body:not(.boxtech-layout-active) .mat-mdc-form-field {
  flex-grow: 1 !important;
  width: 100% !important;
}

/* ==========================================================================
   Cancel Button Centering & Heading Symmetry on Public Pages
   ========================================================================== */
/* Center all titles, headings, and descriptions on public cards (including reset password pages) */
body:not(.boxtech-layout-active) :is(tb-login, tb-signup, tb-reset-password-request, tb-change-password, tb-register) :is(h1, h2, h3, h4, .login-title, .tb-login-title) {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  font-weight: 700 !important;
  color: var(--bx-green) !important;
}

/* Ensure public page forms utilize a vertical stack */
body:not(.boxtech-layout-active) :is(tb-login, tb-signup, tb-reset-password-request, tb-change-password, tb-register) form {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Stack and center action rows containing the submit button */
body:not(.boxtech-layout-active) :is(form, .tb-login-form) :is(.layout-row, .row, .actions, [layout="row"]):has(:is(button[type="submit"], button.mat-mdc-raised-button, button[mat-raised-button])) {
  display: flex !important;
  flex-direction: column !important; /* Vertical stack for submit/cancel actions */
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

/* Ensure the primary submit button is full width with high prominence */
body:not(.boxtech-layout-active) :is(form, .tb-login-form) button[type="submit"],
body:not(.boxtech-layout-active) :is(form, .tb-login-form) button.mat-mdc-raised-button,
body:not(.boxtech-layout-active) :is(form, .tb-login-form) button[mat-raised-button] {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  border-radius: 8px !important;
  margin: 12px 0 6px !important;
  font-weight: 700 !important;
  background-color: var(--bx-green) !important;
  color: #ffffff !important;
  order: 1 !important; /* Force to sit on top of cancel options */
}

/* Align and center cancel options, back options, and forgot password options centered below the submit button */
body:not(.boxtech-layout-active) :is(form, .tb-login-form) :is(button:not([type="submit"]):not(.mat-mdc-raised-button):not([mat-raised-button]), a.mat-button, button.mat-button, .forgot-password, a[routerLink*="login"]) {
  margin: 8px auto 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  color: var(--bx-green-hover) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  order: 10 !important; /* Put at the bottom of the form */
  cursor: pointer !important;
}

/* ==========================================================================
   Table Selection Toolbar White Icon & Text Overrides
   ========================================================================== */
body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) {
  background-color: var(--bx-green) !important;
}

body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) :is(span, div, h1, h2, h3, h4, h5, h6, .mat-toolbar-row) {
  color: #ffffff !important;
}

body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) :is(button, mat-icon, .mat-icon, .material-icons, svg, span.material-icons) {
  color: #ffffff !important;
  fill: #ffffff !important;
  --mdc-icon-button-icon-color: #ffffff !important;
  --mdc-outlined-button-label-text-color: #ffffff !important;
  --mdc-outlined-button-outline-color: #ffffff !important;
  --mdc-icon-button-hover-state-layer-color: rgba(255, 255, 255, 0.15) !important;
  --mdc-icon-button-focus-state-layer-color: rgba(255, 255, 255, 0.15) !important;
}

/* Disabled icon buttons (e.g. Restore/Unarchive when nothing to restore) use a separate
   disabled-state token that defaults to a dark, low-opacity color - on the green selection
   toolbar background that renders as an invisible icon. Force a visible translucent white. */
body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) button[disabled],
body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) button:disabled,
body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) .mat-mdc-icon-button.mat-mdc-button-disabled {
  --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
}

body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) button[disabled] :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons),
body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) button:disabled :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons) {
  color: rgba(255, 255, 255, 0.5) !important;
  fill: rgba(255, 255, 255, 0.5) !important;
}

/* Force high specificity over global green-icon rules to make selection toolbar icons fully white */
body.boxtech-layout-active :is(.tb-entity-table-selection-header, .tb-selection-toolbar, .selection-toolbar, mat-toolbar:is([class*="selection" i], [class*="selected" i])) :is(mat-icon, .mat-icon, .material-icons, svg, span.material-icons) {
  color: #ffffff !important;
  fill: #ffffff !important;
}