/* ==========================================================================
   FSSD ERP GLOBAL THEME FILE
   Contains Design Tokens & Global CSS Variables.
   All colors are declared in :root so they can be changed here globally.
   ========================================================================== */

:root {
  /* PAGE BACKGROUND */
  --page-bg: #F3F8F7;

  /* BRAND COLORS */
  --brand: #2F7F79;
  --brand-2: #3B8D86;            /* gradient end */
  --brand-hover: #26625D;
  --brand-ring: rgba(47, 127, 121, 0.25);

  /* TYPOGRAPHY */
  --text: #1E293B;
  --text-muted: #6B7280;
  --label: #777777;
  --theme-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* CARDS & FIELDS */
  --card-bg: #FFFFFF;
  --card-border: #E1ECEA;
  --field-border: #CFD6DF;
  --field-readonly: #EEF1F5;

  /* BUTTONS & ALERTS */
  --secondary-btn: #64748B;
  --danger-bg: #FDE3E3;
  --danger: #C62828;

  /* SHADOWS */
  --shadow-card: 0 4px 14px rgba(60, 60, 60, 0.06);
  --shadow-float: 0 4px 16px rgba(60, 60, 60, 0.08);

  /* BORDER RADII */
  --radius-card: 14px;
  --radius-shell: 16px;
  --radius-control: 8px;

  /* BACKWARD COMPATIBILITY VARIABLES (Replacing old orange system) */
  --theme-orange-primary: var(--brand);
  --theme-orange-gradient: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  --theme-orange-hover: var(--brand-hover);
  --theme-orange-light: rgba(47, 127, 121, 0.08);
  --theme-orange-light-border: rgba(47, 127, 121, 0.2);
}

/* ==========================================================================
   GLOBAL APP BACKGROUND & SHELL OVERRIDES
   ========================================================================== */
html,
body,
.wrapper,
.hold-transition,
[class*="skin-"],
.skin-black .wrapper,
.skin-blue .wrapper,
.skin-yellow .wrapper {
  background-color: var(--page-bg) !important;
  background: var(--page-bg) !important;
  color: var(--text) !important;
  font-family: var(--theme-font-family) !important;
  border: none !important;
  box-shadow: none !important;
}

.content-wrapper,
.content,
[class*="skin-"] .content-wrapper,
[class*="skin-"] .content {
  background-color: var(--page-bg) !important;
  background: var(--page-bg) !important;
  transition: margin-left 0.25s ease !important;
  border: none !important;
}

.box.box-default,
.new-box-body {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   TOP FLOATING HEADER
   ========================================================================== */
.main-header,
[class*="skin-"] .main-header,
.skin-black .main-header,
.skin-blue .main-header {
  position: relative !important;
  margin: 10px 10px 0 10px !important;
  border-radius: var(--radius-shell) !important;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  box-shadow: 0 6px 16px rgba(47, 127, 121, 0.22) !important;
  z-index: 1030 !important;
  max-height: 54px !important;
  min-height: 50px !important;
  border: none !important;
  overflow: visible !important;
}

/* Hide legacy sidebar header logo block to allow full-width floating bar */
.main-header .logo,
[class*="skin-"] .main-header .logo {
  display: none !important;
}

.main-header .navbar,
[class*="skin-"] .main-header .navbar,
.skin-black .main-header .navbar,
.skin-blue .main-header .navbar {
  background: transparent !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-shell) !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
}

.main-header .sidebar-toggle {
  color: #FFFFFF !important;
  font-size: 18px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background 0.15s ease !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.main-header .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

/* Centered Company Title & Logo */
.navbar-brand-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  gap: 10px !important;
  pointer-events: auto !important;
}

.navbar-brand-center .header-logo-card,
.navbar-brand-center > div:first-child {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 4px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
}

.navbar-brand-center #headImage {
  height: 24px !important;
  max-height: 24px !important;
  width: auto !important;
  object-fit: contain !important;
}

.navbar-brand-center #cmpNameAndAddr {
  font-family: var(--theme-font-family) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
}

/* Right Navbar Actions */
.main-header .navbar-custom-menu {
  padding-right: 10px !important;
}

.main-header .user-pill-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.main-header .user-pill-badge:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  color: #FFFFFF !important;
}

.main-header .user-pill-badge #userName {
  font-family: var(--theme-font-family) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
}

.main-header .bellBox {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.main-header .bellBox:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.main-header .bellBox i {
  color: #FFFFFF !important;
  font-size: 16px !important;
}

.main-header .bellBox .bellNum {
  position: absolute !important;
  top: -1px !important;
  right: -3px !important;
  background: var(--danger) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 1px 5px !important;
  line-height: 1 !important;
  border: 2px solid var(--brand) !important;
}

/* User & Action Dropdowns */
.main-header .dropdown-user .dropdown-menu,
.main-header .dropdown-help .dropdown-menu,
.user-profile-menu,
.help-dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
  min-width: 190px !important;
  margin-top: 10px !important;
}

.main-header .dropdown-user .dropdown-menu .dropdown-item,
.user-profile-menu .dropdown-item {
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--theme-font-family) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.main-header .dropdown-user .dropdown-menu .dropdown-item:hover,
.user-profile-menu .dropdown-item:hover {
  background: var(--page-bg) !important;
  color: var(--brand) !important;
}

/* ==========================================================================
   FLOATING SIDEBAR RAIL (Collapsed: 48px, Expanded: 176px)
   ========================================================================== */
.main-sidebar,
.main-sidebar,
.left-side,
[class*="skin-"] .main-sidebar,
[class*="skin-"] .left-side,
.skin-black .main-sidebar,
.skin-blue .main-sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-collapse .main-sidebar {
  box-sizing: border-box !important;
  position: fixed !important;
  top: 74px !important;
  left: 10px !important;
  bottom: 16px !important;
  height: auto !important;
  max-height: calc(100vh - 90px) !important;
  min-height: 0 !important;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-radius: var(--radius-shell) !important;
  box-shadow: var(--shadow-float) !important;
  margin: 0 !important;
  padding: 10px 0 16px 0 !important;
  border: 1px solid var(--card-border) !important;
  z-index: 1025 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  transition: width 0.25s ease !important;
}

.main-sidebar .sidebar,
.sidebar {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.sidebar-footer,
.main-sidebar .sidebar-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Width Controls */
body.sidebar-collapse .main-sidebar,
[class*="skin-"].sidebar-collapse .main-sidebar {
  width: 48px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

body.sidebar-collapse .main-sidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

body.sidebar-collapse .sidebar {
  overflow: visible !important;
}

body:not(.sidebar-collapse) .main-sidebar,
[class*="skin-"]:not(.sidebar-collapse) .main-sidebar {
  width: 176px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(47, 127, 121, 0.2) transparent !important;
}

body:not(.sidebar-collapse) .main-sidebar::-webkit-scrollbar {
  width: 4px !important;
}

body:not(.sidebar-collapse) .main-sidebar::-webkit-scrollbar-thumb {
  background: rgba(47, 127, 121, 0.2) !important;
  border-radius: 4px !important;
}

/* Content Wrapper Dynamic Resizing */
body.sidebar-collapse .content-wrapper,
[class*="skin-"].sidebar-collapse .content-wrapper {
  margin-left: 68px !important;
}

body:not(.sidebar-collapse) .content-wrapper,
[class*="skin-"]:not(.sidebar-collapse) .content-wrapper {
  margin-left: 196px !important;
}

/* Sidebar Menu List */
.sidebar-menu {
  list-style: none !important;
  padding: 0 0 20px 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* --- COLLAPSED MODE --- */
body.sidebar-collapse .sidebar-menu {
  align-items: center !important;
}

body.sidebar-collapse .sidebar-menu > li {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

body.sidebar-collapse .sidebar-menu > li > a {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

body.sidebar-collapse .sidebar-menu > li > a .menu-icon-chip {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.sidebar-collapse .sidebar-menu > li > a:hover .menu-icon-chip {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

body.sidebar-collapse .sidebar-menu > li > a .menu-label,
body.sidebar-collapse .sidebar-menu > li > a .pull-right-container {
  display: none;
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Hover Submenu Flyout in Collapsed Mode */
body.sidebar-collapse .sidebar-menu > li.treeview > a > .menu-label {
  display: none !important;
}

body.sidebar-collapse .sidebar-menu > li:not(.treeview):hover > a > .menu-label {
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 44px !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: 250px !important;
  height: 40px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: var(--theme-font-family, 'Poppins', sans-serif) !important;
  border-radius: 12px !important;
  box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.15) !important;
  z-index: 1050 !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview.flyout-active > .treeview-menu,
body.sidebar-collapse .sidebar-menu > li.treeview:hover > .treeview-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 250px !important;
  margin: 0 !important;
  padding: 0 0 10px 0 !important;
  background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 4px 12px 28px rgba(0, 0, 0, 0.22) !important;
  list-style: none !important;
  pointer-events: auto !important;
}

/* Custom slim scrollbar for flyout menu when scrolling is needed */
body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent !important;
}
body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu::-webkit-scrollbar {
  width: 5px !important;
}
body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu::-webkit-scrollbar-track {
  background: transparent !important;
}
body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 10px !important;
}
body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Invisible bridge so mouse never leaves hover zone when moving between icon and menu */
body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  bottom: -10px !important;
  left: -20px !important;
  width: 25px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

/* Module Header at top of flyout */
body:not(.sidebar-collapse) .sidebar-menu .treeview-menu > li.treeview-module-header {
  display: none !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li.treeview-module-header {
  display: block !important;
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  padding: 11px 16px 10px 16px !important;
  background: rgba(0, 0, 0, 0.16) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-top-right-radius: 14px !important;
  border-top-left-radius: 14px !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li.treeview-module-header .module-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  font-family: var(--theme-font-family, 'Poppins', sans-serif) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li.treeview-module-header .module-header-title i {
  font-size: 15px !important;
  color: #FFFFFF !important;
  opacity: 0.95 !important;
  width: 16px !important;
  text-align: center !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li:not(.treeview-module-header) {
  padding: 0 8px !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li {
  width: 100% !important;
  margin: 3px 0 !important;
  height: auto !important;
  display: block !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-family: var(--theme-font-family, 'Poppins', sans-serif) !important;
  border-radius: 8px !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  transform: translateX(4px) !important;
}

body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li > a i {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  width: 14px !important;
  text-align: center !important;
}

/* --- EXPANDED MODE --- */
body:not(.sidebar-collapse) .sidebar-menu {
  align-items: stretch !important;
  padding: 0 8px !important;
}

body:not(.sidebar-collapse) .sidebar-menu > li {
  width: 100% !important;
  margin: 0 !important;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a {
  height: 36px !important;
  border-radius: 12px !important;
  padding: 0 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a:hover {
  background: #F3F8F7 !important;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a .menu-icon-chip {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13.5px !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a:hover .menu-icon-chip {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a .menu-label {
  font-size: 12.5px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: opacity 0.15s ease !important;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a .pull-right-container {
  display: none !important;
}

/* --- 5-COLOR CHIP CYCLING --- */
.sidebar-menu > li:nth-child(5n + 1) .menu-icon-chip {
  background: #E0F2F1 !important;
  color: #0F766E !important;
}
.sidebar-menu > li:nth-child(5n + 1) .menu-icon-chip i {
  color: #0F766E !important;
}

.sidebar-menu > li:nth-child(5n + 2) .menu-icon-chip {
  background: #FFEDD5 !important;
  color: #C2410C !important;
}
.sidebar-menu > li:nth-child(5n + 2) .menu-icon-chip i {
  color: #C2410C !important;
}

.sidebar-menu > li:nth-child(5n + 3) .menu-icon-chip {
  background: #EDE9FE !important;
  color: #6D28D9 !important;
}
.sidebar-menu > li:nth-child(5n + 3) .menu-icon-chip i {
  color: #6D28D9 !important;
}

.sidebar-menu > li:nth-child(5n + 4) .menu-icon-chip {
  background: #FCE7F3 !important;
  color: #BE185D !important;
}
.sidebar-menu > li:nth-child(5n + 4) .menu-icon-chip i {
  color: #BE185D !important;
}

.sidebar-menu > li:nth-child(5n + 5) .menu-icon-chip {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.sidebar-menu > li:nth-child(5n + 5) .menu-icon-chip i {
  color: #B45309 !important;
}

/* --- ACTIVE ITEM (Current page) --- */
/* Collapsed Mode */
body.sidebar-collapse .sidebar-menu > li.active .menu-icon-chip {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(47, 127, 121, 0.35) !important;
}
body.sidebar-collapse .sidebar-menu > li.active .menu-icon-chip i {
  color: #FFFFFF !important;
}

/* Expanded Mode */
body:not(.sidebar-collapse) .sidebar-menu > li.active > a {
  background: var(--brand) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(47, 127, 121, 0.35) !important;
}
body:not(.sidebar-collapse) .sidebar-menu > li.active > a .menu-label {
  color: #FFFFFF !important;
  font-weight: 500 !important;
}
body:not(.sidebar-collapse) .sidebar-menu > li.active > a .menu-icon-chip {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
body:not(.sidebar-collapse) .sidebar-menu > li.active > a .menu-icon-chip i {
  color: #FFFFFF !important;
}

/* Submenu dropdowns (in expanded sidebar mode) */
body:not(.sidebar-collapse) .sidebar-menu .treeview-menu {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 4px !important;
  list-style: none !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

body:not(.sidebar-collapse) .sidebar-menu .treeview-menu > li > a {
  color: #475569 !important;
  font-size: 12.5px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

body:not(.sidebar-collapse) .sidebar-menu .treeview-menu > li > a:hover {
  background: var(--page-bg) !important;
  color: var(--brand) !important;
}

/* ==========================================================================
   TABS (Dashboard / BOM / Edit BOM-1)
   ========================================================================== */
#tabList.nav-tabs,
.customtab {
  border-bottom: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 6px 0 10px 0 !important;
  margin-bottom: 4px !important;
}

#tabList .nav-item {
  margin: 0 !important;
}

#tabList .nav-link,
.customtab li a.nav-link {
  background: #FFFFFF !important;
  color: #475569 !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
}

#tabList .nav-link > span,
.customtab li a.nav-link > span {
  order: 1 !important;
}

#tabList .nav-link:hover,
.customtab li a.nav-link:hover {
  background: #F8FAFC !important;
  color: var(--text) !important;
  border-color: #cbd5e1 !important;
}

#tabList .nav-link.active,
.customtab li a.nav-link.active,
a.nav-link.active {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border-color: var(--brand) !important;
  box-shadow: 0 4px 12px rgba(47, 127, 121, 0.25) !important;
}

#tabList .closeTab,
#tabList .close {
  color: #94A3B8 !important;
  opacity: 0.7 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  order: 2 !important;
  float: right !important;
  background: transparent !important;
  border: none !important;
  text-shadow: none !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
  cursor: pointer !important;
}

#tabList .closeTab:hover,
#tabList .close:hover {
  color: #334155 !important;
  opacity: 1 !important;
}

#tabList .nav-link.active .closeTab,
#tabList .nav-link.active .close {
  color: rgba(255, 255, 255, 0.75) !important;
}

#tabList .nav-link.active .closeTab:hover,
#tabList .nav-link.active .close:hover {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.inBoxBody,
.card-box,
.card,
.box-card {
  background: var(--card-bg) !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */
.input-box,
.form-control,
select.input-box,
select.form-control,
textarea.input-box,
textarea.form-control {
  background-color: #FFFFFF !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-control) !important;
  height: 38px !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

textarea.input-box,
textarea.form-control {
  height: auto !important;
  min-height: 38px !important;
  resize: vertical !important;
}

/* Focus state */
.input-box:focus,
.form-control:focus,
select.input-box:focus,
textarea.input-box:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
  outline: none !important;
}

/* Readonly / Disabled state */
.input-box:disabled,
.input-box[disabled],
.input-box[readonly],
.form-control:disabled,
.form-control[disabled],
.form-control[readonly],
input:disabled:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
input[disabled]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
input[readonly]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
select:disabled,
select[disabled],
textarea:disabled,
textarea[disabled],
textarea[readonly],
/* Select2 disabled state */
.select2-container--disabled .select2-selection,
.select2-container.select2-container--disabled .select2-selection--single,
select:disabled + .select2-container .select2-selection {
  background-color: var(--field-readonly) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.select2-container--disabled .select2-selection .select2-selection__rendered,
.select2-container.select2-container--disabled .select2-selection--single .select2-selection__rendered,
select:disabled + .select2-container .select2-selection .select2-selection__rendered {
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   GLOBAL SELECT & SELECT2 STANDARDIZATION
   Every select and Select2 container matches input element width 100% across whole project.
   ========================================================================== */
.select2,
.select2-container,
span.select2.select2-container,
.select2-container--default {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   FORM ROW & LABEL-INPUT HORIZONTAL ALIGNMENT (WHOLE PROJECT)
   Ensures input/select always sits directly in front of (next to) the label on the same line,
   and never wraps below the label.
   ========================================================================== */
.form-group .row.align-items-center,
.col-sm-4 > .row.align-items-center,
.col-sm-6 > .row.align-items-center,
.col-sm-8 > .row.align-items-center,
.col-sm-12 > .row.align-items-center,
.col-md-4 > .row.align-items-center,
.col-md-6 > .row.align-items-center,
.col-md-8 > .row.align-items-center,
.col-md-12 > .row.align-items-center,
.row:has(> .itemMasterInputDiv),
.row:has(> .itemMasterDropDownsDiv) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.row:has(> .itemMasterInputDiv) > label,
.row:has(> .itemMasterDropDownsDiv) > label,
.col-sm-4 > .row > label,
.col-sm-6 > .row > label,
.col-sm-8 > .row > label,
.col-sm-12 > .row > label {
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 10px !important;
}

.itemMasterInputDiv {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.itemMasterInputDiv .select2,
.itemMasterInputDiv .select2-container,
.itemMasterInputDiv span.select2.select2-container,
.itemMasterInputDiv select,
.itemMasterInputDiv input {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.select2-container .select2-selection--single {
  width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-control) !important;
  position: relative !important;
  box-sizing: border-box !important;
  display: block !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 12px !important;
  padding-right: 28px !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  width: 20px !important;
  top: 0px !important;
  right: 6px !important;
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  border-width: 5px 4px 0 4px !important;
  border-color: #64748B transparent transparent transparent !important;
}

.select2-container .select2-selection--multiple {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 38px !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-control) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 3px 6px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--brand, #2F7F79) !important;
  box-shadow: 0 0 0 3px var(--brand-ring, rgba(47, 127, 121, 0.25)) !important;
}

/* ==========================================================================
   DROPDOWN WITH ADD BUTTON WRAPPER (.itemMasterDropDownsDiv) & ADD ICON (.itemMasterAddIcon)
   Unified container styling that removes inner borders and inner side dividing lines across the whole project.
   ========================================================================== */
.itemMasterDropDownsDiv {
  border: 1px solid var(--field-border, #CFD6DF) !important;
  border-radius: var(--radius-control, 8px) !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  background-color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.itemMasterDropDownsDiv:focus-within {
  border-color: var(--brand, #2F7F79) !important;
  box-shadow: 0 0 0 3px var(--brand-ring, rgba(47, 127, 121, 0.25)) !important;
}

/* Ensure inner select2 or form element fills the entire remaining width seamlessly without inner border */
.itemMasterDropDownsDiv .select2,
.itemMasterDropDownsDiv .select2-container,
#itemMasterFormContainer .itemMasterDropDownsDiv span.select2.select2-container,
#productMasterFormContainer .itemMasterDropDownsDiv span.select2.select2-container,
#addUserFormContainer .itemMasterDropDownsDiv span.select2.select2-container {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.itemMasterDropDownsDiv .select2-container .select2-selection,
.itemMasterDropDownsDiv .select2-container--default .select2-selection--single,
.itemMasterDropDownsDiv .select2-selection,
.itemMasterDropDownsDiv select,
.itemMasterDropDownsDiv select.input-box,
.itemMasterDropDownsDiv select.form-control,
.itemMasterDropDownsDiv input,
.itemMasterDropDownsDiv input.input-box,
.itemMasterDropDownsDiv input.form-control {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  outline: none !important;
  margin: 0 !important;
  height: 36px !important;
}

.itemMasterDropDownsDiv select,
.itemMasterDropDownsDiv select.input-box,
.itemMasterDropDownsDiv select.form-control,
.itemMasterDropDownsDiv input,
.itemMasterDropDownsDiv input.input-box,
.itemMasterDropDownsDiv input.form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  padding-left: 12px !important;
}

.itemMasterDropDownsDiv .select2-container .select2-selection--single {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 36px !important;
  line-height: 36px !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

.itemMasterDropDownsDiv .select2-container .select2-selection--single .select2-selection__rendered {
  display: block !important;
  width: 100% !important;
  height: 36px !important;
  line-height: 36px !important;
  padding-left: 12px !important;
  padding-right: 28px !important;
  color: var(--text, #1E293B) !important;
  font-size: 13.5px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.itemMasterDropDownsDiv .select2-container .select2-selection--single .select2-selection__arrow {
  position: absolute !important;
  height: 36px !important;
  width: 20px !important;
  top: 0 !important;
  right: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.itemMasterDropDownsDiv .select2-container .select2-selection--single .select2-selection__arrow b {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  border-width: 5px 4px 0 4px !important;
  border-color: #64748B transparent transparent transparent !important;
}

/* Ensure disabled selects and containers inside itemMasterDropDownsDiv never have inner borders */
.itemMasterDropDownsDiv:has(select:disabled),
.itemMasterDropDownsDiv:has(select[disabled]),
.itemMasterDropDownsDiv:has(.select2-container--disabled),
.itemMasterDropDownsDiv:has(input:disabled),
.itemMasterDropDownsDiv:has(input[disabled]) {
  background-color: var(--field-readonly, #EEF1F5) !important;
}

.itemMasterDropDownsDiv select:disabled + .select2-container .select2-selection,
.itemMasterDropDownsDiv select[disabled] + .select2-container .select2-selection,
.itemMasterDropDownsDiv select:disabled + .select2-container .select2-selection--single,
.itemMasterDropDownsDiv select[disabled] + .select2-container .select2-selection--single,
.itemMasterDropDownsDiv .select2-container--disabled,
.itemMasterDropDownsDiv .select2-container--disabled .select2-selection,
.itemMasterDropDownsDiv .select2-container.select2-container--disabled .select2-selection,
.itemMasterDropDownsDiv .select2-container--disabled .select2-selection--single,
.itemMasterDropDownsDiv .select2-container.select2-container--disabled .select2-selection--single {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  outline: none !important;
}

.itemMasterDropDownsDiv:has(select:disabled) .itemMasterAddIcon,
.itemMasterDropDownsDiv:has(select[disabled]) .itemMasterAddIcon,
.itemMasterDropDownsDiv:has(.select2-container--disabled) .itemMasterAddIcon {
  opacity: 0.65 !important;
}

/* Perfectly aligned Add (+) button across whole project */
.itemMasterDropDownsDiv .itemMasterAddIcon,
.itemMasterAddIcon {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, opacity 0.15s ease !important;
}

.itemMasterDropDownsDiv .itemMasterAddIcon:hover,
.itemMasterAddIcon:hover {
  background: rgba(47, 127, 121, 0.08) !important;
}

.itemMasterDropDownsDiv .itemMasterAddIcon i,
.itemMasterAddIcon i {
  color: var(--brand, #2F7F79) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: 14px !important;
  width: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(0.5px) !important;
}

/* Seamless borders for general input-groups */
.input-group .form-control:not(:last-child),
.input-group-btn:first-child > .btn,
.input-group-addon:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group .form-control:not(:first-child),
.input-group-btn:last-child > .btn,
.input-group-addon:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Labels */
.label-box,
label.col-form-label,
label {
  color: var(--label) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}

.text-danger,
.badge-required {
  color: var(--danger) !important;
}

/* ==========================================================================
   BOM LINE ITEMS TABLE
   ========================================================================== */
.table-header-toolbar {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.table-header-toolbar span {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.table-header-toolbar i,
.table-header-toolbar .fa-cubes {
  color: var(--brand) !important;
  margin-right: 8px !important;
  font-size: 16px !important;
}

.table-responsive {
  border-radius: var(--radius-control) !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.table-container,
.table2,
table.table-bordered {
  border: none !important;
  background: #FFFFFF !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Header Row 1: Rounded Teal Bar */
.table-container thead tr:first-child th,
.table2 thead tr:first-child th,
table.table-bordered thead tr:first-child th,
table thead tr:first-child th {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border: none !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

.table-container thead tr:first-child th:first-child,
.table2 thead tr:first-child th:first-child,
table.table-bordered thead tr:first-child th:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.table-container thead tr:first-child th:last-child,
.table2 thead tr:first-child th:last-child,
table.table-bordered thead tr:first-child th:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Numeric columns alignment */
.table-container thead th.item-table-label-box,
.table-container thead th.text-right,
.table2 thead th.text-right,
table thead th.text-right {
  text-align: right !important;
}

.table-container thead th.text-center,
.table2 thead th.text-center,
table thead th.text-center {
  text-align: center !important;
}

.table-container thead tr:nth-child(2) th,
.table2 thead tr:nth-child(2) th {
  background: transparent !important;
  border: none !important;
  padding: 8px 4px 6px 4px !important;
}

/* Table body cells */
.table-container tbody tr td,
.table2 tbody tr td,
table.table-bordered tbody tr td {
  padding: 6px 4px !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid var(--page-bg) !important;
}

/* Schedule/Accordion collapsed rows - remove ghost row spacing */
tr.schedule-row:not(:has(.show)):not(:has(.collapsing)) {
  display: none !important;
}
tr.schedule-row td {
  padding: 0 !important;
  border: none !important;
}
tr.schedule-row td .collapse.show,
tr.schedule-row td .collapsing {
  padding: 6px 12px !important;
}

.table-container tbody tr:hover,
.table2 tbody tr:hover,
table tbody tr:hover {
  background-color: var(--page-bg) !important;
}

/* Table inputs (Standard editable & disabled) */
.table-container td input,
.table-container th input,
.table-container td select,
.table-container th select,
.table-container td textarea,
.table-container th textarea,
.table-container td .input-box,
.table-container th .input-box,
.table2 td input,
.table2 th input,
.table2 td select,
.table2 th select,
.table2 td textarea,
.table2 th textarea,
.table2 td .input-box,
.table2 th .input-box,
.oppeningStockItemsContainer td input,
.oppeningStockItemsContainer th input,
.oppeningStockItemsContainer td select,
.oppeningStockItemsContainer th select,
table td input,
table th input,
table td select,
table th select,
table td textarea,
table th textarea,
table td .input-box,
table th .input-box,
table thead td input,
table thead th input,
table tbody td input,
table tbody th input,
table thead td select,
table thead th select,
table tbody td select,
table tbody th select {
  background-color: #FFFFFF;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-control) !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  line-height: normal !important;
}

/* Select2 in tables - match exact 34px uniform height */
.table-container td .select2-container,
.table-container th .select2-container,
.table2 td .select2-container,
.table2 th .select2-container,
.oppeningStockItemsContainer td .select2-container,
.oppeningStockItemsContainer th .select2-container,
table td .select2-container,
table th .select2-container,
table thead td .select2-container,
table thead th .select2-container,
table tbody td .select2-container,
table tbody th .select2-container,
table .select2-container,
.table-container .select2-container,
.table2 .select2-container {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  vertical-align: middle !important;
}

.table-container td .select2-container .select2-selection--single,
.table-container th .select2-container .select2-selection--single,
.table2 td .select2-container .select2-selection--single,
.table2 th .select2-container .select2-selection--single,
.oppeningStockItemsContainer td .select2-container .select2-selection--single,
.oppeningStockItemsContainer th .select2-container .select2-selection--single,
table td .select2-container .select2-selection--single,
table th .select2-container .select2-selection--single,
table thead td .select2-container .select2-selection--single,
table thead th .select2-container .select2-selection--single,
table tbody td .select2-container .select2-selection--single,
table tbody th .select2-container .select2-selection--single,
table .select2-container .select2-selection--single,
table .select2-container--default .select2-selection--single,
.table-container .select2-container--default .select2-selection--single,
.table2 .select2-container--default .select2-selection--single {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  line-height: 32px !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-control) !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  display: block !important;
}

.table-container td .select2-container .select2-selection--single .select2-selection__rendered,
.table-container th .select2-container .select2-selection--single .select2-selection__rendered,
.table2 td .select2-container .select2-selection--single .select2-selection__rendered,
.table2 th .select2-container .select2-selection--single .select2-selection__rendered,
.oppeningStockItemsContainer td .select2-container .select2-selection--single .select2-selection__rendered,
.oppeningStockItemsContainer th .select2-container .select2-selection--single .select2-selection__rendered,
table td .select2-container .select2-selection--single .select2-selection__rendered,
table th .select2-container .select2-selection--single .select2-selection__rendered,
table thead td .select2-container .select2-selection--single .select2-selection__rendered,
table thead th .select2-container .select2-selection--single .select2-selection__rendered,
table tbody td .select2-container .select2-selection--single .select2-selection__rendered,
table tbody th .select2-container .select2-selection--single .select2-selection__rendered,
table .select2-container .select2-selection--single .select2-selection__rendered,
table .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  height: 32px !important;
  padding-left: 8px !important;
  padding-right: 24px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  box-sizing: border-box !important;
  display: block !important;
}

.table-container td .select2-container .select2-selection--single .select2-selection__arrow,
.table-container th .select2-container .select2-selection--single .select2-selection__arrow,
.table2 td .select2-container .select2-selection--single .select2-selection__arrow,
.table2 th .select2-container .select2-selection--single .select2-selection__arrow,
.oppeningStockItemsContainer td .select2-container .select2-selection--single .select2-selection__arrow,
.oppeningStockItemsContainer th .select2-container .select2-selection--single .select2-selection__arrow,
table td .select2-container .select2-selection--single .select2-selection__arrow,
table th .select2-container .select2-selection--single .select2-selection__arrow,
table thead td .select2-container .select2-selection--single .select2-selection__arrow,
table thead th .select2-container .select2-selection--single .select2-selection__arrow,
table tbody td .select2-container .select2-selection--single .select2-selection__arrow,
table tbody th .select2-container .select2-selection--single .select2-selection__arrow,
table .select2-container .select2-selection--single .select2-selection__arrow,
table .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
  top: 1px !important;
  right: 6px !important;
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure cell vertical alignment */
table thead tr td,
table thead tr th,
table tbody tr td,
table tbody tr th,
.table-container thead tr td,
.table-container thead tr th,
.table-container tbody tr td,
.table-container tbody tr th,
.table2 thead tr td,
.table2 thead tr th,
.table2 tbody tr td,
.table2 tbody tr th {
  vertical-align: middle !important;
}

/* Disabled & Readonly Table Inputs (th and td) - Standardized with global disabled theme */
.table-container tbody td input:disabled:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table-container tbody td input[disabled]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table-container tbody td input[readonly]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table-container tbody td input.disabled,
.table-container thead th input:disabled,
.table-container thead th input[disabled],
.table-container thead th input[readonly],
.table-container thead th input.disabled,
.table-container thead td input:disabled,
.table-container thead td input[disabled],
.table-container thead td input[readonly],
.table2 tbody td input:disabled:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table2 tbody td input[disabled]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table2 tbody td input[readonly]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table2 tbody td input.disabled,
.table2 thead th input:disabled,
.table2 thead th input[disabled],
.table2 thead th input[readonly],
.table2 thead th input.disabled,
.table2 thead td input:disabled,
.table2 thead td input[disabled],
.table2 thead td input[readonly],
table tbody td input:disabled:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table tbody td input[disabled]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table tbody td input[readonly]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table thead th input:disabled,
table thead th input[disabled],
table thead th input[readonly],
table thead td input:disabled,
table thead td input[disabled],
table thead td input[readonly],
table td input:disabled:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table td input[disabled]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table td input[readonly]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table th input:disabled,
table th input[disabled],
table th input[readonly],
table td select:disabled,
table th select:disabled,
table td select[disabled],
table th select[disabled],
table td textarea:disabled,
table th textarea:disabled,
table td textarea[disabled],
table th textarea[disabled],
table tbody tr:hover td input:disabled:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table tbody tr:hover td input[disabled]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
table tbody tr:hover td input[readonly]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table-container tbody tr:hover td input:disabled:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table-container tbody tr:hover td input[disabled]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit),
.table-container tbody tr:hover td input[readonly]:not(.unit-badge):not(tbody td input#unit):not(tbody td input#itemunit) {
  background-color: var(--field-readonly) !important;
  background: var(--field-readonly) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Unit Badge: BOX (in table body cells) */
.table-container tbody td input#unit,
.table-container tbody td input#itemunit,
.table-container tbody td input[id*="unit"]:not(:placeholder-shown),
.table-container tbody td input[id*="Unit"]:not(:placeholder-shown),
.table2 tbody td input[id*="unit"]:not(:placeholder-shown),
.table2 tbody td input[id*="Unit"]:not(:placeholder-shown),
table tbody td input[id*="unit"]:not(:placeholder-shown),
table tbody td input[id*="Unit"]:not(:placeholder-shown),
.unit-badge {
  background-color: #FFEDD5 !important;
  color: #9A3412 !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-align: center !important;
  border: none !important;
  height: 30px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 2px 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Action Buttons: Circular Buttons */
.addButton,
.table-container .addButton,
.table2 .addButton,
table .addButton,
table td .addButton,
table th .addButton,
table thead td .addButton,
table thead th .addButton,
table tbody td .addButton,
table tbody th .addButton,
table td button.addButton,
table th button.addButton,
table td button.btn-xs.addButton,
table th button.btn-xs.addButton,
table button:has(i.fa-plus),
.table-container button:has(i.fa-plus),
.table2 button:has(i.fa-plus) {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 2px 6px rgba(47, 127, 121, 0.25) !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.addButton:hover,
table button:has(i.fa-plus):hover {
  background: var(--brand-hover) !important;
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: 0 4px 10px rgba(47, 127, 121, 0.35) !important;
}

.addButton i,
table button:has(i.fa-plus) i {
  color: #FFFFFF !important;
  font-size: 11px !important;
}

/* Edit action: circular button with white pencil/check icon */
.table-container button:has(i.fa-pencil),
.table-container button:has(i.fa-check),
.table2 button:has(i.fa-pencil),
.table2 button:has(i.fa-check),
table button:has(i.fa-pencil),
table button:has(i.fa-check),
.table-container .editButton,
.table2 .editButton,
table .editButton,
button.editButton,
.editButton {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 2px 6px rgba(47, 127, 121, 0.25) !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.table-container button:has(i.fa-pencil) i,
.table-container button:has(i.fa-check) i,
.table2 button:has(i.fa-pencil) i,
.table2 button:has(i.fa-check) i,
table button:has(i.fa-pencil) i,
table button:has(i.fa-check) i,
button.editButton i,
.editButton i {
  color: #FFFFFF !important;
  font-size: 11px !important;
}

.editButton:hover,
button.editButton:hover,
.table-container button:has(i.fa-pencil):hover,
.table-container button:has(i.fa-check):hover,
.table2 button:has(i.fa-pencil):hover,
.table2 button:has(i.fa-check):hover,
table button:has(i.fa-pencil):hover,
table button:has(i.fa-check):hover {
  background: var(--brand-hover) !important;
  transform: translateY(-1px) scale(1.05) !important;
}

/* Delete action & Edit Cancel: circular button with danger icon */
.removeButton,
.editCancelButton,
.table-container .removeButton,
.table-container .editCancelButton,
.table2 .removeButton,
.table2 .editCancelButton,
table .removeButton,
table .editCancelButton,
button.editCancelButton,
table button:has(i.fa-trash),
table button:has(i.fa-times) {
  background: var(--danger-bg) !important; /* #FDE3E3 */
  color: var(--danger) !important; /* #C62828 */
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.removeButton:hover,
.editCancelButton:hover,
.table-container .removeButton:hover,
.table-container .editCancelButton:hover,
.table2 .removeButton:hover,
.table2 .editCancelButton:hover,
table .removeButton:hover,
table .editCancelButton:hover,
button.editCancelButton:hover,
table button:has(i.fa-trash):hover,
table button:has(i.fa-times):hover {
  background: #fca5a5 !important;
  color: #991b1b !important;
  transform: translateY(-1px) scale(1.05) !important;
}

.removeButton i,
.editCancelButton i,
.table-container .editCancelButton i,
.table2 .editCancelButton i,
table .editCancelButton i,
button.editCancelButton i,
table button:has(i.fa-trash) i,
table button:has(i.fa-times) i {
  color: var(--danger) !important;
  font-size: 11px !important;
}

/* ==========================================================================
   GLOBAL MODAL STYLES (Modern Theme Standardization)
   ========================================================================== */
.modal-content {
  border: none !important;
  border-radius: var(--radius-card, 12px) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
}

.modal-header,
.bootstrap-dialog .modal-header,
.bootstrap-dialog.type-primary .modal-header,
.bootstrap-dialog.type-default .modal-header,
.bootstrap-dialog.type-info .modal-header,
.bootstrap-dialog.type-warning .modal-header {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2, #3d9d96) 100%) !important;
  color: #FFFFFF !important;
  border-bottom: none !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h5,
.bootstrap-dialog .bootstrap-dialog-title,
.bootstrap-dialog .modal-title {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

.modal-header .close,
.bootstrap-dialog .modal-header .close,
.bootstrap-dialog-close-button .close,
.bootstrap-dialog .close {
  color: #FFFFFF !important;
  opacity: 0.9 !important;
  text-shadow: none !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease-in-out;
}

.modal-header .close:hover,
.bootstrap-dialog .modal-header .close:hover,
.bootstrap-dialog-close-button .close:hover,
.bootstrap-dialog .close:hover {
  opacity: 1 !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

.modal-body {
  background-color: #FFFFFF !important;
  padding: 20px !important;
}

/* ==========================================================================
   FORM & MODAL FOOTER CONTAINERS (Global Standardization)
   ========================================================================== */
.fixed-footer,
.box-footer,
.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  background-color: #f3f8f7 !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
  width: 100% !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
}

/* Modals have clean padding within the modal dialog */
.modal-footer {
  padding: 14px 20px !important;
  border-top: 1px solid var(--card-border) !important;
}

/* Neutralize legacy box-footer inline styles and floats */
.box-footer[style*="background"],
div.box-footer,
.box-footer.float-right {
  background-color: transparent !important;
  background: transparent !important;
  border-top: none !important;
  float: none !important;
}

/* Ensure buttons in footers don't carry old floats or weird margins */
.fixed-footer > button,
.box-footer > button,
.modal-footer > button,
.fixed-footer > .btn,
.box-footer > .btn,
.modal-footer > .btn {
  float: none !important;
  margin: 0 !important;
}

/* Global button ordering: Cancel/Close ALWAYS on left (order: 1), Save/Submit ALWAYS on right (order: 2) */
.fixed-footer > .cancelButton,
.fixed-footer > .btn-secondary,
.fixed-footer > .btn-cancel,
.fixed-footer > #cancel,
.fixed-footer > #cancelButton,
.fixed-footer > [id^="cancel"],
.fixed-footer > .closeButton,
.box-footer > .cancelButton,
.box-footer > .btn-secondary,
.box-footer > .btn-cancel,
.box-footer > .btn-default,
.box-footer > #cancel,
.box-footer > #cancelButton,
.box-footer > [id^="cancel"],
.box-footer > .closeButton,
.modal-footer > .cancelButton,
.modal-footer > .btn-secondary,
.modal-footer > .btn-cancel,
.modal-footer > .btn-default,
.modal-footer > .closeButton,
.modal-footer > [data-dismiss="modal"]:not(.close) {
  order: 1 !important;
}

.fixed-footer > .btn-save-custom,
.fixed-footer > .saveButton,
.fixed-footer > .btn-primary,
.fixed-footer > .btn-save,
.fixed-footer > #saveBOM,
.fixed-footer > [id^="save"],
.box-footer > .btn-save-custom,
.box-footer > .saveButton,
.box-footer > .btn-primary,
.box-footer > .btn-info,
.box-footer > .btn-save,
.box-footer > [id^="save"],
.box-footer > button[type="submit"],
.modal-footer > .btn-save-custom,
.modal-footer > .saveButton,
.modal-footer > .btn-primary,
.modal-footer > .btn-info,
.modal-footer > .btn-save,
.modal-footer > [id^="save"],
.modal-footer > button[type="submit"] {
  order: 2 !important;
}

/* ==========================================================================
   BUTTONS (Cancel & Save) - Globally Identical Dimensions & Design
   ========================================================================== */

/* Shared base properties: Identical width, height, font, padding, border-radius */
.cancelButton:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.btn-secondary:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.btn-cancel:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
#cancel,
#cancelButton,
button[id^="cancel"]:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.closeButton:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.btn-save-custom,
.saveButton:not(.btn-xs):not(.table-container *):not(table *),
.btn-primary:not(.btn-xs):not(.addButton):not(.editButton):not(.table-container *):not(table *),
#saveBOM,
.btn-save,
button[id^="save"]:not(.btn-xs):not(.addButton):not(.editButton):not(.removeButton):not(.table-container *):not(table *),
.fixed-footer > button:not(.btn-reset-custom):not(.btn-xs),
.box-footer > button:not(.btn-reset-custom):not(.btn-xs):not(.printButton):not(.printTaxes):not(.attachButton),
.modal-footer > button:not(.close):not(.btn-xs) {
  min-width: 90px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 20px !important;
  font-family: var(--theme-font-family, 'Poppins', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: 0.2px !important;
  border-radius: var(--radius-control) !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* CANCEL / SECONDARY BUTTON */
.cancelButton:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.btn-secondary:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.btn-cancel:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
#cancel,
#cancelButton,
button[id^="cancel"]:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.closeButton:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *),
.fixed-footer > .cancelButton,
.fixed-footer > #cancel,
.fixed-footer > #cancelButton,
.box-footer > .cancelButton,
.box-footer > .btn-default,
.box-footer > #cancel,
.box-footer > #cancelButton,
.box-footer > [id^="cancel"],
.box-footer > .closeButton,
.modal-footer > .cancelButton,
.modal-footer > .btn-default,
.modal-footer > .closeButton,
.modal-footer > [data-dismiss="modal"]:not(.close) {
  background: var(--secondary-btn) !important; /* #64748B */
  color: #FFFFFF !important;
  border-color: var(--secondary-btn) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.cancelButton:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *):hover,
.btn-secondary:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *):hover,
.btn-cancel:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *):hover,
#cancel:hover,
#cancelButton:hover,
button[id^="cancel"]:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *):hover,
.closeButton:not(.btn-xs):not(.editCancelButton):not(.table-container *):not(table *):hover,
.fixed-footer > .cancelButton:hover,
.fixed-footer > #cancel:hover,
.fixed-footer > #cancelButton:hover,
.box-footer > .cancelButton:hover,
.box-footer > .btn-default:hover,
.box-footer > #cancel:hover,
.box-footer > #cancelButton:hover,
.box-footer > [id^="cancel"]:hover,
.box-footer > .closeButton:hover,
.modal-footer > .cancelButton:hover,
.modal-footer > .btn-default:hover,
.modal-footer > .closeButton:hover,
.modal-footer > [data-dismiss="modal"]:not(.close):hover {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

/* SAVE / PRIMARY / ACTION BUTTON */
.btn-save-custom,
.saveButton,
.btn-primary,
#saveBOM,
.btn-save,
button[id^="save"]:not(.btn-xs):not(.addButton):not(.removeButton),
.fixed-footer > .btn-save-custom,
.fixed-footer > .saveButton,
.fixed-footer > [id^="save"],
.box-footer > .btn-save-custom,
.box-footer > .saveButton,
.box-footer > .btn-primary,
.box-footer > .btn-info,
.box-footer > .btn-save,
.box-footer > [id^="save"],
.box-footer > button[type="submit"]:not(.btn-xs),
.modal-footer > .btn-save-custom,
.modal-footer > .saveButton,
.modal-footer > .btn-primary,
.modal-footer > .btn-info,
.modal-footer > .btn-save,
.modal-footer > [id^="save"],
.modal-footer > button[type="submit"]:not(.btn-xs) {
  background: var(--brand) !important; /* #2F7F79 */
  color: #FFFFFF !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(47, 127, 121, 0.25) !important;
}

.btn-save-custom:hover,
.saveButton:hover,
.btn-primary:hover,
#saveBOM:hover,
.btn-save:hover,
button[id^="save"]:not(.btn-xs):not(.addButton):not(.removeButton):hover,
.fixed-footer > .btn-save-custom:hover,
.fixed-footer > .saveButton:hover,
.fixed-footer > [id^="save"]:hover,
.box-footer > .btn-save-custom:hover,
.box-footer > .saveButton:hover,
.box-footer > .btn-primary:hover,
.box-footer > .btn-info:hover,
.box-footer > .btn-save:hover,
.box-footer > [id^="save"]:hover,
.box-footer > button[type="submit"]:not(.btn-xs):hover,
.modal-footer > .btn-save-custom:hover,
.modal-footer > .saveButton:hover,
.modal-footer > .btn-primary:hover,
.modal-footer > .btn-info:hover,
.modal-footer > .btn-save:hover,
.modal-footer > [id^="save"]:hover,
.modal-footer > button[type="submit"]:not(.btn-xs):hover {
  background: var(--brand-hover) !important; /* #26625D */
  border-color: var(--brand-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(47, 127, 121, 0.35) !important;
  opacity: 1 !important;
}

/* DISABLED STATE */
.btn-save-custom:disabled,
.saveButton:disabled,
.cancelButton:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.fixed-footer > button:disabled,
.box-footer > button:disabled,
.modal-footer > button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-reset-custom {
  display: none !important;
}

/* Optional resetButton in footers */
.resetButton:not(.btn-reset-custom) {
  min-width: 90px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  background: #94A3B8 !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-control) !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease-in-out !important;
}
.resetButton:not(.btn-reset-custom):hover {
  background: #64748B !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   INTERCEPT LEGACY ORANGE INLINE & UTILITY STYLES
   ========================================================================== */
[style*="background"][style*="#FF7A00"],
[style*="background"][style*="#ff9d4d"],
[style*="background"][style*="#e8a07c"],
[style*="background"][style*="#FF9E43"],
[style*="background"][style*="#ff8c26"],
[style*="background"][style*="#e04a00"],
button[style*="#FF7A00"],
button[style*="#ff9d4d"],
th[style*="#FF7A00"],
div[style*="background"][style*="#FF7A00"] {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #FFFFFF !important;
  border-color: var(--brand) !important;
}

/* Modal Save & Cancel Buttons Global Standardization */
.modalSaveBtn {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-control, 8px) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 8px 20px !important;
  min-width: 85px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modalSaveBtn:hover {
  background: linear-gradient(90deg, var(--brand-hover, #26625D) 0%, var(--brand) 100%) !important;
  transform: translateY(-1px) !important;
}

.modalCancelBtn,
button[style*="#f2994a"],
[data-dismiss="modal"][style*="#f2994a"],
.btn[style*="#f2994a"] {
  background: var(--secondary-btn, #64748B) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--secondary-btn, #64748B) !important;
  border-radius: var(--radius-control, 8px) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 8px 20px !important;
  min-width: 85px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modalCancelBtn:hover,
button[style*="#f2994a"]:hover,
[data-dismiss="modal"][style*="#f2994a"]:hover,
.btn[style*="#f2994a"]:hover {
  background: #475569 !important;
  border-color: #475569 !important;
  transform: translateY(-1px) !important;
}

i[style*="#FF7A00"],
i[style*="#ff9d4d"],
i[style*="#e8a07c"],
span[style*="#FF7A00"],
span[style*="#ff9d4d"],
p[style*="#FF7A00"],
a[style*="#FF7A00"],
[style*="color: #FF7A00"],
[style*="color:#FF7A00"],
[style*="color: #ff9d4d"],
[style*="color:#ff9d4d"],
.text-orange {
  background: transparent !important;
  color: var(--brand) !important;
}

/* AG GRID THEME OVERRIDES */
.ag-theme-alpine {
  --ag-header-background-color: #fafbfe !important;
  --ag-header-foreground-color: #1a1f36 !important;
  --ag-border-color: #e6ebf5 !important;
  --ag-row-hover-color: rgba(47, 127, 121, 0.04) !important;
  --ag-selected-row-background-color: rgba(47, 127, 121, 0.08) !important;
  --ag-range-selection-border-color: var(--brand) !important;
}

/* ==========================================================================
   AG-GRID LISTING GRIDS & RESPONSIVE PAGINATION STYLING
   ========================================================================== */

/* Grid container and wrapper auto-sizing to prevent bottom clipping */
.gridWrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 215px) !important;
  min-height: 360px !important;
  overflow: visible !important;
}

.gridBox,
.ag-theme-alpine.gridBox {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: calc(100vh - 215px) !important;
  max-height: calc(100vh - 215px) !important;
  min-height: 360px !important;
  border-radius: var(--radius-card, 12px) !important;
  border: 1px solid var(--card-border, #E1ECEA) !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
}

/* Remove excessive box margins in listing views so grid doesn't overflow viewport */
.box:has(.gridWrapper),
.box:has(.gridBox) {
  margin-bottom: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.box:has(.gridWrapper) > .box-body,
.box:has(.gridBox) > .box-body {
  padding: 0 !important;
}

.pad:has(.gridWrapper),
.pad:has(.gridBox) {
  padding-top: 6px !important;
  padding-bottom: 0 !important;
}

/* Pagination Panel Container */
.ag-theme-alpine .ag-paging-panel {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 8px 18px !important;
  background: #FFFFFF !important;
  border-top: 1px solid var(--card-border, #E1ECEA) !important;
  color: var(--text, #1E293B) !important;
  font-family: var(--theme-font-family) !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  position: relative !important;
}

.ag-theme-alpine .ag-paging-panel > * {
  margin: 0 !important;
}

/* Row Summary: "1 to 10 of 45" */
.ag-theme-alpine .ag-paging-row-summary-panel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--text-muted, #64748B) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.ag-theme-alpine .ag-paging-row-summary-panel .ag-paging-row-summary-panel-number,
.ag-theme-alpine .ag-paging-row-summary-panel span {
  color: var(--brand, #2F7F79) !important;
  font-weight: 700 !important;
}

/* Page Summary Navigation Controls */
.ag-theme-alpine .ag-paging-page-summary-panel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Page Description: "Page 1 of 5" */
.ag-theme-alpine .ag-paging-description {
  margin: 0 10px !important;
  color: var(--text-muted, #64748B) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ag-theme-alpine .ag-paging-number {
  font-weight: 700 !important;
  color: var(--brand, #2F7F79) !important;
  padding: 2px 7px !important;
  background: rgba(47, 127, 121, 0.08) !important;
  border-radius: 4px !important;
  font-size: 12.5px !important;
}

/* Navigation Buttons: First, Prev, Next, Last */
.ag-theme-alpine .ag-paging-button-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid var(--field-border, #CFD6DF) !important;
  background: #FFFFFF !important;
  color: var(--text, #1E293B) !important;
  margin: 0 2px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  user-select: none !important;
}

.ag-theme-alpine .ag-paging-button-wrapper .ag-icon {
  font-size: 13px !important;
  color: var(--text, #1E293B) !important;
  transition: color 0.2s ease !important;
}

.ag-theme-alpine .ag-paging-button-wrapper:hover:not(.ag-disabled) {
  background: var(--brand, #2F7F79) !important;
  border-color: var(--brand, #2F7F79) !important;
  box-shadow: 0 2px 6px rgba(47, 127, 121, 0.25) !important;
}

.ag-theme-alpine .ag-paging-button-wrapper:hover:not(.ag-disabled) .ag-icon {
  color: #FFFFFF !important;
}

/* Disabled button state */
.ag-theme-alpine .ag-paging-button-wrapper.ag-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

.ag-theme-alpine .ag-paging-button-wrapper.ag-disabled .ag-icon {
  color: var(--text-muted, #94A3B8) !important;
}

/* Ensure the hit area covers the styled wrapper */
.ag-theme-alpine .ag-paging-button {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.ag-theme-alpine .ag-disabled .ag-paging-button {
  cursor: not-allowed !important;
}

/* Clean separation for the horizontal scrollbar */
.ag-theme-alpine .ag-body-horizontal-scroll {
  background: #FAFBFD !important;
  border-top: 1px solid #E6EBF5 !important;
}

/* Responsive adjustments for Tablets & Mobile Screens */
@media (max-width: 991px) {
  .gridWrapper {
    max-height: calc(100vh - 240px) !important;
    min-height: 320px !important;
  }

  .gridBox,
  .ag-theme-alpine.gridBox {
    height: calc(100vh - 240px) !important;
    max-height: calc(100vh - 240px) !important;
    min-height: 320px !important;
  }
}

@media (max-width: 768px) {
  .gridWrapper {
    max-height: calc(100vh - 260px) !important;
    min-height: 300px !important;
  }

  .gridBox,
  .ag-theme-alpine.gridBox {
    height: calc(100vh - 260px) !important;
    max-height: calc(100vh - 260px) !important;
    min-height: 300px !important;
  }

  .ag-theme-alpine .ag-paging-panel {
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .ag-theme-alpine .ag-paging-row-summary-panel {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .ag-theme-alpine .ag-paging-page-summary-panel {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

@media (max-width: 480px) {
  .ag-theme-alpine .ag-paging-description {
    margin: 0 4px !important;
    font-size: 12px !important;
  }

  .ag-theme-alpine .ag-paging-button-wrapper {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ==========================================================================
   RESPONSIVE & MOBILE BACKDROP
   ========================================================================== */
@media (max-width: 767px) {
  .main-sidebar {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    z-index: 1040 !important;
    transform: translateX(-120%) !important;
    transition: transform 0.25s ease, width 0.25s ease !important;
    width: 176px !important;
  }

  body.sidebar-open .main-sidebar {
    transform: translateX(0) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  }

  body.sidebar-collapse .content-wrapper,
  body:not(.sidebar-collapse) .content-wrapper,
  .content-wrapper {
    margin-left: 0 !important;
  }

  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ==========================================================================
   VISIBILITY OVERRIDES & UTILITIES
   Ensures jQuery .hide() / inline display:none and utility classes are respected
   even when components have !important display properties.
   ========================================================================== */
[style*="display: none"],
[style*="display:none"],
.d-none,
.hidden,
[hidden] {
  display: none !important;
}

/* Master Data Grid Buttons Theme Standard */
.btnw {
  background: linear-gradient(135deg, var(--brand, #2F7F79) 0%, var(--brand-2, #3B8D86) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(47, 127, 121, 0.25) !important;
}

.btnw:hover, .btnw:active, .btnw:focus {
  background: linear-gradient(135deg, var(--brand-hover, #26625D) 0%, var(--brand, #2F7F79) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(47, 127, 121, 0.42) !important;
}