/* Dashboard Styles */
@import url('responsive.css');

:root {
  --app-sidebar-width: 280px;
}

body.dashboard-page {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Dark Mode Base — Bootstrap 5 body/heading vars so utilities & components stay readable */
body.dark-mode.dashboard-page {
  background-color: #0b1220;
  color: #e5e7eb;
  --bs-body-color: #e5e7eb;
  --bs-body-bg: #0b1220;
  --bs-secondary-color: #cbd5e1;
  --bs-secondary-rgb: 203, 213, 225;
  --bs-tertiary-color: #94a3b8;
  --bs-tertiary-bg: #1f2937;
  --bs-heading-color: #f9fafb;
  --bs-emphasis-color: #f9fafb;
  --bs-border-color: #374151;
  --bs-link-color: #93c5fd;
  --bs-link-hover-color: #bfdbfe;
}

/* Single consistent size for ALL navigation sidebars (reseller + auto-spare) */
#sidebar-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--app-sidebar-width) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background-color: #1e293b !important;
  /* Above main content and header controls that use z-index: 1000 */
  z-index: 1100 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Dedicated Product Manager sidebar IDs (isolated from global sidebar rules). */
#pm-sidebar-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--app-sidebar-width) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 1100 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Unified nav/submenu sizes – same on every page (Sale, Purchase, Auto Spare, etc.) */
#sidebar-content .sidebar-header,
#sidebar-container .sidebar-header {
  padding: 12px 16px !important;
}
#sidebar-content .nav-link,
#sidebar-container .nav-link {
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
}
#sidebar-content .nav-link i,
#sidebar-container .nav-link i {
  width: 18px !important;
  margin-right: 10px !important;
  font-size: 0.9rem !important;
}
#sidebar-content .submenu-link,
#sidebar-container .submenu-link {
  padding: 8px 16px 8px 40px !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
}
#sidebar-content .submenu-link i,
#sidebar-container .submenu-link i {
  width: 16px !important;
  margin-right: 8px !important;
  font-size: 0.85rem !important;
}
#sidebar-content .submenu-item.submenu-group-title,
#sidebar-container .submenu-item.submenu-group-title {
  padding: 8px 16px 4px 40px !important;
}
#sidebar-content .submenu-label,
#sidebar-container .submenu-label {
  font-size: 0.8rem !important;
}
#sidebar-content .nav .has-submenu > .submenu-toggle .submenu-arrow,
#sidebar-container .nav .has-submenu > .submenu-toggle .submenu-arrow {
  width: 14px !important;
  font-size: 0.8rem !important;
}
#sidebar-content .nav > .nav-item {
  margin-bottom: 2px !important;
}
#sidebar-content .nav > .nav-item:last-child {
  margin-bottom: 0 !important;
}

/* Warehouse Management: links are direct children of .nav (no parent "Warehouse Management" toggle row) */
#sidebar-content .nav > .submenu-item.wh-warehouse-nav-flat {
  margin-bottom: 2px !important;
}
#sidebar-content .nav > .submenu-item.wh-warehouse-nav-flat .submenu-link {
  padding: 12px 20px 12px 20px !important;
  font-size: 0.9rem !important;
}
#sidebar-content .nav > .submenu-item.wh-warehouse-nav-flat .submenu-link i {
  width: 20px !important;
  margin-right: 12px !important;
  font-size: 0.9rem !important;
}

/* CRITICAL: Force sidebar to be visible on ALL pages - override any hiding rules */
#sidebar-container,
#sidebar-container[style*="display: none"],
#sidebar-container[style*="visibility: hidden"],
#sidebar-container.hidden,
#sidebar-container.d-none {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Sidebar content container - CRITICAL: hidden until permissions applied (no flash of full menu) */
#sidebar-content {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none;
  overflow: visible !important;
}

#pm-sidebar-content {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 0.15s ease-out;
  overflow: visible !important;
}
/* Only show when permissions are applied (loading-permissions removed by nav-permissions-applier or sidebar sync) */
#sidebar-content:not(.loading-permissions) {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 0.15s ease-out;
}
/* Empty sidebar (before nav loads) - keep hidden */
#sidebar-content.loading-permissions,
#sidebar-content:empty {
  visibility: hidden !important;
  opacity: 0 !important;
}
/* CRITICAL: When sidebar has loaded (API returned), always show - overrides loading-permissions if stuck */
#sidebar-content[data-sidebar-loaded="true"] {
  visibility: visible !important;
  opacity: 1 !important;
}
/* When sidebar HTML exists but permissions are still applying, stay hidden (loading-permissions wins). */
#sidebar-content:not(.loading-permissions):has(.sidebar),
#sidebar-content:not(.loading-permissions):has(.nav) {
  visibility: visible !important;
  opacity: 1 !important;
}
#sidebar-container:has(#sidebar-content .sidebar) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#sidebar-content[data-sidebar-loaded="true"] .nav-item[data-authorized="true"],
#sidebar-content[data-sidebar-loaded="true"] .submenu-item[data-authorized="true"] {
  display: block !important;
  visibility: visible !important;
}

/* CRITICAL: Hide all nav items until permissions applied - prevents flicker on refresh */
#sidebar-content .nav-item.hidden-until-permitted,
#sidebar-content .submenu-item.hidden-until-permitted {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Only items explicitly authorized by permissions may be shown */
#sidebar-content .nav-item,
#sidebar-content .submenu-item {
  display: none;
  visibility: hidden;
}

#sidebar-content .nav-item[data-authorized="true"],
#sidebar-content .submenu-item[data-authorized="true"] {
  display: block;
  visibility: visible;
}

/* Nav items: respect permissions - do not force visible */
#sidebar-content .nav-item.nav-disabled-by-permission {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#main-content-area {
  margin-left: var(--app-sidebar-width);
  min-height: 100vh;
  background-color: #f8f9fa;
  transition: margin-left 0.3s ease;
}

/* Product Manager without sidebar: content takes full width */
html.pm-no-sidebar #main-content-area,
body.pm-no-sidebar #main-content-area {
  margin-left: 0 !important;
  width: 100% !important;
}

html.pm-no-sidebar #sidebar-container,
html.pm-no-sidebar #pm-sidebar-container,
body.pm-no-sidebar #sidebar-container,
body.pm-no-sidebar #pm-sidebar-container,
html.pm-no-sidebar #sidebar-content,
html.pm-no-sidebar #pm-sidebar-content,
body.pm-no-sidebar #sidebar-content,
body.pm-no-sidebar #pm-sidebar-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Pharmacy pages without sidebar: content takes full width */
html.pharmacy-no-sidebar #main-content-area,
body.pharmacy-no-sidebar #main-content-area {
  margin-left: 0 !important;
  width: 100% !important;
}

html.pharmacy-no-sidebar #sidebar-container,
html.pharmacy-no-sidebar #pm-sidebar-container,
body.pharmacy-no-sidebar #sidebar-container,
body.pharmacy-no-sidebar #pm-sidebar-container,
html.pharmacy-no-sidebar #sidebar-content,
html.pharmacy-no-sidebar #pm-sidebar-content,
body.pharmacy-no-sidebar #sidebar-content,
body.pharmacy-no-sidebar #pm-sidebar-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Pharmacy split layout: dedicated left navigation + right content panel */
html.pharmacy-split-layout #sidebar-container,
body.pharmacy-split-layout #sidebar-container {
  --app-sidebar-width: 300px;
  width: var(--app-sidebar-width) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #0f172a !important;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
}

html.pharmacy-split-layout #sidebar-container .sidebar-header,
body.pharmacy-split-layout #sidebar-container .sidebar-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.32);
  padding-bottom: 0.8rem;
  box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.9);
}

html.pharmacy-split-layout #sidebar-container .sidebar-title,
body.pharmacy-split-layout #sidebar-container .sidebar-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

html.pharmacy-split-layout #sidebar-container .nav,
body.pharmacy-split-layout #sidebar-container .nav {
  padding-top: 0.55rem;
}

html.pharmacy-split-layout #sidebar-container .sidebar-nav-body,
body.pharmacy-split-layout #sidebar-container .sidebar-nav-body {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.2rem;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Pharmacy-only submenu animation lock: max-height transitions, no display toggling */
html.pharmacy-split-layout #sidebar-container .nav .has-submenu > .submenu-toggle .submenu-arrow,
body.pharmacy-split-layout #sidebar-container .nav .has-submenu > .submenu-toggle .submenu-arrow {
  right: 12px !important;
}

html.pharmacy-split-layout #sidebar-container .submenu,
body.pharmacy-split-layout #sidebar-container .submenu {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  transition: max-height 0.26s ease, opacity 0.2s ease !important;
  will-change: max-height, opacity;
}

html.pharmacy-split-layout #sidebar-container .nav-item.has-submenu.open > .submenu,
body.pharmacy-split-layout #sidebar-container .nav-item.has-submenu.open > .submenu {
  display: block !important;
  max-height: 560px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.pharmacy-split-layout #sidebar-container .nav-item.has-submenu:not(.open) > .submenu,
body.pharmacy-split-layout #sidebar-container .nav-item.has-submenu:not(.open) > .submenu {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

html.pharmacy-split-layout #main-content-area,
body.pharmacy-split-layout #main-content-area {
  margin-left: var(--app-sidebar-width) !important;
  width: calc(100% - var(--app-sidebar-width)) !important;
  min-height: 100vh;
}

@media (max-width: 991.98px) {
  html.pharmacy-split-layout #main-content-area,
  body.pharmacy-split-layout #main-content-area {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* FINAL OVERRIDE: keep this at end so nothing can re-show PM sidebar */
html.pm-no-sidebar #sidebar-container,
html.pm-no-sidebar #pm-sidebar-container,
html.pm-no-sidebar #sidebar-content,
html.pm-no-sidebar #pm-sidebar-content,
body.pm-no-sidebar #sidebar-container,
body.pm-no-sidebar #pm-sidebar-container,
body.pm-no-sidebar #sidebar-content,
body.pm-no-sidebar #pm-sidebar-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Header Container - Consistent positioning on ALL reseller pages */
/* CRITICAL: These rules ensure header appears in the SAME position on ALL pages */
#header-container {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 2.5rem !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 10;
  overflow: visible !important;
}

/* Header brand is pharmacy-specific; hidden by default */
.reseller-header-brand {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.reseller-header-brand-link {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.reseller-header-brand-link:hover,
.reseller-header-brand-link:focus {
  color: inherit;
  text-decoration: none;
}
.reseller-header-brand #headerBrandLogo {
  width: 34px;
  height: 34px;
  border-radius: 0.4rem;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px;
  display: none;
}
.reseller-header-brand #headerBrandTitle {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure notification dropdown is not clipped */
#header-container .dropdown,
#header-container .dropdown.me-3 {
  overflow: visible !important;
}

/* Move header content up by reducing margins - AGGRESSIVE */
#header-container > .d-flex {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce spacing in header h1 - AGGRESSIVE */
#header-container h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}

/* Ensure header content is properly aligned - buttons on right only */
#header-container > .d-flex {
  width: 100%;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Ensure right side buttons are aligned to the right - allow wrap so all buttons stay visible */
#header-container .d-flex.align-items-center {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
}

/* Ensure header appears at the top of main content area - OVERRIDE any inline styles */
#main-content-area > #header-container,
#main-content-area > .container-fluid > #header-container,
.container-fluid > #header-container {
  margin-bottom: 2.5rem !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  position: relative !important;
  top: 0 !important;
}

/* Force consistent container-fluid padding - override inline styles - MINIMAL TOP PADDING */
#main-content-area > .container-fluid {
  padding-top: 0.25rem !important;
  padding-bottom: 1rem !important;
}

/* Remove ALL top spacing from container-fluid when header is present */
#main-content-area > .container-fluid:has(#header-container) {
  padding-top: 0 !important;
}

/* Alternative selector for browsers that don't support :has() */
#main-content-area > .container-fluid > #header-container:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove any margin-top that might push header down */
#main-content-area > .container-fluid[style*="margin-top"],
#main-content-area > .container-fluid[style*="padding-top"] {
  margin-top: 0 !important;
}

/* Reseller header toolbar — grouped actions, spacing via gap (no double margins) */
#header-container .reseller-header-actions {
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.dark-mode #header-container .reseller-header-actions {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 14px rgba(0, 0, 0, 0.25);
}

#header-container .reseller-header-actions > .me-3 {
  margin-right: 0 !important;
}

#header-container .reseller-header-icon-btn {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  padding: 0 !important;
}

/* Header toolbar: single neutral color for every control (icons + text) */
#header-container .reseller-header-actions .btn,
#header-container .reseller-header-actions a.btn {
  border-color: #d1d5db !important;
  color: #374151 !important;
  background-color: #fff !important;
}

#header-container .reseller-header-actions .btn:hover,
#header-container .reseller-header-actions a.btn:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

#header-container .reseller-header-actions .btn.active,
#header-container .reseller-header-actions .btn[aria-pressed="true"] {
  background-color: #f3f4f6 !important;
  border-color: #6b7280 !important;
  color: #111827 !important;
}

body.dark-mode #header-container .reseller-header-actions .btn,
body.dark-mode #header-container .reseller-header-actions a.btn {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

body.dark-mode #header-container .reseller-header-actions .btn:hover,
body.dark-mode #header-container .reseller-header-actions a.btn:hover {
  background-color: #404040 !important;
  border-color: #555555 !important;
  color: #ffffff !important;
}

body.dark-mode #header-container .reseller-header-actions .btn.active,
body.dark-mode #header-container .reseller-header-actions .btn[aria-pressed="true"] {
  background-color: #374151 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
}

#header-container .reseller-header-actions .btn-sm {
  min-height: 2.125rem;
}

#header-container .reseller-header-profile-btn {
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#header-container .reseller-header-profile-menu {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.5rem;
  margin-top: 0.35rem !important;
}

body.dark-mode #header-container .reseller-header-profile-menu {
  border-color: rgba(148, 163, 184, 0.2);
}

/* Profile name styling - consistent across all pages */
.profile-name {
  font-weight: 500;
  color: #374151 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.dark-mode .profile-name {
  color: #e5e7eb !important;
}

/* Ensure Font Awesome icons are visible - CRITICAL for icon display */
.fas, .far, .fal, .fab, .fa, i[class*="fa-"] {
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
  font-weight: 900 !important;
  width: auto !important;
  height: auto !important;
}

/* Ensure Font Awesome solid icons */
.fas, i.fas {
  font-weight: 900 !important;
}

/* Ensure Font Awesome regular icons */
.far, i.far {
  font-weight: 400 !important;
}

/* Ensure Font Awesome light icons */
.fal, i.fal {
  font-weight: 300 !important;
}

/* Ensure Font Awesome brand icons */
.fab, i.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* Ensure Dripicons are visible */
.dripicons {
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure header icons are visible */
#header-container .fas,
#header-container .far,
#header-container .fal,
#header-container .fab,
#header-container .fa,
#header-container .dripicons,
#header-container i,
#header-container i[class*="fa-"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-style: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Dripicons" !important;
}

/* Force Font Awesome icons in header to use correct font */
#header-container .fas,
#header-container .far,
#header-container .fal,
#header-container .fab,
#header-container .fa,
#header-container i[class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
}

#header-container .fas {
  font-weight: 900 !important;
}

#header-container .far {
  font-weight: 400 !important;
}

#header-container .dripicons,
#header-container [class*="dripicons-"] {
  font-family: "Dripicons" !important;
  font-weight: normal !important;
}

/* Ensure Dripicons in header are visible */
#header-container .dripicons-brightness-max,
#header-container .dripicons-brightness-low,
#header-container .dripicons-expand {
  font-family: "Dripicons" !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force profile name to be visible and have content - ensure clickable */
#header-container #profileName.profile-name,
#profileDropdown .profile-name,
#profileDropdownContainer .profile-name {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 50px !important;
  color: #374151 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body.dark-mode #header-container #profileName.profile-name,
body.dark-mode #profileDropdown .profile-name,
body.dark-mode #profileDropdownContainer .profile-name {
  color: #e5e7eb !important;
}

/* Profile dropdown - smooth open/close animation */
#profileDropdownMenu {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  transform-origin: top right;
}
#profileDropdownMenu:not(.show) {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
}
#profileDropdownMenu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Profile button - smooth hover/active feedback */
#profileDropdown {
  transition: background-color 0.15s ease, transform 0.1s ease;
}
#profileDropdown:active {
  transform: scale(0.98);
}

/* Dark Mode: Main Content */
body.dark-mode #main-content-area {
  background-color: #0b1220;
  color: #e5e7eb;
  --bs-body-color: #e5e7eb;
  --bs-secondary-color: #cbd5e1;
  --bs-heading-color: #f9fafb;
  --bs-emphasis-color: #f9fafb;
  --bs-border-color: #374151;
}

/* Dark mode: all text and UI in main content uses light colors */
body.dark-mode #main-content-area .text-dark,
body.dark-mode #main-content-area h1,
body.dark-mode #main-content-area h2,
body.dark-mode #main-content-area h3,
body.dark-mode #main-content-area h4,
body.dark-mode #main-content-area h5,
body.dark-mode #main-content-area h6 {
  color: #ffffff !important;
}

body.dark-mode #main-content-area .text-muted {
  color: #9ca3af !important;
}

body.dark-mode #main-content-area a:not(.btn) {
  color: #93c5fd;
}

body.dark-mode #main-content-area a:not(.btn):hover {
  color: #bfdbfe;
}

/* Dark mode: tables */
body.dark-mode #main-content-area .table,
body.dark-mode #main-content-area .table th,
body.dark-mode #main-content-area .table td {
  color: #e5e7eb !important;
  border-color: #374151 !important;
}

body.dark-mode #main-content-area .table th {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
}

body.dark-mode #main-content-area .table td {
  background-color: #111827 !important;
}

body.dark-mode #main-content-area .table-hover tbody tr:hover td {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

/* Dark mode: form controls in main content */
body.dark-mode #main-content-area .form-control,
body.dark-mode #main-content-area .form-select {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

body.dark-mode #main-content-area .form-control::placeholder {
  color: #9ca3af;
}

/* Dark mode: cards in main content */
body.dark-mode #main-content-area .card {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .card-body {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

/* Dark mode: labels and small text in main content */
body.dark-mode #main-content-area label,
body.dark-mode #main-content-area .form-label {
  color: #e5e7eb !important;
}

/* Dark mode: card headers/footers — global .card-header was forcing white bg while text stayed light (unreadable) */
body.dark-mode #main-content-area .card-header {
  background-color: #111827 !important;
  border-bottom-color: #374151 !important;
  color: #f3f4f6 !important;
}

body.dark-mode #main-content-area .card-header h1,
body.dark-mode #main-content-area .card-header h2,
body.dark-mode #main-content-area .card-header h3,
body.dark-mode #main-content-area .card-header h4,
body.dark-mode #main-content-area .card-header h5,
body.dark-mode #main-content-area .card-header h6,
body.dark-mode #main-content-area .card-header .card-title {
  color: #f9fafb !important;
}

body.dark-mode #main-content-area .card-footer {
  background-color: #111827 !important;
  border-top-color: #374151 !important;
  color: #e5e7eb !important;
}

/* Bootstrap 5 text utilities often keep dark ink on dark cards without these */
body.dark-mode #main-content-area .text-body {
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .text-secondary {
  color: #cbd5e1 !important;
}

body.dark-mode #main-content-area p,
body.dark-mode #main-content-area li:not(.dropdown-item) {
  color: #e5e7eb;
}

body.dark-mode #main-content-area small,
body.dark-mode #main-content-area .small:not(.text-muted) {
  color: #cbd5e1 !important;
}

body.dark-mode #main-content-area .lead {
  color: #e5e7eb !important;
}

/* Light utility backgrounds on dark pages — invert or match surface */
body.dark-mode #main-content-area .bg-white {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .bg-light {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .border,
body.dark-mode #main-content-area .border-top,
body.dark-mode #main-content-area .border-bottom {
  border-color: #374151 !important;
}

body.dark-mode #main-content-area .input-group-text {
  background-color: #111827 !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .list-group-item {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .list-group-item-action:hover {
  background-color: #111827 !important;
  color: #f9fafb !important;
}

/* Purchase / inline “card-clean” style blocks (white bg in page CSS) */
body.dark-mode #main-content-area .hero,
body.dark-mode #main-content-area .card-clean,
body.dark-mode #main-content-area .summary {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .ttl {
  color: #cbd5e1 !important;
  border-bottom-color: #374151 !important;
}

body.dark-mode #main-content-area .chip:not(.active) {
  background-color: #111827 !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .sum-head {
  background: linear-gradient(135deg, #134e4a 0%, #1e293b 100%) !important;
  color: #ecfdf5 !important;
  border-bottom: 1px solid #374151 !important;
}

body.dark-mode #main-content-area .sum-row {
  border-top-color: #374151 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .sum-row.total {
  background: rgba(13, 148, 136, 0.15) !important;
  color: #5eead4 !important;
}

body.dark-mode #main-content-area .line-head {
  background: #111827 !important;
  color: #cbd5e1 !important;
}

body.dark-mode #main-content-area .alert-info,
body.dark-mode #main-content-area .alert-primary {
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #dbeafe !important;
}

body.dark-mode #main-content-area .alert-secondary {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}

body.dark-mode #main-content-area .alert-success {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #a7f3d0 !important;
}

body.dark-mode #main-content-area .breadcrumb-item,
body.dark-mode #main-content-area .breadcrumb-item.active {
  color: #cbd5e1 !important;
}

body.dark-mode #main-content-area .breadcrumb-item + .breadcrumb-item::before {
  color: #64748b !important;
}

body.dark-mode #main-content-area .nav-tabs .nav-link {
  color: #cbd5e1 !important;
}

body.dark-mode #main-content-area .nav-tabs .nav-link.active {
  background-color: #1f2937 !important;
  border-color: #374151 #374151 #1f2937 !important;
  color: #f9fafb !important;
}

/* Dark mode: Bootstrap modals (Product Details, Delete, etc.) */
body.dark-mode .modal-content {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

body.dark-mode .modal-header {
  background-color: #1f2937 !important;
  border-bottom-color: #374151 !important;
  color: #ffffff !important;
}

body.dark-mode .modal-header .modal-title,
body.dark-mode .modal-header .btn-close {
  color: #ffffff !important;
}

body.dark-mode .modal-body {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

body.dark-mode .modal-body strong {
  color: #f3f4f6 !important;
}

body.dark-mode .modal-footer {
  background-color: #1f2937 !important;
  border-top-color: #374151 !important;
}

body.dark-mode .modal-body .form-control {
  background-color: #111827 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

body.dark-mode .modal-body .text-muted {
  color: #9ca3af !important;
}

/* Sidebar Styles - allow full nav list to show at 100% zoom with scroll */
.sidebar {
  min-height: 100%;
  height: auto;
  background-color: #1e293b;
  color: white;
}

#sidebar-container .sidebar .nav {
  overflow: visible;
}

/* Dark Mode: Sidebar */
body.dark-mode .sidebar,
body.dark-mode #sidebar-container {
  background-color: #0f172a;
  color: #e5e7eb;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #334155;
  /* Do not clip the brand: overflow was cutting "Kroykari" at the main-content edge */
  overflow-x: visible;
  overflow-y: visible;
  min-height: 104px;
  box-sizing: border-box;
}

/* Stack logo + title so a wide .logo-preview never shoves the title under #main-content-area */
.sidebar-header .d-flex.align-items-center.justify-content-center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

/* Language Switcher in Header */
#languageDropdown {
  min-width: 70px;
  transition: all 0.2s ease;
}

#languageDropdown:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode #languageDropdown:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.language-dropdown-menu {
  min-width: 220px;
  max-height: 400px;
  overflow-y: auto;
}

.language-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

.language-option:hover {
  background-color: #f8f9fa;
}

body.dark-mode .language-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.language-option.active {
  background-color: #e7f1ff;
  font-weight: 600;
}

body.dark-mode .language-option.active {
  background-color: rgba(13, 110, 253, 0.2);
}

.language-name {
  flex: 1;
  text-align: left;
}

.language-code {
  font-size: 0.85em;
  color: #6c757d;
  font-weight: 600;
  margin-left: 12px;
}

body.dark-mode .language-code {
  color: #adb5bd;
}

.language-option.active .language-code {
  color: #0d6efd;
}

body.dark-mode .language-option.active .language-code {
  color: #66b3ff;
}

/* Logo Styles - center without taking the full row beside .sidebar-title */
.logo-preview {
  padding: 10px 20px !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-height: 64px !important;
}

.logo-img,
#logo-img,
.logo-img img,
img.logo-img,
#sidebar-content img#logo-img,
.sidebar-header img,
.sidebar img.logo-img {
  max-width: 120px !important;
  max-height: 60px !important;
  width: 120px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}

.sidebar-title {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  text-align: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 4px;
  padding-right: 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar logo: size only — no frame/border around logo area (overrides sidebar-loader.js) */
#sidebar-container .sidebar-header .d-flex.align-items-center.justify-content-center {
  gap: 0.5rem;
}

#sidebar-container .logo-preview {
  padding: 0.2rem 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#sidebar-container .sidebar-header #logo-img,
#sidebar-container .sidebar-header .logo-img,
#sidebar-container img#logo-img {
  max-width: 152px !important;
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0.35rem !important;
  box-shadow: none !important;
  border: none !important;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Sidebar nav: force vertical stacking (Bootstrap's .nav uses display:flex which causes horizontal layout) */
.sidebar .nav,
#sidebar-content .nav {
  display: block !important;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 5 !important;
  position: relative !important;
}

/* Dark Mode: Nav Links */
body.dark-mode .nav-link {
  color: #9ca3af;
}
body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
  background-color: #111827;
  color: #e5e7eb;
  border-left-color: #3b82f6;
}

/* Reduce right padding so arrows can sit closer to the edge */
/* (reverted) keep default link padding */

.nav-link:hover {
  background-color: #334155;
  color: white;
  border-left-color: #3b82f6;
}

.nav-link.active {
  background-color: #334155;
  color: white;
  border-left-color: #3b82f6;
}

.nav-link i {
  width: 20px;
  margin-right: 12px;
  text-align: center;
  flex-shrink: 0;
}

.nav-link span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Reseller sidebar: show full menu labels. Global .nav-link span uses ellipsis; Jewelry nested
 * sections (.jw-section-toggle) and long DB-driven names were truncating while .submenu-link
 * rows already force visible overflow — this aligns behavior for all #sidebar-content links.
 */
#sidebar-content .nav-link span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  line-height: 1.35 !important;
  min-width: 0;
}

/* Submenu Styles */
.has-submenu .submenu-toggle,
.has-submenu > .nav-link,
.nav-item.has-submenu > .nav-link {
  position: relative;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10 !important;
  user-select: none !important;
}

.submenu-toggle:hover,
.has-submenu > .nav-link:hover {
  background-color: #334155 !important;
}

.submenu-toggle *,
.has-submenu > .nav-link * {
  pointer-events: none !important;
}

/* Ensure submenu arrow is clickable */
.submenu-arrow {
  pointer-events: none !important;
}

.submenu-arrow {
  position: absolute;
  right: calc(-280px + 100% - 6px); /* Position 6px from right edge - little gap */
  top: 50%;
  transform: translateY(-50%); /* point right by default */
  transition: transform 0.2s ease;
  width: 16px;
  text-align: center;
  color: #cbd5e1;
  pointer-events: none;
}

/* Enforce arrow alignment regardless of other styles */
.sidebar .nav .has-submenu > .submenu-toggle .submenu-arrow {
  position: absolute !important;
  right: calc(-280px + 100% - 6px) !important; /* Position 6px from right edge - little gap */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
}
.sidebar .nav .has-submenu.open > .submenu-toggle .submenu-arrow {
  transform: translateY(-50%) rotate(90deg) !important;
}

.has-submenu.open .submenu-arrow {
  transform: translateY(-50%) rotate(90deg); /* point down when open */
}

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #0f172a;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: auto !important;
  display: block !important;
}

/* Dark Mode: Submenu */
body.dark-mode .submenu {
  background-color: #0b1220;
}

/* Clean submenu styles - Smooth behavior - Allow all items to be visible */
.has-submenu.open .submenu,
.nav-item.open .submenu,
.nav-item.has-submenu.open .submenu,
.nav-item.has-submenu.open > .submenu,
li.nav-item.has-submenu.open .submenu,
li.nav-item.has-submenu.open > ul.submenu,
.nav-item.has-submenu.open ul.submenu {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  transition: max-height 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Force submenu items to be visible when parent is open */
.has-submenu.open .submenu .submenu-item,
.nav-item.open .submenu .submenu-item,
.nav-item.has-submenu.open .submenu .submenu-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}
/* Ensure submenu and items show inside #sidebar-content when parent has .open */
#sidebar-content .nav-item.has-submenu.open .submenu,
#sidebar-content .nav-item.has-submenu.open > .submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
}
#sidebar-content .nav-item.has-submenu.open .submenu .submenu-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure submenu is hidden when not open - use display:none to prevent text bleed-through/overlap */
.has-submenu:not(.open) .submenu,
.nav-item.has-submenu:not(.open) .submenu,
.nav-item.has-submenu:not(.open) > .submenu,
li.nav-item.has-submenu:not(.open) .submenu,
li.nav-item.has-submenu:not(.open) > ul.submenu,
.nav-item.has-submenu:not(.open) ul.submenu {
  max-height: 0 !important;
  overflow: hidden !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Jewelry Management: nested section rows — full-width tap, chevron flush to right corner */
#sidebar-content li.jw-nav-section > .jw-section-toggle {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  min-height: 48px !important;
  padding: 0.55rem 2.85rem 0.55rem 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.07);
  touch-action: manipulation;
}
#sidebar-content .jw-nav-section > .jw-section-toggle .jw-section-folder-icon {
  flex-shrink: 0 !important;
  width: 1.15rem;
  text-align: center;
  margin-right: 0.4rem !important;
  opacity: 0.85;
  font-size: 0.8rem;
}
#sidebar-content .jw-nav-section > .jw-section-toggle > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
/* Chevron sits in the visual corner (nested submenu width ≠ 280px — avoid calc(-280px+100%)) */
#sidebar-content .jw-nav-section > .jw-section-toggle .jw-section-arrow {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  opacity: 0.9 !important;
  color: #e2e8f0 !important;
  box-sizing: border-box !important;
}
#sidebar-content .jw-nav-section.open > .jw-section-toggle .jw-section-arrow {
  transform: translateY(-50%) rotate(90deg) !important;
}
#sidebar-content .jw-nav-section:not(.open) > ul.jw-nested-submenu {
  max-height: 0 !important;
  overflow: hidden !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#sidebar-content .jw-nav-section.open > ul.jw-nested-submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  background-color: rgba(0, 0, 0, 0.12) !important;
  padding: 0.15rem 0 0.35rem 0 !important;
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
}
#sidebar-content .jw-nested-submenu .submenu-link {
  padding-left: 2.25rem !important;
  font-size: 0.8rem !important;
}

/*
 * Jewelry: when Jewelry Management is open, broad ".open ul.submenu" was exposing every
 * nested section’s links on top of section headers. Keep closed sections’ lists removed from layout.
 */
#sidebar-content .nav-item.has-submenu.open li.jw-nav-section:not(.open) > ul.jw-nested-submenu {
  display: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}
#sidebar-content .nav-item.has-submenu.open li.jw-nav-section.open > ul.jw-nested-submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  height: auto !important;
  pointer-events: auto !important;
}
#sidebar-content .nav-item.has-submenu.open li.jw-nav-section:not(.open) .submenu-item {
  display: none !important;
}
#sidebar-content .nav-item.has-submenu.open li.jw-nav-section.open .submenu-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Containment: prevent closed submenu content from bleeding through parent */
.nav-item.has-submenu:not(.open) {
  overflow: hidden;
}

.has-submenu .submenu {
  transition: max-height 0.3s ease;
}

.submenu-item {
  margin: 0;
  overflow: visible !important;
  width: 100%;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.submenu-link {
  display: flex !important;
  align-items: center;
  padding: 10px 35px 10px 50px;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  background-color: #1e293b; /* Match main navigation background */
  box-sizing: border-box;
  width: 100%;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dark Mode: Submenu Link */
body.dark-mode .submenu-link {
  background-color: #0f172a;
  color: #9ca3af;
}
body.dark-mode .submenu-link:hover {
  background-color: #111827;
  color: #e5e7eb;
}

.submenu-link:hover {
  background-color: #1e293b;
  color: white;
}

.submenu-link i {
  width: 16px;
  margin-right: 8px;
  text-align: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.submenu-link span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  padding-right: 10px;
}

/* Force full submenu labels — wrap inside sidebar width (nowrap + overflow-x on #sidebar-container clips long text) */
#sidebar-content .submenu-link span {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

/* Submenu group title (e.g. Contacts under Purchase) */
.submenu-item.submenu-group-title {
  padding: 8px 35px 4px 50px;
  margin-top: 6px;
}
.submenu-item.submenu-group-title:first-child {
  margin-top: 0;
}
.submenu-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
body.dark-mode .submenu-label {
  color: #94a3b8;
}

/* Logout Section */
.logout-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  border-top: 1px solid #334155;
  background-color: #1e293b;
}

.logout-wrap .nav-link {
  color: #ef4444;
}

.logout-wrap .nav-link:hover {
  background-color: #334155;
  color: #fca5a5;
}

/* Card Styles */
.card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 8px 8px 0 0 !important;
}

.border-left-primary {
  border-left: 4px solid #3b82f6 !important;
}

.border-left-success {
  border-left: 4px solid #10b981 !important;
}

.border-left-info {
  border-left: 4px solid #06b6d4 !important;
}

.border-left-warning {
  border-left: 4px solid #f59e0b !important;
}

/* Mobile/tablet drawer rules live in responsive.css (imported below). */

/* Button Styles */
.btn-block {
  display: block;
  width: 100%;
}

/* Table Styles */
.table-responsive {
  border-radius: 8px;
  overflow: hidden;
}

.table th {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  color: #374151;
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Profile Menu Styles */
.profile-avatar {
  display: flex;
  align-items: center;
}

.profile-name {
  font-weight: 500;
  color: #374151;
}

.dropdown-toggle::after {
  margin-left: 0.5rem;
}

.dropdown-menu {
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  padding: 0.5rem 0;
  min-width: 200px;
}

.dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  transition: background-color 0.15s ease-in-out;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.dropdown-item.text-danger:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.dropdown-divider {
  margin: 0.5rem 0;
  border-top: 1px solid #e5e7eb;
}

/* Profile button styling */
.btn-outline-secondary {
  border-color: #d1d5db;
  color: #374151;
  background-color: white;
}

.btn-outline-secondary:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}

.btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(156, 163, 175, 0.25);
}

/* Dark Mode Styles */
.dark-mode {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.dark-mode .card {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

.dark-mode .card-body {
  color: #ffffff !important;
}

.dark-mode .text-dark {
  color: #ffffff !important;
}

.dark-mode .text-gray-800 {
  color: #ffffff !important;
}

.dark-mode .text-gray-300 {
  color: #cccccc !important;
}

.dark-mode .border-left-primary {
  border-left-color: #4e73df !important;
}

.dark-mode .border-left-success {
  border-left-color: #1cc88a !important;
}

.dark-mode .border-left-info {
  border-left-color: #36b9cc !important;
}

.dark-mode .border-left-warning {
  border-left-color: #f6c23e !important;
}

.dark-mode .btn-outline-secondary {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

.dark-mode .btn-outline-secondary:hover {
  background-color: #404040 !important;
  border-color: #555555 !important;
  color: #ffffff !important;
}

.dark-mode .btn-outline-primary {
  background-color: #2d2d2d !important;
  border-color: #4e73df !important;
  color: #ffffff !important;
}

.dark-mode .btn-outline-primary:hover {
  background-color: #4e73df !important;
  border-color: #4e73df !important;
  color: #ffffff !important;
}

.dark-mode .dropdown-menu {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
}

.dark-mode .dropdown-item {
  color: #ffffff !important;
}

.dark-mode .dropdown-item:hover {
  background-color: #404040 !important;
  color: #ffffff !important;
}

.dark-mode .dropdown-divider {
  border-color: #404040 !important;
}

/* Dark mode: ensure text is visible on yellow / warning backgrounds */
.dark-mode .alert-warning,
.dark-mode .bg-warning,
.dark-mode .bg-warning-subtle,
.dark-mode .badge.bg-warning,
.dark-mode .pending-stats,
.dark-mode .expiry-warning {
  color: #111827 !important; /* dark slate text for contrast on light yellow blocks */
}

/* Dark mode: keep warning text (e.g. "Low Stock") bright on dark cards */
.dark-mode #main-content-area .text-warning {
  color: #fbbf24 !important;
}

/* Dark mode: improve contrast for Quick Actions cards */
.dark-mode #main-content-area .quick-action-card.qa-primary,
.dark-mode #main-content-area .quick-action-card.qa-success,
.dark-mode #main-content-area .quick-action-card.qa-info,
.dark-mode #main-content-area .quick-action-card.qa-warning,
.dark-mode #main-content-area .quick-action-card.qa-muted {
  background: linear-gradient(135deg, rgba(31,41,55,0.96), rgba(15,23,42,0.98)) !important;
  color: #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

.dark-mode #main-content-area .quick-action-card .quick-action-icon {
  background: rgba(15,23,42,0.75) !important;
  color: #e5e7eb !important;
}

.dark-mode #main-content-area .quick-action-card .quick-action-sub {
  color: #9ca3af !important;
}

/* Brightness & Expand Toggle Button Styles - ensure always visible */
#brightnessToggle,
#expandToggle,
#header-container .me-3:has(#brightnessToggle),
#header-container .me-3:has(#expandToggle) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
  flex-shrink: 0 !important;
}

#brightnessToggle,
#expandToggle {
  min-width: 38px !important;
}

#brightnessToggle:hover,
#expandToggle:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

#brightnessToggle:active,
#expandToggle:active {
  transform: scale(0.95);
}

#brightnessToggle i,
#expandToggle i {
  font-size: 1.1rem;
  transition: all 0.3s ease;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#brightnessToggle:hover i,
#expandToggle:hover i {
  color: inherit !important;
}

/* Pagination Styles - Bootstrap 5 Compatible */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  margin: 20px 0;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.page-item {
  display: list-item;
  margin: 0 2px;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  line-height: 1.25;
  color: #3b82f6;
  background-color: #fff;
  border: 1px solid #dee2e6;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border-radius: 0.375rem;
  min-width: 38px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.page-link:hover:not(.disabled):not([aria-disabled="true"]) {
  z-index: 2;
  color: #2563eb;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus {
  z-index: 3;
  color: #2563eb;
  background-color: #e9ecef;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.page-item:first-child {
  margin-left: 0;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.page-item:last-child {
  margin-right: 0;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #3b82f6;
  border-color: #3b82f6;
  cursor: default;
  pointer-events: none;
}

.page-item.active .page-link:hover {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
  opacity: 0.6;
}

.page-link[aria-disabled="true"],
.page-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
  opacity: 0.6;
}

/* Dark Mode: Pagination */
body.dark-mode .pagination {
  color: #e5e7eb;
}

body.dark-mode .page-link {
  color: #60a5fa;
  background-color: #111827;
  border-color: #374151;
}

body.dark-mode .page-link:hover:not(.disabled):not([aria-disabled="true"]) {
  color: #93c5fd;
  background-color: #1f2937;
  border-color: #4b5563;
}

body.dark-mode .page-link:focus {
  color: #93c5fd;
  background-color: #1f2937;
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
}

body.dark-mode .page-item.active .page-link {
  color: #fff;
  background-color: #3b82f6;
  border-color: #3b82f6;
}

body.dark-mode .page-item.active .page-link:hover {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

body.dark-mode .page-item.disabled .page-link,
body.dark-mode .page-link[aria-disabled="true"],
body.dark-mode .page-link.disabled {
  color: #6b7280;
  background-color: #111827;
  border-color: #374151;
  opacity: 0.5;
}

/* Responsive Pagination */
@media (max-width: 576px) {
  .pagination {
    margin: 15px 0;
    gap: 2px;
  }
  
  .page-item {
    margin: 0 1px;
  }
  
  .page-link {
    padding: 0.375rem 0.5rem;
    min-width: 32px;
    font-size: 0.875rem;
  }
}
/* Target ONLY the Calculator button */
button[onclick="openCalculator()"] {
  font-size: 0 !important;      /* hides text */
}

/* Restore normal size for the icon inside it */
button[onclick="openCalculator()"] i {
  font-size: 1rem !important;   /* or whatever size you prefer */
}

/* Jewelry reseller: align purchase forms with Product Manager purchase UI */
#main-content-area .jf-purchase-card {
  border: 1px solid rgba(30, 41, 59, 0.1);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
#main-content-area .jf-purchase-card > .card-header {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid rgba(30, 41, 59, 0.1);
}
#main-content-area .jf-purchase-form .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
}
#main-content-area .jf-purchase-form .form-control,
#main-content-area .jf-purchase-form .form-select {
  border-radius: 8px;
  border-color: #e2e8f0;
}
#main-content-area .jf-purchase-form .form-control:focus,
#main-content-area .jf-purchase-form .form-select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}
#main-content-area .jf-purchase-form .jf-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
#main-content-area .jf-purchase-form .jf-section-title i {
  font-size: 0.72rem;
  color: #0d9488;
}
#main-content-area .jf-purchase-lines-wrap {
  background: #fff;
  border: 1px solid rgba(30, 41, 59, 0.1) !important;
  border-radius: 10px !important;
}
#main-content-area .jf-purchase-lines-head {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
#main-content-area .jf-purchase-lines-head .small {
  font-size: 0.78rem !important;
}
#main-content-area .jf-purchase-lines-body .jf-pl {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  transition: background-color 0.15s ease;
}
#main-content-area .jf-purchase-lines-body .jf-pl:last-child {
  border-bottom: none;
}
#main-content-area .jf-purchase-lines-body .jf-pl:hover {
  background-color: #f8fafc;
}
#main-content-area .jf-purchase-lines-footer {
  background: #f8fafc;
}
#main-content-area #jf-addl,
#main-content-area #jf-psub {
  border-radius: 8px;
  font-weight: 600;
}

body.dark-mode #main-content-area .jf-purchase-card > .card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #main-content-area .jf-purchase-lines-wrap {
  background: #1f2937 !important;
  border-color: #374151 !important;
}
body.dark-mode #main-content-area .jf-purchase-lines-head {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
  border-bottom-color: #374151 !important;
}
body.dark-mode #main-content-area .jf-purchase-lines-body .jf-pl {
  border-bottom-color: #374151;
}
body.dark-mode #main-content-area .jf-purchase-lines-body .jf-pl:hover {
  background-color: rgba(30, 41, 59, 0.6) !important;
}
body.dark-mode #main-content-area .jf-purchase-lines-footer {
  background: rgba(17, 24, 39, 0.85) !important;
  border-top-color: #374151 !important;
}
body.dark-mode #main-content-area .jf-purchase-form .jf-section-title {
  color: #94a3b8 !important;
  border-bottom-color: #374151 !important;
}

/* -------------------------------------------------------------------------- */
/* Product Manager module: sidebar polish (teal accent, matches PM dashboards) */
/* html/body .pm-module-nav is set by sidebar-nav-sync.js on /reseller/product-manager/* */
/* -------------------------------------------------------------------------- */
html.pm-module-nav {
  --sidebar-bg: #f5f6f8;
  --pm-nav-accent: #2563eb;
  --pm-nav-accent-strong: #1d4ed8;
  --pm-nav-accent-glow: rgba(37, 99, 235, 0.18);
  --pm-nav-surface: #f3f4f6;
  --pm-nav-surface-mid: #eceff3;
  --pm-nav-elevated: #ffffff;
  --pm-nav-border: #d5d9e0;
  --pm-nav-text: #1f2937;
  --pm-nav-muted: #6b7280;
}

html.pm-module-nav #sidebar-container {
  background-color: var(--sidebar-bg) !important;
  background: linear-gradient(180deg, var(--sidebar-bg, #f5f6f8) 0%, var(--pm-nav-sidebar-bg-end, #eef1f5) 100%) !important;
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.08);
  font-family: var(--pm-nav-font-family, inherit);
}

#sidebar-container[data-sidebar-scope="product-manager"] {
  background-color: var(--sidebar-bg) !important;
}

html.pm-module-nav #pm-sidebar-container,
#pm-sidebar-container[data-sidebar-scope="product-manager"] {
  background-color: var(--sidebar-bg) !important;
  background: linear-gradient(180deg, #f5f6f8 0%, #eef1f5 100%) !important;
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.08);
}

html.pm-module-nav #sidebar-container .sidebar {
  background: transparent !important;
  color: var(--pm-nav-text);
}

html.pm-module-nav #sidebar-container .sidebar-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  padding: 1rem 1rem 0.85rem !important;
  border-bottom: 1px solid var(--pm-nav-border) !important;
  background: var(--pm-nav-sidebar-header-bg, var(--sidebar-bg, #f5f6f8)) !important;
  background: linear-gradient(180deg, var(--sidebar-bg, #f5f6f8) 0%, var(--pm-nav-sidebar-bg-end, #eef1f5) 100%) !important;
  min-height: 88px !important;
  box-sizing: border-box !important;
}

html.pm-module-nav #sidebar-content[data-nav-source="pm-static"],
html.pm-module-nav #sidebar-content[data-pm-visible="1"],
html.pm-module-nav #sidebar-content[data-pm-sidebar-loaded="true"] {
  visibility: visible !important;
  opacity: 1 !important;
  transition: none !important;
}

/* PM shell stability: fixed chrome dimensions, no transition flicker */
html.pm-shell-stable,
body.pm-shell-stable {
  --app-sidebar-width: 280px;
  --pm-logo-max-width: 160px;
  --pm-logo-max-height: 68px;
  --pm-header-min-height: 52px;
}

html.pm-shell-stable #sidebar-container,
body.pm-shell-stable #sidebar-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 280px !important;
  height: 100vh !important;
  z-index: 1100 !important;
  transition: none !important;
}

html.pm-shell-stable #pm-fixed-header-slot,
body.pm-shell-stable #pm-fixed-header-slot {
  margin-left: 280px !important;
  min-height: var(--pm-header-min-height) !important;
  padding: 0.25rem 1.5rem 0 !important;
  box-sizing: border-box !important;
  transition: none !important;
}

html.pm-shell-stable #pm-fixed-header-slot #header-container {
  min-height: var(--pm-header-min-height) !important;
  margin-bottom: 0.75rem !important;
}

html.pm-shell-stable #main-content-area,
body.pm-shell-stable #main-content-area {
  margin-left: 280px !important;
  transition: none !important;
}

html.pm-menu-init #sidebar-container .submenu,
html.pm-menu-init #sidebar-container .nav-item.has-submenu,
html.pm-spa-navigating #sidebar-container,
html.pm-spa-navigating #sidebar-container *,
html.pm-spa-navigating #pm-fixed-header-slot,
html.pm-spa-navigating #pm-fixed-header-slot * {
  transition: none !important;
  animation: none !important;
}

html.pm-shell-booting #main-content-area {
  visibility: hidden;
}

html.pm-shell-booting.pm-shell-ready #main-content-area,
html.pm-shell-ready #main-content-area {
  visibility: visible;
}

html.pm-module-nav #sidebar-content.loading-permissions:has(.pm-sidebar-theme) {
  visibility: visible !important;
  opacity: 1 !important;
}

html.pm-module-nav #sidebar-container .logo-preview,
html.pm-module-nav #sidebar-container .sidebar-header #logo-img,
html.pm-module-nav #sidebar-container .sidebar-header .logo-img {
  transition: none !important;
}

html.pm-module-nav #sidebar-container .logo-preview {
  min-height: var(--pm-logo-max-height, 68px) !important;
}

html.pm-module-nav body.ap-all-products #sidebar-container,
html.pm-module-nav body.dashboard-page #sidebar-container {
  background-color: var(--sidebar-bg, #f5f6f8) !important;
  background: linear-gradient(180deg, var(--sidebar-bg, #f5f6f8) 0%, var(--pm-nav-sidebar-bg-end, #eef1f5) 100%) !important;
}

html.pm-module-nav body.ap-all-products #logo-img,
html.pm-module-nav body.ap-all-products .logo-img,
html.pm-module-nav body.dashboard-page #logo-img,
html.pm-module-nav body.dashboard-page .logo-img,
html.pm-module-nav body.pm-add-product #logo-img,
html.pm-module-nav body.pm-print-barcode #logo-img {
  width: auto !important;
  max-width: var(--pm-logo-max-width, 160px) !important;
  max-height: var(--pm-logo-max-height, 68px) !important;
  height: auto !important;
}

html.pm-module-nav #sidebar-container .logo-preview {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0.2rem 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

html.pm-module-nav #sidebar-container .logo-preview[data-pm-logo-empty="1"],
html.pm-module-nav #sidebar-container .logo-preview:not(:has(#logo-img[src]:not([src=""]))) {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html.pm-module-nav #sidebar-container .sidebar-header:not(:has(#logo-img[src]:not([src=""]))) .sidebar-title {
  display: block !important;
}

html.pm-module-nav #sidebar-container .sidebar-header #logo-img,
html.pm-module-nav #sidebar-container .sidebar-header .logo-img {
  max-width: var(--pm-logo-max-width, 160px) !important;
  max-height: var(--pm-logo-max-height, 68px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0.35rem !important;
  box-shadow: none !important;
  border: none !important;
}

html.pm-module-nav #sidebar-container .sidebar-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--pm-nav-text, #111827) !important;
  text-shadow: none;
  font-family: var(--pm-nav-font-family, inherit) !important;
}

/* PM desktop: fixed sidebar — header hamburger toggle is redundant */
@media (min-width: 992px) {
  html.pm-module-nav #resellerMobileMenuBtn,
  html.pm-module-nav .reseller-mobile-menu-btn.mobile-menu-button {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  html.pm-module-nav #sidebar-container .sidebar-title {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #111827 !important;
  }
}

html.pm-module-nav #sidebar-container .nav > .nav-item {
  margin-bottom: 4px !important;
}

html.pm-module-nav #sidebar-container .nav-link {
  border: 1px solid var(--pm-nav-border) !important;
  border-left: 1px solid var(--pm-nav-border) !important;
  border-radius: var(--pm-nav-link-radius, 0.7rem) !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  min-height: 40px;
  color: var(--pm-nav-text, #1f2937) !important;
  background: var(--pm-nav-surface, #f0f2f5) !important;
  font-family: var(--pm-nav-font-family, inherit) !important;
  font-size: var(--pm-nav-font-size, 14px) !important;
  font-weight: var(--pm-nav-font-weight, 500) !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

html.pm-module-nav #sidebar-container .nav-link:hover {
  background: var(--pm-nav-surface-hover, #e8edf5) !important;
  color: var(--pm-nav-text, #111827) !important;
  border-color: #bfc7d6 !important;
  box-shadow: none;
}

html.pm-module-nav #sidebar-container .nav-link.active {
  background: linear-gradient(180deg, var(--pm-nav-accent, #2f7cf6) 0%, var(--pm-nav-accent-strong, #1d67de) 100%) !important;
  color: #ffffff !important;
  border-left-color: var(--pm-nav-accent) !important;
  border-color: var(--pm-nav-accent-strong, #1d67de) !important;
  box-shadow: 0 1px 2px rgba(29, 103, 222, 0.35);
}

html.pm-module-nav.pm-nav-link-flat #sidebar-container .nav-link {
  border-color: transparent !important;
  border-left-color: transparent !important;
  border-radius: 0.35rem !important;
}

html.pm-module-nav.pm-nav-link-pill #sidebar-container .nav-link {
  border-radius: 999px !important;
}

html.pm-module-nav.pm-nav-link-pill #sidebar-container .submenu-link {
  border-radius: 999px !important;
}

html.pm-module-nav #sidebar-container .submenu-toggle:hover,
html.pm-module-nav #sidebar-container .has-submenu > .nav-link:hover {
  background: var(--pm-nav-surface-hover, #e8edf5) !important;
}

html.pm-module-nav #sidebar-container .has-submenu > .nav-link,
html.pm-module-nav #sidebar-container .submenu-toggle {
  position: relative !important;
  overflow: visible !important;
  padding-right: 2rem !important;
}

html.pm-module-nav #sidebar-container .nav .has-submenu > .submenu-toggle .submenu-arrow,
html.pm-module-nav #pm-sidebar-container .nav .has-submenu > .submenu-toggle .submenu-arrow {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  font-size: 0.72rem !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--pm-nav-muted, #4b5563) !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

html.pm-module-nav #sidebar-container .nav-item.has-submenu.open > .submenu-toggle .submenu-arrow,
html.pm-module-nav #pm-sidebar-container .nav-item.has-submenu.open > .submenu-toggle .submenu-arrow {
  color: var(--pm-nav-accent) !important;
  transform: translateY(-50%) rotate(90deg) !important;
}

html.pm-module-nav #sidebar-container .submenu {
  margin-left: 8px !important;
  margin-right: 8px !important;
  padding: 2px 0 6px !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  background: transparent !important;
  border-left: none !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease, visibility 0.18s ease;
}


/* PM pages: keep content lane fixed so sidebar interactions never shift main content. */
html.pm-module-nav #main-content-area,
body.pm-module-nav #main-content-area {
  margin-left: 280px !important;
  transition: none !important;
}

/* Separated shell: fixed header chrome above the swappable page pane */
html.pm-shell-separated #sidebar-container,
body.pm-shell-separated #sidebar-container {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 280px !important;
  height: 100vh !important;
  z-index: 1100;
}

html.pm-shell-separated #pm-fixed-header-slot,
body.pm-shell-separated #pm-fixed-header-slot {
  margin-left: 280px !important;
  padding: 0.25rem 1.5rem 0 !important;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  background: transparent;
}

html.pm-shell-separated #pm-fixed-header-slot #header-container {
  margin-bottom: 0.75rem !important;
}

/* Region 3 only: never show sidebar/header chrome inside the page pane */
html.pm-shell-separated #main-content-area #header-container,
html.pm-shell-separated #main-content-area #sidebar-container,
html.pm-shell-separated #main-content-area #pm-sidebar-container,
html.pm-shell-separated #main-content-area .pm-sidebar-theme {
  display: none !important;
}

html.pm-module-nav #pm-sidebar-container + #main-content-area,
html.pm-shell-separated #pm-sidebar-container + #pm-fixed-header-slot + #main-content-area,
html.pm-shell-separated #sidebar-container + #pm-fixed-header-slot + #main-content-area {
  margin-left: 280px !important;
}

html.pm-module-nav #sidebar-container .nav-item.has-submenu.open > .submenu,
html.pm-module-nav #pm-sidebar-container .nav-item.has-submenu.open > .submenu {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.pm-module-nav #sidebar-container .nav-item.has-submenu.open > .submenu .submenu-item,
html.pm-module-nav #pm-sidebar-container .nav-item.has-submenu.open > .submenu .submenu-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}


html.pm-module-nav #sidebar-container .submenu-link {
  border-radius: var(--pm-nav-link-radius, 0.4rem) !important;
  margin: 3px 6px 3px 12px !important;
  padding-left: 16px !important;
  padding-right: 12px !important;
  color: var(--pm-nav-submenu-text, var(--pm-nav-text, #374151)) !important;
  background-color: var(--pm-nav-submenu-bg, var(--pm-nav-surface, #f8fafc)) !important;
  border: 1px solid var(--pm-nav-submenu-border, var(--pm-nav-border, #e1e6ee)) !important;
  border-left: 1px solid var(--pm-nav-submenu-border, var(--pm-nav-border, #e1e6ee)) !important;
  font-family: var(--pm-nav-font-family, inherit) !important;
  font-size: calc(var(--pm-nav-font-size, 14px) - 1px) !important;
  font-weight: var(--pm-nav-font-weight, 500) !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

html.pm-module-nav #sidebar-container .submenu-link:hover {
  background: var(--pm-nav-submenu-hover-bg, var(--pm-nav-surface-hover, #edf2fa)) !important;
  color: var(--pm-nav-text, #111827) !important;
  border-color: var(--pm-nav-border, #cad3e3) !important;
}

html.pm-module-nav #sidebar-container .submenu-link.active {
  background: var(--pm-nav-submenu-active-bg, #dbeafe) !important;
  color: var(--pm-nav-submenu-active-text, #1e3a8a) !important;
  border-color: var(--pm-nav-accent, #93c5fd) !important;
  font-weight: 600 !important;
}

html.pm-module-nav #sidebar-container .submenu-label {
  color: var(--pm-nav-muted, #64748b) !important;
  letter-spacing: 0.06em;
  font-family: var(--pm-nav-font-family, inherit) !important;
}

html.pm-module-nav #sidebar-container .logout-wrap {
  background: linear-gradient(180deg, #f3f4f6 0%, #eceff3 100%) !important;
  border-top: 1px solid var(--pm-nav-border) !important;
}

html.pm-module-nav #sidebar-container .logout-wrap .nav-link {
  border-radius: 0.5rem !important;
}

body.dark-mode.pm-module-nav #sidebar-container {
  --sidebar-bg: #0f172a;
  background: linear-gradient(170deg, #0b1220 0%, #121a2d 46%, #0f172a 100%) !important;
}

body.dark-mode.pm-module-nav #sidebar-container .nav-link {
  color: #c3d2e8 !important;
  background: #182238 !important;
  border-color: #2b3a57 !important;
}

body.dark-mode.pm-module-nav #sidebar-container .nav-link.active {
  color: #ffffff !important;
  background: linear-gradient(180deg, #2f7cf6 0%, #1d67de 100%) !important;
  border-color: #1d67de !important;
}

body.dark-mode.pm-module-nav #sidebar-container .submenu {
  background: rgba(7, 11, 18, 0.92) !important;
}

body.dark-mode.pm-module-nav #sidebar-container .submenu-link {
  color: #c3d2e8 !important;
  background: #111a2d !important;
  border-color: #26344f !important;
}

body.dark-mode.pm-module-nav #sidebar-container .submenu-link:hover {
  background: #1a2940 !important;
  color: #e5eefc !important;
}

body.dark-mode.pm-module-nav #sidebar-container .submenu-link.active {
  background: #19315f !important;
  color: #dbeafe !important;
  border-color: #3b82f6 !important;
}

/*
 * Pharmacy portal — color-coded sections (matches dashboard teal/cyan hero).
 * Uses :has([data-submenu=...]) so each group gets its own accent without HTML changes.
 */
#sidebar-content .nav-item[data-business-type="pharmacy"] > .nav-link.submenu-toggle {
  border-left: 3px solid transparent;
  transition: background-color 0.22s ease, border-left-color 0.22s ease, box-shadow 0.22s ease;
  gap: 0.5rem;
}
/* Section icon: colored tile (first icon only; chevron stays default) */
#sidebar-content .nav-item[data-business-type="pharmacy"] > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  width: 2.1rem !important;
  height: 2.1rem !important;
  margin-right: 0.35rem !important;
  border-radius: 0.55rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem !important;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"] > .nav-link.submenu-toggle .submenu-arrow {
  color: rgba(148, 163, 184, 0.85);
  transition: color 0.2s ease, transform 0.2s ease;
}
#sidebar-content .nav-item[data-business-type="pharmacy"].open > .nav-link.submenu-toggle .submenu-arrow {
  color: rgba(226, 232, 240, 0.95);
}

/* —— Per-section palette (parent row + submenu stripe) —— */
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-inventory-mgmt"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #2dd4bf 0%, #0d9488 55%, #0f766e 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-inventory-mgmt"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-inventory-mgmt"]).open > .nav-link.submenu-toggle {
  border-left-color: #2dd4bf;
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.22) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-inventory-mgmt"]) .submenu {
  border-left-color: rgba(45, 212, 191, 0.45) !important;
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.08) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-sales-pos"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #34d399 0%, #059669 55%, #047857 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-sales-pos"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-sales-pos"]).open > .nav-link.submenu-toggle {
  border-left-color: #34d399;
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.2) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-sales-pos"]) .submenu {
  border-left-color: rgba(52, 211, 153, 0.45) !important;
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.07) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-printing-tools"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #38bdf8 0%, #0284c7 55%, #0369a1 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-printing-tools"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-printing-tools"]).open > .nav-link.submenu-toggle {
  border-left-color: #38bdf8;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.2) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-printing-tools"]) .submenu {
  border-left-color: rgba(56, 189, 248, 0.45) !important;
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.07) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-purchase-mgmt"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #fbbf24 0%, #d97706 55%, #b45309 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-purchase-mgmt"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-purchase-mgmt"]).open > .nav-link.submenu-toggle {
  border-left-color: #fbbf24;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.2) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-purchase-mgmt"]) .submenu {
  border-left-color: rgba(251, 191, 36, 0.45) !important;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.08) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-supplier-mgmt"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #a78bfa 0%, #7c3aed 55%, #6d28d9 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-supplier-mgmt"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-supplier-mgmt"]).open > .nav-link.submenu-toggle {
  border-left-color: #a78bfa;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.2) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-supplier-mgmt"]) .submenu {
  border-left-color: rgba(167, 139, 250, 0.45) !important;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.07) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-customer-contact"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #fb7185 0%, #e11d48 55%, #be123c 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-customer-contact"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-customer-contact"]).open > .nav-link.submenu-toggle {
  border-left-color: #fb7185;
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.18) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-customer-contact"]) .submenu {
  border-left-color: rgba(251, 113, 133, 0.45) !important;
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.06) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-expense"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #fb923c 0%, #ea580c 55%, #c2410c 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-expense"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-expense"]).open > .nav-link.submenu-toggle {
  border-left-color: #fb923c;
  background: linear-gradient(90deg, rgba(234, 88, 12, 0.18) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-expense"]) .submenu {
  border-left-color: rgba(251, 146, 60, 0.45) !important;
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.06) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-reports"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #22d3ee 0%, #0891b2 55%, #0e7490 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-reports"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-reports"]).open > .nav-link.submenu-toggle {
  border-left-color: #22d3ee;
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.2) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-reports"]) .submenu {
  border-left-color: rgba(34, 211, 238, 0.45) !important;
  background: linear-gradient(180deg, rgba(8, 145, 178, 0.07) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-support"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #818cf8 0%, #6366f1 55%, #4f46e5 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-support"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-support"]).open > .nav-link.submenu-toggle {
  border-left-color: #818cf8;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.2) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-support"]) .submenu {
  border-left-color: rgba(129, 140, 248, 0.45) !important;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.07) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-profile-setting"]) > .nav-link.submenu-toggle > i:not(.submenu-arrow) {
  background: linear-gradient(145deg, #94a3b8 0%, #64748b 55%, #475569 100%);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-profile-setting"]):hover > .nav-link.submenu-toggle,
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-profile-setting"]).open > .nav-link.submenu-toggle {
  border-left-color: #94a3b8;
  background: linear-gradient(90deg, rgba(100, 116, 139, 0.22) 0%, rgba(51, 65, 85, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-profile-setting"]) .submenu {
  border-left-color: rgba(148, 163, 184, 0.4) !important;
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.08) 0%, #0f172a 55%) !important;
}

#sidebar-content .nav-item[data-business-type="pharmacy"] .submenu {
  border-radius: 0 0.5rem 0.5rem 0;
  margin-left: 4px !important;
  border-left: 3px solid rgba(45, 212, 191, 0.35);
  padding: 0.35rem 0 !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"] .submenu-link {
  border-radius: 0 0.4rem 0.4rem 0;
  margin: 3px 8px 3px 6px;
  padding: 9px 12px 9px 46px !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  border-left: 3px solid transparent;
}
#sidebar-content .nav-item[data-business-type="pharmacy"] .submenu-link:hover {
  color: #f8fafc !important;
  transform: translateX(3px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
#sidebar-content .nav-item[data-business-type="pharmacy"] .submenu-link.active {
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}
/* Submenu link hovers: tint follows parent section (via same :has chain) */
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-inventory-mgmt"]) .submenu-link:hover {
  background: rgba(13, 148, 136, 0.28) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-inventory-mgmt"]) .submenu-link.active {
  background: rgba(13, 148, 136, 0.38) !important;
  border-left-color: #2dd4bf;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-sales-pos"]) .submenu-link:hover {
  background: rgba(5, 150, 105, 0.28) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-sales-pos"]) .submenu-link.active {
  background: rgba(5, 150, 105, 0.38) !important;
  border-left-color: #34d399;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-printing-tools"]) .submenu-link:hover {
  background: rgba(2, 132, 199, 0.28) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-printing-tools"]) .submenu-link.active {
  background: rgba(2, 132, 199, 0.38) !important;
  border-left-color: #38bdf8;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-purchase-mgmt"]) .submenu-link:hover {
  background: rgba(217, 119, 6, 0.26) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-purchase-mgmt"]) .submenu-link.active {
  background: rgba(217, 119, 6, 0.36) !important;
  border-left-color: #fbbf24;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-supplier-mgmt"]) .submenu-link:hover {
  background: rgba(124, 58, 237, 0.26) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-supplier-mgmt"]) .submenu-link.active {
  background: rgba(124, 58, 237, 0.36) !important;
  border-left-color: #a78bfa;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-customer-contact"]) .submenu-link:hover {
  background: rgba(225, 29, 72, 0.22) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-customer-contact"]) .submenu-link.active {
  background: rgba(225, 29, 72, 0.32) !important;
  border-left-color: #fb7185;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-expense"]) .submenu-link:hover {
  background: rgba(234, 88, 12, 0.24) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-expense"]) .submenu-link.active {
  background: rgba(234, 88, 12, 0.34) !important;
  border-left-color: #fb923c;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-reports"]) .submenu-link:hover {
  background: rgba(8, 145, 178, 0.26) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-reports"]) .submenu-link.active {
  background: rgba(8, 145, 178, 0.36) !important;
  border-left-color: #22d3ee;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-support"]) .submenu-link:hover {
  background: rgba(99, 102, 241, 0.26) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-support"]) .submenu-link.active {
  background: rgba(99, 102, 241, 0.36) !important;
  border-left-color: #818cf8;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-profile-setting"]) .submenu-link:hover {
  background: rgba(100, 116, 139, 0.3) !important;
}
#sidebar-content .nav-item[data-business-type="pharmacy"]:has([data-submenu="pharmacy-profile-setting"]) .submenu-link.active {
  background: rgba(100, 116, 139, 0.4) !important;
  border-left-color: #94a3b8;
}

#sidebar-content .nav-item[data-business-type="pharmacy"] .submenu-link i {
  opacity: 0.92;
  transition: color 0.15s ease, opacity 0.15s ease;
}
#sidebar-content .nav-item[data-business-type="pharmacy"] .submenu-link:hover i {
  opacity: 1;
  color: #fff !important;
}

body.dark-mode #sidebar-content .nav-item[data-business-type="pharmacy"] .submenu {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, #0b1220 100%) !important;
}

/* ========================= FINAL PHARMACY LAYOUT LOCK ========================= */
html.pharmacy-split-layout,
body.pharmacy-split-layout {
  --app-sidebar-width: 300px;
  --app-topbar-height: 62px;
  --app-topbar-gap: 14px;
}

html.pharmacy-split-layout #sidebar-container,
body.pharmacy-split-layout #sidebar-container {
  position: fixed !important;
  top: var(--app-topbar-height) !important;
  left: 0 !important;
  width: var(--app-sidebar-width) !important;
  min-width: var(--app-sidebar-width) !important;
  max-width: var(--app-sidebar-width) !important;
  height: calc(100vh - var(--app-topbar-height)) !important;
  overflow: hidden !important;
}

html.pharmacy-split-layout #sidebar-content,
body.pharmacy-split-layout #sidebar-content,
html.pharmacy-split-layout #sidebar-content .sidebar,
body.pharmacy-split-layout #sidebar-content .sidebar {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

html.pharmacy-split-layout #sidebar-content .sidebar:not([data-sidebar-scope="pharmacy"]),
body.pharmacy-split-layout #sidebar-content .sidebar:not([data-sidebar-scope="pharmacy"]) {
  display: none !important;
}

/* Pharmacy anti-flicker: never hide menu during permission/loading toggles */
html #sidebar-content[data-nav-source="pharmacy-static"].loading-permissions .nav-item,
html #sidebar-content[data-nav-source="pharmacy-static"].loading-permissions .submenu-item,
html #sidebar-content[data-nav-source="pharmacy-static"] .nav-item.hidden-until-permitted,
html #sidebar-content[data-nav-source="pharmacy-static"] .submenu-item.hidden-until-permitted,
html #sidebar-content[data-nav-source="pharmacy-static"] .nav-item.nav-disabled-by-permission,
html #sidebar-content[data-nav-source="pharmacy-static"] .submenu-item.nav-disabled-by-permission {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Pharmacy: keep Logout in normal menu flow (after Settings). */
html #sidebar-content[data-nav-source="pharmacy-static"] .logout-wrap {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 6px;
  padding: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}

html #sidebar-content[data-nav-source="pharmacy-static"].loading-permissions::after {
  display: none !important;
  content: none !important;
}

html.pharmacy-split-layout #sidebar-container .sidebar-header,
body.pharmacy-split-layout #sidebar-container .sidebar-header {
  display: none !important;
}

html.pharmacy-split-layout #sidebar-container .sidebar-nav-body,
body.pharmacy-split-layout #sidebar-container .sidebar-nav-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0.55rem 0.45rem 1rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges;
}

html.pharmacy-split-layout #sidebar-container .nav > .submenu-item.submenu-group-title,
body.pharmacy-split-layout #sidebar-container .nav > .submenu-item.submenu-group-title {
  margin: 0.75rem 0.45rem 0.28rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.72) !important;
}

html.pharmacy-split-layout #sidebar-container .nav > .nav-item > .nav-link,
body.pharmacy-split-layout #sidebar-container .nav > .nav-item > .nav-link {
  border-radius: 0.55rem !important;
  margin: 0.16rem 0.32rem !important;
  padding-left: 0.78rem !important;
  padding-right: 0.75rem !important;
}

html.pharmacy-split-layout #sidebar-container .nav > .nav-item.logout-wrap > .nav-link,
body.pharmacy-split-layout #sidebar-container .nav > .nav-item.logout-wrap > .nav-link {
  margin-top: 0.6rem !important;
  border: 1px solid rgba(248, 113, 113, 0.25) !important;
}

html.pharmacy-split-layout #sidebar-container .nav-item.has-submenu > .submenu,
body.pharmacy-split-layout #sidebar-container .nav-item.has-submenu > .submenu {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  transition: max-height 0.24s ease, opacity 0.2s ease !important;
}

html.pharmacy-split-layout #sidebar-container .nav-item.has-submenu.open > .submenu,
body.pharmacy-split-layout #sidebar-container .nav-item.has-submenu.open > .submenu {
  max-height: 560px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.pharmacy-split-layout #main-content-area,
body.pharmacy-split-layout #main-content-area {
  margin-left: var(--app-sidebar-width) !important;
  width: calc(100% - var(--app-sidebar-width)) !important;
  margin-top: calc(var(--app-topbar-height) + var(--app-topbar-gap)) !important;
  transition: none !important;
}

html.pharmacy-split-layout #header-container,
body.pharmacy-split-layout #header-container,
html.pharmacy-split-layout #main-content-area > .container-fluid > #header-container,
body.pharmacy-split-layout #main-content-area > .container-fluid > #header-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1200 !important;
  height: var(--app-topbar-height) !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0.4rem 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -16px rgba(15, 23, 42, 0.45);
}

/* When header is detached to body, keep it in the same fixed topbar style */
html.pharmacy-split-layout body > #header-container[data-pharmacy-topbar="1"],
body.pharmacy-split-layout > #header-container[data-pharmacy-topbar="1"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1200 !important;
}

html.pharmacy-split-layout #header-container .reseller-header-toolbar-wrap,
body.pharmacy-split-layout #header-container .reseller-header-toolbar-wrap {
  display: grid !important;
  grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 0.75rem;
  width: 100% !important;
  justify-content: initial !important;
}

html.pharmacy-split-layout #header-container .reseller-header-brand,
body.pharmacy-split-layout #header-container .reseller-header-brand {
  display: inline-flex !important;
  grid-column: 1 !important;
  flex: 0 0 var(--app-sidebar-width) !important;
  width: var(--app-sidebar-width) !important;
  max-width: var(--app-sidebar-width) !important;
  height: 100% !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding-right: 0.8rem !important;
  margin-right: 0 !important;
  border-right: 1px solid rgba(148, 163, 184, 0.32);
}

html.pharmacy-split-layout #header-container .reseller-header-brand-link,
body.pharmacy-split-layout #header-container .reseller-header-brand-link {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  align-items: center !important;
}

html.pharmacy-split-layout #header-container .reseller-header-brand #headerBrandTitle,
body.pharmacy-split-layout #header-container .reseller-header-brand #headerBrandTitle {
  max-width: calc(var(--app-sidebar-width) - 90px) !important;
}

html.pharmacy-split-layout #header-container .reseller-header-actions,
body.pharmacy-split-layout #header-container .reseller-header-actions {
  grid-column: 2 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin;
}

body.dark-mode.pharmacy-split-layout #header-container,
body.dark-mode.pharmacy-split-layout #main-content-area > .container-fluid > #header-container {
  background: rgba(15, 23, 42, 0.92) !important;
  border-bottom-color: rgba(100, 116, 139, 0.35) !important;
  box-shadow: 0 10px 22px -16px rgba(2, 6, 23, 0.75);
}

body.dark-mode.pharmacy-split-layout #header-container .reseller-header-brand {
  border-right-color: rgba(100, 116, 139, 0.5) !important;
}

body.dark-mode.pharmacy-split-layout #header-container .reseller-header-brand #headerBrandTitle {
  color: #e2e8f0;
}

/* Pharmacy icon consistency: keep one icon style across clicks/states */
html #sidebar-content[data-nav-source="pharmacy-static"] .nav-link i:not(.submenu-arrow),
html #sidebar-content[data-nav-source="pharmacy-static"] .submenu-link i {
  width: 18px !important;
  height: auto !important;
  margin-right: 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  display: inline-block !important;
  text-align: center !important;
}

/* Jewelry dedicated sidebar look */
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .sidebar-header {
  border-bottom: 1px solid rgba(99, 102, 241, 0.3);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.18) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .sidebar-title {
  color: #e5e7eb !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .nav-link {
  color: #cbd5e1 !important;
  border: 1px solid rgba(71, 85, 105, 0.35);
  background: rgba(15, 23, 42, 0.45) !important;
  border-radius: 0.6rem;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .nav-link:hover {
  color: #e2e8f0 !important;
  background: rgba(79, 70, 229, 0.2) !important;
  border-color: rgba(129, 140, 248, 0.6);
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .nav-link.active {
  color: #ffffff !important;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
  border-color: #6366f1 !important;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .submenu {
  border-left: 2px solid rgba(99, 102, 241, 0.35) !important;
  background: rgba(2, 6, 23, 0.65) !important;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .submenu-link {
  color: #cbd5e1 !important;
  border: 1px solid rgba(51, 65, 85, 0.35);
  background: rgba(15, 23, 42, 0.55) !important;
  border-radius: 0.5rem;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .submenu-link:hover {
  color: #f8fafc !important;
  border-color: rgba(129, 140, 248, 0.65);
  background: rgba(67, 56, 202, 0.25) !important;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .submenu-link.active {
  color: #ffffff !important;
  background: rgba(79, 70, 229, 0.85) !important;
  border-color: rgba(129, 140, 248, 0.85);
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .submenu-item.submenu-group-title {
  color: #a5b4fc !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .nav-link i:not(.submenu-arrow),
#sidebar-content[data-nav-source="jewelry-static"] .sidebar[data-sidebar-scope="jewelry"] .submenu-link i {
  width: 18px !important;
  text-align: center !important;
  margin-right: 10px !important;
  color: #a5b4fc !important;
}