/* ==========================================================================
   Modern Odoo-Inspired Healthcare / POS Theme
   Visual redesign matching reference dashboard aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Core Brand & Color Tokens */
  --odoo-primary: #6b2144;           /* Deep Wine / Plum Berry */
  --odoo-primary-hover: #551a37;
  --odoo-primary-active: #42132a;
  --odoo-primary-light: #fdf2f8;
  
  --odoo-teal: #10b981;              /* Vibrant Mint / Teal */
  --odoo-teal-dark: #0d9488;
  --odoo-teal-light: #ecfdf5;
  --odoo-teal-border: #a7f3d0;
  
  --odoo-purple: #7c3aed;
  --odoo-purple-light: #f3e8ff;
  
  --odoo-amber: #f59e0b;
  --odoo-amber-light: #fffbeb;
  --odoo-amber-border: #fde68a;
  
  --odoo-rose: #f43f5e;
  --odoo-rose-light: #fff1f2;
  --odoo-rose-border: #fecdd3;
  
  --odoo-sky: #0284c7;
  --odoo-sky-light: #f0f9ff;
  --odoo-sky-border: #bae6fd;

  /* Neutrals & Surfaces */
  --odoo-bg: #f8fafc;
  --odoo-card-bg: #ffffff;
  --odoo-border: #eef2f6;
  --odoo-border-subtle: #f1f5f9;
  --odoo-text-main: #0f172a;
  --odoo-text-muted: #64748b;
  --odoo-text-subtle: #94a3b8;

  /* Typography */
  --odoo-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Shadows */
  --odoo-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  --odoo-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --odoo-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
}

/* Global Typography & Resets */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  background-color: var(--odoo-bg) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body, 
button, 
input, 
select, 
textarea, 
.tw-font-sans,
h1, h2, h3, h4, h5, h6,
p, span, a, label, th, td {
  font-family: var(--odoo-font) !important;
}

body {
  background-color: var(--odoo-bg) !important;
  color: var(--odoo-text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App Layout & Fixed Sidebar Architecture */
.app-layout-wrapper {
  display: block;
  min-height: 100vh;
  width: 100%;
}

aside.side-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 250px !important;
  height: 100vh !important;
  z-index: 1030 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #ffffff !important;
  border-right: 1px solid var(--odoo-border) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Collapsed Sidebar State */
body.sidebar-collapse aside.side-bar,
aside.side-bar.collapsed {
  transform: translateX(-100%) !important;
  display: none !important;
  width: 0 !important;
}

/* Main Content Wrapper */
.main-content-wrapper {
  margin-left: 250px !important;
  width: calc(100% - 250px) !important;
  max-width: calc(100vw - 250px) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--odoo-bg) !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow-x: hidden !important;
}

body.sidebar-collapse .main-content-wrapper,
.main-content-wrapper.no-sidebar {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

#scrollable-container,
.main-page-content {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100vh - 64px);
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

.content,
.content-wrapper,
.nav-tabs-custom,
.tab-content,
.tab-pane {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.main-page-content > .tw-mt-auto,
.main-content-wrapper .tw-mt-auto {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Ensure no phantom scroll height from hidden print section, modals, or scrolltop */
#receipt_section,
.print_section {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

@media print {
  #receipt_section,
  .print_section {
    display: block !important;
    height: auto !important;
  }
}

.modal:not(.in):not(.show) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.scrolltop {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 1050 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile Sidebar Responsive */
@media (max-width: 991px) {
  aside.side-bar {
    transform: translateX(-100%) !important;
    display: none !important;
  }
  body.sidebar-open aside.side-bar,
  aside.side-bar.small-view-side-active {
    transform: translateX(0) !important;
    display: flex !important;
  }
  .main-content-wrapper {
    margin-left: 0 !important;
  }
}

/* Sidebar Brand Header */
.sidebar-brand-header {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  height: 64px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--odoo-border) !important;
  border-right: none !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

/* Elegant sleek scrollbars */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#scrollable-container::-webkit-scrollbar,
.side-bar::-webkit-scrollbar,
.side-bar div.tw-overflow-y-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#scrollable-container::-webkit-scrollbar-track,
.side-bar::-webkit-scrollbar-track,
.side-bar div.tw-overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#scrollable-container::-webkit-scrollbar-thumb,
.side-bar::-webkit-scrollbar-thumb,
.side-bar div.tw-overflow-y-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
#scrollable-container::-webkit-scrollbar-thumb:hover,
.side-bar::-webkit-scrollbar-thumb:hover,
.side-bar div.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Universal Button SVG safety constraint */
button svg, a svg, .btn svg {
  max-width: 20px;
  max-height: 20px;
  flex-shrink: 0;
}

main.tw-bg-gray-100,
.tw-bg-gray-100 {
  background-color: var(--odoo-bg) !important;
}

/* ==========================================================================
   Header / Top Navigation Bar
   ========================================================================== */
.main-header,
header,
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--odoo-border) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
}

/* Reset details summary markers so icons are properly centered without default browser disclosure arrow spacing */
details summary::-webkit-details-marker,
.tw-dw-dropdown summary::-webkit-details-marker {
  display: none !important;
}
details summary,
.tw-dw-dropdown summary {
  list-style: none !important;
}

/* Header utility buttons */
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] button,
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] a,
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] summary {
  color: #334155 !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  transition: all 0.15s ease-in-out !important;
}

div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] button:hover,
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] a:hover,
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] summary:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Standout Primary Action Button (POS Sale / New Sale) in Header */
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] a[href*="/pos/create"],
.btn-pos-primary {
  background-color: var(--odoo-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--odoo-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(107, 33, 68, 0.18) !important;
}

div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] a[href*="/pos/create"]:hover,
.btn-pos-primary:hover {
  background-color: var(--odoo-primary-hover) !important;
  border-color: var(--odoo-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 8px rgba(107, 33, 68, 0.25) !important;
  transform: translateY(-1px);
}

div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] a[href*="/pos/create"] svg {
  stroke: #ffffff !important;
}

/* Header SVGs */
div[class*="tw-bg-gradient-to-r"][class*="lg:tw-h-15"] svg {
  color: #475569 !important;
}

/* ==========================================================================
   Sidebar Navigation
   ========================================================================== */
aside.side-bar {
  background-color: #ffffff !important;
  border-right: 1px solid var(--odoo-border) !important;
  box-shadow: none !important;
}

/* Sidebar Brand Header */
aside.side-bar > a:first-child {
  background: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid var(--odoo-border) !important;
  border-bottom: 1px solid var(--odoo-border) !important;
  height: 60px !important;
}

aside.side-bar > a:first-child p.side-bar-heading {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
}

aside.side-bar > a:first-child span.tw-bg-green-400 {
  background-color: #10b981 !important;
  box-shadow: 0 0 0 3px #d1fae5 !important;
}

/* Sidebar Menu Items */
#side-bar {
  padding: 16px 12px !important;
  border-right: none !important;
}

#side-bar a {
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: #475569 !important;
  transition: all 0.15s ease-in-out !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#side-bar a svg,
#side-bar a i {
  color: #64748b !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease-in-out !important;
}

#side-bar a span:not([class*="pull-right"]):not([class*="badge"]) {
  flex: 1 1 auto !important;
}

#side-bar a .pull-right,
#side-bar a .pull-right-container,
#side-bar a .fa-angle-left,
#side-bar a svg.icon-tabler-chevron-right,
#side-bar a svg.icon-tabler-chevron-down {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

#side-bar a:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

#side-bar a:hover svg,
#side-bar a:hover i {
  color: #0f172a !important;
}

/* Reset parent container backgrounds so only active link gets the pill */
#side-bar > div.tw-bg-gray-200,
#side-bar div[class*="tw-bg-gray-200"] {
  background-color: transparent !important;
  padding-bottom: 0 !important;
}

/* Active Sidebar Item (The Reference Odoo Mint/Teal Pill) */
#side-bar a.drop_down.tw-bg-gray-200,
#side-bar a.tw-bg-gray-200:not(.drop_down),
#side-bar a.active,
#side-bar .active > a {
  background-color: #ecfdf5 !important;
  color: #0d9488 !important;
  font-weight: 600 !important;
  border-left: 3px solid #10b981 !important;
}

#side-bar a.drop_down.tw-bg-gray-200 svg,
#side-bar a.drop_down.tw-bg-gray-200 i,
#side-bar a.tw-bg-gray-200 svg,
#side-bar a.tw-bg-gray-200 i,
#side-bar a.active svg,
#side-bar a.active i,
#side-bar .active > a svg,
#side-bar .active > a i {
  color: #0d9488 !important;
  stroke: #0d9488 !important;
}

/* Sidebar Section Headers */
#side-bar > div.tw-text-xs.tw-uppercase {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 16px 12px 6px 12px !important;
}

/* Sidebar Submenus */
#side-bar ul,
#side-bar .treeview-menu,
#side-bar div.chiled {
  background: transparent !important;
  padding-left: 36px !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

#side-bar div.chiled a,
#side-bar .treeview-menu a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  border-left: none !important;
  display: flex !important;
  align-items: center !important;
}

#side-bar div.chiled a:hover,
#side-bar .treeview-menu a:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

#side-bar div.chiled a.tw-text-primary-700,
#side-bar .treeview-menu li.active > a {
  background-color: #ecfdf5 !important;
  color: #0d9488 !important;
  font-weight: 700 !important;
  border-left: none !important;
}

/* Sidebar Bottom Profile Card */
.sidebar-user-card {
  margin: 12px !important;
  padding: 12px !important;
  background-color: #f8fafc !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sidebar-user-card img,
.sidebar-user-card .avatar-box {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

/* ==========================================================================
   Dashboard Hero & Greeting Area
   ========================================================================== */
div[class*="tw-bg-gradient-to-r"][class*="tw-pb-6"] {
  background: transparent !important;
  background-image: none !important;
  padding-bottom: 0 !important;
}

div[class*="tw-bg-gradient-to-r"][class*="tw-pb-6"] .tw-absolute.tw-inset-0 {
  display: none !important;
}

/* Welcome admin text */
div[class*="tw-bg-gradient-to-r"][class*="tw-pb-6"] h1,
h1.tw-text-primary-800,
h1[class*="tw-text-primary-800"] {
  color: #0f172a !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  font-size: 26px !important;
}

/* Filter controls on dashboard */
#dashboard_date_filter {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  cursor: pointer !important;
}

#dashboard_date_filter:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

#dashboard_date_filter span {
  white-space: nowrap !important;
  display: inline-block !important;
}

#dashboard_date_filter svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  color: #64748b !important;
}

/* Header Date Display Badge */
.header-date-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.header-date-badge:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.header-date-badge svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  color: #64748b !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

.header-date-badge span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Dashboard Location Select Wrap */
.dashboard-location-select-wrap {
  position: relative !important;
  min-width: 180px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.dashboard-location-select-wrap .select2-container {
  width: 100% !important;
  min-width: 180px !important;
}

.dashboard-location-select-wrap .select2-container--default .select2-selection--single {
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 34px !important;
  padding-right: 28px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.dashboard-location-select-wrap .select2-container--default .select2-selection--single:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.dashboard-location-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: normal !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
}

.dashboard-location-select-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #334155 !important;
  font-weight: 600 !important;
}

.dashboard-location-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  width: 20px !important;
  right: 14px !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Universal Select2 inputs */
.select2-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.form-group .select2-container {
  width: 100% !important;
  display: block !important;
}

.form-group > label,
label {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #334155 !important;
  vertical-align: middle !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
  gap: 4px !important;
}

label .hover-q,
label .fa-info-circle,
label [data-toggle="popover"],
label [data-toggle="tooltip"],
.form-group > label .hover-q,
.form-group > label .fa-info-circle,
.form-group > label [data-toggle="popover"],
.form-group > label [data-toggle="tooltip"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.form-group > label + .hover-q,
.form-group > label + .fa-info-circle,
.form-group > label + [data-toggle="popover"],
.form-group > label + [data-toggle="tooltip"],
.form-group > .hover-q,
.form-group > .fa-info-circle,
.form-group > [data-toggle="popover"],
.form-group > [data-toggle="tooltip"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 5px !important;
  margin-right: 0 !important;
  margin-bottom: 6px !important;
  vertical-align: middle !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.form-group > .form-control,
.form-group > .select2-container {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 0 !important;
}

.form-group > .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 0 !important;
}

/* Ensure clean grid rows for form groups without vertical misalignment */
.row:has(> [class*="col-"] > .form-group) {
  display: flex !important;
  flex-wrap: wrap !important;
}

.row:has(> [class*="col-"] > .form-group) > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}

.row:has(> [class*="col-"] > .form-group) > [class*="col-"] > .form-group {
  display: block !important;
  flex: 1 1 auto !important;
  margin-bottom: 16px !important;
}

/* Universal Checkbox Alignment with Tooltips */
.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  min-height: 24px !important;
  width: auto !important;
  max-width: 100% !important;
}

.checkbox > br {
  display: none !important;
}

.form-group > label + .checkbox {
  margin-top: 6px !important;
}

.checkbox > label {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  gap: 6px !important;
}

.checkbox .icheckbox_square-blue,
.checkbox input[type="checkbox"] {
  flex: 0 0 18px !important;
  margin-right: 6px !important;
  margin-top: 0 !important;
}

.checkbox .hover-q,
.checkbox i.fa-info-circle,
.checkbox [data-toggle="popover"] {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 5px !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
}

.pos-tab-content .form-group > label {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  white-space: normal !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  height: 40px !important;
  min-height: 40px !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  padding-right: 36px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--odoo-teal, #10b981) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
  outline: none !important;
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1e293b !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 14px !important;
  padding-right: 8px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  width: 28px !important;
  right: 6px !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
}

/* Modern stroke chevron arrow replacing old solid triangle */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid #64748b !important;
  border-bottom: 2px solid #64748b !important;
  transform: rotate(45deg) !important;
  position: static !important;
  margin: 0 0 2px 0 !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  display: block !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(-135deg) !important;
  border-color: #334155 !important;
  margin: 2px 0 0 0 !important;
}

.select2-dropdown {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  z-index: 1050 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #fdf2f4 !important;
  color: #6b2144 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Metric Overview Cards ("Today's Overview")
   ========================================================================== */
.tw-grid.tw-grid-cols-1 > div[class*="tw-bg-white"][class*="tw-rounded-xl"],
div[class*="tw-bg-white"][class*="tw-rounded-xl"][class*="tw-shadow-sm"] {
  background-color: #ffffff !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tw-grid.tw-grid-cols-1 > div[class*="tw-bg-white"][class*="tw-rounded-xl"]:hover,
div[class*="tw-bg-white"][class*="tw-rounded-xl"][class*="tw-shadow-sm"]:hover {
  box-shadow: var(--odoo-shadow-md) !important;
  transform: translateY(-2px) !important;
  border-color: #cbd5e1 !important;
}

/* Metric card text */
p.tw-text-gray-500,
div[class*="tw-bg-white"] p.tw-text-sm.tw-text-gray-500 {
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

p[class*="tw-text-gray-900"][class*="tw-font-mono"] {
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-top: 4px !important;
}

/* Metric card icon containers - Reference Pastel Palette */
div[class*="tw-inline-flex"][class*="tw-rounded-full"] {
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
}

/* Total Sales (Teal/Mint) */
.tw-bg-sky-100 {
  background-color: #ecfdf5 !important;
  color: #10b981 !important;
}
.tw-bg-sky-100 svg,
.tw-text-sky-500 svg {
  color: #10b981 !important;
}

/* Net (Emerald) */
.tw-bg-green-100 {
  background-color: #ecfdf5 !important;
  color: #059669 !important;
}
.tw-bg-green-100 svg,
.tw-text-green-500 svg {
  color: #059669 !important;
}

/* Invoice Due (Warm Amber) */
.tw-bg-yellow-100 {
  background-color: #fffbeb !important;
  color: #d97706 !important;
}
.tw-bg-yellow-100 svg,
.tw-text-yellow-500 svg {
  color: #d97706 !important;
}

/* Total Sell Return (Soft Rose) */
.tw-bg-red-100 {
  background-color: #fff1f2 !important;
  color: #e11d48 !important;
}
.tw-bg-red-100 svg,
.tw-text-red-500 svg {
  color: #e11d48 !important;
}

/* ==========================================================================
   Charts & Graphs Container
   ========================================================================== */
div[class*="tw-border-dashed"],
.tw-border-dashed {
  border: none !important;
  background-color: transparent !important;
}

div[class*="tw-h-100"] {
  height: auto !important;
  min-height: 340px !important;
}

/* Chart Card Heading */
h3.tw-font-bold {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Highcharts Overrides to match reference */
.highcharts-container {
  overflow: visible !important;
}

.highcharts-container,
.highcharts-container svg {
  font-family: var(--odoo-font) !important;
}

.highcharts-background {
  fill: transparent !important;
}

.highcharts-grid-line {
  stroke: #f1f5f9 !important;
  stroke-dasharray: none !important;
}

.highcharts-axis-line {
  stroke: #e2e8f0 !important;
}

.highcharts-tick {
  stroke: #e2e8f0 !important;
}

.highcharts-axis-labels text {
  fill: #64748b !important;
  font-size: 11px !important;
}

.highcharts-legend-item text {
  fill: #475569 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.highcharts-tooltip-box {
  fill: #ffffff !important;
  fill-opacity: 0.98 !important;
  stroke: #e2e8f0 !important;
  stroke-width: 1px !important;
  rx: 8px !important;
  ry: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   DataTables & Lists (Matching Reference Tables & Universal Horizontal Scroll)
   ========================================================================== */

/* Universal Responsive Table Containers */
.table-responsive,
div.table-responsive {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  position: relative !important;
  padding: 16px 20px 20px 20px !important;
  box-sizing: border-box !important;
}

/* When DataTables uses its own scroll container (.dataTables_scroll), let scrollBody handle the table scrolling */
.table-responsive:has(.dataTables_scroll) {
  overflow-x: visible !important;
}

/* For all other tables (standard tables or DataTables without scrollX), ensure horizontal scroll is always active */
div.table-responsive:has(.dataTables_wrapper:not(:has(.dataTables_scroll))) {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

:not(.table-responsive) > div.dataTables_wrapper,
:not(.table-responsive) > .dataTables_wrapper {
  padding: 16px 20px 20px 20px !important;
  box-sizing: border-box !important;
}

.dataTables_wrapper,
div.dataTables_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.table-responsive > .table,
.table-responsive table.dataTable,
div.dataTables_wrapper:not(:has(.dataTables_scroll)) table.dataTable,
.dataTables_wrapper:not(:has(.dataTables_scroll)) table.dataTable,
table.dataTable:not(.dataTables_scrollHeadInner table):not(.dataTables_scrollBody table) {
  min-width: 100% !important;
  width: 100%;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Ensure wide entry tables (Purchase, Sell, POS) have sufficient width to display all columns and trigger horizontal scroll */
#purchase_entry_table,
table#purchase_entry_table,
.table-responsive > table#purchase_entry_table {
  min-width: 1400px !important;
  width: 1400px !important;
}

#purchase_entry_table th,
#purchase_entry_table td {
  white-space: nowrap !important;
}

/* DataTables Scroll Containers (ScrollX / ScrollY) */
.dataTables_scroll,
div.dataTables_scroll {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.dataTables_scrollHead,
div.dataTables_scrollHead {
  overflow: hidden !important;
  position: relative !important;
  border: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.dataTables_scrollBody,
div.dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
  border-top: 1px solid var(--odoo-border) !important;
  box-sizing: border-box !important;
}

.dataTables_scrollFoot,
div.dataTables_scrollFoot {
  overflow: hidden !important;
  position: relative !important;
  border: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-top: 1px solid var(--odoo-border) !important;
  background-color: #f8fafc !important;
}

.dataTables_scrollHeadInner,
.dataTables_scrollFootInner {
  box-sizing: content-box !important;
  min-width: 100% !important;
  /* Allow DataTables calculated inline width to dictate width without forcing 100% */
}

.dataTables_scrollHeadInner > table,
.dataTables_scrollBody > table,
.dataTables_scrollFootInner > table {
  margin: 0 !important;
  min-width: 100% !important;
  max-width: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Ensure wide tables with many columns (like Contacts / Suppliers / Customers) can expand naturally with horizontal scroll */
#contact_table_wrapper .dataTables_scrollHeadInner,
#contact_table_wrapper .dataTables_scrollHeadInner > table,
#contact_table_wrapper .dataTables_scrollBody > table,
#contact_table_wrapper .dataTables_scrollFootInner > table {
  min-width: 2200px !important;
}

/* Base Table & DataTable Styling */
.table,
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: 100% !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 12px !important;
  overflow: visible !important;
}

/* Neutralize any accidental full-width classes on table headers */
th.tw-w-full,
table.dataTable th.tw-w-full,
.table th.tw-w-full {
  width: auto !important;
}

/* Ensure Table Headers & Cells have proper spacing, styling and don't crush */
.table thead th,
table.dataTable thead th {
  white-space: nowrap !important;
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 8px !important;
  min-width: 40px !important;
  border-bottom: 1px solid var(--odoo-border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Action column (buttons) styling */
th.action,
td.action {
  min-width: 85px !important;
  max-width: 110px !important;
  text-align: center !important;
}

/* DataTables Sorting Column Headers: Sleek Modern Icons with Generous Gap */
th.sorting,
th.sorting_asc,
th.sorting_desc,
td.sorting,
td.sorting_asc,
td.sorting_desc,
table thead th.sorting,
table thead th.sorting_asc,
table thead th.sorting_desc,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting,
table.dataTable thead td.sorting_asc,
table.dataTable thead td.sorting_desc {
  padding-right: 22px !important;
  min-width: 50px !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* Ensure no legacy :before icon conflicts */
th.sorting:before,
th.sorting_asc:before,
th.sorting_desc:before,
table thead th.sorting:before,
table thead th.sorting_asc:before,
table thead th.sorting_desc:before,
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before {
  display: none !important;
  content: "" !important;
}

th.sorting:after,
th.sorting_asc:after,
th.sorting_desc:after,
td.sorting:after,
td.sorting_asc:after,
td.sorting_desc:after,
table thead th.sorting:after,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead td.sorting:after,
table.dataTable thead td.sorting_asc:after,
table.dataTable thead td.sorting_desc:after {
  content: "" !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 1 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  bottom: auto !important;
}

/* Neutral / Unsorted state: Sleek dual-arrow chevrons in neutral slate */
th.sorting:after,
td.sorting:after,
table thead th.sorting:after,
table.dataTable thead th.sorting:after,
table.dataTable thead td.sorting:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
  opacity: 0.55 !important;
  transition: opacity 0.2s ease !important;
}

th.sorting:hover:after,
td.sorting:hover:after,
table thead th.sorting:hover:after,
table.dataTable thead th.sorting:hover:after,
table.dataTable thead td.sorting:hover:after {
  opacity: 0.95 !important;
}

/* Sorted Ascending: Top chevron highlighted in primary theme */
th.sorting_asc:after,
td.sorting_asc:after,
table thead th.sorting_asc:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead td.sorting_asc:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5' stroke='%23cbd5e1' stroke-width='1.75' opacity='0.35'/%3E%3Cpath d='m7 9 5-5 5 5' stroke='%230284c7' stroke-width='2.75'/%3E%3C/svg%3E") !important;
  opacity: 1 !important;
}

/* Sorted Descending: Bottom chevron highlighted in primary theme */
th.sorting_desc:after,
td.sorting_desc:after,
table thead th.sorting_desc:after,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead td.sorting_desc:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5' stroke='%230284c7' stroke-width='2.75'/%3E%3Cpath d='m7 9 5-5 5 5' stroke='%23cbd5e1' stroke-width='1.75' opacity='0.35'/%3E%3C/svg%3E") !important;
  opacity: 1 !important;
}

/* Hide and completely zero out cloned DataTables dummy header row inside scrollBody */
div.dataTables_scrollBody > table > thead,
div.dataTables_scrollBody > table > thead > tr {
  height: 0 !important;
  max-height: 0 !important;
  line-height: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.dataTables_scrollBody > table > thead > tr > th,
div.dataTables_scrollBody > table > thead > tr > td {
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  color: transparent !important;
  outline: none !important;
}

div.dataTables_scrollBody > table > thead th:after,
div.dataTables_scrollBody > table > thead th:before,
div.dataTables_scrollBody > table > thead td:after,
div.dataTables_scrollBody > table > thead td:before,
div.dataTables_scrollBody table.dataTable thead th:after,
div.dataTables_scrollBody table.dataTable thead th:before {
  display: none !important;
  content: "" !important;
  background-image: none !important;
}

div.dataTables_scrollBody > table > thead > tr > th .dataTables_sizing,
div.dataTables_scrollBody > table > thead > tr > td .dataTables_sizing {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.table tbody td,
table.dataTable tbody td {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  padding: 6px 8px !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--odoo-border-subtle) !important;
  border-top: none !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.table tfoot th,
.table tfoot td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  white-space: nowrap !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  vertical-align: middle !important;
  background-color: #f8fafc !important;
  color: #334155 !important;
  font-weight: 700 !important;
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: #f8fafc !important;
}

.table tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* Checkbox Column (Compact & Centered in both Header & Body ONLY for row-selection columns in DataTables) */
#product_table_wrapper .dataTables_scrollHead th:first-child,
#product_table_wrapper .dataTables_scrollBody td:first-child,
#product_table_wrapper th:first-child,
#product_table_wrapper td:first-child,
table.dataTable th.select-checkbox,
table.dataTable td.select-checkbox,
table.dataTable th:has(input#select-all-row),
table.dataTable td:has(input.row-select) {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 40px !important;
  text-align: center !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
}

/* Product Thumbnail (Compact 30px like modern reference) */
.product-thumbnail-small,
table.dataTable td img.product-thumbnail-small,
table.dataTable td img,
.table td img {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain !important;
  border-radius: 5px !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Product Image Column: In sync between header and body (Only on Products list DataTable) */
#product_table_wrapper .dataTables_scrollHead th:nth-child(2),
#product_table_wrapper .dataTables_scrollBody td:nth-child(2),
#product_table_wrapper th:nth-child(2),
#product_table_wrapper td:nth-child(2) {
  width: 72px !important;
  min-width: 68px !important;
  max-width: 76px !important;
  text-align: center !important;
  padding: 6px 4px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
}

/* Action Dropdown & Buttons (Compact & Sleek) */
th.action,
td.action,
#product_table_wrapper .dataTables_scrollHead th:nth-child(3),
#product_table_wrapper .dataTables_scrollBody td:nth-child(3),
#product_table_wrapper th:nth-child(3),
#product_table_wrapper td:nth-child(3),
table.dataTable td:has(> .btn-group),
table.dataTable td:has(> .tw-dw-btn) {
  width: 86px !important;
  min-width: 82px !important;
  max-width: 92px !important;
  text-align: center !important;
  white-space: nowrap !important;
  padding: 4px 4px !important;
}

.table td .tw-dw-btn,
.table td .btn,
table.dataTable td .tw-dw-btn,
table.dataTable td .btn {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  line-height: 20px !important;
  border-radius: 5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.table td:has(button + button, .btn + .btn, .tw-dw-btn + .tw-dw-btn, a + button, button + a),
table.dataTable td:has(button + button, .btn + .btn, .tw-dw-btn + .tw-dw-btn, a + button, button + a) {
  min-width: 100px !important;
  white-space: nowrap !important;
}

/* Product and Location text wrap gracefully within reasonable bounds */
#product_table_wrapper .dataTables_scrollHead th:nth-child(4),
#product_table_wrapper .dataTables_scrollBody td:nth-child(4),
#product_table_wrapper th:nth-child(4),
#product_table_wrapper td:nth-child(4) {
  min-width: 160px !important;
  max-width: 220px !important;
  white-space: normal !important;
}

#product_table_wrapper .dataTables_scrollHead th:nth-child(5),
#product_table_wrapper .dataTables_scrollBody td:nth-child(5),
#product_table_wrapper th:nth-child(5),
#product_table_wrapper td:nth-child(5) {
  min-width: 140px !important;
  max-width: 190px !important;
  white-space: normal !important;
}

/* Purchase Price, Selling Price, and Current Stock columns */
#product_table_wrapper .dataTables_scrollHead th:nth-child(6),
#product_table_wrapper .dataTables_scrollBody td:nth-child(6),
#product_table_wrapper th:nth-child(6),
#product_table_wrapper td:nth-child(6) {
  min-width: 115px !important;
  max-width: 140px !important;
  white-space: nowrap !important;
}

#product_table_wrapper .dataTables_scrollHead th:nth-child(7),
#product_table_wrapper .dataTables_scrollBody td:nth-child(7),
#product_table_wrapper th:nth-child(7),
#product_table_wrapper td:nth-child(7) {
  min-width: 110px !important;
  max-width: 135px !important;
  white-space: nowrap !important;
}

#product_table_wrapper .dataTables_scrollHead th:nth-child(8),
#product_table_wrapper .dataTables_scrollBody td:nth-child(8),
#product_table_wrapper th:nth-child(8),
#product_table_wrapper td:nth-child(8) {
  min-width: 105px !important;
  max-width: 130px !important;
  white-space: nowrap !important;
}

/* Ensure wide product table has sufficient minimum width to display all columns without crushing and locked fixed layout */
#product_table_wrapper .dataTables_scrollHeadInner,
#product_table_wrapper .dataTables_scrollHeadInner > table,
#product_table_wrapper .dataTables_scrollBody > table,
#product_table_wrapper .dataTables_scrollFootInner > table {
  min-width: 1450px !important;
  table-layout: fixed !important;
}

/* Labels Preview Setting Form (Print Labels Page: clean 4-column grid layout without overlapping) */
#preview_setting_form table.table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: separate !important;
  margin-top: 10px !important;
}

#preview_setting_form table.table tr > td {
  width: 25% !important;
  min-width: 0 !important;
  max-width: 25% !important;
  vertical-align: top !important;
  text-align: left !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

#preview_setting_form .checkbox {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

#preview_setting_form .input-group {
  width: 100% !important;
  max-width: 200px !important;
}

/* Currency amounts, numbers, badges, status pills stay on a single line */
table.dataTable td:has(> div[style*="white-space"]),
table.dataTable td .badge,
table.dataTable td .label,
table.dataTable td:has(.badge),
table.dataTable td:has(.label) {
  white-space: nowrap !important;
}

/* ==========================================================================
   Visible & Modern Styled Horizontal Scrollbar ("add scroll thing")
   Prominent, clean, and easily draggable scrollbars across macOS & all browsers
   ========================================================================== */

.table-responsive::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
div.dataTables_scrollBody::-webkit-scrollbar,
div.dataTables_wrapper::-webkit-scrollbar {
  height: 11px !important;
  width: 11px !important;
  -webkit-appearance: none !important;
  display: block !important;
}

.table-responsive::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track,
div.dataTables_scrollBody::-webkit-scrollbar-track,
div.dataTables_wrapper::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
}

.table-responsive::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb,
div.dataTables_scrollBody::-webkit-scrollbar-thumb,
div.dataTables_wrapper::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 8px !important;
  border: 2px solid #f1f5f9 !important;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
div.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* Firefox scrollbar */
.table-responsive,
.dataTables_scrollBody,
div.dataTables_scrollBody,
div.dataTables_wrapper {
  scrollbar-width: thin !important;
  scrollbar-color: #94a3b8 #f1f5f9 !important;
}

/* DataTables Export Buttons (Matching Reference Clean Action Buttons) */
div.dt-buttons,
.dt-buttons {
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

div.dt-buttons .dt-button,
div.dt-buttons .btn-default,
div.dt-buttons a.btn,
div.dt-buttons button.btn,
.dt-buttons .dt-button,
.dt-buttons .btn-default,
.dt-buttons a.btn,
a.dt-button {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 12px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

div.dt-buttons .dt-button:hover,
div.dt-buttons .btn-default:hover,
div.dt-buttons a.btn:hover,
div.dt-buttons button.btn:hover,
.dt-buttons .dt-button:hover,
.dt-buttons .btn-default:hover,
.dt-buttons a.btn:hover,
a.dt-button:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Ensure icons inside dt-button have exact 6px spacing */
.dt-buttons .dt-button i,
.dt-buttons .dt-button .fa,
.dt-buttons .dt-button svg,
.dt-buttons .dt-button span i,
.dt-buttons .dt-button span .fa,
.dt-buttons .dt-button span svg,
a.dt-button i,
a.dt-button .fa,
a.dt-button svg,
a.dt-button span i,
a.dt-button span .fa,
a.dt-button span svg {
  margin-right: 6px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

/* Modern DataTables Dropdown Collection */
div.dt-button-collection,
ul.dt-button-collection {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 6px !important;
  z-index: 2002 !important;
}

div.dt-button-collection a.dt-button,
ul.dt-button-collection a.dt-button,
ul.dt-button-collection li a {
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
}

div.dt-button-collection a.dt-button:hover,
ul.dt-button-collection a.dt-button:hover,
ul.dt-button-collection li a:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

div.dt-button-collection a.dt-button.active,
ul.dt-button-collection a.dt-button.active,
ul.dt-button-collection li.active a {
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
}

/* DataTables Modern Control Rows & Grid Normalization */
div.dataTables_wrapper,
.dataTables_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  clear: both !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper > div.row,
.dataTables_wrapper > div.row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  row-gap: 12px !important;
  column-gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper > div.row::before,
div.dataTables_wrapper > div.row::after,
.dataTables_wrapper > div.row::before,
.dataTables_wrapper > div.row::after {
  display: none !important;
}

div.dataTables_wrapper > div.row > [class*="col-"],
.dataTables_wrapper > div.row > [class*="col-"] {
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: static !important;
  box-sizing: border-box !important;
}

/* TABLE CONTAINER ROW & COLUMN: Prevent flex overflow, enable smooth horizontal scrolling inside card */
div.dataTables_wrapper > div.row:not(:first-child):not(:last-child),
.dataTables_wrapper > div.row:not(:first-child):not(:last-child),
div.dataTables_wrapper > div.row:has(table),
.dataTables_wrapper > div.row:has(table),
div.dataTables_wrapper > div.row:has(.dataTable),
.dataTables_wrapper > div.row:has(.dataTable) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper > div.row:not(:first-child):not(:last-child) > [class*="col-"],
.dataTables_wrapper > div.row:not(:first-child):not(:last-child) > [class*="col-"],
div.dataTables_wrapper > div.row:has(table) > [class*="col-"],
.dataTables_wrapper > div.row:has(table) > [class*="col-"],
div.dataTables_wrapper [class*="col-"]:has(table),
.dataTables_wrapper [class*="col-"]:has(table),
div.dataTables_wrapper [class*="col-"]:has(.dataTable),
.dataTables_wrapper [class*="col-"]:has(.dataTable) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: #94a3b8 #f1f5f9 !important;
}

div.dataTables_wrapper [class*="col-"]:has(table)::-webkit-scrollbar,
div.dataTables_wrapper > div.row:has(table)::-webkit-scrollbar {
  height: 6px !important;
  width: 6px !important;
}

div.dataTables_wrapper [class*="col-"]:has(table)::-webkit-scrollbar-track,
div.dataTables_wrapper > div.row:has(table)::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 9999px !important;
}

div.dataTables_wrapper [class*="col-"]:has(table)::-webkit-scrollbar-thumb,
div.dataTables_wrapper > div.row:has(table)::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 9999px !important;
}

div.dataTables_wrapper [class*="col-"]:has(table)::-webkit-scrollbar-thumb:hover,
div.dataTables_wrapper > div.row:has(table)::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* When dataTables_scroll is used, let dataTables_scrollBody handle the scroll */
div.dataTables_wrapper > div.row:has(.dataTables_scroll),
.dataTables_wrapper > div.row:has(.dataTables_scroll),
div.dataTables_wrapper [class*="col-"]:has(.dataTables_scroll),
.dataTables_wrapper [class*="col-"]:has(.dataTables_scroll) {
  overflow-x: visible !important;
}

div.dataTables_wrapper > div.row:first-child {
  margin-bottom: 12px !important;
}

/* TOP CONTROLS ROW: Length on left, Search on right, Buttons below if present */
div.dataTables_wrapper > div.row:first-child > .col-sm-1,
div.dataTables_wrapper > div.row:first-child > div:has(.dataTables_length) {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: fit-content !important;
  white-space: nowrap !important;
  margin-right: auto !important;
}

div.dataTables_wrapper > div.row:first-child > .col-sm-3,
div.dataTables_wrapper > div.row:first-child > div:has(.dataTables_filter) {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  width: auto !important;
  min-width: fit-content !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* When empty, buttons column takes NO space */
div.dataTables_wrapper > div.row:first-child > .col-sm-8:empty,
div.dataTables_wrapper > div.row:first-child > [class*="col-"]:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 0 !important;
}

/* When buttons are present, give them a full-width dedicated action toolbar row */
div.dataTables_wrapper > div.row:first-child > div:has(.dt-buttons),
div.dataTables_wrapper > div.row:first-child > .col-sm-8:not(:empty) {
  order: 3 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

/* BOTTOM CONTROLS ROW: Info on left, Pagination on right */
div.dataTables_wrapper > div.row:last-child {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

div.dataTables_wrapper > div.row:last-child > div:has(.dataTables_info),
div.dataTables_wrapper > div.row:last-child > [class*="col-"]:first-child {
  flex: 0 0 auto !important;
  margin-right: auto !important;
}

div.dataTables_wrapper > div.row:last-child > div:has(.dataTables_paginate),
div.dataTables_wrapper > div.row:last-child > [class*="col-"]:has(.dataTables_paginate),
div.dataTables_wrapper > div.row:last-child > [class*="col-"]:last-child:not(:first-child) {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* DataTables Search & Length Controls */
div.dataTables_wrapper div.dataTables_length,
.dataTables_wrapper .dataTables_length,
.dataTables_length {
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper div.dataTables_length label,
.dataTables_wrapper .dataTables_length label,
.dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper div.dataTables_length select,
.dataTables_wrapper .dataTables_length select,
.dataTables_length select {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  line-height: 34px !important;
  width: auto !important;
  min-width: 72px !important;
  margin: 0 8px !important;
  padding: 0 28px 0 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 13px 13px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  vertical-align: middle !important;
}

div.dataTables_wrapper div.dataTables_length select:hover,
.dataTables_wrapper .dataTables_length select:hover,
.dataTables_length select:hover {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
}

div.dataTables_wrapper div.dataTables_length select:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_length select:focus {
  outline: none !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

div.dataTables_wrapper div.dataTables_filter,
.dataTables_wrapper .dataTables_filter,
.dataTables_filter {
  margin-bottom: 0 !important;
  text-align: right !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper div.dataTables_filter label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper div.dataTables_filter input,
.dataTables_wrapper .dataTables_filter input,
.dataTables_filter input {
  height: 36px !important;
  line-height: 34px !important;
  width: 220px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 12px 0 34px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 11px center !important;
  background-size: 14px 14px !important;
  transition: all 0.15s ease-in-out !important;
  vertical-align: middle !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
  outline: none !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  background-color: #ffffff !important;
}

/* DataTables Info */
div.dataTables_wrapper div.dataTables_info {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* DataTables & Bootstrap Pagination (Modern Pills) */
div.dataTables_wrapper div.dataTables_paginate {
  margin: 8px 0 !important;
  text-align: right !important;
  display: flex !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination,
.pagination,
ul.pagination {
  margin: 6px 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Reset outer list items - NEVER have borders or backgrounds */
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li,
.pagination > li,
ul.pagination > li,
.dataTables_wrapper .dataTables_paginate li.paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-width: auto !important;
}

/* The actual button inside pagination (a, span, or standalone paginate_button) */
.pagination > li > a,
.pagination > li > span,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > span,
.dataTables_wrapper .dataTables_paginate a.paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  margin: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  float: none !important;
}

/* Active Page Button */
.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > span:hover,
.pagination > li.active > a:focus,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25) !important;
  cursor: default !important;
  z-index: 2 !important;
}

/* Hover Page Button */
.pagination > li > a:hover,
.pagination > li > span:hover,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Disabled Page Button (Previous / Next when inactive) */
.pagination > li.disabled > a,
.pagination > li.disabled > span,
.pagination > li.disabled > a:hover,
.pagination > li.disabled > span:hover,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > a:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Table footers and mass-action button rows */
table.dataTable tfoot td > div,
.table tfoot td > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Action Dropdown Buttons inside table cells */
.table td .btn,
table.dataTable td .btn {
  border-radius: 6px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.15s ease-in-out !important;
}

.table td .btn-xs,
table.dataTable td .btn-xs {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 26px !important;
}

.table td .dropdown-toggle .caret,
table.dataTable td .dropdown-toggle .caret {
  margin-left: 5px !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   Badges, Status Pills & Tags
   ========================================================================== */
.badge,
.label {
  border-radius: 20px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.label-success,
.badge-success {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

.label-info,
.badge-info {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}

.label-warning,
.badge-warning {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.label-danger,
.badge-danger {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* ==========================================================================
   Buttons System
   ========================================================================== */
.btn:not(.hide):not(.hidden) {
  font-family: var(--odoo-font) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}

.hide,
.hidden,
.btn.hide,
.btn.hidden {
  display: none !important;
}

.btn-primary {
  background-color: var(--odoo-primary) !important;
  border-color: var(--odoo-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--odoo-primary-hover) !important;
  border-color: var(--odoo-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(107, 33, 68, 0.2) !important;
}

.btn-success {
  background-color: var(--odoo-teal) !important;
  border-color: var(--odoo-teal) !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--odoo-teal-dark) !important;
  border-color: var(--odoo-teal-dark) !important;
  color: #ffffff !important;
}

.btn-default {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.btn-info {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}
.btn-info:hover {
  background-color: #0369a1 !important;
}

.btn-warning {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}
.btn-warning:hover {
  background-color: #d97706 !important;
}

.btn-danger {
  background-color: #f43f5e !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
}
.btn-danger:hover {
  background-color: #e11d48 !important;
}

.btn-sm, .btn-xs {
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

/* Modals */
.modal-content {
  border-radius: 18px !important;
  border: 1px solid var(--odoo-border) !important;
  box-shadow: var(--odoo-shadow-lg) !important;
  overflow: hidden !important;
}

.modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 18px 24px !important;
  background-color: #ffffff !important;
}

.modal-title {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #0f172a !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid #f1f5f9 !important;
  padding: 16px 24px !important;
  background-color: #fafbfc !important;
}

/* Nav Tabs */
.nav-tabs {
  border-bottom: 1px solid #e2e8f0 !important;
}

.nav-tabs > li > a {
  border-radius: 10px 10px 0 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #64748b !important;
  border: 1px solid transparent !important;
  margin-right: 4px !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: var(--odoo-teal) !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-bottom-color: #ffffff !important;
}

/* Form inputs global */
.form-control {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 1.42857 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 13px !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus {
  border-color: var(--odoo-teal, #10b981) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
  outline: none !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  padding: 10px 14px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   Auth / Login Page Aesthetic
   ========================================================================== */
body.pace-done,
body[class*="pace-done"] {
  background-color: #f8fafc !important;
}

.right-col {
  background: transparent !important;
}

div[class*="tw-rounded-2xl"][class*="tw-bg-white"] {
  border-radius: 16px !important;
  border: 1px solid var(--odoo-border) !important;
  box-shadow: var(--odoo-shadow-lg) !important;
}

/* ==========================================================================
   Business Settings, File Inputs & Pos Tab Styling
   ========================================================================== */
.content-header {
  padding: 24px 24px 12px 24px !important;
}

.content-header h1 {
  margin: 0 0 16px 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Page Content Spacing & Horizontal Alignment - Guaranteed Full Width */
section.content,
.content,
.main-page-content > .content,
section.content-header,
.content-header {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 0 24px 24px 24px !important;
  box-sizing: border-box !important;
}

section.content > form,
.content > form,
form#bussiness_edit_form,
.main-page-content form,
section.content form {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

section.content > .row,
.content > .row,
section.content form > .row,
.content form > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Modern Nav-Tabs-Custom Card and Content Padding */
.nav-tabs-custom {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid var(--odoo-border) !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.nav-tabs-custom > .nav-tabs {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--odoo-border) !important;
  padding: 8px 16px 0 16px !important;
  margin: 0 !important;
  display: flex !important;
  gap: 4px !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
  color: #64748b !important;
  padding: 10px 18px !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  transition: all 0.15s ease-in-out !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: var(--odoo-border) var(--odoo-border) #ffffff !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.02) !important;
}

.nav-tabs-custom > .tab-content {
  background: #ffffff !important;
  padding: 20px 24px 24px 24px !important;
  border-radius: 0 0 14px 14px !important;
}

/* Box & Box-Solid Card & Body Padding */
.box,
.box-solid {
  border-radius: 14px !important;
  border: 1px solid var(--odoo-border) !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  background: #ffffff !important;
  margin-bottom: 24px !important;
}

.box-header {
  padding: 16px 20px 12px 20px !important;
}

.box-body {
  padding: 16px 20px 20px 20px !important;
}

/* ==========================================================================
   Modern Odoo FileInput & Upload Controls
   ========================================================================== */
.file-input {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Hide preview box and close icon in new / empty state */
.file-input.file-input-new .file-preview,
.file-input-new .file-preview,
.file-input.file-input-new .close,
.file-input-new .close {
  display: none !important;
}

/* Horizontal input group uniting caption and browse button */
.file-input .file-caption-main,
.file-input .input-group.file-caption-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* The caption field */
.file-input .file-caption-main .form-control.file-caption,
.file-input .form-control.file-caption {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default !important;
  box-sizing: border-box !important;
}

.file-input .file-caption-name {
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  color: #334155 !important;
  line-height: normal !important;
}

.file-input .file-caption-name:empty::before,
.file-input.file-input-new .file-caption-name::before,
.file-input-new .file-caption-name::before {
  content: "No file chosen";
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* The button group */
.file-input .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  white-space: nowrap !important;
}

/* Action buttons inside file-input */
.file-input .input-group-btn .btn.btn-file,
.file-input .input-group > .input-group-btn > .btn.btn-file,
.file-input:not(.file-input-new) .fileinput-remove-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  position: relative !important;
  margin: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding: 0 14px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Remove button when visible */
.file-input .input-group-btn .fileinput-remove-button,
.file-input .input-group > .input-group-btn > .fileinput-remove-button {
  background-color: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
  color: #ef4444 !important;
  border-left: none !important;
  cursor: pointer !important;
}

.file-input .input-group-btn .fileinput-remove-button:hover,
.file-input .input-group > .input-group-btn > .fileinput-remove-button:hover {
  background-color: #fecaca !important;
  color: #dc2626 !important;
}

/* Strictly hide buttons that shouldn't appear */
div.file-input.file-input-new .fileinput-remove,
div.file-input.file-input-new .fileinput-remove-button,
div.file-input.file-input-new button.fileinput-remove-button,
div.file-input.file-input-new .btn.fileinput-remove-button,
.file-input.file-input-new .fileinput-remove,
.file-input.file-input-new .fileinput-remove-button,
.file-input-new .fileinput-remove,
.file-input-new .fileinput-remove-button,
.file-input .fileinput-cancel,
.file-input .fileinput-cancel-button,
.file-input .fileinput-cancel-button.hide,
.file-input .kv-hidden,
.file-input .fileinput-upload-button,
.file-input-new .fileinput-upload-button {
  display: none !important;
}

/* Primary Browse button */
.file-input .btn-file,
.file-input .btn.btn-file,
.file-input .btn-primary.btn-file,
.file-input .input-group-btn .btn-file,
.file-input .input-group > .input-group-btn > .btn-file {
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--odoo-primary, #714B67) !important;
  border: 1px solid var(--odoo-primary, #714B67) !important;
  color: #ffffff !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  padding: 0 16px !important;
}

.file-input .btn-file:hover,
.file-input .btn-primary.btn-file:hover,
.file-input .input-group-btn .btn-file:hover,
.file-input .input-group > .input-group-btn > .btn-file:hover {
  background-color: #5b3d53 !important;
  border-color: #5b3d53 !important;
  color: #ffffff !important;
}

.file-input .btn-file i,
.file-input .btn-file span {
  color: #ffffff !important;
}

/* Fully conceal the native input[type=file] */
.file-input .btn-file input[type=file],
.btn-file input[type=file] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 10 !important;
  display: block !important;
}

/* Form Columns Gaps in Business Settings */
.pos-tab-content .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}

/* ==========================================================================
   Pos Tab Container & Multi-Tab Settings (Guaranteed Full-Width & Fixed Left Menu)
   ========================================================================== */
.pos-tab-container,
div.pos-tab-container {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  box-sizing: border-box !important;
  margin-bottom: 24px !important;
}

/* Ensure widget wrapper hierarchy inside .pos-tab-container does not shrink */
.pos-tab-container > div,
.pos-tab-container .tw-flow-root,
.pos-tab-container .tw-flow-root > div,
.pos-tab-container .tw-flow-root > div > div {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

.pos-tab-container div:has(> .pos-tab-menu),
.pos-tab-container .tw-flow-root > div > div,
div.pos-tab-container > .row:first-child,
div.pos-tab-container:not(:has(.tw-flow-root)) {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 100% !important;
  gap: 24px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Fixed-width Tab Menu on Left (Never shrinks, never truncates tab labels) */
.pos-tab-menu,
div.pos-tab-menu {
  flex: 0 0 240px !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

.pos-tab-menu .list-group {
  width: 100% !important;
  min-width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid var(--odoo-border) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
}

.pos-tab-menu .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--odoo-text-muted, #64748b) !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  background: #ffffff !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.pos-tab-menu .list-group-item:last-child {
  border-bottom: none !important;
}

.pos-tab-menu .list-group-item.active,
.pos-tab-menu .list-group-item.active:hover {
  background-color: var(--odoo-primary-light, #eff6ff) !important;
  color: var(--odoo-primary, #6366f1) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--odoo-primary, #6366f1) !important;
}

.pos-tab-menu .list-group-item:hover {
  background-color: #f8fafc !important;
  color: var(--odoo-text-main, #0f172a) !important;
}

/* Flexible Content Panel on Right (Takes full remaining space) */
.pos-tab,
div.pos-tab {
  flex: 1 1 0 !important;
  width: calc(100% - 264px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

.pos-tab-content,
div.pos-tab-content {
  width: 100% !important;
  min-width: 100% !important;
  background: #ffffff !important;
  padding: 0 0 0 8px !important;
  box-sizing: border-box !important;
}

.pos-tab div.pos-tab-content:not(.active) {
  display: none !important;
}

.pos-tab div.pos-tab-content.active {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

.pos-tab-content > .row,
.pos-tab-content .row {
  width: 100% !important;
  min-width: 100% !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

.pos-tab-content [class*="col-sm-"],
.pos-tab-content [class*="col-md-"],
.pos-tab-content [class*="col-lg-"] {
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .pos-tab-content .col-sm-1, .pos-tab-content .col-md-1 { flex: 0 0 8.33333333% !important; max-width: 8.33333333% !important; width: 8.33333333% !important; }
  .pos-tab-content .col-sm-2, .pos-tab-content .col-md-2 { flex: 0 0 16.66666667% !important; max-width: 16.66666667% !important; width: 16.66666667% !important; }
  .pos-tab-content .col-sm-3, .pos-tab-content .col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; width: 25% !important; }
  .pos-tab-content .col-sm-4, .pos-tab-content .col-md-4 { flex: 0 0 33.33333333% !important; max-width: 33.33333333% !important; width: 33.33333333% !important; }
  .pos-tab-content .col-sm-5, .pos-tab-content .col-md-5 { flex: 0 0 41.66666667% !important; max-width: 41.66666667% !important; width: 41.66666667% !important; }
  .pos-tab-content .col-sm-6, .pos-tab-content .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; }
  .pos-tab-content .col-sm-7, .pos-tab-content .col-md-7 { flex: 0 0 58.33333333% !important; max-width: 58.33333333% !important; width: 58.33333333% !important; }
  .pos-tab-content .col-sm-8, .pos-tab-content .col-md-8 { flex: 0 0 66.66666667% !important; max-width: 66.66666667% !important; width: 66.66666667% !important; }
  .pos-tab-content .col-sm-9, .pos-tab-content .col-md-9 { flex: 0 0 75% !important; max-width: 75% !important; width: 75% !important; }
  .pos-tab-content .col-sm-10, .pos-tab-content .col-md-10 { flex: 0 0 83.33333333% !important; max-width: 83.33333333% !important; width: 83.33333333% !important; }
  .pos-tab-content .col-sm-11, .pos-tab-content .col-md-11 { flex: 0 0 91.66666667% !important; max-width: 91.66666667% !important; width: 91.66666667% !important; }
  .pos-tab-content .col-sm-12, .pos-tab-content .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
}

/* Responsive adjustment for tablets & mobile */
@media (max-width: 991px) {
  .pos-tab-container .tw-flow-root > div > div {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .pos-tab-menu,
  div.pos-tab-menu {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .pos-tab,
  div.pos-tab {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* ==========================================================================
   Universal Modern Input Groups & Select2 Integration (Global Unified System)
   ========================================================================== */
.input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
  border-collapse: separate !important;
}

/* Hide non-rendered elements from taking up flexbox space */
.input-group > input[type="hidden"],
.input-group > select.select2-hidden-accessible {
  display: none !important;
  position: absolute !important;
}

/* Universal Addons */
.input-group > .input-group-addon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  font-size: 13px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 40px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  border-radius: 0 !important;
}

.input-group-addon {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

/* Form Controls inside Input Group */
.input-group > .form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 1.42857 !important;
  padding: 8px 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
  font-size: 13px !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

.input-group > .form-control:focus {
  border-color: var(--odoo-teal, #10b981) !important;
  z-index: 3 !important;
  box-shadow: 0 0 0 1px var(--odoo-teal, #10b981) !important;
}

/* Select2 inside Input Group */
.input-group > .select2-container {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  display: flex !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.input-group > .select2-container .selection {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
}

/* Base Select2 inside Input Group - reset any independent pill shapes */
.input-group .select2-container .select2-selection,
.input-group .select2-container .select2-selection--single,
.input-group .select2-container.select2-container--focus .select2-selection,
.input-group .select2-container.select2-container--focus .select2-selection--single,
.input-group .select2-container.select2-container--open .select2-selection,
.input-group .select2-container.select2-container--open .select2-selection--single {
  height: 40px !important;
  min-height: 40px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 14px !important;
  padding-right: 32px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.input-group > .select2-container .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  width: 28px !important;
  right: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.input-group > .select2-container.select2-container--focus,
.input-group > .select2-container.select2-container--open {
  z-index: 3 !important;
}

.input-group > .select2-container.select2-container--focus .select2-selection,
.input-group > .select2-container.select2-container--focus .select2-selection--single,
.input-group > .select2-container.select2-container--open .select2-selection,
.input-group > .select2-container.select2-container--open .select2-selection--single {
  border-color: var(--odoo-teal, #10b981) !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

.input-group > .select2-container:first-child.select2-container--focus .select2-selection,
.input-group > .select2-container:first-child.select2-container--focus .select2-selection--single,
.input-group > select:first-child + .select2-container.select2-container--focus .select2-selection,
.input-group > select:first-child + .select2-container.select2-container--focus .select2-selection--single {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .select2-container:last-child.select2-container--focus .select2-selection,
.input-group > .select2-container:last-child.select2-container--focus .select2-selection--single {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Input Group Buttons */
.input-group > .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  width: auto !important;
  position: relative !important;
  z-index: 1 !important;
  white-space: nowrap !important;
}

.input-group > .input-group-btn > .btn:not(.btn-file) {
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.input-group > .input-group-btn > .btn:not(.btn-file):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  z-index: 2 !important;
}

.input-group > .input-group-btn > .btn:focus {
  border-color: var(--odoo-teal, #10b981) !important;
  z-index: 3 !important;
  box-shadow: none !important;
}

.input-group-btn > .btn:not(:first-child) {
  margin-left: -1px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group-btn > .btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Margin overlap between adjacent siblings to prevent double borders */
.input-group > *:not(:first-child) {
  margin-left: -1px !important;
}

/* First visible child rounding */
.input-group > .input-group-addon:first-child,
.input-group > .input-group-btn:first-child > .btn:first-child,
.input-group > .form-control:first-child,
.input-group > .select2-container:first-child .select2-selection,
.input-group > .select2-container:first-child .select2-selection--single,
.input-group > select:first-child + .select2-container .select2-selection,
.input-group > select:first-child + .select2-container .select2-selection--single {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Last visible child rounding */
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn:last-child,
.input-group > .form-control:last-child,
.input-group > .select2-container:last-child .select2-selection,
.input-group > .select2-container:last-child .select2-selection--single {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Middle items have zero border radius */
.input-group > .input-group-addon:not(:first-child):not(:last-child),
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .select2-container:not(:first-child):not(:last-child) .select2-selection,
.input-group > .select2-container:not(:first-child):not(:last-child) .select2-selection--single {
  border-radius: 0 !important;
}

/* Specific case: select2 or form-control preceded by addon and followed by addon/btn */
.input-group > .input-group-addon ~ .form-control:not(:last-child),
.input-group > .input-group-addon ~ .select2-container:not(:last-child) .select2-selection,
.input-group > .input-group-addon ~ .select2-container:not(:last-child) .select2-selection--single {
  border-radius: 0 !important;
}

/* Specific case: select2 preceded by hidden inputs (like customer select2) */
.input-group > input[type="hidden"] ~ .select2-container:not(:last-child) .select2-selection,
.input-group > input[type="hidden"] ~ .select2-container:not(:last-child) .select2-selection--single {
  border-radius: 0 !important;
}

.input-group > input[type="hidden"] ~ .select2-container:last-child .select2-selection,
.input-group > input[type="hidden"] ~ .select2-container:last-child .select2-selection--single {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Fallback for when hidden inputs precede the first visible addon or control */
.input-group > input[type="hidden"]:first-child ~ .input-group-addon:first-of-type,
.input-group > input[type="hidden"]:first-child ~ .input-group-btn:first-of-type > .btn:first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

/* Small input group modifiers */
.input-group-sm > .input-group-addon,
.input-group-sm > .form-control,
.input-group-sm > .select2-container .select2-selection--single,
.input-group-sm > .input-group-btn > .btn {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12px !important;
}

/* Pay term number and type split inputs */
.width-40.pull-left {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  height: 40px !important;
  border-color: #cbd5e1 !important;
}
.width-60.pull-left {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  margin-left: -1px !important;
  height: 40px !important;
  border-color: #cbd5e1 !important;
}
.width-60.pull-left:focus,
.width-40.pull-left:focus {
  z-index: 3 !important;
}

/* Dashboard Grids */
.odoo-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 1200px) {
  .odoo-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .odoo-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Modern Colorful KPI Action Cards (Home Dashboard)
   ========================================================================== */
.odoo-kpi-card {
  display: block !important;
  text-decoration: none !important;
  position: relative !important;
  border-radius: 18px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.odoo-kpi-card:hover {
  text-decoration: none !important;
  transform: translateY(-4px) !important;
}

.odoo-kpi-card:active {
  transform: translateY(1px) scale(0.985) !important;
  transition-duration: 0.08s !important;
}

.odoo-kpi-card .tw-p-5 {
  padding: 20px 22px !important;
}

.odoo-kpi-card .odoo-kpi-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease !important;
  flex-shrink: 0 !important;
}

.odoo-kpi-card:hover .odoo-kpi-badge {
  transform: scale(1.1) rotate(4deg) !important;
  background: rgba(255, 255, 255, 0.32) !important;
}

.odoo-kpi-card .odoo-kpi-badge svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.2 !important;
  display: block !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.odoo-kpi-card .odoo-kpi-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.odoo-kpi-card .odoo-kpi-title i,
.odoo-kpi-card .odoo-kpi-title svg {
  color: rgba(255, 255, 255, 0.85) !important;
}

.odoo-kpi-card .odoo-kpi-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.odoo-kpi-card .odoo-kpi-action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  transition: all 0.18s ease-in-out !important;
}

.odoo-kpi-card .odoo-kpi-action span {
  color: rgba(255, 255, 255, 0.95) !important;
}

.odoo-kpi-card .odoo-kpi-action svg {
  width: 15px !important;
  height: 15px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  transition: transform 0.18s ease-in-out !important;
}

.odoo-kpi-card:hover .odoo-kpi-action svg {
  transform: translateX(4px) !important;
}

/* 1. Total Sales (Solid Emerald) */
.odoo-kpi-card.odoo-kpi-sales {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(5, 150, 105, 0.38) !important;
}
.odoo-kpi-card.odoo-kpi-sales:hover {
  box-shadow: 0 14px 28px -4px rgba(5, 150, 105, 0.5) !important;
}

/* 2. Net (Solid Ocean Teal) */
.odoo-kpi-card.odoo-kpi-net {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(8, 145, 178, 0.38) !important;
}
.odoo-kpi-card.odoo-kpi-net:hover {
  box-shadow: 0 14px 28px -4px rgba(8, 145, 178, 0.5) !important;
}

/* 3. Invoice Due (Solid Amber / Gold) */
.odoo-kpi-card.odoo-kpi-invoicedue {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(217, 119, 6, 0.38) !important;
}
.odoo-kpi-card.odoo-kpi-invoicedue:hover {
  box-shadow: 0 14px 28px -4px rgba(217, 119, 6, 0.5) !important;
}

/* 4. Total Sell Return (Solid Crimson / Rose) */
.odoo-kpi-card.odoo-kpi-sellreturn {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(225, 29, 72, 0.38) !important;
}
.odoo-kpi-card.odoo-kpi-sellreturn:hover {
  box-shadow: 0 14px 28px -4px rgba(225, 29, 72, 0.5) !important;
}

/* 5. Total Purchase (Solid Royal Indigo) */
.odoo-kpi-card.odoo-kpi-purchase {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.38) !important;
}
.odoo-kpi-card.odoo-kpi-purchase:hover {
  box-shadow: 0 14px 28px -4px rgba(79, 70, 229, 0.5) !important;
}

/* 6. Purchase Due (Solid Vivid Orange) */
.odoo-kpi-card.odoo-kpi-purchasedue {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(234, 88, 12, 0.38) !important;
}
.odoo-kpi-card.odoo-kpi-purchasedue:hover {
  box-shadow: 0 14px 28px -4px rgba(234, 88, 12, 0.5) !important;
}

/* 7. Total Purchase Return (Solid Vibrant Purple) */
.odoo-kpi-card.odoo-kpi-purchasereturn {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(147, 51, 234, 0.38) !important;
}
.odoo-kpi-card.odoo-kpi-purchasereturn:hover {
  box-shadow: 0 14px 28px -4px rgba(147, 51, 234, 0.5) !important;
}

/* 8. Expense (Solid Odoo Plum / POS Burgundy #6b2144) */
.odoo-kpi-card.odoo-kpi-expense {
  background: linear-gradient(135deg, #831843 0%, #6b2144 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(107, 33, 68, 0.42) !important;
}
.odoo-kpi-card.odoo-kpi-expense:hover {
  box-shadow: 0 14px 28px -4px rgba(107, 33, 68, 0.55) !important;
}

.odoo-charts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 991px) {
  .odoo-charts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Modern POS Screen Styling (Odoo Design System)
   ========================================================================== */

/* POS Header Bar */
.pos-header {
  background: transparent !important;
  padding: 6px 12px !important;
}

.pos-header > div {
  background: #ffffff !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.pos-header-location-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.pos-header-location-wrap p {
  margin: 0 !important;
  font-weight: 700 !important;
  color: var(--odoo-text-main) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
}

.pos-header-location-wrap select {
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 38px 6px 14px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 14px) center !important;
  background-size: 14px 14px !important;
  cursor: pointer !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  transition: all 0.2s ease !important;
  min-width: 210px !important;
}

.pos-header-location-wrap select:hover {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
}

.pos-header-location-wrap select:focus {
  border-color: var(--odoo-purple, #6b2144) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(107, 33, 68, 0.12) !important;
}

.pos-header-location-wrap .select2-container {
  min-width: 220px !important;
}

.pos-header-location-wrap .select2-container--default .select2-selection--single {
  height: 38px !important;
  border-radius: 12px !important;
  border-color: #cbd5e1 !important;
  padding-right: 38px !important;
}

.pos-header-location-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 14px !important;
}

/* Universal select inputs with clean vector chevron and comfortable padding */
select.form-control:not(.dataTables_wrapper select),
select.input-sm:not(.dataTables_wrapper select),
select:not([multiple]):not(.custom-select):not(.dataTables_wrapper select):not(.auth-lang-select) {
  padding-right: 38px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 14px) center !important;
  background-size: 14px 14px !important;
  border-radius: 10px !important;
}

/* Universal Button Dropdown Caret Padding */
.btn.dropdown-toggle,
.dropdown-toggle {
  padding-right: 16px !important;
  padding-left: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn.dropdown-toggle .caret,
.dropdown-toggle .caret {
  margin-left: 8px !important;
  margin-right: 0 !important;
  border-top-width: 5px !important;
  border-right-width: 4px !important;
  border-left-width: 4px !important;
}

.btn > i.fa-angle-down:last-child,
.btn > i.fa-chevron-down:last-child,
.btn > i.fa-caret-down:last-child,
.btn > svg:last-child {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

.pos-datetime-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background-color: #f8fafc !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 10px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* POS Header Action Buttons (Go back, Calc, Register, etc.) */
.pos-header-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid var(--odoo-border) !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.pos-header-btn:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.06) !important;
}

.pos-header-btn.btn-close-reg:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

.pos-header-btn.btn-reg-details:hover {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #059669 !important;
}

.pos-header-btn.btn-calc:hover {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #16a34a !important;
}

.pos-header-btn.btn-return:hover {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #e11d48 !important;
}

.pos-header-btn.btn-fullscreen:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

.pos-header-btn.btn-pause:hover {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #d97706 !important;
}

.pos-header-btn-expense {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: #fdf2f8 !important;
  border: 1px solid #fbcfe8 !important;
  color: #9d174d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.pos-header-btn-expense:hover {
  background: #fce7f3 !important;
  border-color: #f472b6 !important;
  color: #831843 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Modern Odoo POS Screen Layout (Side-by-Side Cart & Products Catalog)
   ========================================================================== */
.pos-layout-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 20px auto !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.pos-layout-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.pos-cart-column {
  flex: 0 0 calc(54% - 9px) !important;
  max-width: calc(54% - 9px) !important;
  width: calc(54% - 9px) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.pos-cart-column.pos-cart-full {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

.pos-sidebar-column {
  flex: 0 0 calc(46% - 9px) !important;
  max-width: calc(46% - 9px) !important;
  width: calc(46% - 9px) !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--odoo-border, #e2e8f0) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 560px !important;
  min-width: 0 !important;
}

@media (max-width: 991px) {
  .pos-layout-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .pos-cart-column,
  .pos-sidebar-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* POS Sidebar Action Buttons (Category & Brand) */
.pos-sidebar-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}

.pos-sidebar-action-item {
  flex: 1 1 50% !important;
  min-width: 0 !important;
}

/* Catalog Scrollable Area */
.pos-product-catalog-wrap {
  width: 100% !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#product_list_body {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -5px !important;
  margin-right: -5px !important;
  max-height: calc(100vh - 230px) !important;
  min-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 2px 24px 2px !important;
  align-content: flex-start !important;
}

#product_list_body::-webkit-scrollbar {
  width: 6px;
}
#product_list_body::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 8px;
}
#product_list_body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
}
#product_list_body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

#product_list_body .product_list {
  padding-left: 5px !important;
  padding-right: 5px !important;
  width: 33.333% !important;
  float: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 1440px) {
  #product_list_body .product_list {
    width: 25% !important;
  }
}

@media (max-width: 1100px) {
  #product_list_body .product_list {
    width: 50% !important;
  }
}

/* ==========================================================================
   Modern Odoo POS Category & Brand Drawers
   ========================================================================== */
.odoo-drawer-panel {
  width: 480px !important;
  max-width: 92vw !important;
  height: 100vh !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -12px 0 35px rgba(15, 23, 42, 0.15) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.odoo-drawer-header {
  background: #ffffff !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  z-index: 10 !important;
}

.odoo-drawer-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.odoo-drawer-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.odoo-drawer-icon-badge {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #fdf2f8 !important;
  color: #6b2144 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.odoo-drawer-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.odoo-drawer-back-btn {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
}

.odoo-drawer-back-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: translateX(-2px) !important;
}

.odoo-drawer-close-btn {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
}

.odoo-drawer-close-btn:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* Quick Search in Drawer */
.odoo-drawer-search-wrap {
  padding: 12px 20px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.odoo-drawer-search-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.odoo-drawer-search-icon {
  position: absolute !important;
  left: 12px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  font-size: 13px !important;
}

.odoo-drawer-search-input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 14px 0 36px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.odoo-drawer-search-input:focus {
  background: #ffffff !important;
  border-color: #6b2144 !important;
  box-shadow: 0 0 0 3px rgba(107, 33, 68, 0.12) !important;
}

/* Drawer Body & Grid */
.odoo-drawer-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 20px 30px 20px !important;
}

.odoo-drawer-body::-webkit-scrollbar {
  width: 6px;
}
.odoo-drawer-body::-webkit-scrollbar-track {
  background: transparent;
}
.odoo-drawer-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

.odoo-drawer-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.odoo-drawer-subgrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.odoo-drawer-subgrid[style*="display: none"] {
  display: none !important;
}

.odoo-tile-hidden,
.odoo-grid-tile[style*="display: none"],
.main-category-div[style*="display: none"],
.product_brand[style*="display: none"] {
  display: none !important;
}

/* Odoo Grid Card Tiles */
.odoo-grid-tile {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
  user-select: none !important;
  min-height: 110px !important;
}

.odoo-grid-tile:hover {
  border-color: #6b2144 !important;
  box-shadow: 0 8px 20px -4px rgba(107, 33, 68, 0.16) !important;
  transform: translateY(-2px) !important;
  background: #ffffff !important;
}

.odoo-grid-tile:active {
  transform: scale(0.98) !important;
}

.odoo-tile-clickable-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  cursor: pointer !important;
}

.odoo-tile-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #fdf2f8 !important;
  color: #6b2144 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  transition: all 0.2s ease !important;
  border: 1px solid #fbcfe8 !important;
}

.odoo-grid-tile:hover .odoo-tile-icon-box {
  background: #6b2144 !important;
  color: #ffffff !important;
  border-color: #6b2144 !important;
  transform: scale(1.05) !important;
}

.odoo-tile-icon-box.odoo-icon-all {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

.odoo-grid-tile:hover .odoo-tile-icon-box.odoo-icon-all {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

.odoo-tile-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  margin-bottom: 2px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-align: center !important;
}

.odoo-tile-subtext {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.odoo-grid-tile:hover .odoo-tile-subtext {
  color: #6b2144 !important;
  font-weight: 600 !important;
}

/* Category tile actions */
.odoo-tile-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.odoo-tile-btn {
  flex: 1 1 50% !important;
  height: 26px !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
  padding: 0 4px !important;
}

.odoo-tile-btn-all {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

.odoo-tile-btn-all:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.odoo-tile-btn-next {
  background: #fdf2f8 !important;
  color: #6b2144 !important;
  border-color: #fbcfe8 !important;
}

.odoo-tile-btn-next:hover {
  background: #6b2144 !important;
  color: #ffffff !important;
  border-color: #6b2144 !important;
}

/* Drawer Live Search Filter State */
.odoo-tile-hidden,
.odoo-grid-tile.odoo-tile-hidden,
.main-category-div.odoo-tile-hidden,
.product_brand.odoo-tile-hidden,
.odoo-grid-tile[style*="display: none"],
.main-category-div[style*="display: none"],
.product_brand[style*="display: none"] {
  display: none !important;
}

/* POS Cart Card & Product Form */
.pos-cart-box {
  background: #ffffff !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
  padding: 18px !important;
}

/* POS Search & Customer inputs */
.pos_product_div {
  margin-top: 10px !important;
}

.pos-cart-box .form-group {
  margin-bottom: 12px !important;
}

.pos-cart-box .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

.pos-cart-box .input-group > .input-group-addon {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  height: 40px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.pos-cart-box .input-group > .input-group-addon:last-child {
  border: 1px solid #cbd5e1 !important;
  margin-left: -1px !important;
  border-radius: 0 10px 10px 0 !important;
  width: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  background: #f8fafc !important;
}

.pos-cart-box .input-group-addon .hover-q,
.pos-cart-box .input-group-addon i.fa-info-circle {
  margin: 0 !important;
  font-size: 14px !important;
  color: #0284c7 !important;
}

.pos-cart-box .input-group > .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.pos-cart-box .input-group > .input-group-btn:first-child .btn {
  border-radius: 10px 0 0 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-right: none !important;
  background: #f8fafc !important;
  color: #64748b !important;
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.pos-cart-box .input-group > .input-group-btn:first-child .btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.pos-cart-box .input-group > .input-group-btn:last-child .btn {
  border-radius: 0 10px 10px 0 !important;
}

/* Quick Add Customer & Quick Add Product buttons in POS & global input groups */
.pos-cart-box .input-group-btn > .btn.add_new_customer,
.pos-cart-box .input-group-btn > .btn.pos_add_quick_product,
.input-group-btn > .btn.add_new_customer,
.input-group-btn > .btn.pos_add_quick_product {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 1px solid #2563eb !important;
  color: #ffffff !important;
  border-radius: 0 10px 10px 0 !important;
  margin-left: -1px !important;
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
}

.pos-cart-box .input-group-btn > .btn.add_new_customer:hover,
.pos-cart-box .input-group-btn > .btn.pos_add_quick_product:hover,
.input-group-btn > .btn.add_new_customer:hover,
.input-group-btn > .btn.pos_add_quick_product:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-1px);
}

.pos-cart-box .input-group-btn > .btn.add_new_customer:active,
.pos-cart-box .input-group-btn > .btn.pos_add_quick_product:active,
.input-group-btn > .btn.add_new_customer:active,
.input-group-btn > .btn.pos_add_quick_product:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2) !important;
}

.pos-cart-box .input-group-btn > .btn.add_new_customer i,
.pos-cart-box .input-group-btn > .btn.pos_add_quick_product i,
.input-group-btn > .btn.add_new_customer i,
.input-group-btn > .btn.pos_add_quick_product i {
  color: #ffffff !important;
  font-size: 15px !important;
  transition: transform 0.2s ease !important;
}

.pos-cart-box .input-group-btn > .btn.add_new_customer:hover i,
.pos-cart-box .input-group-btn > .btn.pos_add_quick_product:hover i,
.input-group-btn > .btn.add_new_customer:hover i,
.input-group-btn > .btn.pos_add_quick_product:hover i {
  transform: scale(1.18);
}

.pos-cart-box .input-group-btn > .btn.add_new_customer[disabled],
.pos-cart-box .input-group-btn > .btn.pos_add_quick_product[disabled],
.input-group-btn > .btn.add_new_customer[disabled],
.input-group-btn > .btn.pos_add_quick_product[disabled] {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.pos-cart-box .input-group-btn > .btn.add_new_customer[disabled] i,
.pos-cart-box .input-group-btn > .btn.pos_add_quick_product[disabled] i,
.input-group-btn > .btn.add_new_customer[disabled] i,
.input-group-btn > .btn.pos_add_quick_product[disabled] i {
  color: #94a3b8 !important;
}

.pos-cart-box .input-group > .select2-container {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  display: flex !important;
}

.pos-cart-box .input-group > .select2-container .select2-selection--single {
  border-radius: 0 !important;
  border-color: #cbd5e1 !important;
  height: 40px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Eliminate redundant caret arrow on customer select (which has + button) and inputs with right tooltip addon */
.pos-cart-box .input-group > select#customer_id + .select2-container .select2-selection__arrow,
.pos-cart-box .input-group > select#price_group + .select2-container .select2-selection__arrow,
.pos-cart-box .input-group > .select2-container:has(+ .input-group-addon) .select2-selection__arrow,
.pos-cart-box .input-group > .select2-container:has(+ .input-group-btn) .select2-selection__arrow {
  display: none !important;
}

.pos-cart-box .input-group > .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 10px !important;
  padding-right: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* If a Select2 is NOT followed by an addon or btn, keep its arrow */
.pos-cart-box .input-group > .select2-container:last-child .select2-selection--single .select2-selection__rendered {
  padding-right: 28px !important;
}

.pos-cart-box .input-group > .form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 13px !important;
  height: 40px !important;
  border-radius: 0 !important;
  color: #1e293b !important;
}

.pos-cart-box .input-group-btn .btn {
  height: 40px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
}

.pos-cart-box .input-group-btn .btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* POS Table */
#pos_table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-top: 14px !important;
  background: #ffffff !important;
  width: 100% !important;
}

#pos_table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-top: none !important;
  border-bottom: 2px solid var(--odoo-border) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 12px 14px !important;
}

#pos_table tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f1f5f9 !important;
  border-left: none !important;
  border-right: none !important;
  color: #1e293b !important;
  font-size: 13px !important;
}

#pos_table tbody tr:hover {
  background-color: #f8fafc !important;
}

#pos_table .pos_remove_row {
  color: #94a3b8 !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

#pos_table .pos_remove_row:hover {
  color: #ef4444 !important;
  transform: scale(1.15) !important;
}

/* POS Totals Card */
.pos_form_totals {
  margin-top: 16px !important;
  background: #f8fafc !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
}

.pos_form_totals table {
  margin-bottom: 0 !important;
  width: 100% !important;
}

.pos_form_totals td {
  border: none !important;
  padding: 8px 12px !important;
  color: #334155 !important;
  font-size: 13px !important;
}

.pos_form_totals b {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.pos_form_totals span {
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* POS Bottom Form Actions Bar */
.pos-form-actions {
  background: #ffffff !important;
  border-top: 1px solid var(--odoo-border) !important;
  box-shadow: 0 -4px 16px -2px rgba(15, 23, 42, 0.05) !important;
  padding: 10px 20px !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Action buttons like Draft, Quotation, Suspend, Credit, Card */
.pos-action-btn {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 64px !important;
  height: 50px !important;
  padding: 4px 10px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid var(--odoo-border) !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.pos-action-btn:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.08) !important;
}

.pos-action-btn i {
  font-size: 14px !important;
}

/* Primary checkout buttons */
.pos-btn-multipay {
  background: #1e293b !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 44px !important;
  padding: 0 20px !important;
  box-shadow: 0 2px 6px rgba(30, 41, 59, 0.2) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pos-btn-multipay:hover {
  background: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(30, 41, 59, 0.25) !important;
}

.pos-btn-cash {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 44px !important;
  padding: 0 24px !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pos-btn-cash:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.pos-btn-cancel {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 44px !important;
  padding: 0 18px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pos-btn-cancel:hover {
  background: #fca5a5 !important;
  color: #b91c1c !important;
  transform: translateY(-1px) !important;
}

/* Total Payable Box */
.pos-total-payable-card {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-radius: 12px !important;
  padding: 6px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.pos-total-payable-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.pos-total-payable-val {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #15803d !important;
  font-family: monospace, var(--odoo-font) !important;
}

/* Recent Transactions Button */
.pos-btn-recent {
  background: #f8fafc !important;
  color: #6b2144 !important;
  border: 1.5px solid #6b2144 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 44px !important;
  padding: 0 20px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pos-btn-recent:hover {
  background: #6b2144 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Product catalog & Category Buttons */
.pos-cat-btn {
  background: #6b2144 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(107, 33, 68, 0.2) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

.pos-cat-btn:hover {
  background: #551a37 !important;
  transform: translateY(-1px) !important;
}

.pos-brand-btn {
  background: #ffffff !important;
  color: #6b2144 !important;
  border: 1.5px solid #6b2144 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

.pos-brand-btn:hover {
  background: #fdf2f8 !important;
  transform: translateY(-1px) !important;
}

/* Product Card Box */
.product_box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 8px !important;
  margin-bottom: 14px !important;
  cursor: pointer !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background-clip: padding-box !important;
}

.product_box:hover {
  border-color: #6b2144 !important;
  box-shadow: 0 10px 20px -4px rgba(107, 33, 68, 0.16) !important;
  transform: translateY(-3px) !important;
}

.product_box:active {
  transform: scale(0.98) !important;
}

.product_box .image-container {
  height: 96px !important;
  width: 100% !important;
  border-radius: 10px !important;
  background-color: #f8fafc !important;
  position: relative !important;
  margin-bottom: 6px !important;
  border: 1px solid #f1f5f9 !important;
  transition: transform 0.2s ease !important;
}

.product_box:hover .image-container {
  background-color: #ffffff !important;
}

.product_box .pos-card-price-badge {
  position: absolute !important;
  bottom: 6px !important;
  right: 6px !important;
  background: linear-gradient(135deg, #6b2144, #831843) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(107, 33, 68, 0.3) !important;
  letter-spacing: -0.01em !important;
}

.product_box .text_div {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 2px 2px !important;
}

.product_box .pos-card-title {
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  height: 32px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.product_box .pos-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

.product_box .pos-sku-text {
  color: #64748b !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 55% !important;
}

.product_box .pos-stock-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
}

.product_box .pos-stock-badge.in-stock {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #d1fae5 !important;
}

.product_box .pos-stock-badge.out-of-stock {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fee2e2 !important;
}

.product_box .pos-stock-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  display: inline-block !important;
}

/* ==========================================================================
   Premium Modern Add & Action Gradient Buttons (Global System)
   ========================================================================== */
.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500,
.tw-dw-btn.tw-bg-gradient-to-r,
.box-tools .tw-dw-btn,
.box-tools > a.tw-dw-btn,
.box-tools > button.tw-dw-btn,
.box-tools a.btn-primary,
.box-tools button.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px 0 14px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.28), 0 1px 3px rgba(59, 130, 246, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
  white-space: nowrap !important;
}

/* Scaled crisp icon inside Add / Action buttons */
.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 svg,
.tw-dw-btn.tw-bg-gradient-to-r svg,
.box-tools .tw-dw-btn svg,
.box-tools > a.tw-dw-btn svg,
.box-tools > button.tw-dw-btn svg {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin: 0 !important;
  stroke-width: 2.5px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.box-tools a.btn-primary i,
.box-tools button.btn-primary i {
  font-size: 13px !important;
  margin: 0 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover: Lift, luminous expanded glow, and icon rotation */
.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
.tw-dw-btn.tw-bg-gradient-to-r:hover,
.box-tools .tw-dw-btn:hover,
.box-tools > a.tw-dw-btn:hover,
.box-tools > button.tw-dw-btn:hover,
.box-tools a.btn-primary:hover,
.box-tools button.btn-primary:hover {
  background: linear-gradient(135deg, #4338ca 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4), 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}

.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover svg,
.tw-dw-btn.tw-bg-gradient-to-r:hover svg,
.box-tools .tw-dw-btn:hover svg,
.box-tools > a.tw-dw-btn:hover svg,
.box-tools > button.tw-dw-btn:hover svg {
  transform: rotate(90deg) scale(1.1) !important;
}

.box-tools a.btn-primary:hover i,
.box-tools button.btn-primary:hover i {
  transform: rotate(90deg) scale(1.1) !important;
}

/* Active / Click tactile compression */
.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:active,
.tw-dw-btn.tw-bg-gradient-to-r:active,
.box-tools .tw-dw-btn:active,
.box-tools > a.tw-dw-btn:active,
.box-tools > button.tw-dw-btn:active,
.box-tools a.btn-primary:active,
.box-tools button.btn-primary:active {
  transform: translateY(0.5px) scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28) !important;
}

/* ==========================================================================
   Global Form Action & Submit Buttons Redesign (Sleek Modern Odoo Design)
   Replaces oversized, chunky buttons across all screens with elegant,
   properly-proportioned, premium Odoo-styled action buttons.
   ========================================================================== */

/* Universal Size Normalization for Large DaisyUI / Form Action Buttons */
.tw-dw-btn-lg,
.tw-dw-btn.tw-dw-btn-lg,
button.tw-dw-btn-lg,
a.tw-dw-btn-lg,
.submit_form,
.submit_product_form,
#submit_purchase_form,
#submit-sell,
#save-and-print,
#save_stock_transfer,
#submit_pr_form,
#submit_user_button,
#submit_purchase_return_form,
.text-center > button[type="submit"],
.text-center > .tw-dw-btn {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 40px !important;
  border-radius: 10px !important;
  letter-spacing: 0.015em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  margin: 6px 4px !important;
}

/* Primary Action Buttons (Save, Update, Update Settings, Submit) */
.tw-dw-btn-primary,
.tw-dw-btn.tw-dw-btn-primary,
button.tw-dw-btn-primary,
a.tw-dw-btn-primary,
button[type="submit"]:not(.btn-danger):not(.tw-dw-btn-error):not(.bg-maroon):not(.tw-dw-btn-warning):not(.tw-dw-btn-success),
#submit_purchase_form,
#submit-sell,
#save_stock_transfer,
#submit_user_button {
  background-color: var(--odoo-primary, #6b2144) !important;
  border: 1px solid var(--odoo-primary, #6b2144) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(107, 33, 68, 0.22) !important;
}

.tw-dw-btn-primary:hover,
.tw-dw-btn.tw-dw-btn-primary:hover,
button.tw-dw-btn-primary:hover,
a.tw-dw-btn-primary:hover,
button[type="submit"]:not(.btn-danger):not(.tw-dw-btn-error):not(.bg-maroon):not(.tw-dw-btn-warning):not(.tw-dw-btn-success):hover,
#submit_purchase_form:hover,
#submit-sell:hover,
#save_stock_transfer:hover,
#submit_user_button:hover {
  background-color: var(--odoo-primary-hover, #551a37) !important;
  border-color: var(--odoo-primary-hover, #551a37) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(107, 33, 68, 0.28) !important;
}

.tw-dw-btn-primary:active,
.tw-dw-btn.tw-dw-btn-primary:active,
button.tw-dw-btn-primary:active,
a.tw-dw-btn-primary:active {
  transform: translateY(0.5px) scale(0.99) !important;
  box-shadow: 0 1px 3px rgba(107, 33, 68, 0.2) !important;
}

/* Specific Fix for Update Settings / Form Buttons mistakenly tagged with tw-dw-btn-error */
.text-center > .tw-dw-btn-error,
form .text-center > button.tw-dw-btn-error,
button.tw-dw-btn-error[type="submit"] {
  background-color: var(--odoo-primary, #6b2144) !important;
  border: 1px solid var(--odoo-primary, #6b2144) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(107, 33, 68, 0.22) !important;
}

.text-center > .tw-dw-btn-error:hover,
form .text-center > button.tw-dw-btn-error:hover,
button.tw-dw-btn-error[type="submit"]:hover {
  background-color: var(--odoo-primary-hover, #551a37) !important;
  border-color: var(--odoo-primary-hover, #551a37) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(107, 33, 68, 0.28) !important;
}

/* Success Buttons (Save and Print) */
.tw-dw-btn-success,
.tw-dw-btn.tw-dw-btn-success,
#save-and-print {
  background-color: #059669 !important;
  border: 1px solid #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.22) !important;
}

.tw-dw-btn-success:hover,
.tw-dw-btn.tw-dw-btn-success:hover,
#save-and-print:hover {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.28) !important;
}

/* Warning Buttons (Save & Add Selling Price) */
.tw-dw-btn-warning,
.tw-dw-btn.tw-dw-btn-warning {
  background-color: #d97706 !important;
  border: 1px solid #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.22) !important;
}

.tw-dw-btn-warning:hover,
.tw-dw-btn.tw-dw-btn-warning:hover {
  background-color: #b45309 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.28) !important;
}

/* Purple & Maroon Buttons (Product Save & Add Another, Save & Add Opening Stock) */
.tw-dw-btn.bg-purple,
button.bg-purple {
  background-color: #7c3aed !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.22) !important;
}

.tw-dw-btn.bg-purple:hover,
button.bg-purple:hover {
  background-color: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28) !important;
}

.tw-dw-btn.bg-maroon,
button.bg-maroon {
  background-color: #991b1b !important;
  border: 1px solid #991b1b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(153, 27, 27, 0.22) !important;
}

.tw-dw-btn.bg-maroon:hover,
button.bg-maroon:hover {
  background-color: #7f1d1d !important;
  border-color: #7f1d1d !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(153, 27, 27, 0.28) !important;
}

/* Clean spacing for bottom form row */
form > .row:last-child,
section.content > form > .row:last-child,
.content > form > .row:last-child {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Manage Modules View Styling */
.upload_module_btn,
.tw-dw-btn.upload_module_btn {
  background-color: var(--odoo-primary) !important;
  border-color: var(--odoo-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  box-shadow: 0 2px 5px rgba(107, 33, 68, 0.2) !important;
  transition: all 0.2s ease !important;
}

.upload_module_btn:hover,
.tw-dw-btn.upload_module_btn:hover {
  background-color: var(--odoo-primary-hover) !important;
  border-color: var(--odoo-primary-hover) !important;
  transform: translateY(-1px) !important;
}

a[href*="regenerate"],
.tw-dw-btn[href*="regenerate"] {
  background-color: #ffffff !important;
  border: 1.5px solid var(--odoo-primary) !important;
  color: var(--odoo-primary) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

a[href*="regenerate"]:hover,
.tw-dw-btn[href*="regenerate"]:hover {
  background-color: var(--odoo-primary) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* ========================================================
   GLOBAL FIX: Fractional Tailwind Utilities & Spacing
   ======================================================== */
.tw-gap-0\.5 { gap: 0.125rem !important; }
.tw-gap-1\.5 { gap: 0.375rem !important; }
.tw-gap-2\.5 { gap: 0.625rem !important; }
.tw-gap-3\.5 { gap: 0.875rem !important; }

.tw-p-0\.5 { padding: 0.125rem !important; }
.tw-p-1\.5 { padding: 0.375rem !important; }
.tw-p-2\.5 { padding: 0.625rem !important; }
.tw-p-3\.5 { padding: 0.875rem !important; }

.tw-px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.tw-px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.tw-px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }

.tw-py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.tw-py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }

.tw-mr-0\.5 { margin-right: 0.125rem !important; }
.tw-mr-1\.5 { margin-right: 0.375rem !important; }
.tw-mr-2\.5 { margin-right: 0.625rem !important; }
.tw-ml-0\.5 { margin-left: 0.125rem !important; }
.tw-ml-1\.5 { margin-left: 0.375rem !important; }
.tw-ml-2\.5 { margin-left: 0.625rem !important; }

.tw-mt-0\.5 { margin-top: 0.125rem !important; }
.tw-mt-1\.5 { margin-top: 0.375rem !important; }
.tw-mt-2\.5 { margin-top: 0.625rem !important; }
.tw-mb-1\.5 { margin-bottom: 0.375rem !important; }
.tw-mb-2\.5 { margin-bottom: 0.625rem !important; }
.tw-mb-3\.5 { margin-bottom: 0.875rem !important; }

/* Universal Info & Tooltip Icon Spacing */
.hover-q,
i.fa-info-circle,
i.fas.fa-info-circle,
i.far.fa-info-circle {
  margin-left: 6px !important;
  margin-right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  opacity: 0.85 !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.hover-q:hover,
i.fa-info-circle:hover {
  opacity: 1 !important;
  transform: scale(1.12) !important;
}

/* Universal Edit Icon in Tables & Summary Cards */
i.fa-edit.cursor-pointer,
i.fas.fa-edit.cursor-pointer {
  margin-left: 6px !important;
  margin-right: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  color: #0284c7 !important;
}

/* Universal Button Icon and Text Spacing */
.btn > i:first-child:not(:only-child),
.btn > svg:first-child:not(:only-child),
.btn span > i:first-child:not(:only-child),
.btn span > svg:first-child:not(:only-child),
a.btn > i:first-child:not(:only-child),
a.btn > svg:first-child:not(:only-child),
a.btn span > i:first-child:not(:only-child),
a.btn span > svg:first-child:not(:only-child),
.tw-dw-btn > i:first-child:not(:only-child),
.tw-dw-btn > svg:first-child:not(:only-child),
.tw-dw-btn span > i:first-child:not(:only-child),
.tw-dw-btn span > svg:first-child:not(:only-child),
button > i:first-child:not(:only-child),
button > svg:first-child:not(:only-child),
button span > i:first-child:not(:only-child),
button span > svg:first-child:not(:only-child),
.dt-button > i:first-child:not(:only-child),
.dt-button > svg:first-child:not(:only-child),
.dt-button span > i:first-child:not(:only-child),
.dt-button span > svg:first-child:not(:only-child) {
  margin-right: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

.btn > i:last-child:not(:only-child),
.btn > svg:last-child:not(:only-child),
.btn span > i:last-child:not(:only-child),
.btn span > svg:last-child:not(:only-child),
a.btn > i:last-child:not(:only-child),
a.btn > svg:last-child:not(:only-child),
a.btn span > i:last-child:not(:only-child),
a.btn span > svg:last-child:not(:only-child),
.tw-dw-btn > i:last-child:not(:only-child),
.tw-dw-btn > svg:last-child:not(:only-child),
.tw-dw-btn span > i:last-child:not(:only-child),
.tw-dw-btn span > svg:last-child:not(:only-child),
button > i:last-child:not(:only-child),
button > svg:last-child:not(:only-child),
button span > i:last-child:not(:only-child),
button span > svg:last-child:not(:only-child),
.dt-button > i:last-child:not(:only-child),
.dt-button > svg:last-child:not(:only-child),
.dt-button span > i:last-child:not(:only-child),
.dt-button span > svg:last-child:not(:only-child) {
  margin-left: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* Ensure flex buttons with gaps do not duplicate margin */
.tw-flex.tw-gap-1\.5 > i,
.tw-flex.tw-gap-1\.5 > svg,
.tw-flex.tw-gap-2 > i,
.tw-flex.tw-gap-2 > svg,
.tw-flex.tw-gap-2\.5 > i,
.tw-flex.tw-gap-2\.5 > svg,
.tw-flex.tw-gap-3 > i,
.tw-flex.tw-gap-3 > svg,
.tw-inline-flex.tw-gap-1\.5 > i,
.tw-inline-flex.tw-gap-1\.5 > svg,
.tw-inline-flex.tw-gap-2 > i,
.tw-inline-flex.tw-gap-2 > svg,
.tw-inline-flex.tw-gap-2\.5 > i,
.tw-inline-flex.tw-gap-2\.5 > svg,
.tw-inline-flex.tw-gap-3 > i,
.tw-inline-flex.tw-gap-3 > svg {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Chart Header Badges & Pill Badges */
.odoo-charts-grid span[class*="tw-rounded"],
.tw-rounded-lg.tw-border {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 9999px !important;
}

/* ==========================================================================
   Highcharts Context Menu & Export Hamburger Dialog
   ========================================================================== */
.highcharts-contextmenu,
div.highcharts-contextmenu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
  padding: 8px !important;
  z-index: 1060 !important;
  overflow: hidden !important;
  min-width: 210px !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
  right: 12px !important;
  left: auto !important;
}

body.rtl .highcharts-contextmenu,
html[dir="rtl"] .highcharts-contextmenu {
  right: auto !important;
  left: 12px !important;
}

.highcharts-contextmenu ul,
.highcharts-menu,
ul.highcharts-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  font-family: var(--odoo-font, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
}

.highcharts-menu-item,
li.highcharts-menu-item,
.highcharts-menu > li {
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
}

.highcharts-menu-item:hover,
li.highcharts-menu-item:hover,
.highcharts-menu > li:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  transform: translateX(2px) !important;
}

.highcharts-menu hr,
.highcharts-contextmenu hr,
.highcharts-menu > li > hr {
  margin: 6px 0 !important;
  border: none !important;
  border-top: 1px solid #f1f5f9 !important;
  height: 0 !important;
  padding: 0 !important;
}

/* Highcharts Context Button (Hamburger) */
.highcharts-button-box {
  rx: 8px !important;
  ry: 8px !important;
  fill: #ffffff !important;
  stroke: #e2e8f0 !important;
  stroke-width: 1px !important;
  transition: all 0.2s ease !important;
}

.highcharts-button:hover .highcharts-button-box {
  fill: #f8fafc !important;
  stroke: #cbd5e1 !important;
}

.highcharts-button symbol,
.highcharts-button path {
  stroke: #475569 !important;
  stroke-width: 2px !important;
}

/* ==========================================================================
   Modern Dropdown Menus ("Similar Dialogs")
   ========================================================================== */
.dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
  padding: 6px !important;
  margin-top: 6px !important;
  font-family: var(--odoo-font, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  background-color: #ffffff !important;
}

.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s ease !important;
  margin-bottom: 2px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  transform: translateX(2px) !important;
}

.dropdown-menu > li > a i,
.dropdown-menu .dropdown-item i,
.dropdown-menu > li > a svg,
.dropdown-menu .dropdown-item svg {
  color: #64748b !important;
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
  margin-right: 4px !important;
}

.dropdown-menu > li > a:hover i,
.dropdown-menu .dropdown-item:hover i {
  color: var(--odoo-purple, #6b2144) !important;
}

.dropdown-menu .divider,
.dropdown-menu .dropdown-divider {
  margin: 6px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  background: transparent !important;
  height: 0 !important;
}

.dropdown-menu .dropdown-header {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #94a3b8 !important;
  padding: 8px 14px 4px 14px !important;
}

/* ==========================================================================
   Tooltips & Popovers
   ========================================================================== */
.popover {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 16px 30px -4px rgba(15, 23, 42, 0.12), 0 6px 12px -4px rgba(15, 23, 42, 0.06) !important;
  font-family: var(--odoo-font, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  z-index: 1060 !important;
}

.popover-title,
.popover-header {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #0f172a !important;
  border-radius: 14px 14px 0 0 !important;
}

.popover-content,
.popover-body {
  padding: 14px 16px !important;
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

.tooltip-inner {
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background-color: #0f172a !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  letter-spacing: 0.01em !important;
}

/* ==========================================================================
   DateRangePicker Dialogs
   ========================================================================== */
.daterangepicker {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
  font-family: var(--odoo-font, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  padding: 12px !important;
  background-color: #ffffff !important;
  z-index: 1060 !important;
}

.daterangepicker:before,
.daterangepicker:after {
  display: none !important;
}

.daterangepicker .ranges {
  padding: 6px !important;
  border-right: 1px solid #f1f5f9 !important;
}

.daterangepicker .ranges li {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  background-color: transparent !important;
  border: none !important;
  margin-bottom: 2px !important;
  transition: all 0.15s ease !important;
}

.daterangepicker .ranges li:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.daterangepicker .ranges li.active {
  background-color: var(--odoo-purple, #6b2144) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--odoo-purple, #6b2144) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

.daterangepicker td.in-range {
  background-color: #fdf2f4 !important;
  color: #6b2144 !important;
}

.daterangepicker .drp-buttons {
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 10px !important;
}

.daterangepicker .drp-buttons .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
}

/* ==========================================================================
   Modals Backdrop & Close Buttons
   ========================================================================== */
.modal-backdrop.in,
.modal-backdrop.show {
  opacity: 0.45 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  background-color: #0f172a !important;
}

.modal-dialog {
  margin-top: 50px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal.fade .modal-dialog {
  transform: translateY(-16px) scale(0.98);
}

.modal.in .modal-dialog,
.modal.show .modal-dialog {
  transform: translateY(0) scale(1) !important;
}

.modal-header .close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #64748b;
  opacity: 1 !important;
  transition: all 0.15s ease;
  margin-top: -4px;
}

.modal-header .close:hover {
  background-color: #fee2e2;
  color: #ef4444;
}

/* SweetAlert & SweetAlert2 */
.swal2-popup,
.sweet-alert {
  border-radius: 20px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
  font-family: var(--odoo-font, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  padding: 28px !important;
}

.swal2-title,
.sweet-alert h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.swal2-html-container,
.sweet-alert p {
  font-size: 14px !important;
  color: #475569 !important;
}

.swal2-actions button,
.sweet-alert button {
  border-radius: 10px !important;
  padding: 9px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ==========================================================================
   Administer Backup & Disaster Recovery Screen
   ========================================================================== */
.backup-stats-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.backup-stat-card {
  flex: 1 1 calc(33.333% - 12px) !important;
  min-width: 250px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  transition: all 0.2s ease !important;
}

.backup-stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.backup-stat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.backup-main-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.backup-empty-state-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px 20px !important;
}

.backup-empty-icon-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
  border: 1px solid #ddd6fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}

.backup-cron-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin-bottom: 30px !important;
}

.backup-terminal-box {
  background-color: #0f172a !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13px !important;
  color: #34d399 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow-x: auto !important;
  border: 1px solid #1e293b !important;
}

/* Explicit SVG size constraints */
.content-header svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
}

.backup-action-btn svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
}

.backup-stat-icon svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  display: block !important;
}

.backup-empty-icon-wrap svg {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  display: block !important;
}

.backup-cron-card svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: inline-block !important;
}

/* ==========================================================================
   STATE-OF-THE-ART REDESIGNED AUTHENTICATION EXPERIENCE (MODERN LIGHT ODOO THEME)
   ========================================================================== */

.auth-viewport {
  min-height: 100vh;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  background-color: #f8fafc;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* --------------------------------------------------------------------------
   LEFT BRAND EXPERIENCE PANEL (ELEGANT LIGHT WINE & SLATE PALETTE)
   -------------------------------------------------------------------------- */
.auth-brand-pane {
  flex: 1 1 54%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  color: #0f172a;
  overflow: hidden;
  background: linear-gradient(145deg, #fdf4f8 0%, #f8fafc 45%, #f1f5f9 100%);
  border-right: 1px solid #e2e8f0;
}

.auth-brand-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0.08;
  filter: grayscale(100%) contrast(120%);
}

.auth-brand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(253, 244, 248, 0.88) 0%,
    rgba(248, 250, 252, 0.92) 50%,
    rgba(241, 245, 249, 0.98) 100%
  );
  z-index: 2;
}

.auth-brand-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

/* Brand Header */
.auth-brand-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-brand-logo-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-brand-logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(107, 33, 68, 0.08);
  overflow: hidden;
  padding: 4px;
}

.auth-brand-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-brand-name-wrap {
  display: flex;
  flex-direction: column;
}

.auth-brand-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

.auth-brand-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: -0.01em;
}

.auth-system-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
}

.auth-system-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10b981;
}

/* Showcase Hero & Feature Pillars */
.auth-brand-showcase {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 540px;
}

.auth-headline-box h1 {
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  margin: 0 0 14px 0 !important;
}

.auth-headline-box p {
  font-size: 15.5px;
  line-height: 1.6;
  color: #475569;
  font-weight: 400;
  margin: 0;
}

.auth-pillars-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-pillar-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-pillar-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
  transform: translateX(4px);
}

.auth-pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b2144;
  font-size: 16px;
  flex-shrink: 0;
}

.auth-pillar-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auth-pillar-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.auth-pillar-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Brand Footer / Philosophy Quote */
.auth-brand-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.auth-quote-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-quote-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  font-style: italic;
  line-height: 1.5;
}

.auth-quote-caption {
  font-size: 11.5px;
  font-weight: 600;
  color: #6b2144;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   RIGHT AUTHENTICATION FORM CANVAS (PRISTINE CRISP DESIGN)
   -------------------------------------------------------------------------- */
.auth-form-pane {
  flex: 1 1 46%;
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 56px;
  position: relative;
  overflow-y: auto;
}

/* Top bar with language selector and registration button */
.auth-form-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.auth-mobile-logo {
  display: none;
  align-items: center;
  gap: 10px;
}

.auth-mobile-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #6b2144;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3px;
}

.auth-mobile-logo-icon img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.auth-mobile-logo-text {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.auth-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Custom Language Select */
.auth-lang-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.auth-lang-select-wrap svg {
  position: absolute !important;
  left: 12px !important;
  width: 16px !important;
  height: 16px !important;
  color: #64748b !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.auth-lang-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 8px 32px 8px 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  line-height: normal !important;
  height: 38px !important;
}

.auth-lang-select:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.auth-lang-select:focus {
  border-color: #6b2144 !important;
  box-shadow: 0 0 0 3px rgba(107, 33, 68, 0.12) !important;
}

.auth-lang-select-wrap .fa-chevron-down {
  position: absolute !important;
  right: 12px !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.auth-lang-menu {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.04) !important;
  min-width: 180px !important;
  padding: 6px !important;
  z-index: 9999 !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

.auth-lang-dropdown[open] .auth-lang-menu,
.auth-lang-menu.show {
  display: block !important;
}

.auth-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.auth-lang-item:hover {
  background: #fdf2f8;
  color: #6b2144;
}

.auth-lang-item.active {
  background: #fdf2f8;
  color: #6b2144;
  font-weight: 700;
}

.auth-register-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.auth-register-link-btn:hover {
  border-color: #6b2144;
  color: #6b2144;
  background: #fdf2f8;
}

/* Authentication Central Card */
.auth-card-body {
  max-width: 440px;
  width: 100%;
  margin: 32px auto;
  display: flex;
  flex-direction: column;
}

.auth-form-header {
  margin-bottom: 24px;
}

.auth-form-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b2144;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.auth-form-title {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
}

.auth-form-subtitle {
  font-size: 14.5px;
  color: #64748b;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

/* Demo Persona Quick-Fill Strip */
.auth-demo-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-demo-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.auth-demo-hint {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: none;
}

.auth-demo-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.auth-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  text-decoration: none !important;
}

.auth-demo-pill:hover {
  background: #6b2144;
  border-color: #6b2144;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107, 33, 68, 0.25);
}

.auth-demo-pill.active {
  background: #6b2144;
  border-color: #6b2144;
  color: #ffffff;
}

.auth-demo-pill i, .auth-demo-pill svg {
  font-size: 11px;
}

/* Form Groups & Inputs */
.auth-form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-label {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.auth-forgot-link {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b2144;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-forgot-link:hover {
  color: #551a37;
  text-decoration: underline;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color 0.2s ease;
}

.auth-input-icon svg, .auth-input-icon i {
  width: 18px;
  height: 18px;
  font-size: 16px;
}

.auth-field {
  width: 100% !important;
  height: 48px !important;
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 13px !important;
  padding: 0 16px 0 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.auth-field::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.auth-field:hover {
  border-color: #94a3b8 !important;
  background-color: #ffffff !important;
}

.auth-field:focus {
  border-color: #6b2144 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(107, 33, 68, 0.12) !important;
}

.auth-field:focus + .auth-input-icon,
.auth-input-wrapper:focus-within .auth-input-icon {
  color: #6b2144 !important;
}

.auth-input-wrapper.has-error .auth-field {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
}

.auth-error-msg {
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Password Toggle Eye Button */
.auth-toggle-pwd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.auth-toggle-pwd:hover {
  color: #334155;
  background: #f1f5f9;
}

.auth-toggle-pwd svg {
  width: 18px;
  height: 18px;
}

/* Custom Modern Checkbox */
.auth-checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 20px 0;
  user-select: none;
}

.auth-custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

.auth-custom-checkbox:hover {
  border-color: #6b2144;
}

.auth-custom-checkbox:checked {
  background-color: #6b2144;
  border-color: #6b2144;
}

.auth-custom-checkbox:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
}

.auth-checkbox-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  line-height: 1;
  margin: 0;
}

/* High Impact CTA Button */
.auth-submit-btn {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #6b2144 0%, #5b1b39 60%, #4a142e 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 10px 25px -4px rgba(107, 33, 68, 0.35), 0 4px 10px -2px rgba(107, 33, 68, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.auth-submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -6px rgba(107, 33, 68, 0.45), 0 6px 14px -3px rgba(107, 33, 68, 0.25);
}

.auth-submit-btn:hover::before {
  opacity: 1;
}

.auth-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px -4px rgba(107, 33, 68, 0.4);
}

.auth-submit-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.auth-submit-btn:hover svg {
  transform: translateX(3px);
}

/* Spinner during submit */
.auth-submit-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: authSpin 0.7s linear infinite;
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.auth-submit-btn.is-loading .auth-submit-text,
.auth-submit-btn.is-loading svg {
  display: none;
}

.auth-submit-btn.is-loading .auth-submit-spinner {
  display: block;
}

/* Secondary Registration Block */
.auth-register-box {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  color: #64748b;
  font-weight: 500;
}

.auth-register-action-link {
  color: #6b2144;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.15s ease;
}

.auth-register-action-link:hover {
  color: #551a37;
  text-decoration: underline;
}

/* Security Ribbon & Footer */
.auth-form-footer {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-encryption-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #64748b;
  font-weight: 600;
}

.auth-encryption-badge svg {
  width: 14px;
  height: 14px;
  color: #10b981;
}

.auth-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.auth-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-footer-links a:hover {
  color: #475569;
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN ADAPTATIONS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .auth-viewport {
    flex-direction: column;
  }
  .auth-brand-pane {
    display: none;
  }
  .auth-form-pane {
    flex: 1 1 100%;
    padding: 32px 24px;
    min-height: 100vh;
  }
  .auth-mobile-logo {
    display: flex;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .auth-brand-pane {
    padding: 36px 40px;
  }
  .auth-form-pane {
    padding: 36px 40px;
  }
  .auth-headline-box h1 {
    font-size: 32px !important;
  }
}

/* ==========================================================================
   STATE-OF-THE-ART WELCOME / HOME LANDING PAGE (CLEAN LIGHT ODOO THEME)
   ========================================================================== */

.welcome-landing-viewport {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Sticky Glass Header */
.landing-nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #eef2f6;
  padding: 16px 0;
  width: 100%;
}

.landing-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.landing-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.landing-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

.landing-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.landing-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-brand-text {
  display: flex;
  flex-direction: column;
}

.landing-brand-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.landing-brand-tagline {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: -0.01em;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.landing-nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.landing-nav-link:hover {
  color: #6b2144;
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.landing-btn-ghost:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.landing-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6b2144 0%, #551a37 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(107, 33, 68, 0.25);
  transition: all 0.2s ease;
}

.landing-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(107, 33, 68, 0.35);
  color: #ffffff;
}

/* Hero Section */
.landing-hero-section {
  position: relative;
  padding: 84px 0 64px 0;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, #fdf2f8 0%, #ffffff 70%);
}

/* Ambient glow */
.landing-hero-glow-1 {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 33, 68, 0.08) 0%, rgba(107, 33, 68, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.landing-hero-glow-2 {
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0) 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
}

.landing-hero-mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

.landing-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.landing-announcement-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  font-size: 13px;
  font-weight: 600;
  color: #6b2144;
  letter-spacing: 0.01em;
}

.landing-announcement-pill svg {
  color: #6b2144;
  width: 14px;
  height: 14px;
}

.landing-hero-headline {
  font-size: 52px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.landing-hero-headline-gradient {
  background: linear-gradient(135deg, #6b2144 0%, #831843 55%, #4a044e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-hero-subhead {
  font-size: 18px;
  line-height: 1.6;
  color: #475569;
  max-width: 680px;
  margin: 0;
  font-weight: 400;
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.landing-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6b2144 0%, #5b1b39 60%, #4a142e 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 10px 25px -4px rgba(107, 33, 68, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -4px rgba(107, 33, 68, 0.45);
  color: #ffffff;
}

.landing-hero-btn-primary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.landing-hero-btn-primary:hover svg {
  transform: translateX(4px);
}

.landing-hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 14px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.landing-hero-btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Trust Strip */
.landing-trust-strip {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.landing-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
}

.landing-trust-item svg {
  color: #10b981;
  width: 16px;
  height: 16px;
}

/* Hero Showcase Card */
.landing-showcase-section {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  margin-bottom: 72px;
}

.landing-showcase-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.09), 0 4px 12px rgba(15, 23, 42, 0.03);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
}

.landing-showcase-preview {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid #e2e8f0;
}

.landing-showcase-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.landing-showcase-overlay-card {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.landing-showcase-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.landing-showcase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}

.landing-showcase-metrics {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.landing-showcase-header h3 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.02em !important;
}

.landing-showcase-header p {
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.landing-features-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.landing-feature-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
}

.landing-feature-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

.landing-feature-chip-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 7px;
}

.landing-feature-chip-title svg {
  color: #6b2144;
  width: 15px;
  height: 15px;
}

.landing-feature-chip-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Solutions Matrix Section */
.landing-solutions-section {
  padding: 72px 0;
  position: relative;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.landing-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px auto;
}

.landing-section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b2144;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  padding: 4px 14px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

.landing-section-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  margin: 0 0 12px 0 !important;
}

.landing-section-desc {
  font-size: 15.5px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.landing-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-solution-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-solution-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
}

.landing-solution-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b2144;
  font-size: 18px;
}

.landing-solution-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.landing-solution-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Call-to-action Banner */
.landing-cta-banner {
  background: linear-gradient(135deg, #6b2144 0%, #501833 60%, #3b0d23 100%);
  border-radius: 28px;
  padding: 56px 40px;
  margin: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(107, 33, 68, 0.35);
}

.landing-cta-banner h2 {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.02em !important;
}

.landing-cta-banner p {
  font-size: 16px;
  color: #fce7f3;
  max-width: 600px;
  margin: 0 auto 28px auto;
  line-height: 1.6;
}

.landing-cta-banner-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.landing-cta-banner .landing-hero-btn-primary {
  background: #ffffff;
  color: #6b2144;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.landing-cta-banner .landing-hero-btn-primary:hover {
  background: #fdf2f8;
  color: #551a37;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.landing-cta-banner .landing-hero-btn-secondary {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.landing-cta-banner .landing-hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

/* Landing Footer */
.landing-footer {
  border-top: 1px solid #eef2f6;
  padding: 40px 0;
  margin-top: auto;
  background: #ffffff;
}

.landing-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.landing-footer-copy {
  font-size: 13px;
  color: #64748b;
}

.landing-footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.landing-footer-links a {
  font-size: 13px;
  color: #64748b;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.landing-footer-links a:hover {
  color: #6b2144;
}

/* Responsive */
@media (max-width: 1024px) {
  .landing-hero-headline {
    font-size: 40px !important;
  }
  .landing-showcase-card {
    grid-template-columns: 1fr;
  }
  .landing-solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .landing-nav-links {
    display: none;
  }
  .landing-hero-headline {
    font-size: 32px !important;
  }
  .landing-hero-subhead {
    font-size: 15px;
  }
  .landing-solutions-grid {
    grid-template-columns: 1fr;
  }
  .landing-features-mini-grid {
    grid-template-columns: 1fr;
  }
  .landing-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   Universal Stat Card & Metric Circular / Rounded Icon Badges
   Ensures icons always have proper internal padding, breathing room & spacing
   ========================================================================== */

/* Circular & Squircle Icon Badge Containers */
div[class*="rounded-full"]:has(> svg):not(.tw-w-2):not(.tw-w-2\.5):not(.tw-w-3):not(.tw-w-4):not(.notifications_count),
div[class*="rounded-xl"]:has(> svg):not(.tw-w-2):not(.tw-w-2\.5):not(.tw-w-3):not(.tw-w-4),
.tw-rounded-full:has(> svg):not(.tw-w-2):not(.tw-w-2\.5):not(.tw-w-3):not(.tw-w-4):not(.notifications_count),
.tw-rounded-xl:has(> svg):not(.tw-w-2):not(.tw-w-2\.5):not(.tw-w-3):not(.tw-w-4) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  flex-shrink: 0 !important;
}

/* Fallback for circular icon containers */
div.tw-w-10.tw-h-10.tw-rounded-full,
div.tw-w-11.tw-h-11.tw-rounded-full,
div.tw-w-12.tw-h-12.tw-rounded-full,
div[class*="tw-rounded-full"][class*="w-10"],
div[class*="tw-rounded-full"][class*="w-11"],
div[class*="tw-rounded-full"][class*="w-12"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  flex-shrink: 0 !important;
}

/* Proportional icon sizing inside circular badges so it never touches the edge */
div[class*="rounded-full"] > svg,
.tw-rounded-full > svg {
  display: block !important;
  margin: auto !important;
  max-width: 20px !important;
  max-height: 20px !important;
  width: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Squircle / rounded-xl stat card badges */
div.odoo-kpi-grid div[class*="rounded-xl"],
div[class*="rounded-xl"]:has(> svg) {
  padding: 8px !important;
  box-sizing: border-box !important;
}

div.odoo-kpi-grid div[class*="rounded-xl"] > svg,
div[class*="rounded-xl"] > svg {
  max-width: 20px !important;
  max-height: 20px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Section header circular badges in home/index.blade.php */
div.tw-border-2.tw-rounded-full.tw-w-10.tw-h-10,
div[class*="tw-border-2"][class*="tw-rounded-full"] {
  border-width: 1px !important;
  background-color: #fefce8 !important;
  border-color: #fef08a !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

div.tw-border-2.tw-rounded-full.tw-w-10.tw-h-10 > svg,
div[class*="tw-border-2"][class*="tw-rounded-full"] > svg {
  width: 20px !important;
  height: 20px !important;
  color: #d97706 !important;
}

/* Ensure comfortable gap between icon badges and sibling content/text */
.tw-flex.tw-items-center:has(> div[class*="rounded-full"]),
.tw-flex.tw-items-center:has(> div[class*="rounded-xl"]) {
  gap: 14px !important;
}

div[class*="rounded-full"] + div,
div[class*="rounded-xl"] + div {
  margin-left: 6px;
}

/* ==========================================================================
   FullCalendar Modern Toolbar & Controls Styling
   ========================================================================== */

/* Calendar cards */
.col-sm-3 .box.box-solid,
.col-sm-9 .box.box-solid {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.col-sm-3 .box.box-solid .box-body,
.col-sm-9 .box.box-solid .box-body {
  padding: 20px !important;
}

/* FullCalendar Toolbar Modern Flexbox */
.fc-toolbar.fc-header-toolbar,
.fc-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

.fc-toolbar::before,
.fc-toolbar::after {
  display: none !important;
}

.fc-toolbar .fc-left {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  order: 1 !important;
}

.fc-toolbar .fc-center {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 2 !important;
}

.fc-toolbar .fc-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  order: 3 !important;
}

.fc-toolbar .fc-center h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Modern Calendar Buttons */
.fc button,
.fc .fc-button,
.fc-state-default {
  height: 36px !important;
  line-height: 34px !important;
  padding: 0 14px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  transition: all 0.15s ease-in-out !important;
  outline: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.fc button:hover,
.fc-state-default:hover,
.fc-state-hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Active State (e.g. Current View: Month, Week, etc.) */
.fc button.fc-state-active,
.fc-state-active,
.fc-state-down {
  background-color: var(--odoo-primary, #6b2144) !important;
  background-image: none !important;
  border-color: var(--odoo-primary, #6b2144) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px 0 rgba(107, 33, 68, 0.3) !important;
  text-shadow: none !important;
}

.fc button.fc-state-active:hover {
  background-color: var(--odoo-primary-dark, #501833) !important;
  border-color: var(--odoo-primary-dark, #501833) !important;
  color: #ffffff !important;
}

/* Button groups (prev/next or month/week/day) */
.fc-button-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.fc-button-group > button,
.fc .fc-button-group > * {
  margin: 0 !important;
  float: none !important;
}

.fc-button-group > button:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
  border-left: none !important;
}

.fc-button-group > button:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.fc-button-group > button:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

.fc-button-group > button.fc-state-active + button {
  border-left: 1px solid var(--odoo-primary, #6b2144) !important;
}

/* Clean SVG-style chevron icons for Prev/Next buttons */
.fc-icon {
  font-family: inherit !important;
  height: 16px !important;
  width: 16px !important;
  line-height: 16px !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

.fc-icon-left-single-arrow::after {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin-left: 2px !important;
  top: 0 !important;
  position: static !important;
}

.fc-icon-right-single-arrow::after {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid currentColor !important;
  border-top: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin-right: 2px !important;
  top: 0 !important;
  position: static !important;
}

/* Calendar Grid & Header Table Styling */
.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-row,
.fc-unthemed .fc-content,
.fc-unthemed .fc-divider {
  border-color: #e2e8f0 !important;
}

.fc-unthemed th {
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 0 !important;
}

.fc-unthemed td.fc-today {
  background-color: #fdf2f8 !important;
}

.fc-basic-view .fc-day-number {
  padding: 6px 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #334155 !important;
}

.fc-day-top.fc-other-month .fc-day-number {
  color: #94a3b8 !important;
  opacity: 0.6 !important;
}

/* ==========================================================================
   Responsive Grid & Form Layouts (Prevents Right-Edge Clipping on Forms)
   ========================================================================== */
.box .row,
.content .row,
.box-body > .row,
form .row,
section.content .row,
.main-page-content .row {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.box .row::before,
.box .row::after,
.content .row::before,
.content .row::after,
.box-body > .row::before,
.box-body > .row::after,
form .row::before,
form .row::after,
section.content .row::before,
section.content .row::after,
.main-page-content .row::before,
.main-page-content .row::after {
  display: none !important;
}

/* Ensure all card and widget containers rigidly span 100% full width */
.box,
.box-solid,
.box-primary,
.nav-tabs-custom,
.pos-tab-container,
div.pos-tab-container {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* On screens up to 1536px, 4-column forms switch to clean 2-column layout so inputs never get crushed or cut off */
@media (max-width: 1536px) and (min-width: 768px) {
  .box .row > .col-sm-3,
  .content .row > .col-sm-3,
  .box .row > .col-md-3,
  .content .row > .col-md-3,
  .box-body > .row > .col-sm-3,
  .box-body > .row > .col-md-3,
  .box-primary .row > .col-sm-3,
  .box-primary .row > .col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

@media (min-width: 1537px) {
  .box .row > .col-sm-3,
  .content .row > .col-sm-3,
  .box .row > .col-md-3,
  .content .row > .col-md-3,
  .box-body > .row > .col-sm-3,
  .box-body > .row > .col-md-3,
  .box-primary .row > .col-sm-3,
  .box-primary .row > .col-md-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}

/* Ensure full-width columns always stretch 100% and never shrink */
.box .row > .col-xs-12,
.content .row > .col-xs-12,
.box-body > .row > .col-xs-12,
form .row > .col-xs-12,
section.content .row > .col-xs-12,
.box .row > .col-sm-12,
.content .row > .col-sm-12,
.box-body > .row > .col-sm-12,
form .row > .col-sm-12,
section.content .row > .col-sm-12,
.box .row > .col-md-12,
.content .row > .col-md-12,
.box-body > .row > .col-md-12,
form .row > .col-md-12,
section.content .row > .col-md-12,
.box .row > .col-lg-12,
.content .row > .col-lg-12,
.box-body > .row > .col-lg-12,
form .row > .col-lg-12,
section.content .row > .col-lg-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Top Navbar Action Button Containers - Perfect Icon Centering
   ========================================================================== */
.side-bar-collapse,
.tw-dw-dropdown summary,
#btnCalculator,
#view_todays_profit,
#show_unread_notifications,
.header-date-badge,
.load_notifications {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.side-bar-collapse svg,
.side-bar-collapse i,
.tw-dw-dropdown summary svg,
.tw-dw-dropdown summary i,
#btnCalculator svg,
#btnCalculator i,
#view_todays_profit svg,
#view_todays_profit i,
#show_unread_notifications svg,
#show_unread_notifications i,
.load_notifications svg,
.load_notifications i {
  margin: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}