/* ==========================================================================
   IBMart UI layer
   Loaded after modern-odoo-theme.css. Unifies the brand palette across every
   component system in the app (Bootstrap/AdminLTE, daisyUI, Tailwind utility
   markup), fixes rendering bugs, and adds the notification components used by
   ibmart-ui.js. Lives outside /public/css because that folder is git-ignored.

   Sections
     1. Design tokens
     2. Icon fixes (font overrides + legacy icon names)
     3. Brand unification (daisyUI, Bootstrap, gradients, links, focus)
     4. Layout: page headers, cards, sidebar
     5. Forms: hidden-field bug, select2, checkboxes
     6. Tables & table actions
     7. Dashboard KPI cards & insights strip
     8. Inline alerts, callouts, labels
     9. Toast notifications (toastr) & notify components
    10. Login page
    11. POS screen
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  --ib-primary: #6b2144;
  --ib-primary-600: #5a1b39;
  --ib-primary-700: #42132a;
  --ib-primary-50: #fbf3f7;
  --ib-primary-100: #f6e4ed;
  --ib-primary-200: #ecc6d8;
  --ib-ring: rgba(107, 33, 68, 0.16);

  --ib-teal: #017e84;
  --ib-teal-50: #e6f4f4;
  --ib-success: #059669;
  --ib-success-50: #ecfdf5;
  --ib-success-200: #a7f3d0;
  --ib-success-800: #065f46;
  --ib-warning: #d97706;
  --ib-warning-50: #fffbeb;
  --ib-warning-200: #fde68a;
  --ib-warning-800: #92400e;
  --ib-danger: #e11d48;
  --ib-danger-50: #fff1f2;
  --ib-danger-200: #fecdd3;
  --ib-danger-800: #9f1239;
  --ib-info: #0369a1;
  --ib-info-50: #f0f9ff;
  --ib-info-200: #bae6fd;
  --ib-info-800: #075985;

  --ib-text: #0f172a;
  --ib-text-2: #334155;
  --ib-muted: #64748b;
  --ib-subtle: #94a3b8;
  --ib-border: #e5e7eb;
  --ib-border-2: #eef0f4;
  --ib-surface: #ffffff;
  --ib-bg: #f7f8fa;

  --ib-radius-sm: 8px;
  --ib-radius: 10px;
  --ib-radius-lg: 14px;
  --ib-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ib-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ib-shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.04);
  --ib-shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.25), 0 4px 10px rgba(15, 23, 42, 0.06);

  /* Re-point the existing theme's accent (mint) to the brand colour, so focus
     rings, pagination and active states all use one primary. */
  --odoo-primary: var(--ib-primary);
  --odoo-primary-hover: var(--ib-primary-600);
  --odoo-primary-active: var(--ib-primary-700);
  --odoo-primary-light: var(--ib-primary-50);
  --odoo-teal: var(--ib-primary) !important;
  --odoo-teal-dark: var(--ib-primary-600) !important;
  --odoo-teal-light: var(--ib-primary-50) !important;
  --odoo-teal-border: var(--ib-primary-200) !important;
  --odoo-bg: var(--ib-bg);
  --odoo-border: var(--ib-border-2);

  /* daisyUI palette (tw-dw-*): OKLCH "L C H" triplets + hex fallbacks */
  --p: 37.38% 0.1115 354.66 !important;
  --pc: 100% 0 0 !important;
  --s: 46.49% 0.0656 336.68 !important;
  --sc: 100% 0 0 !important;
  --a: 53.94% 0.0915 200.68 !important;
  --ac: 100% 0 0 !important;
  --n: 27.95% 0.0368 260.03 !important;
  --nc: 98.42% 0.0034 247.86 !important;
  --in: 50% 0.1193 242.75 !important;
  --inc: 100% 0 0 !important;
  --su: 59.6% 0.1274 163.23 !important;
  --suc: 100% 0 0 !important;
  --wa: 66.58% 0.1574 58.32 !important;
  --wac: 100% 0 0 !important;
  --er: 58.58% 0.222 17.58 !important;
  --erc: 100% 0 0 !important;
  --fallback-p: #6b2144 !important;
  --fallback-pc: #ffffff !important;
  --fallback-s: #714b67 !important;
  --fallback-sc: #ffffff !important;
  --fallback-a: #017e84 !important;
  --fallback-ac: #ffffff !important;
  --fallback-n: #1e293b !important;
  --fallback-nc: #f8fafc !important;
  --fallback-in: #0369a1 !important;
  --fallback-inc: #ffffff !important;
  --fallback-su: #059669 !important;
  --fallback-suc: #ffffff !important;
  --fallback-wa: #d97706 !important;
  --fallback-wac: #ffffff !important;
  --fallback-er: #e11d48 !important;
  --fallback-erc: #ffffff !important;
  --rounded-btn: 10px !important;
}

/* 2. Icon fixes ----------------------------------------------------------- */
/* The theme forces its text font on span/a/p/etc. with !important, which
   blanks any icon drawn on those elements (date picker chevrons, calendar
   addons). Restore the icon fonts with a more specific selector. */
.fa, .fas {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
.far {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}
.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}
.glyphicon {
  font-family: "Glyphicons Halflings" !important;
}
.ion, [class^="ion-"], [class*=" ion-"] {
  font-family: "Ionicons" !important;
}

/* The app bundles Font Awesome 5.15, but some views use Font Awesome 4 or 6
   icon names that don't exist in it and render blank. Map them to FA5. */
.fa-close:before { content: "\f00d"; }
.fa-refresh:before { content: "\f2f1"; }
.fa-trash-o:before { content: "\f2ed"; }
.fa-dashboard:before { content: "\f3fd"; }
.fa-diamond:before { content: "\f3a5"; }
.fa-external-link:before { content: "\f35d"; }
.fa-file-archive-o:before { content: "\f1c6"; }
.fa-files-o:before { content: "\f0c5"; }
.fa-keyboard-o:before { content: "\f11c"; }
.fa-lightbulb-o:before { content: "\f0eb"; }
.fa-mobile-screen:before { content: "\f3cd"; }
.fa-prescription-bottle-medical:before { content: "\f486"; }
.fa-picture-o:before { content: "\f03e"; }
.fa-commenting:before { content: "\f4ad"; }
.fa-cloud-download:before { content: "\f381"; }
.fa-check-square-o:before { content: "\f14a"; }
.fa-check-circle-o:before { content: "\f058"; }
.fa-calendar-check-o:before { content: "\f274"; }
.fa-circle-exclamation:before { content: "\f06a"; }
.fa-shield-halved:before { content: "\f3ed"; }
.fa-arrow-right-to-bracket:before { content: "\f2f6"; }

/* 3. Brand unification ---------------------------------------------------- */
body {
  background-color: var(--ib-bg) !important;
}
a {
  color: var(--ib-primary);
}
a:hover, a:focus {
  color: var(--ib-primary-600);
}
::selection {
  background: var(--ib-primary-100);
  color: var(--ib-primary-700);
}

/* Bootstrap buttons */
.btn {
  border-radius: var(--ib-radius) !important;
  font-weight: 600 !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease !important;
}
.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ib-ring) !important;
}
.btn-primary,
.btn-primary:focus {
  background-color: var(--ib-primary) !important;
  border-color: var(--ib-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--ib-primary-600) !important;
  border-color: var(--ib-primary-600) !important;
  color: #fff !important;
}
.btn-success { background-color: var(--ib-success) !important; border-color: var(--ib-success) !important; color: #fff !important; }
.btn-success:hover { background-color: #047857 !important; border-color: #047857 !important; }
.btn-danger { background-color: var(--ib-danger) !important; border-color: var(--ib-danger) !important; color: #fff !important; }
.btn-danger:hover { background-color: #be123c !important; border-color: #be123c !important; }
.btn-warning { background-color: var(--ib-warning) !important; border-color: var(--ib-warning) !important; color: #fff !important; }
.btn-warning:hover { background-color: #b45309 !important; border-color: #b45309 !important; }
.btn-info { background-color: var(--ib-info) !important; border-color: var(--ib-info) !important; color: #fff !important; }
.btn-info:hover { background-color: #075985 !important; border-color: #075985 !important; }
.btn-default {
  background-color: #fff !important;
  border-color: #d5d9e0 !important;
  color: var(--ib-text-2) !important;
}
.btn-default:hover {
  background-color: #f8fafc !important;
  border-color: #c3c9d3 !important;
  color: var(--ib-text) !important;
}

/* daisyUI buttons: consistent shape. Colours come from the variables above. */
.tw-dw-btn {
  border-radius: var(--ib-radius) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.tw-dw-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ib-ring) !important;
}
.tw-dw-btn-primary:not(.tw-dw-btn-outline) {
  background-color: var(--ib-primary) !important;
  border-color: var(--ib-primary) !important;
  color: #fff !important;
}
.tw-dw-btn-primary:not(.tw-dw-btn-outline):hover {
  background-color: var(--ib-primary-600) !important;
  border-color: var(--ib-primary-600) !important;
}

/* "Add" / toolbar buttons: the theme paints every card-toolbar button and
   every gradient button as an indigo→blue pill. Bring them on-brand.
   Selectors mirror the theme's so these win on specificity + order. */
.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 {
  background: var(--ib-primary) !important;
  border: 1px solid var(--ib-primary) !important;
  color: #fff !important;
  border-radius: var(--ib-radius) !important;
  box-shadow: 0 1px 2px rgba(107, 33, 68, .25) !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px 0 13px !important;
}
.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: var(--ib-primary-600) !important;
  border-color: var(--ib-primary-600) !important;
  transform: none !important;
  box-shadow: 0 4px 12px -2px rgba(107, 33, 68, .35) !important;
}
.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 {
  background: var(--ib-primary-700) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* No more 90° icon spin on hover (it rotated download arrows sideways) */
.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,
.box-tools a.btn-primary:hover i,
.box-tools button.btn-primary:hover i {
  transform: none !important;
}
/* Native file inputs (e.g. product brochure) matched nothing else */
input[type="file"]::file-selector-button {
  height: 34px;
  padding: 0 14px;
  margin-right: 10px;
  border-radius: 8px;
  border: 1px solid #d5d9e0;
  background: #fff;
  color: var(--ib-text-2);
  font-weight: 600;
  font-family: var(--odoo-font);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--ib-primary-50);
  border-color: var(--ib-primary-200);
  color: var(--ib-primary);
}

/* Text utility colours used for primary accents */
.text-primary { color: var(--ib-primary) !important; }
.text-info { color: var(--ib-info) !important; }
.text-success { color: var(--ib-success) !important; }
.text-danger { color: var(--ib-danger) !important; }
.text-warning { color: var(--ib-warning) !important; }

/* Help tooltips (ⓘ next to labels) were bright blue everywhere and competed
   with real actions. Mute them; they light up on hover. */
.fa-info-circle.text-info,
i.fa-info-circle[data-toggle="popover"] {
  color: var(--ib-subtle) !important;
  transition: color .15s ease;
}
.fa-info-circle.text-info:hover,
i.fa-info-circle[data-toggle="popover"]:hover {
  color: var(--ib-primary) !important;
}

/* Universal focus ring in brand colour */
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus,
.input-group:focus-within .form-control {
  border-color: var(--ib-primary) !important;
  box-shadow: 0 0 0 3px var(--ib-ring) !important;
  outline: none !important;
}

/* 4. Layout ---------------------------------------------------------------- */
/* Page headers: consistent size and rhythm on every page */
.content-header {
  padding: 22px 24px 6px !important;
}
.content-header > h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ib-text) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
}
.content-header > h1 > small {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ib-muted) !important;
  padding-left: 0 !important;
}
section.content {
  padding-top: 14px !important;
}

/* Cards (AdminLTE boxes, widget/filter components) */
.box,
.nav-tabs-custom {
  border-radius: var(--ib-radius-lg) !important;
  border: 1px solid var(--ib-border) !important;
  box-shadow: var(--ib-shadow) !important;
  background: var(--ib-surface) !important;
}
.box.box-solid,
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
  border-top-width: 1px !important;
  border-top-color: var(--ib-border) !important;
}
.box-header .box-title,
.box-header > .box-title {
  font-size: 15px !important;
  font-weight: 650 !important;
  color: var(--ib-text) !important;
  letter-spacing: -0.01em !important;
}
.box-header .box-title a {
  color: var(--ib-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.box-header .box-title a:hover {
  color: var(--ib-primary) !important;
}
.box-header .box-title .fa-filter,
.box-header .box-title a > i.fa {
  color: var(--ib-primary) !important;
  font-size: 13px !important;
}

/* Tabs */
.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: var(--ib-primary) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs > li.active > a {
  color: var(--ib-primary) !important;
  font-weight: 650 !important;
}
.nav-tabs-custom > .nav-tabs > li > a {
  color: var(--ib-muted) !important;
}

/* Modals */
.modal-content {
  border-radius: var(--ib-radius-lg) !important;
  border: 1px solid var(--ib-border) !important;
  box-shadow: var(--ib-shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--ib-border-2) !important;
  padding: 16px 22px !important;
}
.modal-header .modal-title {
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--ib-text) !important;
}
.modal-footer {
  border-top: 1px solid var(--ib-border-2) !important;
  background: #fafbfc !important;
  padding: 12px 22px !important;
}
.modal-backdrop.in {
  opacity: .45 !important;
  background: #0f172a !important;
}

/* Sidebar: active state in brand colour instead of mint */
#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: var(--ib-primary-50) !important;
  color: var(--ib-primary) !important;
  border-left: 3px solid var(--ib-primary) !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: var(--ib-primary) !important;
  stroke: var(--ib-primary) !important;
}
#side-bar div.chiled a.tw-text-primary-700,
#side-bar .treeview-menu li.active > a {
  background-color: var(--ib-primary-50) !important;
  color: var(--ib-primary) !important;
}
#side-bar div.chiled a,
#side-bar .treeview-menu a {
  position: relative;
}
#side-bar div.chiled a.tw-text-primary-700::before,
#side-bar .treeview-menu li.active > a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--ib-primary);
}

/* Sidebar brand + user card */
.ib-brand-mark {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ib-primary) 0%, var(--ib-primary-700) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(107, 33, 68, .28);
  flex-shrink: 0;
}
.ib-brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 9px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--ib-border-2);
}
.ib-brand-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ib-muted);
  margin-top: 3px;
}
.ib-brand-sub .ib-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ib-success);
  box-shadow: 0 0 0 2px var(--ib-success-50);
}
.ib-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--ib-primary-100);
  color: var(--ib-primary);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Footer */
.main-page-content > footer,
.main-footer {
  color: var(--ib-subtle) !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
}

/* 5. Forms ----------------------------------------------------------------- */
/* Bug fix: the theme's `.form-group > .form-control { display:block !important }`
   beat the inline display:none that TinyMCE and jQuery .hide() set, so hidden
   fields re-appeared (e.g. a raw textarea above the product description
   editor). Respect inline hiding again. */
.form-group > .form-control[style*="display: none"],
.form-group > .form-control[style*="display:none"],
.form-group > .form-control[hidden],
.form-group > .select2-container[style*="display: none"],
.form-group > .select2-container[style*="display:none"] {
  display: none !important;
}

.form-control {
  border-radius: var(--ib-radius) !important;
}
label,
.control-label {
  color: var(--ib-text-2) !important;
  font-weight: 600 !important;
}

/* Multi-select (select2) fields matched neither the inputs nor single selects:
   32px tall, square corners, old grey border. */
.select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--ib-radius) !important;
  padding: 3px 8px !important;
  background: #fff !important;
  cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-items: center !important;
  min-height: 32px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--ib-primary-50) !important;
  border: 1px solid var(--ib-primary-200) !important;
  color: var(--ib-primary-700) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--ib-primary) !important;
  margin-right: 5px !important;
  font-weight: 700 !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin-top: 0 !important;
  height: 28px !important;
  font-size: 13.5px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--ib-primary) !important;
  color: #fff !important;
}
.select2-dropdown {
  border-color: var(--ib-border) !important;
  border-radius: var(--ib-radius) !important;
  box-shadow: var(--ib-shadow-md) !important;
  overflow: hidden;
}

/* Native checkboxes & radios in brand colour */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ib-primary);
}

/* Validation messages */
label.error,
.help-block.error,
span.error {
  color: var(--ib-danger) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
}

/* 6. Tables ---------------------------------------------------------------- */
/* Row "Actions" dropdowns used the info (blue) outline; make them a calm
   neutral control that highlights in brand colour. */
.tw-dw-btn-outline.tw-dw-btn-info,
.tw-dw-btn-outline.tw-dw-btn-primary,
.tw-dw-btn-outline.tw-dw-btn-accent {
  background: #fff !important;
  border: 1px solid #d5d9e0 !important;
  color: var(--ib-text-2) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.tw-dw-btn-outline.tw-dw-btn-info:hover,
.tw-dw-btn-outline.tw-dw-btn-primary:hover,
.tw-dw-btn-outline.tw-dw-btn-accent:hover,
.open > .tw-dw-btn-outline.dropdown-toggle {
  background: var(--ib-primary-50) !important;
  border-color: var(--ib-primary-200) !important;
  color: var(--ib-primary) !important;
}
.tw-dw-btn-outline.tw-dw-btn-accent {
  color: var(--ib-teal) !important;
}

.dropdown-menu {
  border-radius: var(--ib-radius) !important;
  border: 1px solid var(--ib-border) !important;
  box-shadow: var(--ib-shadow-md) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  border-radius: 6px !important;
  padding: 7px 12px !important;
  color: var(--ib-text-2) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--ib-primary-50) !important;
  color: var(--ib-primary) !important;
}
.dropdown-menu > li > a > i,
.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > .fas {
  width: 16px;
  text-align: center;
  margin-right: 6px;
  color: var(--ib-muted);
}
.dropdown-menu > li > a:hover > i {
  color: var(--ib-primary);
}

/* Missing product photos showed broken-image alt text ("Pr o"); ibmart-ui.js
   swaps in the placeholder, this keeps the thumbnail tidy meanwhile. */
img.ib-img-fallback {
  object-fit: contain !important;
  background: #f1f5f9;
  padding: 3px;
}

/* Pagination & empty states */
.dataTables_empty {
  padding: 36px 12px !important;
  color: var(--ib-muted) !important;
  font-weight: 500 !important;
}

/* 7. Dashboard ------------------------------------------------------------- */
/* KPI cards: calm white cards with a coloured accent (Odoo / Polaris style)
   instead of eight competing saturated gradients. */
.odoo-kpi-card {
  --kpi: var(--ib-primary);
  --kpi-soft: var(--ib-primary-50);
  background: var(--ib-surface) !important;
  background-image: none !important;
  color: var(--ib-text) !important;
  border: 1px solid var(--ib-border) !important;
  border-radius: var(--ib-radius-lg) !important;
  box-shadow: var(--ib-shadow) !important;
}
.odoo-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kpi);
  opacity: .9;
}
.odoo-kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ib-shadow-md) !important;
  border-color: color-mix(in srgb, var(--kpi) 28%, var(--ib-border)) !important;
}
.odoo-kpi-card .tw-p-5 {
  padding: 18px 20px 14px !important;
}
.odoo-kpi-card .odoo-kpi-title {
  color: var(--ib-muted) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
.odoo-kpi-card .odoo-kpi-title i,
.odoo-kpi-card .odoo-kpi-title .fa-info-circle {
  color: var(--ib-subtle) !important;
}
.odoo-kpi-card .odoo-kpi-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  background: var(--kpi-soft) !important;
  color: var(--kpi) !important;
  box-shadow: none !important;
  border: none !important;
}
.odoo-kpi-card:hover .odoo-kpi-badge {
  background: var(--kpi) !important;
  color: #fff !important;
  transform: none !important;
}
.odoo-kpi-card .odoo-kpi-badge svg {
  color: inherit !important;
  stroke: currentColor !important;
}
.odoo-kpi-card .odoo-kpi-value {
  color: var(--ib-text) !important;
  font-family: var(--odoo-font) !important;
  font-size: 26px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  margin: 10px 0 12px !important;
  text-shadow: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.odoo-kpi-card .odoo-kpi-value * {
  font-family: inherit !important;
  color: inherit !important;
}
.odoo-kpi-card .odoo-kpi-action {
  border-top: 1px solid var(--ib-border-2) !important;
  padding-top: 11px !important;
  color: var(--kpi) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  opacity: 1 !important;
}
.odoo-kpi-card .odoo-kpi-action span,
.odoo-kpi-card .odoo-kpi-action svg {
  color: var(--kpi) !important;
  stroke: currentColor;
}
.odoo-kpi-card .odoo-kpi-action svg {
  stroke: currentColor !important;
}
/* The theme gives each card a coloured glow with a more specific selector */
.odoo-kpi-grid .odoo-kpi-card[class*="odoo-kpi-"] {
  box-shadow: var(--ib-shadow) !important;
}
.odoo-kpi-grid .odoo-kpi-card[class*="odoo-kpi-"]:hover {
  box-shadow: var(--ib-shadow-md) !important;
}
.odoo-kpi-card.odoo-kpi-sales,
.odoo-kpi-card.odoo-kpi-sales:hover { --kpi: var(--ib-teal); --kpi-soft: var(--ib-teal-50); background: #fff !important; }
.odoo-kpi-card.odoo-kpi-net,
.odoo-kpi-card.odoo-kpi-net:hover { --kpi: var(--ib-primary); --kpi-soft: var(--ib-primary-50); background: #fff !important; }
.odoo-kpi-card.odoo-kpi-invoicedue,
.odoo-kpi-card.odoo-kpi-invoicedue:hover { --kpi: var(--ib-warning); --kpi-soft: var(--ib-warning-50); background: #fff !important; }
.odoo-kpi-card.odoo-kpi-sellreturn,
.odoo-kpi-card.odoo-kpi-sellreturn:hover { --kpi: var(--ib-danger); --kpi-soft: var(--ib-danger-50); background: #fff !important; }
.odoo-kpi-card.odoo-kpi-purchase,
.odoo-kpi-card.odoo-kpi-purchase:hover { --kpi: var(--ib-info); --kpi-soft: var(--ib-info-50); background: #fff !important; }
.odoo-kpi-card.odoo-kpi-purchasedue,
.odoo-kpi-card.odoo-kpi-purchasedue:hover { --kpi: #c2410c; --kpi-soft: #fff7ed; background: #fff !important; }
.odoo-kpi-card.odoo-kpi-purchasereturn,
.odoo-kpi-card.odoo-kpi-purchasereturn:hover { --kpi: #6d28d9; --kpi-soft: #f5f3ff; background: #fff !important; }
.odoo-kpi-card.odoo-kpi-expense,
.odoo-kpi-card.odoo-kpi-expense:hover { --kpi: #475569; --kpi-soft: #f1f5f9; background: #fff !important; }

/* Dashboard section headings */
.ib-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}
.ib-section-title h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ib-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.ib-section-title .ib-range {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ib-muted);
}

/* "Needs attention" insights strip (filled by ibmart-ui.js from the
   dashboard's own tables: low stock, overdue payments, expiring stock) */
.ib-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.ib-insights:empty {
  display: none;
}
.ib-insight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ib-border);
  box-shadow: var(--ib-shadow-sm);
  color: var(--ib-text-2) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  animation: ib-pop .25s ease both;
}
.ib-insight:hover {
  border-color: var(--ib-tone-200, var(--ib-border));
  box-shadow: var(--ib-shadow-md);
  transform: translateY(-1px);
}
.ib-insight .ib-insight-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: var(--ib-tone-50);
  color: var(--ib-tone);
}
.ib-insight .ib-insight-count {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--ib-tone);
}
.ib-insight .ib-insight-go {
  color: var(--ib-subtle);
  font-size: 11px;
}
.ib-insight.is-warning { --ib-tone: var(--ib-warning); --ib-tone-50: var(--ib-warning-50); --ib-tone-200: var(--ib-warning-200); }
.ib-insight.is-danger { --ib-tone: var(--ib-danger); --ib-tone-50: var(--ib-danger-50); --ib-tone-200: var(--ib-danger-200); }
.ib-insight.is-info { --ib-tone: var(--ib-info); --ib-tone-50: var(--ib-info-50); --ib-tone-200: var(--ib-info-200); }
.ib-insight.is-success { --ib-tone: var(--ib-success); --ib-tone-50: var(--ib-success-50); --ib-tone-200: var(--ib-success-200); }

/* Chart / list cards on the dashboard */
.highcharts-background {
  fill: transparent !important;
}

/* 8. Inline alerts, callouts, labels ---------------------------------------- */
.alert {
  position: relative;
  border-radius: 12px !important;
  border: 1px solid !important;
  border-left-width: 4px !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  box-shadow: var(--ib-shadow-sm) !important;
}
.alert h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  color: inherit !important;
}
.alert .close {
  opacity: .5 !important;
  color: inherit !important;
  text-shadow: none !important;
  top: 0 !important;
  right: -4px !important;
}
.alert .close:hover { opacity: .9 !important; }
.alert a:not(.btn) {
  color: inherit !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
.alert-success {
  background: var(--ib-success-50) !important;
  color: var(--ib-success-800) !important;
  border-color: var(--ib-success-200) !important;
  border-left-color: var(--ib-success) !important;
}
.alert-info {
  background: var(--ib-info-50) !important;
  color: var(--ib-info-800) !important;
  border-color: var(--ib-info-200) !important;
  border-left-color: var(--ib-info) !important;
}
.alert-warning {
  background: var(--ib-warning-50) !important;
  color: var(--ib-warning-800) !important;
  border-color: var(--ib-warning-200) !important;
  border-left-color: var(--ib-warning) !important;
}
.alert-danger,
.alert-error {
  background: var(--ib-danger-50) !important;
  color: var(--ib-danger-800) !important;
  border-color: var(--ib-danger-200) !important;
  border-left-color: var(--ib-danger) !important;
}

.callout {
  border-radius: 12px !important;
  border-left-width: 4px !important;
  background: #fff !important;
  color: var(--ib-text-2) !important;
  box-shadow: var(--ib-shadow-sm) !important;
  border-top: 1px solid var(--ib-border) !important;
  border-right: 1px solid var(--ib-border) !important;
  border-bottom: 1px solid var(--ib-border) !important;
}
.callout.callout-info { border-left-color: var(--ib-info) !important; background: var(--ib-info-50) !important; color: var(--ib-info-800) !important; }
.callout.callout-success { border-left-color: var(--ib-success) !important; background: var(--ib-success-50) !important; color: var(--ib-success-800) !important; }
.callout.callout-warning { border-left-color: var(--ib-warning) !important; background: var(--ib-warning-50) !important; color: var(--ib-warning-800) !important; }
.callout.callout-danger { border-left-color: var(--ib-danger) !important; background: var(--ib-danger-50) !important; color: var(--ib-danger-800) !important; }
.callout a { color: inherit !important; }

/* Status labels (Paid / Due / Partial, etc.) as soft pills */
.label {
  border-radius: 999px !important;
  padding: .3em .75em !important;
  font-weight: 650 !important;
  font-size: 11.5px !important;
  letter-spacing: .01em !important;
}
.label-success, .label.bg-green { background: var(--ib-success-50) !important; color: var(--ib-success-800) !important; box-shadow: inset 0 0 0 1px var(--ib-success-200); }
.label-warning, .label.bg-yellow, .label.bg-orange { background: var(--ib-warning-50) !important; color: var(--ib-warning-800) !important; box-shadow: inset 0 0 0 1px var(--ib-warning-200); }
.label-danger, .label.bg-red { background: var(--ib-danger-50) !important; color: var(--ib-danger-800) !important; box-shadow: inset 0 0 0 1px var(--ib-danger-200); }
.label-info, .label.bg-info, .label.bg-aqua, .label.bg-light-blue { background: var(--ib-info-50) !important; color: var(--ib-info-800) !important; box-shadow: inset 0 0 0 1px var(--ib-info-200); }
.label-primary { background: var(--ib-primary-50) !important; color: var(--ib-primary) !important; box-shadow: inset 0 0 0 1px var(--ib-primary-200); }
.label-default, .label.bg-gray { background: #f1f5f9 !important; color: var(--ib-text-2) !important; box-shadow: inset 0 0 0 1px var(--ib-border); }

/* 9. Toast notifications ----------------------------------------------------- */
/* toastr is used ~275 times across the app; restyling it upgrades every
   success / error / warning message at once. */
#toast-container {
  z-index: 100000 !important;
}
#toast-container.toast-top-right {
  top: 76px !important;
  right: 20px !important;
}
#toast-container > div,
#toast-container > .toast {
  position: relative !important;
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 0 10px !important;
  padding: 14px 40px 14px 58px !important;
  border-radius: 14px !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--ib-text-2) !important;
  border: 1px solid var(--ib-border) !important;
  box-shadow: var(--ib-shadow-lg) !important;
  opacity: 1 !important;
  overflow: hidden !important;
  font-family: var(--odoo-font) !important;
}
#toast-container > div:hover {
  box-shadow: 0 20px 44px -12px rgba(15, 23, 42, .32), 0 4px 10px rgba(15, 23, 42, .06) !important;
}
#toast-container > div::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 16px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--ib-tone-50);
  color: var(--ib-tone);
}
#toast-container > .toast-success { --ib-tone: var(--ib-success); --ib-tone-50: var(--ib-success-50); }
#toast-container > .toast-error { --ib-tone: var(--ib-danger); --ib-tone-50: var(--ib-danger-50); }
#toast-container > .toast-warning { --ib-tone: var(--ib-warning); --ib-tone-50: var(--ib-warning-50); }
#toast-container > .toast-info { --ib-tone: var(--ib-info); --ib-tone-50: var(--ib-info-50); }
#toast-container > .toast-success::before { content: "\f00c"; }
#toast-container > .toast-error::before { content: "\f071"; }
#toast-container > .toast-warning::before { content: "\f06a"; }
#toast-container > .toast-info::before { content: "\f05a"; }
#toast-container > .toast.ib-toast-loading::before { content: ""; }
#toast-container > .toast.ib-toast-loading::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 21px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ib-info-200);
  border-top-color: var(--ib-info);
  animation: ib-spin .7s linear infinite;
}
#toast-container > div.ib-toast-brand { --ib-tone: var(--ib-primary); --ib-tone-50: var(--ib-primary-50); }
#toast-container > div.ib-toast-brand::before { content: "\f0f3"; }
#toast-container .toast-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ib-text) !important;
  margin-bottom: 2px !important;
  line-height: 1.35 !important;
}
#toast-container .toast-message {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--ib-text-2) !important;
  word-wrap: break-word;
  padding-top: 5px;
}
#toast-container .toast-title + .toast-message {
  padding-top: 0;
  color: var(--ib-muted) !important;
}
#toast-container .toast-message a,
#toast-container .toast-message label {
  color: var(--ib-primary) !important;
}
#toast-container .toast-close-button {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  color: var(--ib-subtle) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
#toast-container .toast-close-button:hover {
  color: var(--ib-text) !important;
}
#toast-container .toast-progress {
  height: 3px !important;
  opacity: .85 !important;
  background-color: var(--ib-tone) !important;
}
#toast-container .ib-toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#toast-container .ib-toast-actions .ib-toast-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 650;
  border: 1px solid var(--ib-border);
  background: #fff;
  color: var(--ib-text-2) !important;
  text-decoration: none !important;
  cursor: pointer;
}
#toast-container .ib-toast-actions .ib-toast-btn.is-primary {
  background: var(--ib-primary);
  border-color: var(--ib-primary);
  color: #fff !important;
}
@media (max-width: 640px) {
  #toast-container.toast-top-right {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
  }
  #toast-container > div {
    width: auto !important;
  }
}

/* Persistent banners (IBNotify.banner) */
.ib-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px 0;
}
.ib-banner-stack:empty {
  display: none;
}
.ib-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--ib-tone-200);
  border-left: 4px solid var(--ib-tone);
  background: var(--ib-tone-50);
  color: var(--ib-tone-800);
  font-size: 13.5px;
  box-shadow: var(--ib-shadow-sm);
  animation: ib-slide-down .25s ease both;
}
.ib-banner .ib-banner-icon {
  font-size: 15px;
  margin-top: 2px;
  color: var(--ib-tone);
  width: 18px;
  text-align: center;
}
.ib-banner .ib-banner-body {
  flex: 1;
  min-width: 0;
}
.ib-banner .ib-banner-title {
  font-weight: 700;
  margin: 0 0 2px;
}
.ib-banner .ib-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ib-banner .ib-banner-actions a,
.ib-banner .ib-banner-actions button {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 650;
  border: 1px solid var(--ib-tone-200);
  background: #fff;
  color: var(--ib-tone-800) !important;
  text-decoration: none !important;
  cursor: pointer;
}
.ib-banner .ib-banner-close {
  background: none;
  border: none;
  color: inherit;
  opacity: .55;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.ib-banner .ib-banner-close:hover { opacity: 1; }
.ib-banner.is-success { --ib-tone: var(--ib-success); --ib-tone-50: var(--ib-success-50); --ib-tone-200: var(--ib-success-200); --ib-tone-800: var(--ib-success-800); }
.ib-banner.is-info { --ib-tone: var(--ib-info); --ib-tone-50: var(--ib-info-50); --ib-tone-200: var(--ib-info-200); --ib-tone-800: var(--ib-info-800); }
.ib-banner.is-warning { --ib-tone: var(--ib-warning); --ib-tone-50: var(--ib-warning-50); --ib-tone-200: var(--ib-warning-200); --ib-tone-800: var(--ib-warning-800); }
.ib-banner.is-danger { --ib-tone: var(--ib-danger); --ib-tone-50: var(--ib-danger-50); --ib-tone-200: var(--ib-danger-200); --ib-tone-800: var(--ib-danger-800); }

/* Connection status bar (offline / back online) */
.ib-netbar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, calc(100% + 40px));
  visibility: hidden;
  opacity: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--ib-shadow-lg);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease, visibility .3s, background-color .2s ease;
  pointer-events: none;
}
.ib-netbar.is-visible {
  transform: translate(-50%, 0);
  visibility: visible;
  opacity: 1;
}
.ib-netbar .ib-netbar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .3);
  animation: ib-pulse 1.4s ease-in-out infinite;
}
.ib-netbar.is-online {
  background: var(--ib-success);
}
.ib-netbar.is-online .ib-netbar-dot {
  background: #fff;
  box-shadow: none;
  animation: none;
}

/* Header notification dropdown items */
#notifications_list > li > a {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  color: var(--ib-text-2) !important;
  border: none !important;
}
#notifications_list > li > a:hover {
  background: var(--ib-primary-50) !important;
}
.notifications_count {
  box-shadow: 0 0 0 2px #fff;
}

@keyframes ib-spin { to { transform: rotate(360deg); } }
@keyframes ib-pulse { 50% { opacity: .45; } }
@keyframes ib-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ib-slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ib-insight, .ib-banner, .ib-netbar { animation: none !important; transition: none !important; }
}

/* 10. Login page ----------------------------------------------------------- */
/* Brand pane: the retail photo was at 8% opacity behind a pale pink wash, so
   the panel read as washed-out. Make it a confident brand panel instead. */
.auth-brand-pane {
  background: var(--ib-primary-700) !important;
  color: #fff !important;
  border-right: none !important;
}
.auth-brand-bg-image {
  opacity: .32 !important;
  filter: grayscale(30%) contrast(105%) !important;
}
.auth-brand-overlay {
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(107, 33, 68, .55) 0%, transparent 60%),
    linear-gradient(160deg, rgba(66, 19, 42, .78) 0%, rgba(43, 12, 28, .92) 100%) !important;
}
.auth-brand-pane .auth-brand-title,
.auth-brand-pane .auth-headline-box h1,
.auth-brand-pane .auth-pillar-title {
  color: #fff !important;
}
.auth-brand-pane .auth-brand-subtitle,
.auth-brand-pane .auth-headline-box p,
.auth-brand-pane .auth-pillar-desc {
  color: rgba(255, 255, 255, .74) !important;
}
.auth-brand-pane .auth-headline-box h1 .ib-accent {
  color: #f9c8dd !important;
}
.auth-brand-pane .auth-brand-logo-icon {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25) !important;
}
.auth-brand-pane .auth-pillar-card {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.auth-brand-pane .auth-pillar-card:hover {
  background: rgba(255, 255, 255, .11) !important;
  transform: none !important;
}
.auth-brand-pane .auth-pillar-icon {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  border: none !important;
}
.auth-brand-pane .auth-brand-footer {
  border-top-color: rgba(255, 255, 255, .14) !important;
}
.auth-brand-pane .auth-quote-text {
  color: rgba(255, 255, 255, .85) !important;
}
.auth-brand-pane .auth-quote-caption {
  color: #f9c8dd !important;
}
/* Form pane */
.auth-form-pane {
  background: #fff !important;
}
.auth-form-tag {
  background: var(--ib-primary-50) !important;
  color: var(--ib-primary) !important;
  border-color: var(--ib-primary-200) !important;
  gap: 6px !important;
}
.auth-form-title {
  letter-spacing: -0.03em !important;
}
.auth-input-wrapper .auth-field {
  border-radius: 12px !important;
}
.auth-input-wrapper .auth-field:focus {
  border-color: var(--ib-primary) !important;
  box-shadow: 0 0 0 4px var(--ib-ring) !important;
}
.auth-submit-btn {
  background: var(--ib-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px -8px rgba(107, 33, 68, .55) !important;
}
.auth-submit-btn:hover {
  background: var(--ib-primary-600) !important;
}
.auth-forgot-link,
.auth-register-action-link {
  color: var(--ib-primary) !important;
}
.auth-lang-select-wrap > i.fas {
  pointer-events: none;
}
.ib-capslock {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ib-warning-800);
}
.ib-capslock.is-on {
  display: flex;
}

/* 11. POS screen -------------------------------------------------------------- */
/* Customer / price-group selects were cut off ("Walk-In C", "Default Se").
   Let the select2 inside POS input groups take the available width. */
#pos_table_wrapper .input-group .select2-container,
.pos-form-actions .input-group .select2-container,
form#add_pos_sell_form .input-group .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
form#add_pos_sell_form .input-group {
  display: flex !important;
  width: 100% !important;
}
form#add_pos_sell_form .input-group > .select2-container,
form#add_pos_sell_form .input-group > select,
form#add_pos_sell_form .input-group > .form-control {
  flex: 1 1 auto !important;
}
form#add_pos_sell_form .input-group > .input-group-addon,
form#add_pos_sell_form .input-group > .input-group-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: stretch !important;
}
form#add_pos_sell_form .input-group > .input-group-addon {
  align-items: center !important;
  justify-content: center !important;
}
/* The bright blue "+" buttons in POS input groups → brand */
form#add_pos_sell_form .input-group-btn .btn-default.bg-white,
form#add_pos_sell_form .input-group-btn > .btn:not(.btn-danger) {
  background: var(--ib-primary) !important;
  border-color: var(--ib-primary) !important;
  color: #fff !important;
}
form#add_pos_sell_form .input-group-btn > .btn:not(.btn-danger) i {
  color: #fff !important;
}
/* Cart header "remove" column: the icon rendered at heading size */
#pos_table thead th > i.fa-times {
  font-size: 13px !important;
  color: var(--ib-subtle) !important;
}
/* "Add Expense" in the POS header wrapped onto two lines */
.pos-header-btn-expense {
  white-space: nowrap !important;
}

/* Grid: the theme widens col-md-3 to 50% below 1536px so 4-column forms
   don't crush. Columns that also carry an offset (report filters) then
   overflow the row (e.g. Profit/Loss location filter), so keep those at
   their real width. */
@media (min-width: 992px) and (max-width: 1536px) {
  .box .row > .col-md-3[class*="col-md-offset-"],
  .content .row > .col-md-3[class*="col-md-offset-"],
  .box-body > .row > .col-md-3[class*="col-md-offset-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}

/* POS option fields (price group, service type, agent) share a third of the
   cart pane each; trim the chrome so values fit, and ellipsize the rest. */
form#add_pos_sell_form .input-group > .input-group-addon {
  min-width: 34px !important;
  padding: 0 9px !important;
}
form#add_pos_sell_form .input-group .select2-selection--single .select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Phones / small tablets: the theme drops the sidebar margin below 992px but
   kept the width at calc(100% - 250px), squeezing every page into ~140px. */
@media (max-width: 991px) {
  .main-content-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .content-header {
    padding: 16px 16px 4px !important;
  }
  .content-header > h1 {
    font-size: 20px !important;
  }
}

/* Login top bar: logo, language and Register overflowed on phones */
@media (max-width: 520px) {
  .auth-form-topbar {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .auth-topbar-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-left: auto;
  }
  .auth-mobile-logo-text {
    white-space: nowrap !important;
  }
}

/* Header on small screens: the date badge is meant to hide below lg
   (tw-hidden lg:tw-inline-flex) but an inline display style overrode it. */
@media (max-width: 1023px) {
  .header-date-badge {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .main-content-wrapper > div.no-print .tw-justify-between.tw-w-full {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
}

/* ==========================================================================
   12. Round 2 fixes (tables, checkboxes, settings, POS, leftover blues)
   ========================================================================== */

/* --- Tables: cells holding buttons ----------------------------------------
   The theme caps any cell containing buttons at 92px and forbids wrapping,
   so a second button (Delete, Set default) or an inline button (View group
   prices, Product stock history) spilled outside the cell: clipped Action
   columns, buttons drawn over neighbouring columns, and tables that scrolled
   sideways and hid their first column. Let these cells size to content. */
table.dataTable td:has(> .tw-dw-btn),
table.dataTable td:has(> .btn),
table.dataTable td:has(> a.btn),
table.dataTable td:has(> button),
table.dataTable td:has(> .btn-group),
.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),
th.action,
td.action {
  max-width: none !important;
  width: 1% !important;
  white-space: nowrap !important;
}
table.dataTable td > .tw-dw-btn + .tw-dw-btn,
table.dataTable td > .btn + .btn,
table.dataTable td > a + button,
table.dataTable td > button + a,
table.dataTable td > button + button,
table.dataTable td > a + a.btn {
  margin-left: 4px !important;
}
/* Inline buttons sitting after a value (e.g. "Rs 22,000.00  View group prices") */
table.dataTable td > .btn,
table.dataTable td > .tw-dw-btn {
  vertical-align: middle !important;
}
/* Row buttons were 22px / 11px: hard to hit, especially on touch screens */
.table td .tw-dw-btn,
.table td .btn,
table.dataTable td .tw-dw-btn,
table.dataTable td .btn {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
  line-height: 24px !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.table td .tw-dw-btn svg,
.table td .btn svg {
  width: 14px !important;
  height: 14px !important;
}
.table td .tw-dw-btn-outline.tw-dw-btn-error,
.table td .tw-dw-btn-outline.tw-dw-btn-danger {
  background: #fff !important;
  border: 1px solid var(--ib-danger-200) !important;
  color: var(--ib-danger) !important;
}
.table td .tw-dw-btn-outline.tw-dw-btn-error:hover,
.table td .tw-dw-btn-outline.tw-dw-btn-danger:hover {
  background: var(--ib-danger-50) !important;
  border-color: var(--ib-danger) !important;
}

/* Neutral, consistent row striping (odd rows looked beige) */
.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.table-striped > tbody > tr.odd,
table.dataTable.stripe > tbody > tr.odd {
  background-color: #fafbfc !important;
}
.table-striped > tbody > tr:nth-of-type(even),
table.dataTable.table-striped > tbody > tr.even {
  background-color: #fff !important;
}
.table-hover > tbody > tr:hover,
table.dataTable.hover > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover {
  background-color: var(--ib-primary-50) !important;
}

/* Sort arrows: brand instead of sky blue */
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='%236b2144' stroke-width='2.75'/%3E%3C/svg%3E") !important;
}
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='%236b2144' 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;
}

/* Pagination: active page in brand colour */
.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: var(--ib-primary) !important;
  border-color: var(--ib-primary) !important;
  box-shadow: 0 2px 4px rgba(107, 33, 68, .25) !important;
}

/* Length select / search box focus, column-visibility menu active item */
div.dataTables_wrapper div.dataTables_length select:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_length select:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
  border-color: var(--ib-primary) !important;
  box-shadow: 0 0 0 3px var(--ib-ring) !important;
}
div.dt-button-collection a.dt-button.active,
ul.dt-button-collection a.dt-button.active,
ul.dt-button-collection li.active a {
  color: var(--ib-primary) !important;
}

/* Export / Print / Column visibility toolbar: the buttons are both Bootstrap
   and daisyUI "outline" buttons; daisy's transparent border won, so only a
   focused button showed an outline. Make them one consistent set. */
div.dt-buttons > a.btn.tw-dw-btn,
div.dt-buttons > button.btn.tw-dw-btn,
div.dt-buttons > .dt-button.tw-dw-btn {
  background: #fff !important;
  border: 1px solid #d5d9e0 !important;
  border-radius: 8px !important;
  color: var(--ib-text-2) !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: var(--ib-shadow-sm) !important;
  margin: 0 !important;
  outline: none !important;
}
div.dt-buttons > a.btn.tw-dw-btn:hover,
div.dt-buttons > button.btn.tw-dw-btn:hover,
div.dt-buttons > .dt-button.tw-dw-btn:hover,
div.dt-buttons > a.btn.tw-dw-btn[aria-expanded="true"] {
  background: var(--ib-primary-50) !important;
  border-color: var(--ib-primary-200) !important;
  color: var(--ib-primary) !important;
}
div.dt-buttons > a.btn.tw-dw-btn:focus-visible,
div.dt-buttons > button.btn.tw-dw-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ib-ring) !important;
}
div.dt-buttons > .btn.tw-dw-btn > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
div.dt-buttons > .btn.tw-dw-btn i {
  color: var(--ib-muted) !important;
  margin: 0 !important;
  font-size: 12.5px !important;
}
div.dt-buttons > .btn.tw-dw-btn:hover i {
  color: var(--ib-primary) !important;
}
div.dt-buttons.btn-group {
  gap: 8px !important;
}

/* --- Checkboxes & radios (iCheck) -----------------------------------------
   iCheck drew boxes from a blue sprite with 22px frames; the theme squeezed
   them to 18px, cropping the right/bottom borders off unchecked boxes. Draw
   them with CSS in the brand colour instead. */
.icheckbox_square-blue,
.iradio_square-blue {
  background: #fff !important;
  background-image: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1.5px solid #b8c0cc !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.iradio_square-blue {
  border-radius: 50% !important;
}
.icheckbox_square-blue.hover,
.iradio_square-blue.hover {
  border-color: var(--ib-primary) !important;
}
.icheckbox_square-blue.focus,
.iradio_square-blue.focus {
  box-shadow: 0 0 0 3px var(--ib-ring) !important;
}
.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
  background: var(--ib-primary) !important;
  border-color: var(--ib-primary) !important;
}
.icheckbox_square-blue.checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
.iradio_square-blue.checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.icheckbox_square-blue.indeterminate::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--ib-primary);
}
.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled {
  opacity: .5 !important;
  background-color: #f1f5f9 !important;
}
.icheckbox_square-blue.checked.disabled,
.iradio_square-blue.checked.disabled {
  background-color: var(--ib-primary) !important;
}

/* --- Help (ⓘ) icons: the theme forces sky blue with selectors more specific
   than the generic mute rule above. Mirror them with a body prefix. */
body label .hover-q,
body label .fa-info-circle,
body .form-group > label .hover-q,
body .form-group > label .fa-info-circle,
body .form-group > label + .hover-q,
body .form-group > label + .fa-info-circle,
body .checkbox .hover-q,
body .checkbox i.fa-info-circle,
body .pos-cart-box .input-group-addon .hover-q,
body .pos-cart-box .input-group-addon i.fa-info-circle,
body .input-group-addon .hover-q,
body .input-group-addon i.fa-info-circle,
body i.hover-q.fa-info-circle,
body th .fa-info-circle,
body .text-info.hover-q {
  color: var(--ib-subtle) !important;
}
body label .hover-q:hover,
body .hover-q:hover,
body i.fa-info-circle:hover {
  color: var(--ib-primary) !important;
}
/* Inline edit pencils */
body i.fa-edit.cursor-pointer,
body i.fas.fa-edit.cursor-pointer {
  color: var(--ib-primary) !important;
}

/* --- Settings pages --------------------------------------------------------
   Columns are flex columns, so a help icon placed right after a label (not
   inside a .form-group) dropped onto its own line. */
.row:has(> [class*="col-"]) > [class*="col-"]:has(> label + .hover-q),
.row:has(> [class*="col-"]) > [class*="col-"]:has(> label + i.fa-info-circle) {
  display: block !important;
}
.row > [class*="col-"]:has(> label + .hover-q) > .input-group {
  margin-top: 6px;
  margin-bottom: 15px;
}
/* Settings tab menu active item was indigo */
.pos-tab-menu .list-group-item.active,
.pos-tab-menu .list-group-item.active:hover,
.pos-tab-menu .list-group-item.active:focus {
  color: var(--ib-primary) !important;
  background-color: var(--ib-primary-50) !important;
  border-left: 4px solid var(--ib-primary) !important;
}
.pos-tab-menu .list-group-item:hover {
  color: var(--ib-primary) !important;
}
/* "Select + number" pairs (e.g. On Product Expiry: Keep selling | days):
   two floated fields with no join. Render as one joined control. */
.multi-input::after {
  content: "";
  display: table;
  clear: both;
}
.multi-input > label {
  margin-bottom: 6px !important;
}
.multi-input > .form-control:has(+ .form-control) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.multi-input > .form-control + .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px !important;
}
/* Checkbox inside an input-group addon (Enable Product Expiry) */
.input-group-addon > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 !important;
  cursor: pointer;
}

/* --- Input-group addons: icons sat at the top of the box because the theme
   stretched the <i> to full height. Centre them everywhere. */
body .input-group > .input-group-addon {
  align-items: center !important;
}
body .input-group > .input-group-addon > i,
body .input-group > .input-group-addon > .fa,
body .input-group > .input-group-addon > .fas {
  display: inline-block !important;
  height: auto !important;
  line-height: 1 !important;
}

/* --- Select2: the selected text was a flex box, which disables ellipsis, so
   long values were clipped mid-letter ("Default Sellii"). */
html body .select2-container .select2-selection.select2-selection--single .select2-selection__rendered {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 38px !important;
}

/* --- Leftover off-brand colours from the theme ----------------------------- */
/* Quick-add "+" buttons next to customer / product search: the theme drew a
   blue gradient. Outside POS they are white with a brand icon (POS keeps its
   filled buttons, see section 11). Icon colour must not be white here. */
.input-group-btn > .btn.add_new_customer,
.input-group-btn > .btn.pos_add_quick_product {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--ib-primary) !important;
}
.input-group-btn > .btn.add_new_customer i,
.input-group-btn > .btn.pos_add_quick_product i {
  color: var(--ib-primary) !important;
}
.input-group-btn > .btn.add_new_customer:hover,
.input-group-btn > .btn.pos_add_quick_product:hover {
  background: var(--ib-primary-50) !important;
  border-color: var(--ib-primary-200) !important;
}
form#add_pos_sell_form .input-group-btn > .btn.add_new_customer,
form#add_pos_sell_form .input-group-btn > .btn.pos_add_quick_product {
  background: var(--ib-primary) !important;
  border-color: var(--ib-primary) !important;
}
form#add_pos_sell_form .input-group-btn > .btn.add_new_customer i,
form#add_pos_sell_form .input-group-btn > .btn.pos_add_quick_product i {
  color: #fff !important;
}

/* Text-style buttons ("+ Add new product") were the old link blue */
.btn-link,
.btn-link:focus {
  color: var(--ib-primary) !important;
}
.btn-link:hover {
  color: var(--ib-primary-600) !important;
}
.pos-header-btn.btn-fullscreen:hover {
  color: var(--ib-primary) !important;
}

/* Inside input groups the select2 box already pads for the arrow (12px /
   36px); the theme padded the text again (up to 32px), wasting ~80px and
   truncating values like "Pakistan - Rupees". */
html body .input-group > .select2-container .select2-selection.select2-selection--single .select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 4px !important;
}

/* Checkbox labels were nowrap, so long ones ("Sales price is minimum selling
   price") ran into the next column and covered its checkbox. */
.checkbox {
  min-width: 0 !important;
  max-width: 100% !important;
}
.checkbox > label {
  white-space: normal !important;
  min-width: 0 !important;
  line-height: 1.35 !important;
}

/* Section headings inside forms and settings ("Commission Agent:",
   "POS settings:", "Access locations") were large, light and off-colour.
   Match the card titles. */
.pos-tab-content h4,
.box-body h4:not(.modal-title),
section.content form h4:not(.modal-title),
section.content form h3:not(.box-title):not(.modal-title) {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ib-text) !important;
  letter-spacing: -0.01em !important;
  margin: 18px 0 12px !important;
  line-height: 1.35 !important;
}
.pos-tab-content h4 small,
.box-body h4 small,
section.content form h4 small {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ib-muted) !important;
}
.pos-tab-content hr,
.box-body hr {
  border-top-color: var(--ib-border-2) !important;
  margin: 14px 0 !important;
}

/* Grey "well" panels (Reward points) → subtle bordered panels */
.well {
  background: #fafbfc !important;
  border: 1px solid var(--ib-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.row.well {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 16px !important;
}

/* --- POS / sale cart rows -------------------------------------------------- */
/* Quantity stepper: the input was 30px wide with 14px side padding, leaving
   2px for the digits, so the quantity looked blank between − and +. */
.input-group.input-number {
  flex-wrap: nowrap !important;
  min-width: 112px;
}
.input-group.input-number > .form-control {
  padding: 0 2px !important;
  min-width: 46px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums;
}
.input-group.input-number > .input-group-btn > .btn {
  width: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}
/* Product name links in the cart were the old link blue */
#pos_table tbody td a,
#pos_table tbody td .text-link,
table.pos_product_table tbody td a {
  color: var(--ib-primary) !important;
  font-weight: 600;
}

/* --- Header dropdowns ------------------------------------------------------ */
/* Notifications: was a fixed 90vh-tall panel even when empty */
.notifications-menu > .dropdown-menu {
  height: auto !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  width: 360px !important;
  padding: 8px !important;
}
#notifications_list:empty::before,
#notifications_list > li.text-center:only-child {
  display: block;
}
#notifications_list > li:only-child:not(:has(a)) {
  padding: 28px 12px !important;
  text-align: center !important;
  color: var(--ib-muted) !important;
  font-weight: 500 !important;
}
/* Quick-add menu items wrapped ("Application / Tour") */
details.tw-dw-dropdown > ul,
details.tw-dw-dropdown > div:not(:first-child) {
  min-width: 210px !important;
}
details.tw-dw-dropdown a {
  white-space: nowrap !important;
}

/* --- Secondary buttons ----------------------------------------------------- */
/* "Close" / secondary actions used a heavy dark-slate fill that competed with
   the primary "Save". Make neutral buttons quiet, outlined secondaries. */
.tw-dw-btn-neutral:not(.tw-dw-btn-outline) {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--ib-text-2) !important;
}
.tw-dw-btn-neutral:not(.tw-dw-btn-outline):hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: var(--ib-text) !important;
}
.tw-dw-btn-neutral.tw-text-white {
  color: var(--ib-text-2) !important;
}
.modal-footer .tw-dw-btn,
.modal-footer .btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
}
/* Cart table clipped its own last column (remove ×) when a row was added:
   content ~690px in a 628px table with overflow hidden. Tighten cell padding
   and let any remaining overflow scroll (the wrapper already scrolls). */
#pos_table {
  overflow: visible !important;
}
#pos_table > thead > tr > th,
#pos_table > tbody > tr > td {
  padding-left: 7px !important;
  padding-right: 7px !important;
}
#pos_table > tbody > tr > td:last-child,
#pos_table > thead > tr > th:last-child {
  width: 34px !important;
  min-width: 34px !important;
  text-align: center !important;
}
#pos_table .pos_remove_row {
  font-size: 15px !important;
  color: var(--ib-subtle) !important;
  transition: color .15s ease;
}
#pos_table .pos_remove_row:hover {
  color: var(--ib-danger) !important;
}

/* ==========================================================================
   13. Colour system: one accent per module (set by ibmart-ui.js from the URL)
   ========================================================================== */
[data-ib-module] { --ib-mod: var(--ib-primary); }
[data-ib-module="home"]          { --ib-mod: #6b2144; }
[data-ib-module="users"]         { --ib-mod: #4f46e5; }
[data-ib-module="contacts"]      { --ib-mod: #0f8b8d; }
[data-ib-module="products"]      { --ib-mod: #d97706; }
[data-ib-module="purchases"]     { --ib-mod: #0284c7; }
[data-ib-module="sales"]         { --ib-mod: #059669; }
[data-ib-module="transfers"]     { --ib-mod: #7c3aed; }
[data-ib-module="adjustments"]   { --ib-mod: #ea580c; }
[data-ib-module="expenses"]      { --ib-mod: #e11d48; }
[data-ib-module="accounts"]      { --ib-mod: #0891b2; }
[data-ib-module="reports"]       { --ib-mod: #2563eb; }
[data-ib-module="bookings"]      { --ib-mod: #db2777; }
[data-ib-module="notifications"] { --ib-mod: #65a30d; }
[data-ib-module="help"]          { --ib-mod: #475569; }
[data-ib-module="settings"]      { --ib-mod: #475569; }

/* Sidebar: each module's icon sits in a soft chip of its colour */
#side-bar a[data-ib-module] > svg:first-child {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 6px !important;
  border-radius: 9px !important;
  color: var(--ib-mod) !important;
  stroke: var(--ib-mod) !important;
  background: color-mix(in srgb, var(--ib-mod) 11%, #fff) !important;
  transition: background-color .15s ease, color .15s ease !important;
}
#side-bar a[data-ib-module] {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
#side-bar a[data-ib-module]:hover > svg:first-child {
  background: color-mix(in srgb, var(--ib-mod) 18%, #fff) !important;
}
/* Active module: chip filled with its colour */
#side-bar a[data-ib-module].tw-bg-gray-200 > svg:first-child,
#side-bar a[data-ib-module].active > svg:first-child {
  background: var(--ib-mod) !important;
  color: #fff !important;
  stroke: #fff !important;
  box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--ib-mod) 55%, transparent) !important;
}
#side-bar a.drop_down.tw-bg-gray-200[data-ib-module],
#side-bar a.tw-bg-gray-200[data-ib-module] {
  background-color: color-mix(in srgb, var(--ib-mod) 7%, #fff) !important;
  border-left-color: var(--ib-mod) !important;
  color: var(--ib-text) !important;
}
/* Sub-menu current item picks up the module colour too */
#side-bar a[data-ib-module] + .chiled a.tw-text-primary-700 {
  color: var(--ib-mod) !important;
  background-color: color-mix(in srgb, var(--ib-mod) 8%, #fff) !important;
}
#side-bar a[data-ib-module] + .chiled a.tw-text-primary-700::before {
  background: var(--ib-mod) !important;
}

/* Page heading carries a small marker in the current module's colour */
body[data-ib-module] .content-header > h1::before {
  content: "";
  display: inline-block;
  align-self: center;
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: var(--ib-mod);
  margin-right: 4px;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ib-mod) 50%, transparent);
}

/* Subtle brand wash behind the top of every page */
.main-page-content {
  background:
    radial-gradient(900px 260px at 100% 0%, color-mix(in srgb, var(--ib-mod, #6b2144) 5%, transparent) 0%, transparent 70%),
    var(--ib-bg) !important;
}

/* Table headers: faint tint instead of flat grey */
table.dataTable thead th,
.table > thead > tr > th {
  background-color: #f8f6f8 !important;
  color: #475569 !important;
}

/* Low-stock (and other status) rows: the report marks them with bg-* classes;
   keep them visibly tinted (striping must not hide them) but readable. */
table tbody tr.bg-danger,
table tbody tr.bg-danger > td,
.table-striped > tbody > tr.bg-danger:nth-of-type(odd),
.table-striped > tbody > tr.bg-danger:nth-of-type(even) {
  background-color: #fff4f5 !important;
}
table tbody tr.bg-danger > td:first-child {
  box-shadow: inset 3px 0 0 var(--ib-danger) !important;
}
table tbody tr.bg-warning,
table tbody tr.bg-warning > td,
.table-striped > tbody > tr.bg-warning:nth-of-type(odd),
.table-striped > tbody > tr.bg-warning:nth-of-type(even) {
  background-color: #fffaeb !important;
}
table tbody tr.bg-warning > td:first-child {
  box-shadow: inset 3px 0 0 var(--ib-warning) !important;
}
table tbody tr.bg-success,
table tbody tr.bg-success > td,
.table-striped > tbody > tr.bg-success:nth-of-type(odd),
.table-striped > tbody > tr.bg-success:nth-of-type(even) {
  background-color: #f0fdf6 !important;
}
table tbody tr.bg-info,
table tbody tr.bg-info > td,
.table-striped > tbody > tr.bg-info:nth-of-type(odd),
.table-striped > tbody > tr.bg-info:nth-of-type(even) {
  background-color: #f0f8ff !important;
}

/* Card titles get a soft module-coloured underline accent */
body[data-ib-module] .box-header.with-border {
  border-bottom: 1px solid var(--ib-border-2) !important;
}

/* Logo in the sidebar */
.ib-brand-logo {
  padding: 2px;
}

/* ==========================================================================
   14. Public pages (register, forgot / reset password)
   The layout puts white links and a logo over the page background, which the
   theme made near-white, so "English", "Sign In" and "Register" were invisible.
   Give these pages the same brand backdrop as the login panel.
   ========================================================================== */
body.ib-auth-page:not(.ib-auth-full) {
  background:
    radial-gradient(1100px 520px at 0% 0%, rgba(142, 58, 99, .55) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(15, 139, 141, .22) 0%, transparent 60%),
    linear-gradient(160deg, #4a1530 0%, #2b0c1c 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
body.ib-auth-page:not(.ib-auth-full) .right-col {
  background: transparent !important;
}
/* Logo: centred above the card instead of floating top-right */
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child {
  display: block !important;
  margin: 0 !important;
}
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child > div:first-child {
  margin: 0 auto 18px !important;
  width: 64px !important;
  height: 64px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child a,
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child .tw-text-white,
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child span {
  color: #fff !important;
}
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child .tw-border-white {
  border-color: rgba(255, 255, 255, .6) !important;
  background: rgba(255, 255, 255, .08) !important;
}
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child select,
body.ib-auth-page:not(.ib-auth-full) .right-col > .row:first-child .btn {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
/* Cards on the dark backdrop */
body.ib-auth-page:not(.ib-auth-full) .tw-bg-white.tw-rounded-xl,
body.ib-auth-page:not(.ib-auth-full) .box,
body.ib-auth-page:not(.ib-auth-full) .wizard {
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5) !important;
}
/* Forgot-password form: the input sits inside a <label>, which the theme
   turned into an inline flex row, squeezing the field to half width. */
.tw-dw-form-control,
label.tw-dw-form-control {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
.tw-dw-form-control .tw-dw-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 0 !important;
}
.tw-dw-form-control input {
  width: 100% !important;
  border-radius: 12px !important;
}
.tw-dw-form-control input:focus {
  border-color: var(--ib-primary) !important;
  box-shadow: 0 0 0 4px var(--ib-ring) !important;
}
/* Gradient submit buttons on these pages → brand */
button.tw-bg-gradient-to-r.tw-from-indigo-500,
a.tw-bg-gradient-to-r.tw-from-indigo-500 {
  background: var(--ib-primary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px -8px rgba(107, 33, 68, .55) !important;
}
button.tw-bg-gradient-to-r.tw-from-indigo-500:hover {
  background: var(--ib-primary-600) !important;
}

/* Registration wizard steps (were blue / grey blocks) */
.wizard > .steps > ul > li > a,
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {
  border-radius: 12px !important;
  font-weight: 600 !important;
}
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
  background: var(--ib-primary) !important;
  color: #fff !important;
}
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
  background: var(--ib-primary-100) !important;
  color: var(--ib-primary) !important;
}
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active {
  background: #f1f5f9 !important;
  color: var(--ib-muted) !important;
}
.wizard > .steps .number {
  font-weight: 800 !important;
}
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
  background: var(--ib-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: .6em 1.4em !important;
  font-weight: 600 !important;
}
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
  background: #e2e8f0 !important;
  color: var(--ib-muted) !important;
}
.wizard > .content > .body h3,
.wizard > .content h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ib-text) !important;
}
body.ib-auth-page:not(.ib-auth-full) .row:has(> .tw-rounded-full.tw-mx-auto) {
  display: block !important;
}
body.ib-auth-page:not(.ib-auth-full) .row > .tw-rounded-full.tw-mx-auto {
  display: flex !important;
  margin: 0 auto 18px !important;
  width: 64px !important;
  height: 64px !important;
  float: none !important;
}

/* ==========================================================================
   15. POS polish (round 3)
   ========================================================================== */
/* Bottom action bar is position:fixed but inherited the content's 24px
   offset with width:100%, so it hung off the right edge ("Recent
   Transactions" / "Cancel" clipped). Pin it to both edges instead. */
.pos-form-actions {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  padding: 10px 24px !important;
  border-top: 1px solid var(--ib-border) !important;
  box-shadow: 0 -6px 24px -8px rgba(66, 19, 42, .14) !important;
}
.pos-total-payable-card {
  background: var(--ib-primary-50) !important;
  border: 1.5px solid var(--ib-primary-200) !important;
  height: 44px;
}
.pos-total-payable-label {
  color: var(--ib-primary-700) !important;
  font-size: 12px !important;
}
.pos-total-payable-val {
  color: var(--ib-primary) !important;
  font-family: inherit !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* Laptops: keep the bar on one row */
@media (min-width: 768px) and (max-width: 1399px) {
  .pos-form-actions > div { gap: 10px !important; flex-wrap: nowrap !important; }
  .pos-form-actions .md\:tw-flex { gap: 6px !important; }
  .pos-form-actions .pos-action-btn { min-width: 52px !important; padding: 4px 7px !important; font-size: 10.5px !important; }
  .pos-btn-multipay, .pos-btn-cash, .pos-btn-cancel { padding: 0 14px !important; }
  .pos-total-payable-card { padding: 6px 12px !important; gap: 8px !important; }
  .pos-total-payable-val { font-size: 19px !important; }
  .pos-btn-recent { padding: 0 13px !important; }
  .pos-btn-recent > span { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .pos-btn-multipay > i, .pos-btn-cash > i, .pos-btn-cancel > i { display: none !important; }
  .pos-total-payable-label { display: none !important; }
}

/* Cart card: card + box-body + column + table each added ~18px of side
   padding, leaving the cart table too narrow on laptops (× column cut). */
.pos-cart-box > .box-body,
.pos-cart-box .box-body.pb-0 {
  padding: 4px 0 0 !important;
}
.pos-cart-box .pos_product_div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#pos_table {
  padding: 0 !important;
  margin-top: 6px !important;
}
#pos_table > thead > tr > th {
  font-size: 11px !important;
  letter-spacing: .04em;
  white-space: nowrap;
}
#pos_table > tbody > tr > td {
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums;
}
#pos_table .pos-line-unit-price,
#pos_table .pos-line-discount,
#pos_table .pos-line-tax,
#pos_table .pos_line_total_text {
  white-space: nowrap !important;
}
#pos_table .pos_line_total_text {
  font-weight: 700;
  color: var(--ib-text);
}
@media (max-width: 1399px) {
  #pos_table > tbody > tr > td { font-size: 12.5px !important; }
}
#pos_table .pos-product-name-text {
  font-weight: 600;
  color: var(--ib-text);
}

/* Totals panel: quieter labels, clearer values */
.pos_form_totals table td {
  vertical-align: top !important;
}
.pos_form_totals td > b,
.pos_form_totals td > b.tw-text-base {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ib-muted) !important;
}
.pos_form_totals .total_quantity,
.pos_form_totals .price_total,
.pos_form_totals #total_discount,
.pos_form_totals #order_tax,
.pos_form_totals #shipping_charges_amount {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ib-text) !important;
  font-variant-numeric: tabular-nums;
}
.pos_form_totals .fa-edit,
.pos_form_totals .fas.fa-edit {
  color: var(--ib-primary) !important;
  font-size: 14px !important;
}

/* Product cards: stock badge wrapped ("100.00 / Pc(s)"); missing photos left
   an empty grey box (ibmart-ui.js adds .ib-noimg when the image 404s). */
.product_box .pos-stock-badge {
  white-space: nowrap !important;
  flex-shrink: 0;
}
.product_box .pos-sku-text {
  min-width: 0;
  flex: 1 1 auto;
}
.product_box .image-container.ib-noimg {
  background-image: none !important;
  background: linear-gradient(135deg, var(--ib-primary-50), #f8fafc) !important;
}
.product_box .image-container.ib-noimg::before {
  content: "\f1b2"; /* fa-cube */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62%);
  font-size: 28px;
  color: var(--ib-primary-200);
}

/* select2 dropdowns: the customer search opened only as wide as its field
   (~176px), wrapping hints and clipping "Add … as new customer" behind a
   horizontal scrollbar. ibmart-ui.js widens narrow dropdowns on open. */
.select2-results__options {
  overflow-x: hidden !important;
}
.select2-results__option,
.select2-results__message {
  line-height: 1.45 !important;
  white-space: normal;
  word-break: break-word;
}
.select2-results__message {
  color: var(--ib-muted) !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}
.select2-search--dropdown {
  padding: 8px !important;
}
html body .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ib-border) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  outline: none !important;
}
html body .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--ib-primary) !important;
  box-shadow: 0 0 0 3px var(--ib-primary-100) !important;
}
.select2-results__message .add_new_customer,
.select2-results__option .add_new_customer {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 6px !important;
  white-space: normal !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-weight: 600;
  color: var(--ib-primary) !important;
  border-radius: 8px;
  text-decoration: none !important;
}
.select2-results__message .add_new_customer:hover {
  background: var(--ib-primary-50) !important;
}
.select2-results__message .add_new_customer i {
  color: var(--ib-primary) !important;
}

/* Grid: the theme turns every col-md-3 into 50% below 1536px. In a 9 + 3
   split (POS payment dialog, detail pages) that pushed the 3-column below
   the 9-column. Keep real 25% when the row has a 9-column partner. */
@media (min-width: 992px) {
  html body .row:has(> .col-md-9) > .col-md-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}
@media (min-width: 768px) {
  html body .row:has(> .col-sm-9) > .col-sm-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}

/* POS payment dialog: the order summary card (bg-orange) rendered white text
   on the theme's white box, so totals were invisible. Brand summary card. */
#modal_payment .box.bg-orange {
  background: linear-gradient(160deg, var(--ib-primary) 0%, var(--ib-primary-700) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px -10px rgba(66, 19, 42, .55) !important;
}
#modal_payment .box.bg-orange .box-body {
  padding: 16px 4px !important;
  background: transparent !important;
}
#modal_payment .box.bg-orange strong {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .72) !important;
}
#modal_payment .box.bg-orange .lead {
  display: inline-block;
  margin: 2px 0 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}
#modal_payment .box.bg-orange hr {
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
  margin: 12px 0 !important;
}
#modal_payment .box.bg-orange .balance_due {
  color: #fde68a !important;
}

/* Recent transactions tabs used a terminal ">_" glyph for Quotation/Draft */
#recent_transactions_modal .nav-tabs a[href="#tab_quotation"] .fa-terminal::before { content: "\f15c"; }
#recent_transactions_modal .nav-tabs a[href="#tab_draft"] .fa-terminal::before { content: "\f044"; }

/* POS on phones: the location + date row didn't wrap and ran off-screen */
@media (max-width: 767px) {
  .pos-header .pos-header-location-wrap {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  .pos-header .pos-header-location-wrap > div:has(select) {
    flex: 1 1 160px !important;
    min-width: 0 !important;
  }
  .pos-header .pos-header-location-wrap select {
    width: 100% !important;
  }
}

/* ==========================================================================
   16. POS toolbar & action icons (round 4)
   Each tool gets its own colour: a soft tinted tile with a coloured icon,
   filled on hover, so tools are recognisable at a glance.
   ========================================================================== */
.pos-header-actions-wrap .pos-header-btn {
  --ib-tool: #475569;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 11px !important;
  border: 1px solid color-mix(in srgb, var(--ib-tool) 18%, transparent) !important;
  background: color-mix(in srgb, var(--ib-tool) 8%, #fff) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
.pos-header-actions-wrap .pos-header-btn > i {
  color: var(--ib-tool) !important;
  font-size: 15px !important;
  transition: color .15s ease;
}
.pos-header-actions-wrap .pos-header-btn:hover,
.pos-header-actions-wrap .pos-header-btn[aria-describedby^="popover"] {
  background: var(--ib-tool) !important;
  border-color: var(--ib-tool) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ib-tool) 70%, transparent) !important;
}
.pos-header-actions-wrap .pos-header-btn:hover > i,
.pos-header-actions-wrap .pos-header-btn[aria-describedby^="popover"] > i {
  color: #fff !important;
}
.pos-header-actions-wrap .pos-header-btn.btn-go-back      { --ib-tool: #475569; }
.pos-header-actions-wrap .pos-header-btn.btn-recent-mobile { --ib-tool: #0284c7; }
.pos-header-actions-wrap #show_service_staff_availability { --ib-tool: #7c3aed; }
.pos-header-actions-wrap #service_staff_replacement       { --ib-tool: #4f46e5; }
.pos-header-actions-wrap .pos-header-btn.btn-close-reg    { --ib-tool: #e11d48; }
.pos-header-actions-wrap .pos-header-btn.btn-reg-details  { --ib-tool: #0f8b8d; }
.pos-header-actions-wrap .pos-header-btn.btn-calc         { --ib-tool: #059669; }
.pos-header-actions-wrap .pos-header-btn.btn-return       { --ib-tool: #ea580c; }
.pos-header-actions-wrap .pos-header-btn.btn-fullscreen   { --ib-tool: #4f46e5; }
.pos-header-actions-wrap .pos-header-btn.btn-pause        { --ib-tool: #d97706; }
/* Recent transactions already lives in the bottom bar on desktop */
@media (min-width: 768px) {
  .pos-header-actions-wrap .pos-header-btn.btn-recent-mobile { display: none !important; }
}
/* A thin divider between navigation and tools */
.pos-header-actions-wrap .btn-go-back {
  margin-right: 6px !important;
}
.pos-header-actions-wrap .pos-header-btn-expense {
  height: 40px !important;
  border-radius: 11px !important;
}

/* Tooltips on toolbar buttons: compact dark pill above the popovers */
.pos-header .tooltip,
.pos-form-actions .tooltip {
  z-index: 1090 !important;
}
.tooltip .tooltip-inner {
  background: #1e1b24 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  max-width: 240px;
}
.tooltip.bottom .tooltip-arrow { border-bottom-color: #1e1b24 !important; }
.tooltip.top .tooltip-arrow { border-top-color: #1e1b24 !important; }

/* Bottom bar secondary actions: coloured icon tiles above the label */
.pos-form-actions .pos-action-btn {
  --ib-tool: #475569;
  height: 54px !important;
  min-width: 70px !important;
  gap: 4px !important;
  background: #fff !important;
  color: #334155 !important;
  font-weight: 600 !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.pos-form-actions .pos-action-btn > i {
  width: 26px;
  height: 22px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 12px !important;
  color: var(--ib-tool) !important;
  background: color-mix(in srgb, var(--ib-tool) 12%, #fff);
}
.pos-form-actions .pos-action-btn:hover:not([disabled]) {
  border-color: var(--ib-tool) !important;
  color: var(--ib-tool) !important;
  background: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--ib-tool) 80%, transparent) !important;
}
.pos-form-actions .pos-action-btn:hover:not([disabled]) > i {
  background: var(--ib-tool);
  color: #fff !important;
}
.pos-form-actions #pos-draft                                  { --ib-tool: #0284c7; }
.pos-form-actions #pos-quotation                              { --ib-tool: #d97706; }
.pos-form-actions .pos-action-btn[data-pay_method="suspend"]     { --ib-tool: #e11d48; }
.pos-form-actions .pos-action-btn[data-pay_method="credit_sale"] { --ib-tool: #7c3aed; }
.pos-form-actions .pos-action-btn[data-pay_method="card"]        { --ib-tool: #db2777; }
.pos-form-actions .pos-btn-multipay > i,
.pos-form-actions .pos-btn-cash > i,
.pos-form-actions .pos-btn-cancel > i,
.pos-form-actions .pos-btn-recent > i {
  font-size: 15px !important;
}

/* Customer suggestions: avatar initial, name, phone */
.ib-cust-opt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ib-cust-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--ib-primary-100);
  color: var(--ib-primary);
}
.ib-cust-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.ib-cust-biz {
  font-size: 11px;
  font-weight: 600;
  color: var(--ib-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ib-cust-name {
  font-weight: 600;
  color: var(--ib-text);
}
.ib-cust-meta {
  font-size: 12px;
  color: var(--ib-muted);
}
.ib-cust-meta i {
  font-size: 10px;
  margin-right: 2px;
}
.select2-results__option--highlighted .ib-cust-avatar {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
.select2-results__option--highlighted .ib-cust-name,
.select2-results__option--highlighted .ib-cust-biz,
.select2-results__option--highlighted .ib-cust-meta {
  color: #fff !important;
}
.select2-results__options .select2-results__option:has(.ib-cust-opt) {
  padding: 8px 12px !important;
}

/* Toolbar popovers (calculator, sell return) now render on <body>; keep
   them above the fixed POS bars and page panes, below modals' backdrop UI. */
body > .popover { z-index: 1065 !important; }
body > .tooltip { z-index: 1070 !important; }

/* Login brand pane: Tadbirix backdrop (no client store photo) */
.auth-brand-pane {
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(140, 45, 92, .55), transparent 60%),
    radial-gradient(600px 500px at 100% 100%, rgba(242, 184, 75, .16), transparent 60%),
    linear-gradient(160deg, #4a1530 0%, #2a0b1b 100%) !important;
}

/* Justified tabs (View User, View Contact) ------------------------------------
   The theme makes .nav-tabs a flex row, but Bootstrap 3 still gives each
   justified tab "width: 1%" (meant for its table layout), which squeezed the
   tabs to ~8px and stacked their labels. Let the tabs share the row instead;
   on narrow screens the row scrolls sideways. */
.nav-tabs.nav-justified {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-tabs.nav-justified::-webkit-scrollbar { display: none; }
.nav-tabs.nav-justified > li {
  display: block !important;
  float: none !important;
  width: auto !important;
  flex: 1 0 auto !important;
}
.nav-tabs.nav-justified > li > a {
  white-space: nowrap !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}
/* On tablets and phones, a tab row with many tabs scrolls sideways rather
   than squeezing each label onto several lines. */
@media (max-width: 991px) {
  .nav-tabs:not(:has(.dropdown)) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .nav-tabs:not(:has(.dropdown))::-webkit-scrollbar { display: none; }
  .nav-tabs > li { flex: 0 0 auto !important; }
  .nav-tabs > li > a { white-space: nowrap !important; }
}

/* Columns on narrow screens ---------------------------------------------------
   The theme makes every .row a flex row. A Bootstrap column that has no width
   at the current screen size (col-md-* below 992px, col-sm-* below 768px)
   then sizes to its content instead of filling the row, so wide content
   (tabs, tables, file inputs) pushed cards past the right edge on phones.
   Give those columns the full row, as Bootstrap's own grid does. col-md-3 /
   col-sm-3 keep the theme's two-per-row layout on tablets. */
@media (max-width: 991px) {
  .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not(.col-md-3),
  .row > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 767px) {
  .row > [class*="col-md-"]:not([class*="col-xs-"]),
  .row > [class*="col-sm-"]:not([class*="col-xs-"]),
  .row > [class*="col-lg-"]:not([class*="col-xs-"]) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}
/* Widgets placed straight in a row (e.g. Payment Accounts) fill the row and
   let their tables scroll inside instead of widening the page. */
.row > .tw-transition-all[class*="tw-col-span"] {
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
}

/* Hidden elements --------------------------------------------------------------
   Several theme rules use "display: flex/block !important" with selectors more
   specific than Bootstrap's .hide / .hidden (e.g. every form column, every
   .row in a box, every .btn), and jQuery's .hide() only sets an inline style,
   which loses to !important. So things meant to be hidden showed: the purchase
   exchange rate when "purchase in different currency" is off, "Change return
   payment method" on Add Sale, file-input Cancel buttons, the POS category
   back button. Hidden must always win; :not(#ib-x) lifts these rules above
   any class-based theme rule. */
.hide:not(#ib-x),
.hidden:not(#ib-x),
[style*="display: none"]:not(#ib-x),
[style*="display:none"]:not(#ib-x) {
  display: none !important;
}

/* Always light ------------------------------------------------------------------
   The bundled DaisyUI (Tailwind) switches to its dark theme when the computer
   is in dark mode, and sets color-scheme: dark, so the browser painted native
   fields dark (e.g. the dropdown search box: dark box, dark text) and DaisyUI
   buttons/modals dark. The POS design is light only, so pin the light theme. */
:root {
  color-scheme: light !important;
}
@media (prefers-color-scheme: dark) {
  :root {
    --in: 72.06% 0.191 231.6; --su: 64.8% 0.150 160; --wa: 84.71% 0.199 83.87; --er: 71.76% 0.221 22.18;
    --pc: 89.824% 0.06192 275.75; --ac: 15.352% 0.0368 183.61;
    --inc: 0% 0 0; --suc: 0% 0 0; --wac: 0% 0 0; --erc: 0% 0 0;
    --p: 49.12% 0.3096 275.75; --s: 69.71% 0.329 342.55; --sc: 98.71% 0.0106 342.55; --a: 76.76% 0.184 183.61;
    --n: 32.1785% 0.02476 255.701624; --nc: 89.4994% 0.011585 252.096176;
    --b1: 100% 0 0; --b2: 96.1151% 0 0; --b3: 92.4169% 0.00108 197.137559; --bc: 27.8078% 0.029596 256.847952;
    --fallback-p: #491eff; --fallback-pc: #d4dbff; --fallback-s: #ff41c7; --fallback-sc: #fff9fc;
    --fallback-a: #00cfbd; --fallback-ac: #00100d; --fallback-n: #2b3440; --fallback-nc: #d7dde4;
    --fallback-b1: #fff; --fallback-b2: #e5e6e6; --fallback-b3: #e5e6e6; --fallback-bc: #1f2937;
    --fallback-in: #00b3f0; --fallback-inc: #000; --fallback-su: #00ca92; --fallback-suc: #000;
    --fallback-wa: #ffc22d; --fallback-wac: #000; --fallback-er: #ff6f70; --fallback-erc: #000;
  }
}

/* Application tour (public/js/help-tour.js) ------------------------------------ */
.ib-tour { position: fixed; inset: 0; z-index: 2050; animation: ib-tour-in .2s ease both; }
.ib-tour.is-leaving { animation: ib-tour-out .2s ease both; }
.ib-tour-shade { position: absolute; inset: 0; background: transparent; }
.ib-tour.is-centered .ib-tour-shade { background: rgba(28, 10, 20, .55); backdrop-filter: blur(2px); }
.ib-tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(28, 10, 20, .55), 0 0 0 3px rgba(242, 184, 75, .95), 0 0 24px 6px rgba(242, 184, 75, .35);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease, opacity .2s ease;
}
.ib-tour-card {
  position: fixed; padding: 22px 22px 18px; border-radius: 18px;
  background: #fff; color: var(--ib-text, #1f1720);
  box-shadow: 0 24px 60px -12px rgba(28, 10, 20, .45), 0 0 0 1px rgba(107, 33, 68, .08);
  transition: left .3s ease, top .3s ease;
  font-family: inherit;
}
.ib-tour-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ib-tour-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(145deg, #7a2a50, #4a1530); color: #f2b84b; font-size: 17px;
}
.ib-tour-count {
  font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ib-primary, #6b2144); background: var(--ib-primary-50, #f8eef3);
  padding: 4px 10px; border-radius: 999px;
}
.ib-tour-close {
  margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ib-muted, #7a6b74); cursor: pointer;
}
.ib-tour-close i { font-size: 15px !important; line-height: 1; }
.ib-tour-close:hover { background: var(--ib-primary-50, #f8eef3); color: var(--ib-primary, #6b2144); }
.ib-tour-title { margin: 0 0 6px !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--ib-text, #1f1720) !important; }
.ib-tour-text { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--ib-muted, #6b5d66); }
.ib-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ib-tour-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.ib-tour-dots span { width: 7px; height: 7px; border-radius: 99px; background: #e8dde3; transition: width .25s ease, background .25s ease; }
.ib-tour-dots span.is-done { background: #cfa9bb; }
.ib-tour-dots span.is-on { width: 20px; background: var(--ib-primary, #6b2144); }
.ib-tour-actions { display: flex; gap: 8px; flex: none; }
.ib-tour-back, .ib-tour-next {
  height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ib-tour-back { border: 1px solid var(--ib-border, #e6dce2); background: #fff; color: var(--ib-text, #1f1720); }
.ib-tour-back:hover { background: #faf6f8; }
.ib-tour-next { border: 0; background: var(--ib-primary, #6b2144); color: #fff; box-shadow: 0 6px 16px -6px rgba(107, 33, 68, .6); }
.ib-tour-next:hover { background: var(--ib-primary-700, #561a37); }
.ib-tour-next:focus-visible, .ib-tour-back:focus-visible, .ib-tour-close:focus-visible { outline: 2px solid #f2b84b; outline-offset: 2px; }
.ib-tour.is-centered .ib-tour-card { text-align: left; }
@keyframes ib-tour-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ib-tour-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ib-tour, .ib-tour-spot, .ib-tour-card { animation: none !important; transition: none !important; }
}

/* Home dashboard analytics (#ib-dash, public/ibmart-ui/dashboard.js) ----------- */
.ib-dash { display: grid; gap: 20px; margin: 4px 0 22px; }
.ib-dash-row { display: grid; gap: 20px; }
.ib-dash-row-top { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.ib-dash-row-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ib-card {
  background: #fff; border: 1px solid #efe6eb; border-radius: 20px;
  padding: 22px 22px 18px; box-shadow: 0 1px 2px rgba(42, 27, 38, .04), 0 8px 24px -14px rgba(42, 27, 38, .18);
  min-width: 0; display: flex; flex-direction: column;
}
.ib-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ib-card-head h3 { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #2a1b26 !important; letter-spacing: -.01em; }
.ib-card-sub { margin: 3px 0 0 !important; font-size: 13px; color: #8a7b84; }
.ib-card-link { font-size: 13px; font-weight: 600; color: var(--ib-primary, #6b2144) !important; text-decoration: none !important; padding: 4px 10px; border-radius: 8px; background: #f8eef3; }
.ib-card-link:hover { background: #f1dfe8; }
.ib-keys { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.ib-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #7a6b74; white-space: nowrap; }
.ib-key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: #8E3462; }
.ib-key-prev::before { background: repeating-linear-gradient(90deg, #C9BFC5 0 4px, transparent 4px 7px); }
.ib-chart-year + * .ib-key::before, .ib-dash-row-bottom .ib-key::before { height: 10px; width: 10px; border-radius: 3px; }
.ib-dash-row-bottom .ib-key-prev::before { background: #C9BFC5; }

/* Performance card */
.ib-perf-stats { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 8px; border: 1px solid #f1e8ed; border-radius: 16px; overflow: hidden; }
.ib-perf-stats > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ib-perf-stats > div + div { border-left: 1px solid #f1e8ed; }
.ib-hero { background: linear-gradient(135deg, #fbf3f7, #fff); }
.ib-stat-label { font-size: 12px; font-weight: 600; color: #8a7b84; text-transform: uppercase; letter-spacing: .04em; }
.ib-hero-value { font-size: 28px; font-weight: 750; letter-spacing: -.02em; color: #2a1b26; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-stat strong { font-size: 19px; font-weight: 700; color: #2a1b26; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-stat-note { font-size: 12px; color: #8a7b84; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-delta { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #f3eff1; color: #7a6b74; }
.ib-delta:empty { display: none; }
.ib-delta em { font-style: normal; font-weight: 500; opacity: .8; }
.ib-delta-sm { font-size: 11.5px; padding: 2px 8px; }
.ib-delta.is-good { background: #e6f5ef; color: #0d7a52; }
.ib-delta.is-bad { background: #fdebec; color: #b4232f; }
.ib-delta.is-neutral { background: #eef1fb; color: #3c55b8; }
.ib-kpi-delta { margin-top: -2px; margin-bottom: 10px; }
.ib-chart-trend { min-height: 290px; }

/* Donut */
.ib-donut-wrap { position: relative; height: 210px; margin-bottom: 14px; }
.ib-chart-donut { height: 210px; }
.ib-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ib-donut-center span { font-size: 12px; font-weight: 600; color: #8a7b84; text-transform: uppercase; letter-spacing: .04em; }
.ib-donut-center strong { font-size: 22px; font-weight: 750; color: #2a1b26; letter-spacing: -.01em; }
.ib-ring-empty { width: 100%; height: 100%; }
.ib-ring-empty circle { fill: none; stroke: #f1eaee; stroke-width: 11; }
.ib-legend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ib-legend-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 42px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 13.5px; }
.ib-legend-list li:hover { background: #faf6f8; }
.ib-legend-name { color: #2a1b26; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-legend-val { color: #2a1b26; font-variant-numeric: tabular-nums; }
.ib-legend-pct { color: #8a7b84; text-align: right; font-variant-numeric: tabular-nums; }
.ib-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Ranked lists and bars */
.ib-rank, .ib-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ib-rank li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ib-rank-n { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #f8eef3; color: var(--ib-primary, #6b2144); }
.ib-rank li:first-child .ib-rank-n { background: linear-gradient(145deg, #8E3462, #5c1b3c); color: #f2b84b; }
.ib-rank-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ib-rank-top, .ib-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ib-rank-top b, .ib-bar-top b { color: #2a1b26; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ib-rank-name, .ib-bar-name { flex: 1 1 auto; min-width: 0; color: #2a1b26; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-rank-sub { font-size: 12px; color: #8a7b84; }
.ib-meter { height: 6px; border-radius: 99px; background: #f4edf1; overflow: hidden; }
.ib-meter span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #B9789A, #8E3462); transition: width .6s ease; }
.ib-meter-lg { height: 9px; }
.ib-bars li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.ib-rank li.ib-list-empty, .ib-bars li.ib-list-empty, .ib-legend-list li.ib-list-empty { display: block; }
.ib-list-empty { list-style: none; color: #8a7b84; font-size: 13.5px; padding: 18px 4px; text-align: center; }

/* Tooltips (Highcharts useHTML) */
.ib-tip { min-width: 170px; font-size: 13px; }
.ib-tip-title { font-weight: 700; color: #2a1b26; margin-bottom: 6px; }
.ib-tip-row { display: flex; align-items: center; gap: 7px; color: #5a4b54; }
.ib-tip-row b { margin-left: auto; padding-left: 14px; color: #2a1b26; }
.ib-tip-row.is-prev { margin-top: 6px; color: #8a7b84; }
.ib-tip-sub { color: #8a7b84; font-size: 12px; margin: 2px 0 0 17px; }

/* Empty / loading */
.ib-empty { height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #8a7b84; border-radius: 16px; background: #fcf9fb; border: 1px dashed #eadde4; }
.ib-empty i { font-size: 26px; color: #d7c3cd; margin-bottom: 4px; }
.ib-empty strong { color: #2a1b26; font-size: 15px; }
.ib-dash.is-loading .ib-card { position: relative; }
.ib-dash.is-loading .ib-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) -100% 0 / 200% 100%;
  animation: ib-shimmer 1.2s linear infinite;
}
@keyframes ib-shimmer { to { background-position: 100% 0; } }

@media (max-width: 1280px) {
  .ib-dash-row-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ib-dash-row-bottom > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .ib-dash-row-top { grid-template-columns: 1fr; }
  .ib-pay { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 24px; }
  .ib-pay .ib-card-head { grid-column: 1 / -1; }
  .ib-pay .ib-donut-wrap { margin: 0; }
  .ib-pay .ib-legend-list { align-content: center; max-width: 460px; }
}
@media (max-width: 760px) {
  .ib-dash-row-bottom { grid-template-columns: 1fr; }
  .ib-perf-stats { grid-template-columns: 1fr 1fr; }
  .ib-perf-stats > div + div { border-left: 0; }
  .ib-perf-stats > div:nth-child(n+2) { border-top: 1px solid #f1e8ed; }
  .ib-perf-stats > div:nth-child(odd):not(:first-child) { border-left: 1px solid #f1e8ed; }
  .ib-hero { grid-column: 1 / -1; }
  .ib-card { padding: 18px 16px 14px; border-radius: 18px; }
  .ib-card-head { flex-direction: column; }
  .ib-keys { justify-content: flex-start; }
  .ib-pay { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .ib-meter span { transition: none; }
  .ib-dash.is-loading .ib-card::after { animation: none; }
}
.ib-empty-sm { height: 250px; }

/* Wide tables: last columns cut off when scrolled right ------------------------
   DataTables sizes the body columns from a hidden copy of the header inside
   the scrolling body. The theme zeroes that copy's padding and borders, so
   each body column came out ~9px narrower than its visible header; with 20+
   columns the header outgrew the body and its last columns could never be
   scrolled into view. Give the hidden copy the same horizontal padding and
   borders as the real header so both measure the same. */
div.dataTables_scrollBody > table > thead > tr > th:not(#ib-x),
div.dataTables_scrollBody > table > thead > tr > td:not(#ib-x) {
  padding-left: 8px !important;
}
div.dataTables_scrollBody > table > thead > tr > th:not(.sorting):not(.sorting_asc):not(.sorting_desc):not(#ib-x),
div.dataTables_scrollBody > table > thead > tr > td:not(#ib-x) {
  padding-right: 8px !important;
}
div.dataTables_scrollBody > table.table-bordered > thead > tr > th:not(#ib-x),
div.dataTables_scrollBody > table.table-bordered > thead > tr > td:not(#ib-x) {
  border-right: 1px solid transparent !important;
}

/* ==========================================================================
   Motion
   Fast and light by design: only opacity and transform/scale/translate
   animate (handled by the GPU, no layout work), 120-320ms, no libraries.
   Everything is switched off for people who ask their system for less
   motion (bottom of this section).
   ========================================================================== */
:root {
  --ib-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ib-ease-press: cubic-bezier(.3, .7, .4, 1);
}

/* Moving between screens: the content fades and rises in while the sidebar
   and top bar stay put (View Transitions, Chrome/Edge 126+, Safari 18.2+).
   Only the visible screen is captured, so long pages cost nothing extra. */
@view-transition { navigation: auto; }
aside.side-bar { view-transition-name: ib-sidebar; }
main.main-content-wrapper > div:first-child {
  view-transition-name: ib-topbar;
  /* A transition name makes the top bar its own layer; keep that layer above
     the page so its menus (+, notifications, profile) open on top. */
  position: relative;
  z-index: 60;
}
::view-transition-group(ib-sidebar),
::view-transition-group(ib-topbar) { animation: none; }
::view-transition-old(ib-sidebar), ::view-transition-new(ib-sidebar),
::view-transition-old(ib-topbar), ::view-transition-new(ib-topbar) { animation: none; mix-blend-mode: normal; }
/* The old screen leaves quickly, then the new one rises in, so the two
   never show on top of each other. */
::view-transition-old(root) { animation: ib-vt-out .1s ease-in both; }
::view-transition-new(root) { animation: ib-vt-in .28s var(--ib-ease-out) .07s backwards; }
@keyframes ib-vt-out { to { opacity: 0; } }
@keyframes ib-vt-in { from { opacity: 0; transform: translateY(10px); } }
/* Browsers without View Transitions: a simple fade-in of the content. */
@supports not (view-transition-name: a) {
  .main-page-content { animation: ib-fade-in .3s var(--ib-ease-out) backwards; }
}
@keyframes ib-fade-in { from { opacity: 0; } }

/* Top progress bar while the next screen loads (ibmart-ui.js adds
   .ib-navigating on link clicks; Pace shows the same colours on load). */
.ib-navbar-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; pointer-events: none;
  background: linear-gradient(90deg, #8E3462, #c2557f 60%, #F2B84B);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  box-shadow: 0 0 10px rgba(242, 184, 75, .55);
}
html.ib-navigating .ib-navbar-progress {
  opacity: 1;
  animation: ib-progress 2.4s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes ib-progress { 0% { transform: scaleX(0); } 30% { transform: scaleX(.45); } 100% { transform: scaleX(.88); } }
.pace .pace-progress {
  background: linear-gradient(90deg, #8E3462, #F2B84B) !important;
  height: 3px !important;
  box-shadow: 0 0 10px rgba(242, 184, 75, .55);
}

/* Pressing buttons: a quick, soft press. Uses the separate `scale`
   property so it combines with the theme's hover lifts. */
.btn, .tw-dw-btn, button, .odoo-kpi-card, .pos-express-finalize, .ib-card-link,
.select2-selection, .nav-tabs > li > a, .pagination > li > a, .paginate_button {
  transition: scale .14s var(--ib-ease-press), transform .2s var(--ib-ease-out), box-shadow .2s ease,
    background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.btn:active:not(:disabled):not(.disabled),
.tw-dw-btn:active:not(:disabled),
button:active:not(:disabled):not(.select2-selection__clear),
.pos-express-finalize:active,
.ib-card-link:active,
.paginate_button:not(.disabled):active { scale: .96; }
.odoo-kpi-card:active { scale: .985; }

/* Cards respond to the pointer. */
.ib-card { transition: box-shadow .25s ease, border-color .25s ease; }
.ib-card:hover { box-shadow: 0 1px 2px rgba(42, 27, 38, .05), 0 14px 32px -16px rgba(42, 27, 38, .28); border-color: #eadbe3; }

/* Content further down the page glides in once as it scrolls into view
   (ibmart-ui.js; nothing that is already on screen is ever hidden). */
.ib-reveal-wait { opacity: 0; }
.ib-reveal-in { animation: ib-reveal .55s var(--ib-ease-out) backwards; animation-delay: var(--ib-reveal-delay, 0ms); }
@keyframes ib-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Popups open with a short scale-in. */
.modal.fade .modal-dialog {
  transform: translateY(14px) scale(.97) !important;
  opacity: 0;
  transition: transform .28s var(--ib-ease-out), opacity .2s ease !important;
}
.modal.fade.in .modal-dialog { transform: none !important; opacity: 1; }
.modal-backdrop.fade { transition: opacity .22s ease !important; }

/* Dropdowns, select boxes, date pickers, autocomplete. */
.open > .dropdown-menu,
.tw-dw-dropdown[open] > .tw-dw-dropdown-content,
.select2-container--open .select2-dropdown--below,
.daterangepicker,
.ui-autocomplete {
  animation: ib-pop-down .16s var(--ib-ease-out) backwards;
  transform-origin: top center;
}
.select2-container--open .select2-dropdown--above { animation: ib-pop-up .16s var(--ib-ease-out) backwards; transform-origin: bottom center; }
@keyframes ib-pop-down { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes ib-pop-up { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* Switching tabs: the new pane fades in. */
.tab-content > .tab-pane.active,
.pos-tab-content.active { animation: ib-pane-in .24s var(--ib-ease-out) backwards; }
@keyframes ib-pane-in { from { opacity: 0; transform: translateY(6px); } }

/* Sidebar: submenu items slide in when a section opens. */
#side-bar .chiled:not([style*="display: none"]) > a { animation: ib-sub-in .22s var(--ib-ease-out) backwards; }
#side-bar .chiled > a:nth-child(2) { animation-delay: 20ms; }
#side-bar .chiled > a:nth-child(3) { animation-delay: 40ms; }
#side-bar .chiled > a:nth-child(4) { animation-delay: 60ms; }
#side-bar .chiled > a:nth-child(n+5) { animation-delay: 80ms; }
@keyframes ib-sub-in { from { opacity: 0; transform: translateX(-6px); } }

/* Dashboard bars grow in. */
.ib-meter span { transform-origin: left center; animation: ib-grow .7s var(--ib-ease-out) backwards; }
@keyframes ib-grow { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .ib-reveal-wait { opacity: 1; }
  .btn:active, .tw-dw-btn:active, button:active, .odoo-kpi-card:active { scale: none; }
}

/* Row menus floating out of scrolling tables (ibmart-ui.js initFloatingRowMenus). */
.dropdown-menu.ib-menu-floating {
  z-index: 1040 !important;
  margin: 0 !important;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
/* While a row menu floats, nothing around it may act as its frame
   (Tailwind hover-lift classes keep a transform on cards at all times). */
.ib-menu-host:not(#ib-x),
.ib-menu-host:not(#ib-x):hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
}

/* Products list: columns sized by name ----------------------------------------
   The theme sized #product_table columns by position (nth-child) with fixed
   max-widths and no wrapping. Hiding a column (Column visibility, or no
   price permission) shifted every position, so prices, stock and headers
   overlapped their neighbours. Columns now carry a class (product/index
   blade) and get a width by name; text wraps inside its own cell. Head and
   body get the same widths, so they stay aligned. */
#product_table_wrapper :is(th, td):not(#ib-x) { max-width: none !important; min-width: 0 !important; }
#product_table_wrapper td:not(#ib-x):not(.pt-action):not(.pt-check) { white-space: normal !important; overflow-wrap: anywhere; }
#product_table_wrapper thead th:not(#ib-x) { white-space: normal !important; line-height: 1.25 !important; }
#product_table_wrapper .pt-check:not(#ib-x)    { width: 40px !important;  min-width: 40px !important; }
#product_table_wrapper .pt-image:not(#ib-x)    { width: 64px !important;  min-width: 64px !important; }
#product_table_wrapper .pt-action:not(#ib-x)   { width: 96px !important;  min-width: 96px !important; white-space: nowrap !important; }
#product_table_wrapper .pt-product:not(#ib-x)  { width: 230px !important; min-width: 230px !important; }
#product_table_wrapper .pt-location:not(#ib-x) { width: 150px !important; min-width: 150px !important; }
#product_table_wrapper .pt-price:not(#ib-x)    { width: 170px !important; min-width: 170px !important; }
#product_table_wrapper .pt-stock:not(#ib-x)    { width: 130px !important; min-width: 130px !important; }
#product_table_wrapper .pt-type:not(#ib-x)     { width: 100px !important; min-width: 100px !important; }
#product_table_wrapper .pt-category:not(#ib-x) { width: 170px !important; min-width: 170px !important; }
#product_table_wrapper .pt-brand:not(#ib-x)    { width: 140px !important; min-width: 140px !important; }
#product_table_wrapper .pt-tax:not(#ib-x)      { width: 100px !important; min-width: 100px !important; }
#product_table_wrapper .pt-sku:not(#ib-x)      { width: 120px !important; min-width: 120px !important; }
#product_table_wrapper :is(th, td):not(#ib-x):not([class*="pt-"]) { width: 120px !important; min-width: 120px !important; }

/* Product form: variable product price table --------------------------------
   The variations table squeezed every field to fit the page, so SKU, value
   and price boxes were 40-50px wide and their text was cut. Each field now
   has a minimum width for what it holds; the table scrolls sideways on
   smaller screens instead of squeezing. */
#product_variation_form_part:not(#ib-x),
.variation_value_table:not(#ib-x) { width: 100% !important; }
.variation_value_table:not(#ib-x) { min-width: 1040px; border-radius: 12px !important; overflow: hidden; }
.variation_value_table td,
#product_variation_form_part > tbody > tr > td { vertical-align: middle !important; }
.variation_value_table :is(.input_sub_sku, input[name$="[sub_sku]"]):not(#ib-x) { min-width: 150px; }
.variation_value_table .variation_value_name:not(#ib-x) { min-width: 110px; }
.variation_value_table :is(.variable_dpp, .variable_dpp_inc_tax):not(#ib-x) { min-width: 110px; }
.variation_value_table .variable_profit_percent:not(#ib-x) { min-width: 80px; }
.variation_value_table :is(.variable_dsp, .variable_dsp_inc_tax):not(#ib-x) { min-width: 120px; }
#product_variation_form_part :is(.variation_name, .variation_template):not(#ib-x),
#product_variation_form_part > tbody > tr > td:nth-child(2) .select2-container:not(#ib-x) { min-width: 150px; }
.variation_value_table input.form-control:not(#ib-x) { text-overflow: ellipsis; }
.variation_value_table .input-group:not(#ib-x) { flex-wrap: nowrap; }
/* First row: these boxes share a cell with a "copy to all rows" button. */
/* The purchase price cell holds two half-width boxes (exc. / inc. tax). */
.variation_value_table td:has(.variable_dpp):not(#ib-x) { min-width: 290px; }
.variation_value_table td:has(.variable_dpp) > .width-50 + .width-50 { padding-left: 6px; }
.variation_value_table td:has(.variable_dpp) .form-control:not(#ib-x) { min-width: 0; }
.variation_value_table .input-group:has(.variable_profit_percent):not(#ib-x) { min-width: 140px; }
.variation_value_table .input-group:has(.variable_dsp_inc_tax):not(#ib-x) { min-width: 160px; }
.variation_value_table .input-group:not(#ib-x) > .form-control { width: 100% !important; }

table.DTCR_clonedTable {
  background: #fff !important;
  opacity: .92;
  box-shadow: 0 12px 28px -10px rgba(42, 27, 38, .45);
  border-radius: 10px;
  z-index: 2002;
}
div.DTCR_pointer {
  width: 3px !important;
  background: linear-gradient(#8E3462, #F2B84B);
  border-radius: 3px;
  z-index: 2001;
}
/* Bulk actions under the Products table (was the table footer). */
.ib-table-bulk-actions { padding: 12px 4px 4px; }
.ib-table-bulk-actions > div { flex-wrap: wrap; align-items: center; gap: 6px; }
.ib-table-bulk-actions form { margin: 0; }

/* Column chooser panel (ibmart-ui.js IBColumnPanel): tick to show, drag to move. */
.ib-colpanel {
  position: fixed; z-index: 1060; width: 290px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid #ece3e8; border-radius: 16px;
  box-shadow: 0 24px 48px -18px rgba(42, 27, 38, .35), 0 2px 6px rgba(42, 27, 38, .06);
  animation: ib-pop-down .16s var(--ib-ease-out, ease-out) backwards;
  overflow: hidden;
}
.ib-colpanel-head {
  padding: 14px 16px 10px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: #6b5d66; border-bottom: 1px solid #f3edf0;
}
.ib-colpanel-head small {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: #9a8b94;
}
.ib-colpanel-head small i { font-size: 10px; }
.ib-colpanel-list { list-style: none; margin: 0; padding: 6px; max-height: min(360px, 55vh); overflow-y: auto; }
.ib-colpanel-item {
  display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 2px; border-radius: 10px;
  background: #fff; transition: background .15s ease, box-shadow .15s ease;
}
.ib-colpanel-item:hover { background: #faf6f8; }
.ib-colpanel-item label {
  flex: 1; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 8px 4px;
  font-size: 14px; font-weight: 500 !important; color: #2a1b26; cursor: pointer; user-select: none;
}
.ib-colpanel-item input[type=checkbox] { width: 17px; height: 17px; margin: 0 !important; accent-color: var(--ib-primary, #6b2144); cursor: pointer; }
.ib-colpanel-handle {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px;
  color: #b9aab3; cursor: grab; border-radius: 8px; touch-action: none;
}
.ib-colpanel-handle:hover { color: var(--ib-primary, #6b2144); background: #f6eef2; }
.ib-colpanel-list.is-sorting, .ib-colpanel-list.is-sorting * { cursor: grabbing !important; user-select: none; }
.ib-colpanel-item.is-dragging {
  background: #fff; box-shadow: 0 8px 20px -8px rgba(107, 33, 68, .45), 0 0 0 2px rgba(107, 33, 68, .18);
  position: relative; z-index: 1;
}
.ib-colpanel-foot { padding: 8px; border-top: 1px solid #f3edf0; }
.ib-colpanel-reset {
  width: 100%; height: 38px; border: 0; border-radius: 10px; background: #faf6f8;
  color: #2a1b26; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.ib-colpanel-reset:hover { background: #f3e8ee; color: var(--ib-primary, #6b2144); }
.ib-ac-brand { color: var(--ib-primary, #6b2144); font-weight: 600; }

/* POS Recent Transactions (sale_pos/partials/recent_transactions): one card
   per sale with invoice, customer, time, amount, payment status and actions. */
#recent_transactions_modal .modal-body { padding: 16px 20px !important; }
#recent_transactions_modal .nav-tabs-custom { box-shadow: none !important; border: 0 !important; }
#recent_transactions_modal .tab-content { padding: 14px 0 0 !important; }
.ib-rt-list { display: grid; gap: 10px; max-height: min(60vh, 560px); overflow-y: auto; padding: 2px 4px 4px 2px; }
.ib-rt-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid #efe6eb; border-radius: 14px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ib-rt-row:hover { border-color: #e2cfda; box-shadow: 0 6px 18px -12px rgba(42, 27, 38, .35); }
.ib-rt-icon {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: #f8eef3; color: var(--ib-primary, #6b2144); font-size: 16px;
}
#tab_quotation .ib-rt-icon { background: #eef1fb; color: #4f46e5; }
#tab_draft .ib-rt-icon { background: #fdf3e6; color: #c26a05; }
.ib-rt-main { min-width: 0; }
.ib-rt-invoice { font-weight: 700; font-size: 14.5px; color: #2a1b26; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-rt-index { color: #a494a0; font-weight: 600; margin-right: 2px; }
.ib-rt-table { color: #7a6b74; font-weight: 600; }
.ib-rt-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font-size: 12.5px; color: #7a6b74; }
.ib-rt-meta i { margin-right: 4px; color: #b9aab3; font-size: 11px; }
.ib-rt-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ib-rt-amount .display_currency { font-weight: 800; font-size: 15.5px; color: #2a1b26; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ib-rt-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f3eff1; color: #7a6b74; text-transform: capitalize; }
.ib-rt-status.is-paid { background: #e6f5ef; color: #0d7a52; }
.ib-rt-status.is-due { background: #fdebec; color: #b4232f; }
.ib-rt-status.is-partial { background: #fff4e0; color: #b45309; }
.ib-rt-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ib-rt-btn {
  display: inline-flex !important; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px;
  border: 1px solid #e6dce2; background: #fff; color: #2a1b26 !important; font-size: 13px; font-weight: 600;
  text-decoration: none !important; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ib-rt-btn i { font-size: 12px; color: #8a7b84; }
.ib-rt-btn:hover { background: #faf6f8; border-color: #d9c4cf; }
.ib-rt-btn.is-print { background: var(--ib-primary, #6b2144); border-color: var(--ib-primary, #6b2144); color: #fff !important; }
.ib-rt-btn.is-print i { color: #f2b84b; }
.ib-rt-btn.is-print:hover { background: #561a37; }
.ib-rt-btn.is-delete { color: #b4232f !important; border-color: #f5d0d5; }
.ib-rt-btn.is-delete i { color: #d64560; }
.ib-rt-btn.is-delete:hover { background: #fdebec; border-color: #f0b4bd; }
.ib-rt-empty { text-align: center; padding: 34px 10px; color: #8a7b84; }
.ib-rt-empty i { font-size: 30px; color: #d7c3cd; margin-bottom: 10px; display: block; }
.ib-rt-empty p { margin: 0; }
/* Narrow windows: actions move under the sale. */
@media (max-width: 760px) {
  .ib-rt-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 12px; }
  .ib-rt-icon { width: 36px; height: 36px; }
  .ib-rt-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ib-rt-invoice { white-space: normal; }
}

/* ---------- Sell return without invoice (sell_return/create_without_invoice) ---------- */
.ib-rwi-lead { margin: 6px 0 0; color: var(--ib-muted, #6b7280); font-size: 13.5px; max-width: 70ch; }
.ib-rwi-table { margin: 0; }
.ib-rwi-table:not(#ib-x) > thead > tr > th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ib-muted, #6b7280); border-bottom: 1px solid var(--ib-border, #e5e7eb); white-space: nowrap; }
.ib-rwi-table:not(#ib-x) td, .ib-rwi-table:not(#ib-x) tfoot th { vertical-align: middle; border-top: 1px solid var(--ib-border, #eef0f3); }
.ib-rwi-table .ib-rwi-num { width: 150px; text-align: right; white-space: nowrap; }
.ib-rwi-table .ib-rwi-num input { text-align: right; min-width: 90px; }
.ib-rwi-table .ib-rwi-x { width: 44px; text-align: center; }
.ib-rwi-name { font-weight: 600; }
.ib-rwi-meta { font-size: 12px; color: var(--ib-muted, #6b7280); margin-top: 2px; }
.ib-rwi-empty td { text-align: center; color: var(--ib-muted, #9ca3af); padding: 28px 8px !important; }
.ib-rwi-empty i { margin-right: 6px; }
.ib-rwi-remove { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; color: #b91c1c; transition: background .15s ease; }
.ib-rwi-remove:hover { background: #fee2e2; }
.ib-rwi-table tfoot th { font-size: 15px; }
@media (max-width: 640px) {
  .ib-rwi-table .ib-rwi-num { width: auto; }
  .ib-rwi-table .ib-rwi-num input { min-width: 70px; }
}
.ib-rwi-remove i { font-size: 14px; }