:root {
  --page-bg: #f4f5f7;
  --surface-bg: #ffffff;
  --surface-muted: #f9f9fb;
  --border-soft: rgba(8, 8, 8, 0.08);
  --text-primary: #0f0f10;
  --text-muted: #73737d;
  --menu-bg: #050506;
  --menu-accent: #1c1c1f;
  --menu-text: #E6E6E6; /* Fallback, overridden by JavaScript */
  --menu-text-rgb: 230, 230, 230; /* Fallback, overridden by JavaScript */
  --menu-text-muted: rgba(230, 230, 230, 0.6); /* Fallback, overridden by JavaScript */
  --radius-large: 16px;
  --radius-medium: 12px;
  --transition-snappy: 180ms ease;
  --accent-primary: #0f62fe;
  --accent-primary-rgb: 15, 98, 254;
  --accent-success: #34c759;
  --accent-success-rgb: 52, 199, 89;
  --accent-warning: #ffd60a;
  --accent-warning-rgb: 255, 214, 10;
  --accent-danger: #ff453a;
  --accent-danger-rgb: 255, 69, 58;

  /* Bridge Bootstrap tokens to the branding palette */
  --bs-primary: var(--accent-primary);
  --bs-primary-rgb: var(--accent-primary-rgb);
  --bs-secondary: var(--text-primary);
  --bs-secondary-rgb: var(--text-primary-rgb);
  --bs-success: var(--accent-success);
  --bs-success-rgb: var(--accent-success-rgb);
  --bs-warning: var(--accent-warning);
  --bs-warning-rgb: var(--accent-warning-rgb);
  --bs-danger: var(--accent-danger);
  --bs-danger-rgb: var(--accent-danger-rgb);
  --bs-link-color: var(--accent-primary);
  --bs-link-hover-color: var(--accent-primary);
  --bs-btn-focus-shadow-rgb: var(--accent-primary-rgb);
}

/* CSS variables are set via JavaScript from data attributes - see parent.html */

/* Override any purple/primary colors from erp-min.css */
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.btn.btn-primary {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  transform: scale(1.15);
}

a:not(.btn):not(.menu-link):not(.selector-add):not(.selector-remove) {
  color: var(--accent-primary) !important;
}

/* Exclude links inside layout-menu from the accent-primary color */
.layout-menu a:not(.btn) {
  color: var(--menu-text) !important;
  text-decoration: none !important;
}

.layout-menu a:not(.btn) *,
.layout-menu a:not(.btn) i,
.layout-menu a:not(.btn) .bx,
.layout-menu a:not(.btn) svg,
.layout-menu .menu-link,
.layout-menu .menu-link *,
.layout-menu .menu-link i,
.layout-menu .menu-link .bx,
.layout-menu .menu-link svg,
.layout-menu .menu-icon,
.layout-menu .menu-icon *,
.layout-menu .menu-icon i,
.layout-menu .menu-icon .bx {
  color: var(--menu-text) !important;
}

.text-primary,
a.text-primary {
  color: var(--accent-primary) !important;
}

.badge.bg-primary,
.badge.badge-primary {
  color: var(--accent-primary) !important;
}

.badge.bg-primary,
.badge.badge-primary {
  background-color: var(--accent-primary) !important;
}

/* Active filter badges: no background, black text */
.filter-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: 999px;
  background-color: transparent !important;
  color: inherit;
  font-weight: 500;
}

.filter-badge .filter-remove-link,
.filter-badge .filter-remove-link:active,
.filter-badge .filter-remove-link:visited {
  margin-left: 8px;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
  text-decoration: none;
  background-color: transparent !important;
  color: inherit;
}

.bg-primary,
a.bg-primary,
.text-bg-primary {
  background-color: var(--accent-primary) !important;
  color: #fff !important;
}

.border-primary {
  border-color: var(--accent-primary) !important;
}

.bg-label-primary,
.btn-label-primary,
.badge.bg-label-primary {
  background-color: rgba(var(--accent-primary-rgb), 0.12) !important;
  color: var(--accent-primary) !important;
  border-color: transparent !important;
}

/* Nav tabs styling */
.nav-tabs {
  border-bottom: 1px solid var(--border-soft);
}

.nav-tabs .nav-link {
  color: var(--text-primary);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
  transition: all var(--transition-snappy), transform var(--transition-snappy);
  background: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--accent-primary);
  border-bottom-color: rgba(var(--accent-primary-rgb), 0.3);
  transform: scale(1.15);
}

.nav-tabs .nav-link.active {
  color: var(--menu-text) !important;
  background-color: var(--accent-primary) !important;
  border-bottom-color: var(--accent-primary) !important;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

/* Override any links or active states */
a.active {
  color: var(--accent-primary) !important;
  background-color: var(--menu-accent) !important;
}

/* Make "remove filter" links readable regardless of active/visited states */
.content-section a[href*="remove-filter"] {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.content-section a[href*="remove-filter"].active {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Navbar menu links use primary color for active state */
.layout-menu .menu-link.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
}

body {
  font-family: "SF Pro Display", "Public Sans", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page-bg);
  color: var(--text-primary);
}

.layout-wrapper,
.layout-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
}

.layout-wrapper {
  background: var(--page-bg);
}

.layout-container {
  min-height: 100vh;
}

.layout-menu {
  background: var(--menu-bg) !important;
  border-right: 1px solid #0f0f12;
  box-shadow: 20px 0 45px rgba(5, 5, 7, 0.35);
  width: 16.25rem;
  flex: 0 0 16.25rem;
  min-height: 100vh;
  position: relative;
  transition: transform var(--transition-snappy);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-menu .menu-vertical,
.layout-menu .menu-inner > .menu-item {
  width: 16.25rem;
}

.layout-menu .menu-inner > .menu-header {
  width: 16.25rem;
  padding: 1rem 1.25rem 0.5rem;
  margin-top: 0.5rem;
  color: var(--menu-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.layout-menu .menu-inner > .menu-header:first-child {
  border-top: none;
  margin-top: 0;
}

.layout-menu .menu-vertical {
  flex-direction: column;
  height: 100%;
}

.layout-menu ul,
.layout-menu .menu-inner,
.layout-menu .menu-sub {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.layout-menu .menu-item {
  list-style: none !important;
}

.layout-menu .menu-inner {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto;
  height: 0;
  min-height: 0;
}

.menu-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0;
}

.menu-profile-btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.menu-profile-btn i {
  font-size: 1.25rem;
}

.menu-profile-btn.profile {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.menu-profile-btn.power {
  background: var(--accent-danger);
  border-color: var(--accent-danger);
}

.layout-menu .app-brand {
  padding: 2.5rem 1.75rem;
}

.layout-menu .menu-inner > .menu-item {
  position: relative;
  margin: 0.0625rem 0.5rem;
  border-radius: var(--radius-medium);
  transition: background var(--transition-snappy);
}

.layout-menu .menu-inner > .menu-item::before {
  display: none;
}

.layout-menu .menu-inner > .menu-item.active::before,
.layout-menu .menu-inner > .menu-item.open::before {
  display: none;
}

.layout-menu .menu-inner > .menu-item > .menu-link {
  color: var(--menu-text) !important;
  font-weight: 500;
  font-size: 1.078125rem !important;
  padding: 0.625rem 1rem;
  margin: 0;
  border-radius: var(--radius-medium);
  transition: all var(--transition-snappy);
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem;
  flex-wrap: nowrap;
  text-decoration: none !important;
}

/* Make parent menu item bold when it has an active child - must come after base rule */
.layout-menu .menu-inner > .menu-item.open > .menu-link,
.layout-menu .menu-inner > .menu-item.active.open > .menu-link {
  font-weight: 700 !important;
  border-right: 4px solid var(--menu-text) !important;
  padding-right: calc(1rem - 4px) !important;
}

.layout-menu .menu-inner > .menu-item.open > .menu-link div,
.layout-menu .menu-inner > .menu-item.active.open > .menu-link div {
  font-weight: 700 !important;
}

.layout-menu .menu-inner > .menu-item > .menu-link div {
  font-size: 1.078125rem !important;
}

.layout-menu .menu-inner .menu-sub > .menu-item > .menu-link {
  color: var(--menu-text) !important;
  font-weight: 500;
  font-size: 1.078125rem !important;
  border-radius: var(--radius-medium);
  transition: all var(--transition-snappy), transform var(--transition-snappy);
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap;
  text-decoration: none !important;
}

.layout-menu .menu-inner .menu-sub > .menu-item > .menu-link div {
  font-size: 1.078125rem !important;
}

.layout-menu .menu-inner > .menu-item > .menu-link:hover,
.layout-menu .menu-inner .menu-sub > .menu-item > .menu-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--menu-text) !important;
  transform: scale(1.15);
}

.layout-menu .menu-inner > .menu-item.active > .menu-link,
.layout-menu .menu-inner .menu-sub > .menu-item.active > .menu-link {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--menu-text-rgb), 0.25) !important;
}

.layout-menu .menu-sub {
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  display: none !important;
  flex-direction: column;
  list-style: none;
}

.layout-menu .menu-item.open > .menu-sub {
  display: flex !important;
}

.layout-menu .menu-sub > .menu-item {
  position: relative !important;
  padding-left: 0;
}

.layout-menu .menu-sub li.menu-item {
  position: relative !important;
}

/* Active submenu items - white line on the left */
.layout-menu .menu-sub > .menu-item.active {
  border-left: 4px solid var(--menu-text) !important;
  margin-left: -0.75rem !important;
  padding-left: calc(0.75rem - 4px) !important;
}

.layout-menu .menu-sub > .menu-item > .menu-link {
  padding-left: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Ensure active submenu links also get the border styling */
.layout-menu .menu-sub > .menu-item.active > .menu-link {
  position: relative;
}

.layout-menu .menu-sub > .menu-item::before {
  display: none;
}

.layout-menu .menu-sub > .menu-item.active::before {
  display: none;
}

.layout-menu .menu-inner > .menu-item .menu-icon {
  color: var(--menu-text-muted) !important;
  width: 1.5rem;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.5rem;
}

.layout-menu .menu-inner > .menu-item > .menu-link > div {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.layout-menu .menu-inner > .menu-item.active:not(.open) > .menu-link {
  font-weight: 600;
}

.layout-menu .menu-link.menu-toggle {
  cursor: pointer;
}

.layout-menu .menu-item {
  cursor: default;
}

@media (min-width: 1200px) {
  .layout-menu-fixed .layout-menu,
  .layout-menu-fixed-offcanvas .layout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0;
  }

  .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
  .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page {
    padding-left: 16.25rem;
  }
}

/* Override the active menu item indicator (::before pseudo-element) */
.bg-menu-theme .menu-inner > .menu-item.active::before,
.layout-menu .menu-inner > .menu-item.active::before,
.menu-inner > .menu-item.active::before {
  background: var(--menu-text) !important;
  background-color: var(--menu-text) !important;
}

/* Override active submenu item indicator - use primary color */
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before,
.layout-menu .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before,
.menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background-color: var(--accent-primary) !important;
  background: var(--accent-primary) !important;
}


.layout-page {
  background: var(--page-bg);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  width: 100% !important;
  max-width: 100% !important;
}

.layout-content-navbar .layout-page {
  padding-top: 0;
}

.content-wrapper {
  padding: 1.25rem 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .content-wrapper {
    padding: 1rem;
  }
}

.layout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 5, 7, 0.65);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-snappy), visibility var(--transition-snappy);
  z-index: 1090;
  pointer-events: none;
}

.layout-menu-expanded .layout-overlay {
  opacity: 0.5;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 1199.98px) {
  .layout-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    transform: translate3d(-100%, 0, 0);
    z-index: 1100;
  }

  .layout-menu-expanded .layout-menu {
    transform: translate3d(0, 0, 0) !important;
  }

  .layout-menu-expanded body {
    overflow: hidden;
  }

  .layout-page {
    width: 100%;
  }
}

.layout-navbar {
  width: 100%;
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  background: transparent;
  font-size: 1.15rem;
}

.layout-navbar * {
  font-size: 1.15rem;
}

.layout-navbar .layout-menu-toggle {
  display: flex;
  align-items: center;
}

/* Modal background safeguard for new modal wrappers */
.neo-modal .modal-dialog,
.neo-modal .modal-content,
#exLargeModalEmailHistory .modal-content,
#exLargeModalAttachment .modal-content,
#exLargeModalAttachmentOverview .modal-content {
  background: #fff !important;
  border-radius: var(--radius-large);
  border: 1px solid var(--border-soft);
}

.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
  background: #fff !important;
  border-color: var(--border-soft);
}

.modal .modal-dialog {
  margin: 1.5rem auto;
}

#exLargeModal .modal-content,
#exLargeModalcustomer .modal-content,
#exLargeModalStock .modal-content,
#exLargeModalsupplier .modal-content,
#exLargeModalBOMLine .modal-content {
  background: #fff !important;
  border: 1px solid var(--border-soft);
}

.neo-modal .modal-header,
.neo-modal .modal-footer {
  background: #fff;
  border-color: var(--border-soft);
}

.neo-modal .modal-body {
  background: #fff;
}

.alert {
  border-radius: var(--radius-medium);
  border: 1px solid rgba(15, 15, 15, 0.05);
  box-shadow: 0 12px 30px rgba(15, 15, 15, 0.08);
}

.card,
.content-wrapper .card {
  border-radius: var(--radius-large);
  border: 1px solid var(--border-soft);
  background: var(--surface-bg);
  box-shadow: 0 30px 70px rgba(15, 15, 15, 0.08);
  transition: transform var(--transition-snappy), box-shadow var(--transition-snappy);
}

.setting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.setting-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem;
  border-radius: var(--radius-large);
  border: 1px solid var(--border-soft);
  background: var(--surface-bg);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-snappy),
    box-shadow var(--transition-snappy);
}

.setting-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(15, 15, 15, 0.1);
}

.setting-card h3 {
  font-weight: 600;
  margin: 0;
}

.setting-card p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.93rem;
}

.btn,
.btn-primary,
.btn-secondary {
  border-radius: 999px;
  padding: 0.55rem 1.5rem;
  font-weight: 600;
  border: none;
  background: transparent !important;
  color: var(--text-primary) !important;
  transition: transform var(--transition-snappy),
    box-shadow var(--transition-snappy);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-primary);
  --bs-btn-border-color: var(--accent-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-primary);
  --bs-btn-hover-border-color: var(--accent-primary);
  --bs-btn-focus-shadow-rgb: var(--accent-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-primary);
  --bs-btn-active-border-color: var(--accent-primary);
  --bs-btn-disabled-bg: rgba(var(--accent-primary-rgb), 0.4);
  --bs-btn-disabled-border-color: rgba(var(--accent-primary-rgb), 0.4);
  background: var(--accent-primary) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(10, 132, 255, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px) scale(1.1);
  box-shadow: 0 18px 32px rgba(10, 132, 255, 0.28);
  background: var(--accent-primary) !important;
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--border-soft);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface-muted);
  --bs-btn-hover-border-color: rgba(8, 8, 8, 0.15);
  --bs-btn-focus-shadow-rgb: var(--text-primary-rgb);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-muted);
  --bs-btn-active-border-color: rgba(8, 8, 8, 0.15);
  --bs-btn-disabled-color: rgba(var(--text-primary-rgb), 0.6);
  --bs-btn-disabled-border-color: rgba(8, 8, 8, 0.05);
  background: transparent !important;
  border: 1.5px solid var(--border-soft) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-snappy);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--surface-muted) !important;
  border-color: rgba(8, 8, 8, 0.15) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px) scale(1.1);
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.08);
}

.btn-outline-primary,
a.btn-outline-primary,
button.btn-outline-primary {
  --bs-btn-color: var(--accent-primary);
  --bs-btn-border-color: rgba(var(--accent-primary-rgb), 0.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-primary);
  --bs-btn-hover-border-color: var(--accent-primary);
  --bs-btn-focus-shadow-rgb: var(--accent-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-primary);
  --bs-btn-active-border-color: var(--accent-primary);
  --bs-btn-disabled-color: rgba(var(--accent-primary-rgb), 0.5);
  --bs-btn-disabled-border-color: rgba(var(--accent-primary-rgb), 0.2);
  background: transparent !important;
  border: 1.5px solid var(--border-soft) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-snappy) !important;
}

.btn-outline-primary:hover,
a.btn-outline-primary:hover,
button.btn-outline-primary:hover {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.08);
}

.btn-success,
a.btn-success,
button.btn-success {
  background-color: var(--accent-success) !important;
  border-color: var(--accent-success) !important;
  color: #fff !important;
}

.btn-warning,
a.btn-warning,
button.btn-warning {
  background-color: var(--accent-warning) !important;
  border-color: var(--accent-warning) !important;
  color: #000 !important;
}

.btn-danger,
a.btn-danger,
button.btn-danger {
  background-color: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
  color: #fff !important;
}

.btn-outline-danger,
a.btn-outline-danger,
button.btn-outline-danger {
  color: var(--accent-danger) !important;
  border-color: rgba(var(--accent-danger-rgb), 0.5) !important;
}

.btn-outline-danger:hover,
a.btn-outline-danger:hover,
button.btn-outline-danger:hover {
  background-color: var(--accent-danger) !important;
  color: #fff !important;
  border-color: var(--accent-danger) !important;
  transform: scale(1.15);
}

.layout-menu .btn {
  display: flex;
  gap: 0.65rem;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb), 0.25);
  border: none;
  color: var(--menu-text) !important;
}

.layout-menu .btn,
.layout-menu .btn *,
.layout-menu .btn i,
.layout-menu .btn svg,
.layout-menu .btn img,
.layout-menu .btn .bx,
.layout-menu .btn .bxs,
.layout-menu .btn .bxl,
.layout-menu .btn .fa,
.layout-menu .btn .fas,
.layout-menu .btn .far,
.layout-menu .btn .fal,
.layout-menu .btn .fab,
.layout-menu .btn .ti,
.layout-menu .btn .ti-icon,
.layout-menu button,
.layout-menu button *,
.layout-menu button i,
.layout-menu button svg,
.layout-menu button img {
  color: var(--menu-text) !important;
  fill: var(--menu-text) !important;
  stroke: var(--menu-text) !important;
}

.layout-menu .btn svg *,
.layout-menu button svg * {
  fill: var(--menu-text) !important;
  stroke: var(--menu-text) !important;
}

.layout-menu .btn img,
.layout-menu button img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.layout-menu .btn .btn {
  box-shadow: none !important;
}

.layout-menu .btn .btn-primary {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: var(--menu-text) !important;
}

.layout-menu .btn .btn-primary *,
.layout-menu .btn .btn-primary i,
.layout-menu .btn .btn-primary svg,
.layout-menu .btn .btn-primary img {
  color: var(--menu-text) !important;
  fill: var(--menu-text) !important;
  stroke: var(--menu-text) !important;
}

/* Override btn-primary color for buttons directly in layout-menu */
.layout-menu .btn-primary,
.layout-menu .btn.btn-primary,
.layout-menu button.btn-primary,
.layout-menu a.btn-primary {
  color: var(--menu-text) !important;
}

.layout-menu .btn-primary *,
.layout-menu .btn.btn-primary *,
.layout-menu button.btn-primary *,
.layout-menu a.btn-primary *,
.layout-menu .btn-primary i,
.layout-menu .btn.btn-primary i,
.layout-menu button.btn-primary i,
.layout-menu a.btn-primary i,
.layout-menu .btn-primary svg,
.layout-menu .btn.btn-primary svg,
.layout-menu button.btn-primary svg,
.layout-menu a.btn-primary svg,
.layout-menu .btn-primary img,
.layout-menu .btn.btn-primary img,
.layout-menu button.btn-primary img,
.layout-menu a.btn-primary img {
  color: var(--menu-text) !important;
  fill: var(--menu-text) !important;
  stroke: var(--menu-text) !important;
}

/* Target icon fonts specifically */
.layout-menu .btn-primary .bx,
.layout-menu .btn.btn-primary .bx,
.layout-menu button.btn-primary .bx,
.layout-menu a.btn-primary .bx,
.layout-menu .btn-primary i.bx,
.layout-menu .btn.btn-primary i.bx,
.layout-menu button.btn-primary i.bx,
.layout-menu a.btn-primary i.bx {
  color: var(--menu-text) !important;
}

.layout-menu .btn .btn-danger {
  background: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
}

/* Override old purple outline-primary buttons to use new secondary style */
.btn-outline-primary,
a.btn-outline-primary,
button.btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--border-soft) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-snappy) !important;
}

.btn-outline-primary:hover,
a.btn-outline-primary:hover,
button.btn-outline-primary:hover {
  background: var(--surface-muted) !important;
  border-color: rgba(8, 8, 8, 0.15) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px) scale(1.1);
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.08);
}

.btn-secondary:active,
.btn-outline-secondary:active {
  transform: translateY(0);
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================
   FORM STYLING - Enhanced & Smooth
   ============================================ */

/* Form Labels */
.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  display: block;
  letter-spacing: -0.01em;
}

.form-label small,
.form-label .text-muted {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}

/* Form Controls - Inputs & Selects */
.form-control,
.form-select,
textarea.form-control {
  border-radius: var(--radius-medium);
  border: 1.5px solid var(--border-soft);
  background: var(--surface-bg);
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 400;
  transition: all var(--transition-snappy);
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  width: 100%;
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
  font-weight: 400;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--surface-bg);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.1),
              0 2px 8px rgba(15, 15, 15, 0.08);
  transform: translateY(-1px);
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: rgba(8, 8, 8, 0.12);
  box-shadow: 0 2px 6px rgba(15, 15, 15, 0.06);
}

.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Textarea specific */
textarea.form-control {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

/* Form Groups & Rows */
.form-group,
.row.g-3,
.row.g-2,
.row.g-4 {
  margin-bottom: 1.25rem;
}

.row.g-3 > [class*="col-"],
.row.g-2 > [class*="col-"],
.row.g-4 > [class*="col-"] {
  margin-bottom: 0.75rem;
}

/* Checkboxes & Radio Buttons */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  padding-left: 0;
  min-height: 1.5rem;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  margin-top: 0;
  border: 1.5px solid var(--border-soft);
  border-radius: 0.375rem;
  background: var(--surface-bg);
  cursor: pointer;
  transition: all var(--transition-snappy);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:hover:not(:disabled) {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.08);
}

.form-check-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.1);
  outline: none;
}

.form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-size: 1rem;
  background-position: center;
  background-repeat: no-repeat;
}

.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* Radio buttons and checkboxes in navbar/menu - use navbar text color */
/* Very aggressive overrides to remove purple colors */
.layout-menu .form-check-input,
.layout-menu .form-check-input[type="radio"],
.layout-menu .form-check-input[type="checkbox"],
.layout-menu input[type="radio"],
.layout-menu input[type="checkbox"],
.layout-menu .form-check .form-check-input,
.layout-menu .form-check input[type="radio"],
.layout-menu .form-check input[type="checkbox"] {
  border-color: var(--menu-text-muted) !important;
  background-color: transparent !important;
  background: transparent !important;
}

.layout-menu .form-check-input:hover:not(:disabled),
.layout-menu input[type="radio"]:hover:not(:disabled),
.layout-menu input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--menu-text) !important;
  box-shadow: 0 0 0 3px rgba(var(--menu-text-rgb), 0.1) !important;
}

.layout-menu .form-check-input:focus,
.layout-menu input[type="radio"]:focus,
.layout-menu input[type="checkbox"]:focus {
  border-color: var(--menu-text) !important;
  box-shadow: 0 0 0 4px rgba(var(--menu-text-rgb), 0.15) !important;
}

.layout-menu .form-check-input:checked,
.layout-menu .form-check-input[type="radio"]:checked,
.layout-menu .form-check-input[type="checkbox"]:checked,
.layout-menu input[type="radio"]:checked,
.layout-menu input[type="checkbox"]:checked,
.layout-menu .form-check input[type="radio"]:checked,
.layout-menu .form-check input[type="checkbox"]:checked {
  background-color: var(--menu-text) !important;
  background: var(--menu-text) !important;
  border-color: var(--menu-text) !important;
  /* Checkmark/radio dot should be menu background color for contrast */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23050506' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

.layout-menu .form-check-input[type="radio"]:checked,
.layout-menu input[type="radio"]:checked,
.layout-menu .form-check input[type="radio"]:checked {
  /* Radio dot should be menu background color for contrast */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23050506'/%3e%3c/svg%3e") !important;
}

.layout-menu .form-check-label,
.layout-menu .form-check label,
.layout-menu label {
  color: var(--menu-text) !important;
}

.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-muted);
}

.form-check-label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-primary);
  cursor: pointer;
  margin: 0;
  line-height: 1.5;
  user-select: none;
}

.form-check-input:disabled ~ .form-check-label {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Form Switch (Toggle) */
.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.375rem;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.12);
  border: none;
  position: relative;
  transition: background var(--transition-snappy);
}

.form-switch .form-check-input::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  left: 0.1875rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform var(--transition-snappy);
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.2);
}

.form-switch .form-check-input:checked {
  background: var(--accent-primary);
  background-image: none;
}

.form-switch .form-check-input:checked::before {
  transform: translateY(-50%) translateX(1.125rem);
}

/* Error States */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--accent-danger);
  background: rgba(255, 69, 58, 0.04);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--accent-danger);
  box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.1),
              0 2px 8px rgba(15, 15, 15, 0.08);
}

.invalid-feedback,
.text-danger {
  color: var(--accent-danger);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.375rem;
  display: block;
}

/* Valid States */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--accent-success);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.1),
              0 2px 8px rgba(15, 15, 15, 0.08);
}

.valid-feedback {
  color: var(--accent-success);
  font-size: 0.8125rem;
  margin-top: 0.375rem;
  display: block;
}

/* Help Text */
.form-text,
small.text-muted {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
  display: block;
  line-height: 1.4;
}

/* Input Groups */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-control,
.input-group .form-select {
  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
}

.input-group-text {
  border: 1.5px solid var(--border-soft);
  border-left: none;
  background: var(--surface-muted);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.input-group:focus-within .input-group-text {
  border-color: var(--accent-primary);
}

/* File Input */
.form-control[type="file"] {
  padding: 0.5rem;
  cursor: pointer;
}

.form-control[type="file"]::file-selector-button {
  padding: 0.5rem 1rem;
  margin-right: 0.75rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-medium);
  background: var(--surface-muted);
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-snappy);
}

.form-control[type="file"]::file-selector-button:hover {
  background: var(--surface-bg);
  border-color: var(--accent-primary);
}

/* Form Sections */
.card .card-body {
  padding: 1.75rem;
}

.card .card-body h5 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* List Group for Radio Options */
.list-group-item {
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-medium) !important;
  margin-bottom: 0.5rem;
  padding: 1rem;
  background: var(--surface-bg);
  transition: all var(--transition-snappy);
}

.list-group-item:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.1);
  transform: translateY(-1px);
}

.list-group-item label {
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Form Actions */
.form-actions,
.mt-4 button,
.mt-3 button {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Modal Forms */
.modal-content {
  border-radius: var(--radius-large);
  border: 1px solid var(--border-soft);
  box-shadow: 0 30px 70px rgba(15, 15, 15, 0.15);
  background-color: #fff !important;
  background: #fff !important;
}

.modal-body {
  padding: 1.75rem;
}

.modal-body .form-group,
.modal-body .row {
  margin-bottom: 1.25rem;
}

.modal-body .form-label {
  margin-bottom: 0.5rem;
}

/* Compact Forms */
.form-control-sm,
.form-select-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: calc(var(--radius-medium) * 0.75);
}

.form-label-sm {
  font-size: 0.8125rem;
  margin-bottom: 0.375rem;
}

/* Large Forms */
.form-control-lg,
.form-select-lg {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  border-radius: var(--radius-medium);
}

.form-label-lg {
  font-size: 1rem;
  margin-bottom: 0.625rem;
}

.theme-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.theme-preview-item {
  padding: 1rem;
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-soft);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theme-preview-label {
  font-size: 0.75rem;
  opacity: 0.9;
  font-weight: 500;
}

.theme-preview-value {
  font-size: 1rem;
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 0.05em;
}

.theme-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.theme-color-input label {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  display: block;
}

.theme-color-input input[type="color"] {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-soft);
  background: transparent;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.theme-color-input input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.theme-color-input input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: var(--radius-medium);
}

.theme-color-input input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: var(--radius-medium);
}

.neo-section {
  margin-bottom: 2.5rem;
}

.neo-section header {
  margin-bottom: 0.9rem;
}

.neo-section header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.neo-section header p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
}

/* ============================================
   STRUCTURED TWO-COLUMN FORM LAYOUT
   ============================================ */

/* Form Row - Two Column Layout */
.form-row,
.neo-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(8, 8, 8, 0.04);
  transition: border-color var(--transition-snappy);
}

.form-row:hover,
.neo-form-row:hover {
  border-bottom-color: rgba(8, 8, 8, 0.08);
}

.form-row:last-child,
.neo-form-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Two-Column Form Layout (side by side) */
.form-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.form-column {
  display: flex;
  flex-direction: column;
}

.neo-form-compact {
  margin-bottom: 1rem;
}

.neo-form-compact h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

/* Label Column (Left - Red area) */
.form-row > label,
.form-row > .form-label,
.neo-form-row > label,
.neo-form-row > .form-label,
.form-row > h6:first-child,
.neo-form-row > h6:first-child {
  grid-column: 1;
  text-align: right;
  padding-right: 0.75rem;
  margin: 0;
  padding-top: 0;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Field Column (Right - Blue area) */
.form-row > input,
.form-row > select,
.form-row > textarea,
.form-row > .form-control,
.form-row > .form-select,
.neo-form-row > input,
.neo-form-row > select,
.neo-form-row > textarea,
.neo-form-row > .form-control,
.neo-form-row > .form-select,
.form-row > h6:last-child,
.neo-form-row > h6:last-child {
  grid-column: 2;
  margin: 0;
}

/* Legacy h6 form structure support - when h6 contains label text + field */
.col-lg-6 h6,
.col-lg-12 h6 {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(8, 8, 8, 0.04);
  font-weight: normal;
  font-size: 0.875rem;
}

.col-lg-6 h6:last-child,
.col-lg-12 h6:last-child {
  border-bottom: none;
}

/* Style labels that appear as text in h6 */
.col-lg-6 h6 label,
.col-lg-12 h6 label {
  flex: 0 0 200px;
  text-align: right;
  padding-right: 1rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

/* Style form controls in h6 */
.col-lg-6 h6 select,
.col-lg-6 h6 input,
.col-lg-6 h6 textarea,
.col-lg-6 h6 .form-control,
.col-lg-6 h6 .form-select,
.col-lg-12 h6 select,
.col-lg-12 h6 input,
.col-lg-12 h6 textarea,
.col-lg-12 h6 .form-control,
.col-lg-12 h6 .form-select {
  flex: 1;
  margin: 0;
  min-width: 0;
}

/* Form Container */
.neo-form,
.form-container {
  max-width: 100%;
}

.neo-form .form-row,
.form-container .form-row {
  max-width: 100%;
}

/* Container padding adjustments */
.container-xxl.flex-grow-1.container-p-y {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container-xxl.flex-grow-1 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.content-wrapper .row {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.5rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.content-wrapper .row > [class*="col-"] {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.modal-body {
  padding-top: 0.75rem !important;
}

/* Responsive - Stack on smaller screens */
@media (max-width: 1200px) {
  .form-two-columns {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .form-row,
  .neo-form-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .form-row > label,
  .form-row > .form-label,
  .neo-form-row > label,
  .neo-form-row > .form-label,
  .form-row > h6:first-child,
  .neo-form-row > h6:first-child {
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    margin-bottom: 0.5rem;
  }

  .form-row > input,
  .form-row > select,
  .form-row > textarea,
  .form-row > .form-control,
  .form-row > .form-select,
  .neo-form-row > input,
  .neo-form-row > select,
  .neo-form-row > textarea,
  .neo-form-row > .form-control,
  .neo-form-row > .form-select,
  .form-row > h6:last-child,
  .neo-form-row > h6:last-child {
    grid-column: 1;
  }
}

/* Alternative: Form using table-like structure */
.form-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.form-table-row {
  display: table-row;
}

.form-table-label {
  display: table-cell;
  width: 200px;
  text-align: right;
  padding: 0.75rem 1rem 0.75rem 0;
  vertical-align: top;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(8, 8, 8, 0.04);
}

.form-table-field {
  display: table-cell;
  padding: 0.75rem 0 0.75rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(8, 8, 8, 0.04);
}

.form-table-row:last-child .form-table-label,
.form-table-row:last-child .form-table-field {
  border-bottom: none;
}

.form-table-field .form-control,
.form-table-field .form-select {
  width: 100%;
  margin: 0;
}

/* Enhanced styling for forms using .as_p */
form p {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(8, 8, 8, 0.04);
}

form p:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

form p label {
  grid-column: 1;
  text-align: right;
  padding-right: 0.75rem;
  margin: 0;
  padding-top: 0;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

form p input,
form p select,
form p textarea,
form p .form-control,
form p .form-select {
  grid-column: 2;
  margin: 0;
}

form p .help-text,
form p .helptext,
form p small {
  grid-column: 2;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

form p .errorlist {
  grid-column: 2;
  margin-top: 0.375rem;
  list-style: none;
  padding: 0;
}

form p .errorlist li {
  color: var(--accent-danger);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ============================================
   ORDER PAGE STYLES
   ============================================ */

/* Order Header */
.order-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.order-header-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.order-nav-link {
  text-decoration: none;
  color: var(--text-primary);
  transition: color var(--transition-snappy);
  font-size: 1.5rem;
}

.order-nav-link:hover {
  color: var(--accent-primary);
}

.order-number {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.order-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding-right: 1.5rem !important;
}

/* Attachment Buttons */
.attachment-btn {
  position: relative;
  overflow: visible;
}

.attachment-btn .btn-text {
  transition: opacity var(--transition-snappy);
  display: inline-block;
  margin-left: 0.25rem;
}

.attachment-btn.btn-secondary {
  background: var(--surface-bg);
  border: 1.5px solid var(--border-soft);
  color: var(--text-primary);
}

.attachment-btn.btn-secondary:hover {
  background: var(--surface-muted);
  border-color: rgba(8, 8, 8, 0.15);
  color: var(--text-primary);
}

.attachment-btn.btn-secondary .btn-text {
  color: var(--text-primary);
}

/* Attachment Modal */
.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-medium);
  padding: 0.75rem;
  transition: border-color var(--transition-snappy);
}

.attachment-item:hover {
  border-color: var(--accent-primary);
}

.attachment-link {
  text-decoration: none;
  color: var(--text-primary);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.attachment-link:hover {
  color: var(--accent-primary);
}

.attachment-delete {
  margin-left: 0.5rem;
}

.attachment-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
  margin: 0;
}

/* Compact Containers */
.modal-body-compact {
  padding-top: 0.5rem;
}

.container-compact {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure container-xxl with container-compact is full width - override Bootstrap's max-width */
.container-xxl.container-compact,
.container-xxl.flex-grow-1.container-compact,
.content-wrapper .container-xxl.container-compact,
.content-wrapper .container-xxl.flex-grow-1.container-compact {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Ensure container-fluid with container-compact is full width - remove all Bootstrap padding and constraints */
.container-fluid.container-compact,
.container-fluid.flex-grow-1.container-compact,
.content-wrapper .container-fluid.container-compact,
.content-wrapper .container-fluid.flex-grow-1.container-compact,
.content-wrapper > .container-fluid.container-compact,
.content-wrapper > .container-fluid.flex-grow-1.container-compact {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding: 0.5rem 0 !important;
  --bs-gutter-x: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure content-wrapper doesn't constrain width */
.content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* Force full width for company details page specifically */
body:has(.container-fluid.container-compact) .content-wrapper,
body:has(.container-fluid.flex-grow-1.container-compact) .content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override Bootstrap container-fluid padding completely - use max-width: none to remove any constraints */
body .container-fluid.container-compact,
body .container-fluid.flex-grow-1.container-compact,
body .container-fluid.flex-grow-1,
.content-wrapper .container-fluid.container-compact,
.content-wrapper .container-fluid.flex-grow-1.container-compact,
.content-wrapper .container-fluid.flex-grow-1 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
  box-sizing: border-box !important;
}

/* Specific styling for company details page container - match overview pages width */
.company-details-container,
.content-wrapper .company-details-container,
.container-fluid.container-p-y.company-details-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
  box-sizing: border-box !important;
}

/* Add minimal padding for content readability - apply to direct children */
.content-wrapper .container-fluid.container-compact > .order-header,
.content-wrapper .container-fluid.flex-grow-1.container-compact > .order-header,
.content-wrapper .container-fluid.container-compact > ul,
.content-wrapper .container-fluid.flex-grow-1.container-compact > ul,
.content-wrapper .company-details-container > .order-header,
.content-wrapper .company-details-container > ul {
  padding-left: 1rem;
  padding-right: 1rem;
}

.form-section-title {
  margin-bottom: 0.75rem;
  margin-top: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Full Width Order Content */
.order-content-fullwidth {
  width: 100%;
  margin: 0;
  padding: 0;
}

.order-lines-row {
  width: 100%;
  margin: 0;
  padding-left: 0.2rem !important;
  padding-right: 3.5rem !important;
  --bs-gutter-x: 0;
}

/* order-lines-row is inside content-wrapper which now has padding: 1.25rem 0 */
/* .order-lines-row .col-12 {
  padding-left: 0.2rem !important;
  padding-right: 3rem !important;
} */

.remarks-section {
  padding-left: 0.2rem;
  padding-right: 5rem !important;
  width: 100%;
}

textarea{
  width: 100%;

}

.table-pagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.2rem;
  width: 100%;
}

.table-pagination .page-size-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.page-size-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.page-size-select-wrapper select {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  padding: 0.25rem 2rem 0.25rem 0.75rem;
  background: var(--surface-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.page-size-arrow {
  position: absolute;
  right: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  pointer-events: none;
}

.pagination-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-left: auto;
}

.pagination-status {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Remove Bootstrap padding for col-lg-12 */
.col-lg-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Reduce padding on rows containing tables */
.row:has(.sortable-table),
.row:has(table.sortable-table) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Add minimal padding to col-lg-12 containers with overview tables (sortable-table) */
/* content-wrapper now has padding: 1.25rem 0, so we add 1rem left for navbar spacing */
.col-lg-12:has(.sortable-table),
.col-lg-12:has(table.sortable-table) {
  padding-left: 1rem !important;
  padding-right: 0.25rem !important;
}

/* Ensure tables in tab-panes are full width like overview pages */
.tab-pane .row:has(.sortable-table),
.tab-pane .row:has(table.sortable-table) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

.tab-pane .col-lg-12:has(.sortable-table),
.tab-pane .col-lg-12:has(table.sortable-table) {
  padding-left: 1rem !important;
  padding-right: 0.25rem !important;
  width: 100%;
}

.order-lines-table,
.sortable-table,
table {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.order-lines-table tbody tr:nth-child(even),
.sortable-table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
  background-color: var(--surface-muted) !important;
}

.order-lines-table tbody tr:nth-child(odd),
.sortable-table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) {
  background-color: var(--surface-bg) !important;
}

.order-lines-table caption,
.sortable-table caption,
table caption {
  caption-side: top !important;
  text-align: left;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding: 0;
}

/* Table text colors - use text color for all table content */
.order-lines-table td,
.order-lines-table th,
.sortable-table td,
.sortable-table th,
table td,
table th {
  color: var(--text-primary);
  padding: 0.75rem 1rem;
}

.order-lines-table th,
.sortable-table th,
table th {
  padding: 1rem 1rem;
}

/* Table header styling - use theme colors - override any purple/blue backgrounds */
/* Very aggressive overrides to remove any background colors from thead */
/* Target every possible selector combination */
table thead,
table > thead,
table thead tr,
table > thead > tr,
table thead th,
table > thead > tr > th,
table thead td,
table > thead > tr > td,
.sortable-table thead,
.sortable-table > thead,
.sortable-table thead tr,
.sortable-table > thead > tr,
.sortable-table thead th,
.sortable-table > thead > tr > th,
.sortable-table thead td,
.sortable-table > thead > tr > td,
.order-lines-table thead,
.order-lines-table > thead,
.order-lines-table thead tr,
.order-lines-table > thead > tr,
.order-lines-table thead th,
.order-lines-table > thead > tr > th,
.order-lines-table thead td,
.order-lines-table > thead > tr > td,
table thead *,
table > thead *,
.sortable-table thead *,
.sortable-table > thead *,
.order-lines-table thead *,
.order-lines-table > thead * {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

table thead th,
.sortable-table thead th,
.order-lines-table thead th,
table thead tr th,
.sortable-table thead tr th,
.order-lines-table thead tr th {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-soft) !important;
}

table thead th a,
.sortable-table thead th a,
.order-lines-table thead th a,
table thead th a:link,
.sortable-table thead th a:link,
.order-lines-table thead th a:link,
table thead th a:visited,
.sortable-table thead th a:visited,
.order-lines-table thead th a:visited {
  color: var(--text-primary) !important;
}

table thead th a:hover,
.sortable-table thead th a:hover,
.order-lines-table thead th a:hover {
  color: var(--accent-primary) !important;
}

/* Override any sorted header states */
table thead th.sorted,
.sortable-table thead th.sorted,
.order-lines-table thead th.sorted {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

/* Override any Bootstrap table header classes */
.table thead th,
.table-dark thead th,
.table-striped thead th {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

.order-lines-table a,
.sortable-table a,
table a {
  color: var(--accent-primary);
}

.order-lines-table a:hover,
.sortable-table a:hover,
table a:hover {
  color: var(--accent-primary);
  opacity: 0.8;
}

/* Table row highlighting - use primary color background with navbar text color */
/* Override any background colors from erp-min.css - reset all table rows first */
/* Zebra striping - alternate between white and very light gray */
table tbody tr:nth-child(even),
table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) th,
.sortable-table tbody tr:nth-child(even),
.sortable-table tbody tr:nth-child(even) td,
.sortable-table tbody tr:nth-child(even) th,
.order-lines-table tbody tr:nth-child(even),
.order-lines-table tbody tr:nth-child(even) td,
.order-lines-table tbody tr:nth-child(even) th {
  background-color: var(--surface-muted) !important;
}

table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th,
.sortable-table tbody tr:nth-child(odd),
.sortable-table tbody tr:nth-child(odd) td,
.sortable-table tbody tr:nth-child(odd) th,
.order-lines-table tbody tr:nth-child(odd),
.order-lines-table tbody tr:nth-child(odd) td,
.order-lines-table tbody tr:nth-child(odd) th {
  background-color: var(--surface-bg) !important;
}

table tbody tr:hover,
table tbody tr:hover td,
table tbody tr:hover th,
.sortable-table tbody tr:hover,
.sortable-table tbody tr:hover td,
.sortable-table tbody tr:hover th,
.order-lines-table tbody tr:hover,
.order-lines-table tbody tr:hover td,
.order-lines-table tbody tr:hover th {
  background-color: rgba(var(--accent-primary-rgb), 0.1) !important;
}

/* Active/selected/highlighted rows - override any existing styles */
table tbody tr.active,
table tbody tr.selected,
table tbody tr.highlight,
table tbody tr[style*="background"],
.sortable-table tbody tr.active,
.sortable-table tbody tr.selected,
.sortable-table tbody tr.highlight,
.sortable-table tbody tr[style*="background"],
.order-lines-table tbody tr.active,
.order-lines-table tbody tr.selected,
.order-lines-table tbody tr.highlight,
.order-lines-table tbody tr[style*="background"] {
  background-color: var(--accent-primary) !important;
}

table tbody tr.active td,
table tbody tr.active th,
table tbody tr.selected td,
table tbody tr.selected th,
table tbody tr.highlight td,
table tbody tr.highlight th,
table tbody tr[style*="background"] td,
table tbody tr[style*="background"] th,
.sortable-table tbody tr.active td,
.sortable-table tbody tr.active th,
.sortable-table tbody tr.selected td,
.sortable-table tbody tr.selected th,
.sortable-table tbody tr.highlight td,
.sortable-table tbody tr.highlight th,
.sortable-table tbody tr[style*="background"] td,
.sortable-table tbody tr[style*="background"] th,
.order-lines-table tbody tr.active td,
.order-lines-table tbody tr.active th,
.order-lines-table tbody tr.selected td,
.order-lines-table tbody tr.selected th,
.order-lines-table tbody tr.highlight td,
.order-lines-table tbody tr.highlight th,
.order-lines-table tbody tr[style*="background"] td,
.order-lines-table tbody tr[style*="background"] th {
  background-color: var(--accent-primary) !important;
  color: var(--menu-text) !important;
}

table tbody tr.active td a,
table tbody tr.active th a,
table tbody tr.selected td a,
table tbody tr.selected th a,
table tbody tr.highlight td a,
table tbody tr.highlight th a,
table tbody tr[style*="background"] td a,
table tbody tr[style*="background"] th a,
.sortable-table tbody tr.active td a,
.sortable-table tbody tr.active th a,
.sortable-table tbody tr.selected td a,
.sortable-table tbody tr.selected th a,
.sortable-table tbody tr.highlight td a,
.sortable-table tbody tr.highlight th a,
.sortable-table tbody tr[style*="background"] td a,
.sortable-table tbody tr[style*="background"] th a,
.order-lines-table tbody tr.active td a,
.order-lines-table tbody tr.active th a,
.order-lines-table tbody tr.selected td a,
.order-lines-table tbody tr.selected th a,
.order-lines-table tbody tr.highlight td a,
.order-lines-table tbody tr.highlight th a,
.order-lines-table tbody tr[style*="background"] td a,
.order-lines-table tbody tr[style*="background"] th a {
  color: var(--menu-text) !important;
}

/* Bootstrap table classes */
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > *,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: rgba(var(--accent-primary-rgb), 0.1) !important;
  color: var(--text-primary) !important;
}

.table-active,
.table-active > *,
.table-active > td,
.table-active > th,
.table-active tr,
.table-active tr td,
.table-active tr th {
  background-color: var(--accent-primary) !important;
  color: var(--menu-text) !important;
}

.table-active a,
.table-active > * a,
.table-active > td a,
.table-active > th a,
.table-active tr a {
  color: var(--menu-text) !important;
}

.card,
.modal-content,
.dropdown-menu,
.alert,
.btn,
.form-control,
.form-select {
  box-shadow: 0 2px 8px rgba(var(--text-primary-rgb), 0.08) !important;
}

.card:hover,
.modal-content:hover {
  box-shadow: 0 4px 16px rgba(var(--text-primary-rgb), 0.12) !important;
  transition: box-shadow var(--transition-snappy);
}

/* Override menu shadows */
.layout-menu,
.bg-menu-theme,
.menu {
  box-shadow: 20px 0 45px rgba(var(--text-primary-rgb), 0.15) !important;
}

/* Override active menu item shadows */
.layout-menu .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  box-shadow: 0 4px 12px rgba(var(--menu-text-rgb), 0.25) !important;
}

/* Override ApexCharts tooltip shadows */
.apexcharts-tooltip,
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
  box-shadow: 0 4px 12px rgba(var(--text-primary-rgb), 0.15) !important;
}

/* Remarks Section */
.remarks-section {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.remarks-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.875rem;
  color: var(--text-primary);
}

/* Change Details - 25% smaller, full width */
.change-details-section {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0;
}

.change-details-title {
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.change-details-item {
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* ============================================
   FLOATING ACTION BUTTONS
   ============================================ */

.floating-actions {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

.floating-btn {
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: all var(--transition-snappy);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--menu-text);
  position: relative;
  overflow: visible;
  white-space: nowrap;
  padding: 0;
  box-sizing: border-box;
}

.floating-btn i {
  font-size: 1.25rem;
  flex-shrink: 0;
  pointer-events: none;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--menu-text);
}

.floating-btn-text {
  position: absolute;
  right: calc(100% + 0.75rem);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--transition-snappy), transform var(--transition-snappy);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  background: var(--accent-primary);
  color: var(--menu-text);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-medium);
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
}

.floating-btn-primary .floating-btn-text {
  background: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
}

.floating-btn-danger .floating-btn-text {
  background: var(--accent-danger);
  box-shadow: 0 4px 12px rgba(var(--accent-danger-rgb), 0.3);
}

.floating-btn-secondary .floating-btn-text {
  background: var(--text-primary);
  box-shadow: 0 4px 12px rgba(var(--text-primary-rgb), 0.2);
}

.floating-btn:hover {
  transform: translateY(-2px) scale(1.15);
  width: auto;
  min-width: 3.5rem;
  padding-left: 0.5rem;
  border-radius: 999px;
}

.floating-btn:hover .floating-btn-text {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.floating-btn:active {
  transform: translateY(0) scale(0.98);
}

.floating-btn-primary {
  background: var(--accent-primary);
  box-shadow: 0 8px 24px rgba(var(--accent-primary-rgb), 0.3);
}

.floating-btn-primary:hover {
  box-shadow: 0 12px 32px rgba(var(--accent-primary-rgb), 0.4);
  background: var(--accent-primary);
  filter: brightness(1.1);
}

.floating-btn-secondary {
  background: var(--text-primary);
  box-shadow: 0 8px 24px rgba(var(--text-primary-rgb), 0.15);
}

.floating-btn-secondary:hover {
  box-shadow: 0 12px 32px rgba(var(--text-primary-rgb), 0.2);
  background: var(--text-primary);
  filter: brightness(1.1);
}

.floating-btn-danger {
  background: var(--accent-danger);
  box-shadow: 0 8px 24px rgba(var(--accent-danger-rgb), 0.3);
}

.floating-btn-danger:hover {
  box-shadow: 0 12px 32px rgba(var(--accent-danger-rgb), 0.4);
  background: var(--accent-danger);
  filter: brightness(1.1);
}

.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-medium);
}

.footer {
  border-top: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-muted);
}

.content-footer.footer {
  width: 100%;
  margin-top: auto;
  padding: 1rem 1.25rem;
}

.content-footer.footer .container-xxl {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
}

.content-footer.footer .footer-credit {
  width: 100%;
  text-align: right;
}

.delete-button{
  max-width: 32px;
}

.add-button {
  max-width: 32px;
}

/* Dual Select Widget Styling (Django Admin style dual-column selector) */
.selector {
  width: 100% !important;
  margin-bottom: 1.5rem;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1.25rem !important;
  align-items: flex-start;
  box-sizing: border-box;
}

.selector-available,
.selector-chosen {
  flex: 1 1 calc(50% - 1rem);
  min-width: 320px !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
  background-color: var(--surface-card) !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
}

.selector-available h2,
.selector-chosen h2 {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: var(--surface-muted);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
}

.selector-chosen h2 {
  background-color: var(--accent-primary);
  color: var(--menu-text);
}

.selector select {
  width: 100% !important;
  min-height: 260px !important;
  padding: 0.5rem;
  border: none;
  border-top: 1px solid var(--border-soft);
  background-color: #fff !important;
  color: #111 !important;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.selector select option {
  color: #111 !important;
  background-color: #fff !important;
  padding: 0.2rem 0.5rem;
}

.selector .selector-filter {
  border: none;
  border-top: 1px solid var(--border-soft);
  padding: 0.5rem;
  background-color: var(--surface-bg);
}

.selector .selector-filter label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.selector .selector-filter input {
  width: 100% !important;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  background-color: var(--surface-card);
  color: var(--text-primary);
  box-sizing: border-box;
}

.selector-chooser {
  flex: 0 0 auto;
  min-width: 120px !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  justify-content: center;
  padding-top: 3rem;
}

.selector-chooser ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.selector-chooser li {
  text-align: center;
  list-style: none !important;
}

.selector-chooser .selector-add,
.selector-chooser .selector-remove {
  display: inline-block;
  min-width: auto;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  text-align: center;
  line-height: 1.5;
  border-radius: 0.375rem;
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: var(--menu-text) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 12px 24px rgba(10, 132, 255, 0.25);
  transition: all var(--transition-snappy);
  margin: 0 auto;
  border: none;
  cursor: pointer;
}

.selector-chooser .selector-add *,
.selector-chooser .selector-remove * {
  color: var(--menu-text) !important;
}

.selector-chooser .selector-add:hover,
.selector-chooser .selector-remove:hover,
.selector-chooser .selector-add:hover *,
.selector-chooser .selector-remove:hover * {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: var(--menu-text) !important;
  transform: translateY(-1px) scale(1.1);
  box-shadow: 0 18px 32px rgba(10, 132, 255, 0.28);
}

.selector-chooser .selector-remove,
.selector-chooser .selector-remove * {
  background-color: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
  color: var(--menu-text) !important;
  box-shadow: 0 12px 24px rgba(255, 69, 58, 0.25);
}

.selector-chooser .selector-remove:hover,
.selector-chooser .selector-remove:hover * {
  background-color: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
  color: var(--menu-text) !important;
  box-shadow: 0 18px 32px rgba(255, 69, 58, 0.28);
}

.selector-chooseall,
.selector-clearall {
  margin: 0;
  border-top: 1px solid var(--border-soft);
  background-color: var(--surface-muted);
  text-align: right;
  padding: 0.35rem 0.75rem;
}

.selector-chooseall a,
.selector-clearall a {
  display: inline-block;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
}

.selector-chooseall a:hover,
.selector-clearall a:hover {
  text-decoration: underline;
}

@media (max-width: 992px) {
  .selector {
    flex-direction: column;
  }

  .selector-chooser {
    flex-direction: row;
    justify-content: center;
    padding-top: 1rem;
  }

  .selector-chooser .selector-add,
  .selector-chooser .selector-remove {
    width: auto;
    margin: 0 0.5rem;
  }
}

.tiered-price-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.tiered-price-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-primary);
}

.tiered-price-link:hover {
  text-decoration: underline;
  color: var(--accent-primary);
}