/* ============================================================================
   BardPOS Theme Override — "Project Detail Mockup" Design Language
   ----------------------------------------------------------------------------
   This stylesheet is loaded LAST and overrides existing CSS files
   (app.css, style.css, override.css, vendor.css, dark-mode.css, etc.)
   without modifying their source. To disable, simply remove the <link>
   to /css/theme.css in resources/views/layouts/app.blade.php.

   Design tokens are extracted from
   bardpos_project_detail_mockup (1).html and applied globally.
   ========================================================================= */

/* ---------- 1. DESIGN TOKENS ------------------------------------------------ */
:root,
html:root {
  /* Typography */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --body-font-size: 14px;

  /* Surfaces */
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F5F6F8;
  --color-background-tertiary:  #ECEEF1;
  --color-background-info:      #E6F1FB;
  --color-background-success:   #EAF3DE;
  --color-background-warning:   #FAEEDA;
  --color-background-danger:    #FCEBEB;

  /* Text */
  --color-text-primary:    #1F2328;
  --color-text-secondary:  #6B7280;
  --color-text-tertiary:   #9AA3AE;
  --color-text-info:       #185FA5;
  --color-text-success:    #3B6D11;
  --color-text-warning:    #854F0B;
  --color-text-danger:     #A32D2D;
  --color-text-inverse:    #FFFFFF;

  /* Borders */
  --color-border-primary:   #D8DCE2;
  --color-border-secondary: #E1E4E9;
  --color-border-tertiary:  #ECEEF1;

  /* Accents (mirrors mockup stat-card stripes) */
  --accent-blue:    #378ADD;
  --accent-teal:    #1D9E75;
  --accent-green:   #639922;
  --accent-amber:   #EF9F27;
  --accent-red:     #E24B4A;

  /* Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-xl: 14px;

  /* Form-control / button uniform sizing
     ---------------------------------------------------------------
     One source of truth for the height of every interactive control
     across the app (buttons, inputs, selects, daterangepicker entry,
     select2 single-line widgets, file-input chrome, etc.).
     If you want every control to be 36px instead of 34px, change it
     here — Parts AC and onwards consume this token.

     The remaining --control-*, --button-*, --select2-*, --switch-*
     tokens below are fallback defaults computed for h=34. They are
     overwritten at runtime by public/js/app_scaling.js whenever the
     control-height slider changes. Do NOT hardcode equivalent pixel
     values anywhere else in this file — always reference the token. */
  --control-height:    34px;
  --control-height-xs: 26px;
  --control-height-sm: 30px;
  --control-height-lg: 40px;

  --control-min-height:           34px;
  --control-line-height:          28px;
  --control-padding-y:            4px;
  --control-padding-x:            8px;
  --button-padding-x:             10px;
  --control-icon-size:            14px;
  --control-border-radius:        4px;
  --select2-arrow-height:         30px;
  --select2-rendered-line-height: 32px;
  --switch-height:                23px;
  --switch-width:                 48px;
  --switch-knob-size:             18px;
  --switch-knob-offset:           3px;
  --switch-knob-translate:        24px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);

  /* Re-bind brand variables that the existing app uses, so the rest
     of the codebase keeps working but in the new palette */
  --primary-color:   #1F2328;
  --secondary-color: #FFFFFF;
  --body-color:      #F5F6F8;
  --sidebar-text:    #1F2328;
}

/* Dark mode support — keeps parity with .dark-mode toggle */
html.dark-mode,
html.dark_mode,
body.dark-mode {
  --color-background-primary:   #15171B;
  --color-background-secondary: #1C1F24;
  --color-background-tertiary:  #23272E;
  --color-background-info:      #1B2C42;
  --color-background-success:   #1F2D17;
  --color-background-warning:   #3B2A12;
  --color-background-danger:    #3B1B1B;

  --color-text-primary:   #E6E8EC;
  --color-text-secondary: #9AA3AE;
  --color-text-tertiary:  #6B7280;
  --color-text-info:      #7DB7EA;
  --color-text-success:   #9EC471;
  --color-text-warning:   #E8B665;
  --color-text-danger:    #ED7C7B;

  --color-border-primary:   #2A2E36;
  --color-border-secondary: #23272E;
  --color-border-tertiary:  #1C1F24;
  --primary-color:   var(--color-text-primary) !important;
  --secondary-color: #15171B;
  --body-color:      #15171B;
}


/* ---------- 2. GLOBAL RESET / TYPOGRAPHY ---------------------------------- */
html,
body {
  font-family: var(--font-sans) !important;
  font-size: var(--body-font-size);
  color: var(--color-text-primary);
  background: var(--color-background-secondary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.box-title,
.content-header h1 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.015em;
}
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
small, .small { color: var(--color-text-secondary); }

a { color: var(--color-text-info); transition: color .15s ease; }
a:hover { color: color-mix(in srgb, var(--color-text-info) 80%, black 20%); text-decoration: none; }

::selection { background: var(--color-background-info); color: var(--color-text-info); }

/* Scrollbars — minimal */
*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: var(--color-border-primary); border-radius: 8px; border: 2px solid var(--color-background-secondary); }
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

/* ---------- 3. LAYOUT SHELL ----------------------------------------------- */
.container.grid,
.container { background: var(--color-background-secondary) !important; }

.content-wrapper,
.main-container,
.card-wrapper,
.setting-card-wrapper {
  background: transparent !important;
  padding: 0 !important;
}
.card-wrapper,
.setting-card-wrapper {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 18px 20px !important;
  box-shadow: var(--shadow-xs);
}

/* Top header */
.main-header,
.main-header .navbar,
.main-header .navbar-static-top,
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: none !important;
  min-height: 52px !important;
  height: auto !important;
}
.main-header .logo,
.skin-blue-light .main-header .logo {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.main-header .navbar .nav > li > a {
  color: var(--color-text-secondary) !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}

/* Sidebar */
.main-sidebar,
.skin-blue .main-sidebar,
.skin-blue-light .main-sidebar {
  background: var(--color-background-primary) !important;
  border-right: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: none !important;
}
.main-sidebar .top,
.main-sidebar .logo {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.main-sidebar .sidebar,
.sidebar-menu {
  background: var(--color-background-primary) !important;
}
.sidebar-menu > li > a,
.main-sidebar .links li a,
.main-sidebar .sidebar a {
  color: var(--color-text-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: background .15s ease, color .15s ease !important;
}
.sidebar-menu > li > a i,
.main-sidebar .links li a i,
.main-sidebar .sidebar a i {
  color: var(--color-text-tertiary) !important;
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus,
.main-sidebar .links li a:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.sidebar-menu > li:hover > a i,
.main-sidebar .links li a:hover i {
  color: var(--color-text-primary) !important;
}
.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a:hover,
.sidebar-menu > li.menu-open > a,
.main-sidebar .links li.active > a,
.main-sidebar .links li.menu-open > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  border-left: 2px solid var(--color-text-primary) !important;
}
.sidebar-menu > li.active > a i,
.main-sidebar .links li.active > a i {
  color: var(--color-text-primary) !important;
}
.sidebar-menu .treeview-menu {
  background: transparent !important;
  padding-left: 14px !important;
}
.sidebar-menu .treeview-menu > li > a {
  font-size: 12.5px !important;
  color: var(--color-text-secondary) !important;
}

/* Content area background */
.content,
section.content { background: transparent !important; padding: 0 !important; }

/* Sub-nav (horizontal-scroll / nav tabs) */
.horizontal-scroll {
  border-bottom: 0.5px solid var(--color-border-tertiary);
  margin-bottom: 14px !important;
}
.horizontal-scroll a,
.horizontal-scroll .nav-tabs > li > a {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  padding: 7px 12px !important;
  border-radius: var(--border-radius-md) !important;
  border: none !important;
  background: transparent !important;
  transition: background .15s ease, color .15s ease;
}
.horizontal-scroll a.active,
.horizontal-scroll a.active-top,
.horizontal-scroll .nav-tabs > li.active > a,
.horizontal-scroll .nav-tabs > li.active > a:hover,
.horizontal-scroll .nav-tabs > li.active > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  border-bottom: 2px solid var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
}
.horizontal-scroll a:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }

/* Page header / overview-filter */
.overview-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.overview-filter .title h1 { font-size: 18px !important; font-weight: 600 !important; margin: 0 0 2px 0 !important; }
.overview-filter .title p  { font-size: 12.5px !important; color: var(--color-text-secondary) !important; margin: 0 !important; }
.overview-filter .filter,
.overview-filter .filter-options,
.overview-filter .new-user { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- 4. BUTTONS ---------------------------------------------------- */
.btn,
button.btn,
input[type=submit].btn,
.add-user-modal-btn,
.max-add-btn,
.table-action-btn {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: var(--control-padding-y) var(--button-padding-x) !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4 !important;
  text-transform: none !important;
  justify-content: center;
}
.btn:hover, button.btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}
.btn:focus, .btn:active, .btn:active:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 20%, transparent) !important;
}

.btn-primary,
.btn-info,
.add-user-modal-btn,
.max-add-btn {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.btn-primary:hover, .btn-info:hover {
  background: color-mix(in srgb, var(--color-background-info) 70%, var(--color-text-info) 15%) !important;
  color: var(--color-text-info) !important;
}

.btn-success { background: var(--color-background-success) !important; color: var(--color-text-success) !important; border-color: transparent !important; }
.btn-warning { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; border-color: transparent !important; }
.btn-danger,
.table-action-delete-btn,
.btn-destructive { background: var(--color-background-danger) !important; color: var(--color-text-danger) !important; border-color: transparent !important; }
.btn-default { background: var(--color-background-primary) !important; color: var(--color-text-primary) !important; }

.btn-link { background: transparent !important; border: none !important; color: var(--color-text-info) !important; padding: 4px 6px !important; }

.btn-xs, .btn-sm { padding: 4px 9px !important; font-size: 11.5px !important; }
.btn-lg { padding: 9px 18px !important; font-size: 13.5px !important; }

.btn-group .btn { box-shadow: none !important; }
.btn-group > .btn:not(:last-child),
.btn-group > .btn:not(:first-child) { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-top-left-radius: var(--border-radius-md) !important; border-bottom-left-radius: var(--border-radius-md) !important; }
.btn-group > .btn:last-child  { border-top-right-radius: var(--border-radius-md) !important; border-bottom-right-radius: var(--border-radius-md) !important; }

/* ---------- 5. CARDS / BOXES (AdminLTE) ----------------------------------- */
.box,
.info-box,
.card,
.panel {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}
.box.box-solid,
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
  border-top: 0.5px solid var(--color-border-tertiary) !important;
}
.box-header,
.panel-heading {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 12px 16px !important;
  color: var(--color-text-primary) !important;
}
.box-header .box-title,
.panel-heading .panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.box-body,
.panel-body { padding: 14px 16px !important; }
.box-footer,
.panel-footer {
  background: var(--color-background-primary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 16px !important;
}

/* ---------- 6. TABLES ----------------------------------------------------- */
.table-responsive,
.dataTables_wrapper {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-background-primary);
}
/* Horizontal scrolling for .table-responsive — restore Bootstrap's default
   behaviour. The previous `overflow: hidden` clipped the table on narrow
   screens (e.g. Pay-Sale-Due "Manual Split" table) instead of allowing the
   user to scroll horizontally. Use `overflow-x: auto; overflow-y: hidden`
   so wide tables scroll, with momentum scrolling on iOS. The `.dataTables_
   wrapper` keeps `overflow: hidden` because DataTables handles its own
   horizontal scrolling via its `scrollX` option. */
.table-responsive {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper {
  overflow: hidden;
}
table,
.table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  background: var(--color-background-primary) !important;
  margin: 0 !important;
}
.table > thead > tr > th,
.table > thead > tr,
thead tr,
thead th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-top: none !important;
  padding: 9px 12px !important;
  text-align: left !important;
}
.table > tbody > tr > td,
.table > tfoot > tr > td,
table td {
  padding: 9px 12px !important;
  color: var(--color-text-primary) !important;
  border-top: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  vertical-align: middle !important;
}
.table > tbody > tr:last-child > td { border-bottom: none !important; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--color-background-primary) !important; }
.table-striped > tbody > tr:nth-of-type(even) { background: color-mix(in srgb, var(--color-background-secondary) 50%, var(--color-background-primary) 50%) !important; }
.table-hover > tbody > tr:hover { background: var(--color-background-secondary) !important; }

/* DataTables search/length controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--border-radius-md) !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_info { font-size: 12px; color: var(--color-text-secondary); padding: 10px 12px; }

/* ---------- 7. FORMS ------------------------------------------------------ */
.form-control,
.form-select,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=search],
input[type=tel],
input[type=url],
textarea,
select {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: var(--body-font-size) !important;
  padding: var(--control-padding-y) var(--control-padding-x) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-text-info) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--color-text-tertiary) !important; }
label, .control-label {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 4px !important;
}
.input-group-addon,
.input-group-text {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 12.5px !important;
  border-radius: var(--border-radius-md) !important;
}

/* Checkboxes & radios */
input[type=checkbox],
input[type=radio] { accent-color: var(--color-text-primary); }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  min-height: var(--control-min-height) !important;
  padding: var(--control-padding-y) var(--control-padding-x) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text-primary) !important;
  line-height: var(--select2-rendered-line-height) !important;
  padding-left: var(--control-padding-x) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--select2-arrow-height) !important; }
.select2-dropdown {
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--color-background-primary) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 8px !important;
}

/* ---------- 8. BADGES, LABELS, PILLS -------------------------------------- */
.badge,
.label {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  display: inline-block;
  line-height: 1.5;
}
.label-primary, .badge-primary,
.label-info,    .badge-info     { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.label-success, .badge-success  { background: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.label-warning, .badge-warning  { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.label-danger,  .badge-danger,
.label-important { background: var(--color-background-danger) !important;  color: var(--color-text-danger) !important; }
.label-default, .badge-default,
.badge-gray { background: var(--color-background-secondary) !important; color: var(--color-text-secondary) !important; }

.status-pill,
.pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border-secondary);
}

/* ---------- 9. STAT CARDS (mockup style) ---------------------------------- */
.stat-grid,
.pstat-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.stat-card,
.pstat-card {
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px 14px !important;
  border-left: 3px solid var(--color-border-primary) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card p,
.pstat-card .lbl {
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 2px !important;
}
.stat-card .val,
.pstat-card .val {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}
.stat-card.warning, .pstat-card.amber, .pstat-card.warning { border-left-color: var(--accent-amber) !important; }
.stat-card.blue,    .pstat-card.cyan,  .pstat-card.blue    { border-left-color: var(--accent-blue)  !important; }
.stat-card.teal,    .pstat-card.teal                         { border-left-color: var(--accent-teal)  !important; }
.stat-card.green,   .pstat-card.green                        { border-left-color: var(--accent-green) !important; }
.stat-card.red,     .pstat-card.red, .pstat-card.danger      { border-left-color: var(--accent-red)   !important; }

/* ---------- 10. NAV TABS --------------------------------------------------- */
.nav-tabs {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  margin-bottom: 18px;
}
.nav-tabs > li > a {
  font-size: 12.5px !important;
  padding: 8px 14px !important;
  border: none !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s ease;
}
.nav-tabs > li > a:hover { color: var(--color-text-primary) !important; background: transparent !important; border-color: transparent !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid var(--color-text-primary) !important;
  background: transparent !important;
}

/* ---------- 11. MODALS ---------------------------------------------------- */
.modal-content {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  padding: 14px 18px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  background: var(--color-background-primary) !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.modal-body { padding: 16px 18px !important; background: var(--color-background-primary) !important; }
.modal-footer {
  padding: 12px 18px !important;
  background: var(--color-background-primary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
}
.modal-backdrop.in { opacity: .35 !important; background: #0B0E13 !important; }
.close { color: var(--color-text-secondary) !important; opacity: 0.8 !important; text-shadow: none !important; font-weight: 400; }
.close:hover { color: var(--color-text-primary) !important; opacity: 1 !important; }

/* ---------- 12. ALERTS ---------------------------------------------------- */
.alert,
.alert.alert-info,
.alert.alert-success,
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-error {
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-left: 3px solid var(--color-text-info) !important;
}
/* Compound class selectors (`.alert.alert-info`) bump specificity above
   AdminLTE's flat `.alert-info { color:#fff !important }` rule — which
   was forcing the inline alert text to white on the pale `--color-
   background-info` surface, making the message invisible. */
.alert.alert-info,
.alert-info.alert {
  background: var(--color-background-info) !important;
  background-color: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-left: 0 !important;
}
.alert.alert-success,
.alert-success.alert {
  background: var(--color-background-success) !important;
  background-color: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-left-color: var(--accent-green) !important;
}
.alert.alert-warning,
.alert-warning.alert {
  background: var(--color-background-warning) !important;
  background-color: var(--color-background-warning) !important;
  color: var(--color-text-warning) !important;
  border-left: 0 !important;
}
.alert.alert-danger,
.alert.alert-error,
.alert-danger.alert,
.alert-error.alert {
  background: var(--color-background-danger) !important;
  background-color: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border-left-color: var(--accent-red) !important;
}
/* Inherit alert color into nested text/markup so <strong>, <a>, <span>,
   <small> etc. don't fall back to AdminLTE's white. */
.alert.alert-info,
.alert.alert-success,
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-error {
  /* baseline already set above */
}
.alert.alert-info > *,
.alert.alert-info strong,
.alert.alert-info a,
.alert.alert-success > *,
.alert.alert-success strong,
.alert.alert-success a,
.alert.alert-warning > *,
.alert.alert-warning strong,
.alert.alert-warning a,
.alert.alert-danger > *,
.alert.alert-error > *,
.alert.alert-danger strong,
.alert.alert-error strong,
.alert.alert-danger a,
.alert.alert-error a {
  color: inherit !important;
}

/* ---------- 12.b ALERTS — modal/body scoped overrides --------------------
   AdminLTE ships `.alert-info { background-color:#00c0ef !important;
   color:#fff !important; }` — and on some views (AJAX-loaded modals,
   cached bundles) it ends up active even at higher specificity than
   our base rule.  Re-declare the alert palette with ancestor-scoped
   selectors (`html body`, `.modal`, `.modal-body`, `.modal-content`,
   `.card-wrapper`) so theme.css ALWAYS wins.  All variants use
   compound classes, descendant `*` overrides, and explicit
   `background-color` longhand to defeat any combination of !important
   declarations from third-party stylesheets. */
html body .alert.alert-info,
.modal .alert.alert-info,
.modal-body .alert.alert-info,
.modal-content .alert.alert-info,
.card-wrapper .alert.alert-info,
.box-body .alert.alert-info {
  background: var(--color-background-info) !important;
  background-color: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-left: 0 !important;
}
html body .alert.alert-info *,
.modal .alert.alert-info *,
.modal-body .alert.alert-info *,
.modal-content .alert.alert-info *,
.card-wrapper .alert.alert-info *,
.box-body .alert.alert-info * {
  color: var(--color-text-info) !important;
}

html body .alert.alert-success,
.modal .alert.alert-success,
.modal-body .alert.alert-success,
.modal-content .alert.alert-success,
.card-wrapper .alert.alert-success,
.box-body .alert.alert-success {
  background: var(--color-background-success) !important;
  background-color: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-left: 3px solid var(--accent-green) !important;
}
html body .alert.alert-success *,
.modal .alert.alert-success *,
.modal-body .alert.alert-success *,
.modal-content .alert.alert-success *,
.card-wrapper .alert.alert-success *,
.box-body .alert.alert-success * {
  color: var(--color-text-success) !important;
}

html body .alert.alert-warning,
.modal .alert.alert-warning,
.modal-body .alert.alert-warning,
.modal-content .alert.alert-warning,
.card-wrapper .alert.alert-warning,
.box-body .alert.alert-warning {
  background: var(--color-background-warning) !important;
  background-color: var(--color-background-warning) !important;
  color: var(--color-text-warning) !important;
  border-left: 0 !important;
}
html body .alert.alert-warning *,
.modal .alert.alert-warning *,
.modal-body .alert.alert-warning *,
.modal-content .alert.alert-warning *,
.card-wrapper .alert.alert-warning *,
.box-body .alert.alert-warning * {
  color: var(--color-text-warning) !important;
}

html body .alert.alert-danger,
html body .alert.alert-error,
.modal .alert.alert-danger,
.modal .alert.alert-error,
.modal-body .alert.alert-danger,
.modal-body .alert.alert-error,
.modal-content .alert.alert-danger,
.modal-content .alert.alert-error,
.card-wrapper .alert.alert-danger,
.card-wrapper .alert.alert-error,
.box-body .alert.alert-danger,
.box-body .alert.alert-error {
  background: var(--color-background-danger) !important;
  background-color: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border-left: 3px solid var(--accent-red) !important;
}
html body .alert.alert-danger *,
html body .alert.alert-error *,
.modal .alert.alert-danger *,
.modal .alert.alert-error *,
.modal-body .alert.alert-danger *,
.modal-body .alert.alert-error *,
.modal-content .alert.alert-danger *,
.modal-content .alert.alert-error *,
.card-wrapper .alert.alert-danger *,
.card-wrapper .alert.alert-error *,
.box-body .alert.alert-danger *,
.box-body .alert.alert-error * {
  color: var(--color-text-danger) !important;
}

/* ---------- 13. DROPDOWNS ------------------------------------------------- */
.dropdown-menu {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 4px !important;
  min-width: 180px;
}
.dropdown-menu > li > a {
  padding: 7px 10px !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.dropdown-menu .divider { background: var(--color-border-tertiary) !important; margin: 4px 0 !important; }

/* ---------- 14. PAGINATION ------------------------------------------------ */
.pagination > li > a,
.pagination > li > span {
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  background: var(--color-background-primary) !important;
  margin: 0 2px !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: transparent !important;
}

/* ---------- 15. AVATARS, ICONS ------------------------------------------- */
.avatar,
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-background-info);
  color: var(--color-text-info);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-background-primary);
}
.avatar.green, .avatar-success { background: var(--color-background-success); color: var(--color-text-success); }
.avatar.amber, .avatar-warning { background: var(--color-background-warning); color: var(--color-text-warning); }
.avatar.red,   .avatar-danger  { background: var(--color-background-danger);  color: var(--color-text-danger); }

/* ---------- 16. KANBAN columns -------------------------------------------- */
.kanban-column,
.kanban-board > div {
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px !important;
  min-width: 220px;
}

/* ---------- 17. BREADCRUMBS ----------------------------------------------- */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: 12.5px;
  margin-bottom: 8px !important;
}
.breadcrumb > li + li:before { color: var(--color-text-tertiary) !important; padding: 0 6px; }
.breadcrumb > li > a { color: var(--color-text-secondary) !important; }
.breadcrumb > .active { color: var(--color-text-primary) !important; }

/* ---------- 18. TOOLTIPS / POPOVERS -------------------------------------- */
.tooltip-inner {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: 11.5px !important;
  padding: 5px 9px !important;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--color-text-primary) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--color-text-primary) !important; }
.popover {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}
.popover-title {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ---------- 19. PROGRESS BARS --------------------------------------------- */
.progress {
  height: 6px !important;
  background: var(--color-background-tertiary) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.progress-bar {
  background: var(--color-text-primary) !important;
  box-shadow: none !important;
}
.progress-bar-success { background: var(--accent-green) !important; }
.progress-bar-info    { background: var(--accent-blue) !important; }
.progress-bar-warning { background: var(--accent-amber) !important; }
.progress-bar-danger  { background: var(--accent-red) !important; }

/* ---------- 20. MISC: legacy class normalization -------------------------- */
.bg-light-gray, .bg-max { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.text-muted { color: var(--color-text-secondary) !important; }
hr { border-color: var(--color-border-tertiary) !important; }

/* Override the existing override.css legacy primary-color paint:
   table action buttons should follow the new neutral system */
.table-action-btn {
  background: var(--color-text-primary) !important;
  border-color: transparent !important;
  color: var(--color-background-primary) !important;
}
.table-action-btn:hover { background: color-mix(in srgb, var(--color-text-primary) 85%, white 15%) !important; }

.box.box-primary { border-top: 0.5px solid var(--color-border-tertiary) !important; }

/* Ensure POS layout (cash register, calculator) inherits surface colours
   without breaking its compact density */
body[class*="pos"] .form-control { padding: var(--control-padding-y) var(--control-padding-x) !important; }

/* Fix legacy .skin-blue-light navbar dropdown link colour */
.skin-blue-light .main-header .navbar .dropdown-menu li a { color: var(--color-text-primary) !important; }

/* Empty-state rows */
.empty-row td,
tr.no-data td {
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  padding: 24px 12px !important;
  font-style: normal;
}

/* ==========================================================================
   PART B — css/extra/* OVERRIDES
   --------------------------------------------------------------------------
   Each extra stylesheet defines its own scoped CSS-variable palette.
   The cleanest, lowest-risk override is to REDEFINE THOSE VARIABLES inside
   the same scope, so all the rules in those sheets auto-inherit the mockup
   palette without us touching any existing rule.
   ========================================================================== */

/* ---------- B.1 calculator.css (.bpc-root) -------------------------------- */
.bpc-root {
  --bpc-bg:        var(--color-background-secondary) !important;
  --bpc-modal:     var(--color-background-primary) !important;
  --bpc-surface:   var(--color-background-secondary) !important;
  --bpc-surface2:  var(--color-background-tertiary) !important;
  --bpc-border:    var(--color-border-tertiary) !important;
  --bpc-border2:   var(--color-border-tertiary) !important;
  --bpc-text:      var(--color-text-primary) !important;
  --bpc-text-sub:  var(--color-text-secondary) !important;
  --bpc-text-faint:var(--color-text-tertiary) !important;
  --bpc-num-bg:    var(--color-background-secondary) !important;
  --bpc-num-h:     var(--color-background-tertiary) !important;
  --bpc-num-a:     color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-tertiary)) !important;
  --bpc-op-bg:     var(--color-background-info) !important;
  --bpc-op-text:   var(--color-text-info) !important;
  --bpc-op-h:      color-mix(in srgb, var(--color-text-info) 18%, var(--color-background-info)) !important;
  --bpc-fn-bg:     var(--color-background-info) !important;
  --bpc-fn-text:   var(--color-text-info) !important;
  --bpc-fn-h:      color-mix(in srgb, var(--color-text-info) 18%, var(--color-background-info)) !important;
  --bpc-ac-bg:     var(--color-background-danger) !important;
  --bpc-ac-text:   var(--color-text-danger) !important;
  --bpc-ac-h:      color-mix(in srgb, var(--color-text-danger) 18%, var(--color-background-danger)) !important;
  --bpc-eq-bg:     var(--color-text-primary) !important;
  --bpc-eq-text:   var(--color-text-inverse) !important;
  --bpc-eq-h:      color-mix(in srgb, var(--color-text-primary) 85%, white 15%) !important;
  --bpc-eq-glow:   transparent !important;
  --bpc-overlay:   rgba(11, 14, 19, .45) !important;
  --bpc-radius:    var(--border-radius-lg) !important;
  --bpc-btn-radius:var(--border-radius-md) !important;
  --bpc-shadow:    var(--shadow-lg) !important;
}

/* ---------- B.2 cash_register.css (.rr-modal, .cr-modal, .register_details_modal) ---- */
.rr-modal,
.cr-modal,
.register_details_modal {
  --crr-bg:            var(--color-background-secondary) !important;
  --crr-surface:       var(--color-background-primary) !important;
  --crr-surface-soft:  var(--color-background-success) !important;
  --crr-input-bg:      var(--color-background-primary) !important;

  --crr-border:        var(--color-border-secondary) !important;
  --crr-border-soft:   var(--color-border-tertiary) !important;
  --crr-border-muted:  var(--color-border-tertiary) !important;

  --crr-text:          var(--color-text-primary) !important;
  --crr-title:         var(--color-text-primary) !important;
  --crr-label:         var(--color-text-secondary) !important;
  --crr-muted:         var(--color-text-tertiary) !important;
  --crr-muted-2:       var(--color-text-secondary) !important;
  --crr-note:          var(--color-text-secondary) !important;

  --crr-in:            var(--color-text-success) !important;
  --crr-in-bg:         var(--color-background-success) !important;
  --crr-in-border:     color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;

  --crr-out:           var(--color-text-danger) !important;
  --crr-out-bg:        var(--color-background-danger) !important;
  --crr-out-border:    color-mix(in srgb, var(--color-text-danger) 30%, transparent) !important;

  --crr-total-bg:      var(--color-background-success) !important;
  --crr-total-text:    var(--color-text-success) !important;

  --crr-subtotal-bg:   color-mix(in srgb, var(--color-background-success) 60%, var(--color-background-primary)) !important;
  --crr-subtotal-text: var(--color-text-success) !important;

  --crr-grand-bg:      var(--color-text-primary) !important;
  --crr-grand-text:    var(--color-text-inverse) !important;

  --crr-accent:        var(--color-text-info) !important;
  --crr-accent-soft:   color-mix(in srgb, var(--color-text-info) 30%, var(--color-background-info)) !important;
  --crr-warning:       var(--color-text-warning) !important;

  --crr-radius:        var(--border-radius-md) !important;
  --crr-radius-md:     var(--border-radius-md) !important;
  --crr-radius-pill:   20px !important;

  --crr-shadow-modal:  var(--shadow-lg) !important;
}

/* ---------- B.3 contact.css (.cv-page, .cl-wrap) -------------------------- */
.cv-page,
.cl-wrap {
  --contact-bg:           var(--color-background-secondary) !important;
  --contact-bg-soft:      var(--color-background-secondary) !important;
  --contact-surface:      var(--color-background-primary) !important;
  --contact-border:       var(--color-border-secondary) !important;
  --contact-border-soft:  var(--color-border-tertiary) !important;

  --contact-text-1:       var(--color-text-primary) !important;
  --contact-text-2:       var(--color-text-secondary) !important;
  --contact-text-3:       var(--color-text-tertiary) !important;

  --contact-accent:       var(--color-text-info) !important;
  --contact-accent-soft:  var(--color-background-info) !important;
  --contact-accent-2:     var(--accent-amber) !important;

  --contact-danger:       var(--color-text-danger) !important;
  --contact-danger-soft:  var(--color-background-danger) !important;
  --contact-warning:      var(--color-text-warning) !important;
  --contact-warning-soft: var(--color-background-warning) !important;
  --contact-success:      var(--color-text-success) !important;
  --contact-success-soft: var(--color-background-success) !important;

  --contact-radius:       var(--border-radius-lg) !important;
  --contact-radius-sm:    var(--border-radius-md) !important;
  --contact-radius-pill:  20px !important;

  --contact-shadow:       var(--shadow-xs) !important;
  --contact-shadow-md:    var(--shadow-sm) !important;

  --contact-font-sans:    var(--font-sans) !important;
}

/* ---------- B.4 customer_display.css (CD page) ---------------------------- */
/* This file uses :root tokens (--accent, --bg-main, --bg-header, --border).
   The customer display is a full-screen page; we keep its layout but
   re-skin colours via a body-level override of those root vars. */
body.customer-display,
body[class*="customer-display"],
.customer-display-wrapper,
html:has(.customer-display-wrapper) {
  --accent:      var(--color-text-info) !important;
  --bg-main:     var(--color-background-primary) !important;
  --bg-header:   var(--color-background-secondary) !important;
  --border:      var(--color-border-secondary) !important;
  --text-muted:  var(--color-text-secondary) !important;
  --shadow:      var(--shadow-sm) !important;
}
.customer-display-wrapper #total_payable_big.value {
  color: var(--color-text-info) !important;
}
.customer-display-wrapper #customer-display-table tbody tr:nth-child(odd) {
  background: var(--color-background-primary) !important;
}
.customer-display-wrapper #customer-display-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-background-secondary) 50%, var(--color-background-primary) 50%) !important;
}

/* ---------- B.5 dashboard_v2.css (#db2-root) ------------------------------ */
#db2-root {
  --d2-bg-app:         var(--color-background-secondary) !important;
  --d2-bg-surface:     var(--color-background-primary) !important;
  --d2-bg-elevated:    var(--color-background-secondary) !important;
  --d2-bg-input:       var(--color-background-secondary) !important;
  --d2-bg-th:          var(--color-background-secondary) !important;
  --d2-bg-td:          var(--color-background-primary) !important;
  --d2-bg-tr-hover:    var(--color-background-secondary) !important;
  --d2-text-primary:   var(--color-text-primary) !important;
  --d2-text-secondary: var(--color-text-secondary) !important;
  --d2-text-muted:     var(--color-text-tertiary) !important;
  --d2-border-subtle:  var(--color-border-tertiary) !important;
  --d2-border-default: var(--color-border-secondary) !important;
  --d2-border-accent:  var(--color-text-primary) !important;
  --d2-shadow-sm:      var(--shadow-xs) !important;
  --d2-shadow-md:      var(--shadow-sm) !important;
  --d2-accent:         var(--color-text-info) !important;
  --d2-accent-muted:   var(--color-background-info) !important;
  --d2-success:        var(--color-text-success) !important;
  --d2-danger:         var(--color-text-danger) !important;
  --d2-warning:        var(--color-text-warning) !important;
  --d2-info:           var(--color-text-info) !important;
  --d2-violet:         var(--accent-blue) !important;
}
/* Tame the rounded chips/pills to mockup radius */
#db2-root .d2-filter-btn,
#db2-root .d2-date-badge,
#db2-root .d2-loc-wrap select { border-radius: var(--border-radius-md) !important; }
#db2-root .d2-kpi {
  border-radius: var(--border-radius-lg) !important;
  border-top-width: 3px !important;
  border-top-color: var(--d2-kpi-bar, var(--color-border-primary)) !important;
}

/* ---------- B.6 language.css (.language-workspace + :root --lm-*) -------- */
:root,
.language-workspace {
  --lm-ink:          var(--color-text-primary) !important;
  --lm-ink-soft:     var(--color-text-secondary) !important;
  --lm-ink-faint:    var(--color-text-tertiary) !important;

  --lm-panel:        var(--color-background-primary) !important;
  --lm-surface-2:    var(--color-background-secondary) !important;
  --lm-surface-3:    var(--color-background-tertiary) !important;

  --lm-line:         var(--color-border-secondary) !important;
  --lm-line-soft:    var(--color-border-tertiary) !important;
  --lm-line-strong:  var(--color-border-primary) !important;

  --lm-amber:        var(--color-text-warning) !important;
  --lm-amber-bg:     var(--color-background-warning) !important;
  --lm-amber-border: color-mix(in srgb, var(--color-text-warning) 25%, transparent) !important;
  --lm-coral:        var(--color-text-danger) !important;
  --lm-coral-bg:     var(--color-background-danger) !important;
  --lm-coral-border: color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
  --lm-blue:         var(--color-text-info) !important;
  --lm-blue-bg:      var(--color-background-info) !important;

  --lm-radius-sm:    var(--border-radius-sm) !important;
  --lm-radius-md:    var(--border-radius-md) !important;
  --lm-radius-lg:    var(--border-radius-lg) !important;
  --lm-radius-pill:  20px !important;
}

/* ---------- B.7 pos_forms.css (.posfa-wrap, .pos-totals-bar) -------------- */
.posfa-wrap,
.pos-totals-bar {
  --pos-ui-bg:             var(--color-background-secondary) !important;
  --pos-ui-surface:        var(--color-background-primary) !important;
  --pos-ui-surface-2:      var(--color-background-secondary) !important;
  --pos-ui-surface-3:      var(--color-background-tertiary) !important;
  --pos-ui-border:         var(--color-border-secondary) !important;
  --pos-ui-border-2:       var(--color-border-primary) !important;

  --pos-ui-text:           var(--color-text-primary) !important;
  --pos-ui-text-2:         var(--color-text-secondary) !important;
  --pos-ui-text-3:         var(--color-text-tertiary) !important;

  --pos-ui-accent:         var(--color-text-info) !important;
  --pos-ui-accent-glow:    color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  --pos-ui-accent-muted:   var(--color-background-info) !important;

  --pos-ui-success:        var(--color-text-success) !important;
  --pos-ui-success-glow:   color-mix(in srgb, var(--color-text-success) 18%, transparent) !important;
  --pos-ui-success-muted:  var(--color-background-success) !important;

  --pos-ui-warning:        var(--color-text-warning) !important;
  --pos-ui-warning-muted:  var(--color-background-warning) !important;
  --pos-ui-warning-border: color-mix(in srgb, var(--color-text-warning) 28%, transparent) !important;

  --pos-ui-danger:         var(--color-text-danger) !important;
  --pos-ui-danger-muted:   var(--color-background-danger) !important;
  --pos-ui-danger-border:  color-mix(in srgb, var(--color-text-danger) 28%, transparent) !important;

  --pos-ui-purple:         var(--accent-blue) !important;
  --pos-ui-purple-muted:   color-mix(in srgb, var(--accent-blue) 12%, transparent) !important;
  --pos-ui-purple-border:  color-mix(in srgb, var(--accent-blue) 28%, transparent) !important;

  --pos-ui-sky:            var(--color-text-info) !important;
  --pos-ui-sky-muted:      var(--color-background-info) !important;
  --pos-ui-sky-border:     color-mix(in srgb, var(--color-text-info) 25%, transparent) !important;

  --pos-ui-radius:         var(--border-radius-md) !important;
  --pos-ui-radius-sm:      var(--border-radius-sm) !important;
  --pos-ui-radius-lg:      var(--border-radius-lg) !important;

  --pos-ui-shadow-btn:     var(--shadow-xs) !important;
  --pos-ui-shadow-glow:    none !important;
}

/* ---------- B.8 pos_header_v2.css (root --ph-*) -------------------------- */
:root {
  --ph-bg:        var(--color-background-primary) !important;
  --ph-surface:   var(--color-background-secondary) !important;
  --ph-surface2:  var(--color-background-tertiary) !important;
  --ph-border:    var(--color-border-tertiary) !important;
  --ph-border2:   var(--color-border-secondary) !important;
  --ph-text:      var(--color-text-primary) !important;
  --ph-muted:     var(--color-text-secondary) !important;
  --ph-accent:    var(--color-text-info) !important;
  --ph-accent-bg: var(--color-background-info) !important;
  --ph-red:       var(--color-text-danger) !important;
  --ph-shadow:    var(--shadow-xs) !important;
}
.pos-heading {
  font-family: var(--font-sans) !important;
}

/* ---------- B.9 report.css (.pl-report, .tax-report-shell, .audit-console) ---- */
.pl-report,
.tax-report-shell,
.audit-console {
  --report-bg:            var(--color-background-secondary) !important;
  --report-bg-soft:       var(--color-background-secondary) !important;
  --report-bg-softer:     var(--color-background-tertiary) !important;
  --report-card:          var(--color-background-primary) !important;
  --report-card-gradient: var(--color-background-primary) !important;

  --report-border:        var(--color-border-secondary) !important;
  --report-border-soft:   var(--color-border-tertiary) !important;
  --report-border-strong: var(--color-border-primary) !important;

  --report-text:          var(--color-text-primary) !important;
  --report-text-2:        var(--color-text-secondary) !important;
  --report-text-3:        var(--color-text-secondary) !important;
  --report-muted:         var(--color-text-secondary) !important;
  --report-muted-2:       var(--color-text-tertiary) !important;

  --report-accent:        var(--color-text-info) !important;
  --report-accent-2:      color-mix(in srgb, var(--color-text-info) 80%, black 20%) !important;
  --report-accent-soft:   color-mix(in srgb, var(--color-text-info) 12%, transparent) !important;
  --report-accent-bg:     var(--color-background-info) !important;

  --report-blue:          var(--color-text-info) !important;
  --report-blue-bg:       var(--color-background-info) !important;
  --report-blue-border:   color-mix(in srgb, var(--color-text-info) 25%, transparent) !important;

  --report-green:         var(--color-text-success) !important;
  --report-green-2:       var(--color-text-success) !important;
  --report-green-bg:      var(--color-background-success) !important;
  --report-green-soft:    var(--color-background-success) !important;

  --report-red:           var(--color-text-danger) !important;
  --report-red-2:         var(--color-text-danger) !important;
  --report-red-bg:        var(--color-background-danger) !important;

  --report-violet:        var(--accent-blue) !important;
  --report-violet-2:      var(--accent-blue) !important;
  --report-violet-bg:     var(--color-background-info) !important;
  --report-violet-soft:   var(--color-background-info) !important;

  --report-warning:       var(--color-text-warning) !important;
  --report-success:       var(--color-text-success) !important;
  --report-danger:        var(--color-text-danger) !important;

  --report-radius-sm:     var(--border-radius-md) !important;
  --report-radius:        var(--border-radius-lg) !important;
  --report-radius-lg:     var(--border-radius-lg) !important;
  --report-radius-xl:     var(--border-radius-xl) !important;
  --report-radius-2xl:    var(--border-radius-xl) !important;
  --report-radius-pill:   20px !important;

  --report-shadow-sm:     var(--shadow-xs) !important;
  --report-shadow:        var(--shadow-sm) !important;
  --report-shadow-lg:     var(--shadow-sm) !important;
  --report-shadow-xl:     var(--shadow-md) !important;
}
.audit-console { background: var(--color-background-secondary) !important; }

/* ---------- B.10 restaurant_orders.css (.orders-layout-row) -------------- */
.orders-layout-row .box {
  border-radius: var(--border-radius-lg) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--color-background-primary) !important;
}
.orders-layout-row .box-header {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.orders-layout-row .box-header .box-title {
  color: var(--color-text-primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
.orders-layout-row .box-body {
  background: var(--color-background-primary) !important;
}
.orders-layout-row .form-control.select2 {
  border-radius: var(--border-radius-md) !important;
  border-color: var(--color-border-secondary) !important;
}
.orders-layout-row .order-card {
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--color-background-primary) !important;
}
.orders-layout-row .overlay {
  background-color: color-mix(in srgb, var(--color-text-primary) 12%, transparent) !important;
}

/* ---------- B.11 running_orders.css (.ro-sidebar / .rov2..rov5) ---------- */
html:not(.dark-mode) .ro-sidebar,
html:not(.dark-mode) .rov2,
html:not(.dark-mode) .rov3,
html:not(.dark-mode) .rov4,
html:not(.dark-mode) .rov5 {
  --ro-ui-shell:            var(--color-background-secondary) !important;
  --ro-ui-bg:               var(--color-background-primary) !important;
  --ro-ui-bg-2:             var(--color-background-secondary) !important;
  --ro-ui-bg-3:             var(--color-background-tertiary) !important;
  --ro-ui-bg-4:             var(--color-background-tertiary) !important;
  --ro-ui-surface:          var(--color-background-primary) !important;
  --ro-ui-pill-bg:          var(--color-background-secondary) !important;
  --ro-ui-glass:            color-mix(in srgb, var(--color-background-primary) 92%, transparent) !important;
  --ro-ui-grid:             var(--color-border-tertiary) !important;

  --ro-ui-border:           var(--color-border-secondary) !important;
  --ro-ui-border-2:         var(--color-border-primary) !important;
  --ro-ui-border-3:         var(--color-border-primary) !important;

  --ro-ui-text:             var(--color-text-primary) !important;
  --ro-ui-text-2:           var(--color-text-secondary) !important;
  --ro-ui-text-3:           var(--color-text-tertiary) !important;
  --ro-ui-text-4:           var(--color-text-tertiary) !important;

  --ro-ui-hover:            var(--color-background-secondary) !important;
  --ro-ui-active:           var(--color-background-tertiary) !important;
  --ro-ui-selected:         var(--color-background-secondary) !important;

  --ro-ui-accent:           var(--color-text-info) !important;
  --ro-ui-accent-bg:        var(--color-background-info) !important;
  --ro-ui-accent-text:      var(--color-text-info) !important;

  --ro-ui-shadow:           var(--shadow-sm) !important;
  --ro-ui-shadow-lg:        var(--shadow-md) !important;
  --ro-ui-shadow-xl:        var(--shadow-lg) !important;

  --ro-ui-input-bg:         var(--color-background-primary) !important;
  --ro-ui-card-bg:          var(--color-background-primary) !important;
  --ro-ui-card-border:      var(--color-border-tertiary) !important;
  --ro-ui-card-hover:       var(--color-background-secondary) !important;

  --ro-ui-overlay:          rgba(11, 14, 19, 0.18) !important;
  --ro-ui-overlay-strong:   rgba(11, 14, 19, 0.30) !important;
  --ro-ui-overlay-heavy:    rgba(11, 14, 19, 0.35) !important;

  --ro-ui-tab-active-bg:    var(--color-text-primary) !important;
  --ro-ui-tab-active-text:  var(--color-text-inverse) !important;

  /* Status badge palette mapped to mockup colour system */
  --ro-ui-received:         var(--accent-blue) !important;
  --ro-ui-received-bg:      var(--color-background-info) !important;
  --ro-ui-received-text:    var(--color-text-info) !important;
  --ro-ui-received-border:  color-mix(in srgb, var(--accent-blue) 30%, transparent) !important;

  --ro-ui-partial:          var(--color-text-warning) !important;
  --ro-ui-partial-bg:       var(--color-background-warning) !important;
  --ro-ui-partial-text:     var(--color-text-warning) !important;
  --ro-ui-partial-border:   color-mix(in srgb, var(--color-text-warning) 30%, transparent) !important;

  --ro-ui-cooked:           var(--accent-amber) !important;
  --ro-ui-cooked-bg:        var(--color-background-warning) !important;
  --ro-ui-cooked-text:      var(--color-text-warning) !important;
  --ro-ui-cooked-border:    color-mix(in srgb, var(--accent-amber) 30%, transparent) !important;

  --ro-ui-served:           var(--color-text-success) !important;
  --ro-ui-served-bg:        var(--color-background-success) !important;
  --ro-ui-served-text:      var(--color-text-success) !important;
  --ro-ui-served-border:    color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;

  --ro-ui-radius:           var(--border-radius-md) !important;
  --ro-ui-radius-sm:        var(--border-radius-sm) !important;
  --ro-ui-radius-md:        var(--border-radius-md) !important;
  --ro-ui-radius-pill:      20px !important;
}

/* ---------- B.12 side_docked_pos_footer.css ------------------------------ */
/* This file is mostly layout/positioning and already uses the .posfa-wrap
   tokens (covered in B.7). Just normalise a couple of explicit colours. */
body.pos-tablet-mode.pos-action-tower-active .posfa-wrap {
  border-color: var(--color-border-secondary) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-background-primary) !important;
}
body.pos-tablet-mode.pos-action-tower-active .posfa-total-item,
body.pos-tablet-mode.pos-action-tower-active .posfa-pill,
body.pos-tablet-mode.pos-action-tower-active .posfa-subscribe-section {
  border-color: var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}

/* ---------- B.13 sidebar_v3.css (#bp-sidebar) ---------------------------- */
:root {
  --sb-bg:             var(--color-background-primary) !important;
  --sb-bg-glass:       var(--color-background-secondary) !important;
  --sb-border:         var(--color-border-tertiary) !important;
  --sb-accent:         var(--color-text-primary) !important;
  --sb-accent-glow:    color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  --sb-accent-soft:    var(--color-background-info) !important;
  --sb-text-primary:   var(--color-text-primary) !important;
  --sb-text-secondary: var(--color-text-secondary) !important;
  --sb-text-muted:     var(--color-text-tertiary) !important;
  --sb-hover:          var(--color-background-secondary) !important;
  --sb-active-bg:      var(--color-background-secondary) !important;
  --sb-divider:        var(--color-border-tertiary) !important;
  --sb-radius:         var(--border-radius-md) !important;
  --sb-radius-sm:      var(--border-radius-sm) !important;
  --sb-section-label:  var(--color-text-tertiary) !important;
}
#bp-sidebar {
  background: var(--color-background-primary) !important;
  border-right: 0.5px solid var(--color-border-tertiary) !important;
}
#bp-sidebar .bp-sb-header {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}

/* ==========================================================================
   PART C — Additional widget overrides (third pass)
   --------------------------------------------------------------------------
   Covers components and JS plugins that weren't captured in Part A or B:
   date pickers, toasts, sweet alerts, switches, file inputs, info-boxes,
   small-boxes, timelines, AdminLTE login screens, calendars, file dropzones,
   tag inputs, tabs custom, callouts, jstree, FullCalendar, iCheck, etc.
   ========================================================================== */

/* ---------- C.1 Date / Time Pickers (daterangepicker + bootstrap-datepicker + datetimepicker) ---- */
.daterangepicker,
.bootstrap-datetimepicker-widget,
.datepicker-dropdown {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  color: var(--color-text-primary) !important;
}
.daterangepicker .calendar-table,
.daterangepicker td,
.daterangepicker th { color: var(--color-text-primary) !important; border-color: transparent !important; background: transparent !important; }
.daterangepicker td.available:hover,
.daterangepicker th.available:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.daterangepicker td.in-range { background: var(--color-background-info) !important; color: var(--color-text-info) !important; }
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date { color: var(--color-text-tertiary) !important; background: transparent !important; }
.daterangepicker .ranges li {
  border-radius: var(--border-radius-sm) !important;
  font-size: 12.5px !important;
  color: var(--color-text-secondary) !important;
}
.daterangepicker .ranges li:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.daterangepicker .ranges li.active {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
}
.daterangepicker .drp-buttons { border-top: 0.5px solid var(--color-border-tertiary) !important; }
.daterangepicker .drp-buttons .btn { font-size: 12px !important; }
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect,
.daterangepicker .input-mini {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-text-primary) !important;
}
.daterangepicker:before { border-bottom-color: var(--color-border-primary) !important; }
.daterangepicker:after  { border-bottom-color: var(--color-background-primary) !important; }

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  text-shadow: none !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}

/* ---------- C.2 Toastr / SweetAlert / Notifications ---------------------- */
#toast-container > div {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  opacity: 1 !important;
  font-family: var(--font-sans) !important;
}
#toast-container > .toast-success { border-left: 3px solid var(--accent-green) !important; }
#toast-container > .toast-error,
#toast-container > .toast-danger  { border-left: 3px solid var(--accent-red)   !important; }
#toast-container > .toast-warning { border-left: 3px solid var(--accent-amber) !important; }
#toast-container > .toast-info    { border-left: 3px solid var(--accent-blue)  !important; }
#toast-container > div .toast-title   { color: var(--color-text-primary) !important; font-weight: 600 !important; }
#toast-container > div .toast-message { color: var(--color-text-secondary) !important; font-size: 13px !important; }

.swal2-popup,
.swal-modal,
.swal2-modal {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}
.swal2-title, .swal-title  { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.swal2-html-container,
.swal2-content,
.swal-text { color: var(--color-text-secondary) !important; font-size: 13.5px !important; }
.swal2-styled.swal2-confirm,
.swal-button--confirm {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.swal2-styled.swal2-cancel,
.swal-button--cancel {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] { background: var(--color-text-success) !important; }
.swal2-icon.swal2-error   { border-color: var(--color-text-danger) !important; color: var(--color-text-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--color-text-warning) !important; color: var(--color-text-warning) !important; }
.swal2-icon.swal2-info    { border-color: var(--color-text-info) !important; color: var(--color-text-info) !important; }

/* ---------- C.3 Switches / Toggles --------------------------------------- */
.switch .slider,
.switchBtn .slider {
  background: var(--color-background-tertiary) !important;
  border-radius: 999px !important;
  transition: background .18s ease !important;
}
.switch input:checked + .slider,
.switchBtn input:checked + .slider { background: var(--color-text-primary) !important; }
.switch .slider:before,
.switchBtn .slider:before {
  background: var(--color-background-primary) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .15) !important;
  border-radius: 999px !important;
}

/* AdminLTE iCheck blue (used in many forms) */
.icheckbox_square-blue,
.iradio_square-blue { filter: grayscale(0.5) hue-rotate(180deg); }

/* ---------- C.4 File inputs / Dropzone ----------------------------------- */
.btn-file,
.fileinput-button {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px dashed var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
}
.btn-file:hover { background: var(--color-background-tertiary) !important; }

.dropzone,
.dz-default {
  background: var(--color-background-primary) !important;
  border: 1.5px dashed var(--color-border-primary) !important;
  border-radius: var(--border-radius-lg) !important;
  color: var(--color-text-secondary) !important;
  min-height: 140px !important;
  padding: 24px !important;
}
.dropzone:hover { border-color: var(--color-text-info) !important; background: var(--color-background-info) !important; }
.dropzone .dz-message { font-size: 13px !important; color: var(--color-text-secondary) !important; }
.dropzone .dz-preview .dz-image { border-radius: var(--border-radius-md) !important; }

/* ---------- C.5 AdminLTE info-box / small-box / box-tools ---------------- */
.info-box {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  min-height: 80px !important;
  display: flex !important;
  align-items: center;
  padding: 14px !important;
}
.info-box-icon {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin-right: 12px !important;
}
.info-box-content { color: var(--color-text-primary) !important; }
.info-box-text    { color: var(--color-text-secondary) !important; font-size: 12px !important; text-transform: none !important; }
.info-box-number  { color: var(--color-text-primary) !important; font-size: 18px !important; font-weight: 600 !important; }
.info-box-icon.bg-aqua,    .info-box.bg-aqua    .info-box-icon { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.info-box-icon.bg-green,   .info-box.bg-green   .info-box-icon { background: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.info-box-icon.bg-yellow,  .info-box.bg-yellow  .info-box-icon { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.info-box-icon.bg-red,     .info-box.bg-red     .info-box-icon { background: var(--color-background-danger) !important;  color: var(--color-text-danger) !important; }
.info-box-icon.bg-blue,    .info-box.bg-blue    .info-box-icon { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }

.small-box {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-left: 3px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  position: relative;
  margin-bottom: 16px !important;
  padding: 14px 16px !important;
}
.small-box.bg-aqua,    .small-box.bg-blue   { border-left-color: var(--accent-blue)  !important; }
.small-box.bg-green                          { border-left-color: var(--accent-green) !important; }
.small-box.bg-yellow                         { border-left-color: var(--accent-amber) !important; }
.small-box.bg-red                            { border-left-color: var(--accent-red)   !important; }
.small-box.bg-teal                           { border-left-color: var(--accent-teal)  !important; }
.small-box > .inner > h3 { color: var(--color-text-primary) !important; font-size: 22px !important; font-weight: 600 !important; }
.small-box > .inner > p  { color: var(--color-text-secondary) !important; font-size: 12.5px !important; }
.small-box > .icon { color: var(--color-text-tertiary) !important; opacity: .35 !important; font-size: 60px !important; top: 6px !important; right: 8px !important; }
.small-box > .small-box-footer {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  margin: 12px -16px -14px !important;
}
.small-box:hover { transform: translateY(-1px); transition: transform .15s ease; }

/* Box tools */
.box-tools .btn-box-tool {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border: none !important;
  font-size: 14px !important;
  padding: 4px 6px !important;
}
.box-tools .btn-box-tool:hover { color: var(--color-text-primary) !important; }

/* ---------- C.6 Timeline ------------------------------------------------- */
.timeline {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  position: relative;
}
.timeline:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border-tertiary) !important;
  left: 28px;
  margin: 0 !important;
  border-radius: 2px;
}
.timeline > li > .timeline-item {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-left: 56px !important;
  padding: 12px 14px !important;
  color: var(--color-text-primary) !important;
}
.timeline > li > .fa,
.timeline > li > .fas,
.timeline > li > .glyphicon,
.timeline > li > .ion {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  width: 30px !important; height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  border-radius: 50% !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  left: 14px !important;
  top: 2px !important;
}
.timeline > li > .timeline-item > .timeline-header { font-size: 13px !important; font-weight: 500 !important; border-bottom: 0.5px solid var(--color-border-tertiary) !important; padding-bottom: 6px !important; margin-bottom: 8px !important; }
.timeline > li > .timeline-item > .timeline-body  { font-size: 12.5px !important; color: var(--color-text-secondary) !important; }
.timeline > li > .timeline-item > .time { color: var(--color-text-tertiary) !important; font-size: 11px !important; }

/* ---------- C.7 AdminLTE login / register pages -------------------------- */
.login-page,
.register-page {
  background: var(--color-background-secondary) !important;
  font-family: var(--font-sans) !important;
}
.login-box,
.register-box { width: 380px !important; }
.login-box-body,
.register-box-body {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 24px !important;
}
.login-logo,
.register-logo {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 18px !important;
  letter-spacing: -0.015em !important;
}
.login-box-msg,
.register-box-msg { color: var(--color-text-secondary) !important; font-size: 13px !important; }

/* ---------- C.8 FullCalendar -------------------------------------------- */
.fc {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
}
.fc .fc-toolbar-title { font-size: 16px !important; font-weight: 600 !important; }
.fc .fc-button {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
}
.fc .fc-button:hover { background: var(--color-background-secondary) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: transparent !important;
}
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid { border-color: var(--color-border-tertiary) !important; }
.fc .fc-col-header-cell-cushion { color: var(--color-text-secondary) !important; font-weight: 500 !important; padding: 8px !important; }
.fc-day-today { background: var(--color-background-info) !important; }
.fc-event,
.fc-h-event,
.fc-v-event {
  background: var(--color-text-primary) !important;
  border: none !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: 11.5px !important;
  padding: 1px 4px !important;
}

/* ---------- C.9 Tags input / Select2 multi chips ------------------------- */
/* Note: select2 multi-select chips are styled in PART P further below using
   the --control-* scaling tokens. Keep this rule scoped to bootstrap-
   tagsinput only so the two systems don't fight over chip geometry. */
.bootstrap-tagsinput {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: calc(var(--control-padding-y) - 1px) calc(var(--control-padding-x) - 2px) !important;
  box-shadow: none !important;
  min-height: var(--control-min-height) !important;
}
.bootstrap-tagsinput .tag {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: 999px !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  padding: 2px 8px 2px 10px !important;
  margin: 2px 4px 2px 0 !important;
}

/* ---------- C.10 Custom nav-tabs / nav-pills / list-group ---------------- */
.nav-tabs-custom {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 16px !important;
}
.nav-tabs-custom > .nav-tabs {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  margin: 0 !important;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
  border-top: 2px solid var(--color-text-primary) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.nav-tabs-custom > .tab-content { padding: 14px 16px !important; }

.nav-pills > li > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: 12.5px !important;
  padding: 6px 12px !important;
  margin-right: 4px !important;
}
.nav-pills > li.active > a,
.nav-pills > li > a:hover { background: var(--color-text-primary) !important; color: var(--color-background-primary) !important; }

.list-group-item {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}
.list-group-item:first-child { border-top-left-radius: var(--border-radius-md) !important; border-top-right-radius: var(--border-radius-md) !important; }
.list-group-item:last-child  { border-bottom-left-radius: var(--border-radius-md) !important; border-bottom-right-radius: var(--border-radius-md) !important; }
.list-group-item.active,
.list-group-item.active:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; border-color: var(--color-border-tertiary) !important; }

/* ---------- C.11 Callouts / Wells / Jumbotron ---------------------------- */
.callout {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-left: 3px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}
.callout h4 { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.callout-info,    .callout.callout-info    { border-left-color: var(--accent-blue)  !important; }
.callout-success, .callout.callout-success { border-left-color: var(--accent-green) !important; }
.callout-warning, .callout.callout-warning { border-left-color: var(--accent-amber) !important; }
.callout-danger,  .callout.callout-danger  { border-left-color: var(--accent-red)   !important; }

.well {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
/* Equal-height `.well` cards in a row — the tallest sibling sets the
   height for both. Used in payment / pay-sale-due modals where the
   left card (Customer name) is much shorter than the right card
   (Total Sale / Paid / Due / Opening Balance). Promote the row to a
   flex container, stretch its `[class*="col-"]` children, then make
   the inner `.well` fill the column. Bootstrap 3's float-based grid
   doesn't natively support equal heights — flex gives us that for
   free without breaking the existing column widths. */
.row:has(> [class*="col-"] > .well + *),
.row:has(> [class*="col-"] > .well) {
  display: flex;
  flex-wrap: wrap;
}
.row:has(> [class*="col-"] > .well) > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.row:has(> [class*="col-"] > .well) > [class*="col-"] > .well {
  flex: 1 1 auto;
  height: 100%;
  margin-bottom: 0 !important;
}
/* :has() fallback for browsers without it — the modal-body row carries
   `.row .row` inside `.payment_row` partials, so add an explicit
   selector for the pay-sale-due / pay-supplier-due modal markup. */
.modal-body > .row > .col-md-6 > .well,
.modal-content .row > .col-md-6 > .well,
.payment_row > .row > .col-md-6 > .well {
  height: 100%;
}
/* Restore bottom margin on `.well` rows used as standalone summary cards
   (e.g. business / location info on receipt preview, sell view, sales-list
   show modal). The flex equal-height rule above strips internal margin to
   avoid double gaps; add it back at the row level so the next block of
   content (table, action buttons) gets visual breathing room.            */
.row:has(> [class*="col-"] > .well) {
  margin-bottom: 16px;
}
.row > [class*="col-"] > .well,
.row > [class*="col-"] > .well-sm,
.row > [class*="col-"] > .well-lg {
  margin-bottom: 16px;
}
.jumbotron {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  padding: 28px !important;
}

/* ---------- C.12 Generic legacy color utility classes -------------------- */
.bg-aqua,    .bg-blue    { background-color: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.bg-green,   .bg-success { background-color: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.bg-yellow,  .bg-warning { background-color: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.bg-red,     .bg-danger  { background-color: var(--color-background-danger) !important;  color: var(--color-text-danger) !important; }
.bg-purple, .bg-violet, .bg-maroon, .bg-navy { background-color: var(--color-background-info) !important; color: var(--color-text-info) !important; }
.bg-gray, .bg-light-gray { background-color: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.bg-black                { background-color: var(--color-text-primary) !important; color: var(--color-background-primary) !important; }

.text-aqua,    .text-blue    { color: var(--color-text-info) !important; }
.text-green,   .text-success { color: var(--color-text-success) !important; }
.text-yellow,  .text-warning { color: var(--color-text-warning) !important; }
.text-red,     .text-danger  { color: var(--color-text-danger) !important; }
.text-purple, .text-violet   { color: var(--accent-blue) !important; }

/* ---------- C.13 Content-header (legacy AdminLTE) ----------------------- */
.content-header {
  padding: 12px 0 6px !important;
  background: transparent !important;
  border-bottom: none !important;
}
.content-header > h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.content-header > h1 > small {
  font-size: 12.5px !important;
  color: var(--color-text-secondary) !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}
.content-header > .breadcrumb {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 0 0 !important;
}

/* ---------- C.14 Main footer + control sidebar -------------------------- */
.main-footer {
  background: var(--color-background-primary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 12.5px !important;
  padding: 10px 16px !important;
}
.control-sidebar,
.control-sidebar-bg {
  background: var(--color-background-primary) !important;
  border-left: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}

/* ---------- C.15 Header notifications dropdown / user-menu --------------- */
.user-menu .user-header,
.user-menu .user-image {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.notifications-menu > .dropdown-menu,
.messages-menu      > .dropdown-menu,
.tasks-menu         > .dropdown-menu {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
  min-width: 320px !important;
}
.notifications-menu .header,
.messages-menu .header,
.tasks-menu .header {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 14px !important;
}
.notifications-menu .menu > li > a,
.messages-menu      .menu > li > a,
.tasks-menu         .menu > li > a {
  font-size: 12.5px !important;
  color: var(--color-text-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 14px !important;
}
.notifications-menu .menu > li > a:hover,
.messages-menu      .menu > li > a:hover,
.tasks-menu         .menu > li > a:hover { background: var(--color-background-secondary) !important; }
.notifications-menu .footer > a,
.messages-menu      .footer > a,
.tasks-menu         .footer > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-info) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  text-align: center !important;
}

/* ---------- C.16 Code / pre / kbd ---------------------------------------- */
code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 1px 5px !important;
}
pre {
  display: block;
  padding: 12px 14px !important;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
kbd {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-bottom-width: 2px !important;
  box-shadow: 0 1px 0 var(--color-border-primary);
}

/* ---------- C.17 jsTree / treeview --------------------------------------- */
.jstree-default .jstree-clicked,
.jstree-default .jstree-hovered {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  box-shadow: none !important;
  border: none !important;
}
.jstree-default .jstree-anchor { color: var(--color-text-primary) !important; font-size: 13px !important; }

/* ---------- C.18 Bootstrap progress / spinner ---------------------------- */
.spinner-border, .spinner-grow { color: var(--color-text-info) !important; }
.fa-spin { color: inherit; }

/* ---------- C.19 Page scroll-top button --------------------------------- */
.scrolltop .scroll,
.scroll {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: 50% !important;
  color: var(--color-text-primary) !important;
  width: 40px; height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md) !important;
}
.scroll:hover { background: var(--color-background-secondary) !important; }

/* ---------- C.20 Product cards (POS / catalogue) ------------------------ */
.product_box,
.product_box .text_div {
  background: var(--color-background-primary) !important;
  border-radius: var(--border-radius-md) !important;
}
.product_box {
  border: 0.5px solid var(--color-border-tertiary) !important;
  padding: 8px !important;
  transition: border-color .15s ease, transform .15s ease;
}
.product_box:hover {
  border-color: var(--color-text-info) !important;
  transform: translateY(-1px);
}
.product_box .image-container img { border-radius: var(--border-radius-sm) !important; }
.product_box .text { color: var(--color-text-primary) !important; }

/* ---------- C.21 Wizard / steps ----------------------------------------- */
.wizard > .steps > ul > li.current > a,
.wizard > .steps > ul > li.current > a:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-md) !important;
}
.wizard > .steps > ul > li.done > a {
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-radius: var(--border-radius-md) !important;
}
.wizard > .steps > ul > li.disabled > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--border-radius-md) !important;
}
.wizard > .content {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  color: var(--color-text-primary) !important;
}

/* ---------- C.22 Bootstrap modal-XL helpers ------------------------------ */
.modal-xl   { max-width: 1140px; }
.modal-lg   { max-width: 900px; }
.modal-md   { max-width: 600px; }

/* ---------- C.23 PrintArea / receipt overrides DON'T inherit ------------- */
@media print {
  body, .content, .content-wrapper { background: #fff !important; }
}

/* ---------- C.24 Link-styled buttons inside tables ---------------------- */
table .btn-link,
.table .btn-link { color: var(--color-text-info) !important; padding: 0 !important; font-weight: 500; }
table .btn-link:hover { text-decoration: underline; }

/* ---------- C.25 Disabled state ----------------------------------------- */
.btn:disabled,
.btn.disabled,
.form-control:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-tertiary) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* =========================================================================
   PART D — Fourth pass: legacy Bootstrap / AdminLTE widgets still in use
   ========================================================================= */

/* ---------- D.1 Bootstrap 3 .panel family -------------------------------- */
.panel {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  margin-bottom: 16px !important;
}
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info    > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger  > .panel-heading {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-top-left-radius: var(--border-radius-lg) !important;
  border-top-right-radius: var(--border-radius-lg) !important;
  color: var(--color-text-primary) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
}
.panel-primary > .panel-heading { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.panel-success > .panel-heading { background: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.panel-info    > .panel-heading { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.panel-warning > .panel-heading { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.panel-danger  > .panel-heading { background: var(--color-background-error) !important;   color: var(--color-text-error) !important; }
.panel-body   { padding: 16px !important; color: var(--color-text-primary) !important; }
.panel-footer {
  background: var(--color-background-secondary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  border-bottom-left-radius: var(--border-radius-lg) !important;
  border-bottom-right-radius: var(--border-radius-lg) !important;
  padding: 10px 16px !important;
  color: var(--color-text-secondary) !important;
}
.panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* ---------- D.2 Bootstrap 3 .label-* (status pills) --------------------- */
.label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}
.label-default { background: var(--color-background-secondary) !important; color: var(--color-text-secondary) !important; }
.label-primary,
.label-info    { background: var(--color-background-info) !important;     color: var(--color-text-info) !important; }
.label-success { background: var(--color-background-success) !important;  color: var(--color-text-success) !important; }
.label-warning { background: var(--color-background-warning) !important;  color: var(--color-text-warning) !important; }
.label-danger  { background: var(--color-background-error) !important;    color: var(--color-text-error) !important; }

/* ---------- D.3 AdminLTE direct-chat widget ----------------------------- */
.direct-chat-messages { background: var(--color-background-primary) !important; padding: 12px !important; }
.direct-chat-msg .direct-chat-text {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  color: var(--color-text-primary) !important;
}
.direct-chat-msg.right .direct-chat-text {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.direct-chat-name { font-weight: 600 !important; color: var(--color-text-primary) !important; }
.direct-chat-timestamp { color: var(--color-text-tertiary) !important; }
.direct-chat-contacts {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.direct-chat-contacts .contacts-list-name { color: var(--color-text-primary) !important; }
.direct-chat-contacts .contacts-list-msg  { color: var(--color-text-secondary) !important; }

/* ---------- D.4 AdminLTE products-list / users-list / mailbox ----------- */
.products-list .product-img,
.users-list-image { border-radius: var(--border-radius-md) !important; }
.products-list > .item,
.users-list > li {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 12px !important;
}
.products-list .product-info .product-title { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.products-list .product-info .product-description,
.users-list-date { color: var(--color-text-secondary) !important; }

.mailbox-attachments li {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
}
.mailbox-attachment-info {
  background: var(--color-background-secondary) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
}

.attachment-block {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 8px !important;
}

/* ---------- D.5 Form validation states (BS3) --------------------------- */
.has-error .form-control,
.has-error .input-group-addon {
  border-color: var(--color-text-error) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
}
.has-error .form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-error) 18%, transparent) !important; }
.has-error .help-block,
.has-error .control-label,
.has-error .form-control-feedback { color: var(--color-text-error) !important; }

.has-warning .form-control,
.has-warning .input-group-addon { border-color: var(--color-text-warning) !important; }
.has-warning .help-block,
.has-warning .control-label { color: var(--color-text-warning) !important; }

.has-success .form-control,
.has-success .input-group-addon { border-color: var(--color-text-success) !important; }
.has-success .help-block,
.has-success .control-label { color: var(--color-text-success) !important; }

.help-block,
.form-text {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  margin-top: 4px !important;
}
.invalid-feedback { color: var(--color-text-error) !important; font-size: 12px !important; }
.valid-feedback   { color: var(--color-text-success) !important; font-size: 12px !important; }

/* required-field marker */
.required:after,
label.required:after,
.form-group.required > label:after {
  content: " *";
  color: var(--color-text-error);
  font-weight: 700;
}

/* ---------- D.6 Popover -------------------------------------------------- */
.popover {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
  color: var(--color-text-primary) !important;
}
.popover-title,
.popover-header {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  border-top-left-radius: var(--border-radius-lg) !important;
  border-top-right-radius: var(--border-radius-lg) !important;
}
.popover-content,
.popover-body { color: var(--color-text-secondary) !important; }
.popover.left  > .arrow:after,
.popover.right > .arrow:after,
.popover.top   > .arrow:after,
.popover.bottom > .arrow:after { border-color: transparent var(--color-background-primary) !important; }

/* ---------- D.7 Plugin: bootstrap-touchspin ----------------------------- */
.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .btn {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}
.bootstrap-touchspin .btn:hover {
  background: color-mix(in srgb, var(--color-background-secondary) 75%, var(--color-text-primary) 8%) !important;
}

/* ---------- D.8 Plugin: bootstrap-colorpicker --------------------------- */
.colorpicker,
.colorpicker.colorpicker-bs-popover-content {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
}

/* ---------- D.9 Plugin: summernote rich-text editor --------------------- */
.note-editor.note-frame,
.note-editor.note-airframe {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
}
.note-editor .note-toolbar,
.note-editor .note-statusbar {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
}
.note-editor .note-btn,
.note-editor .note-btn-group .btn {
  background: transparent !important;
  border: 0.5px solid transparent !important;
  color: var(--color-text-primary) !important;
}
.note-editor .note-btn:hover {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
}
.note-editor .note-editable {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}

/* ---------- D.10 TinyMCE / CKEditor (best-effort skin) ------------------ */
.tox-tinymce {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-statusbar {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
}
.tox .tox-edit-area__iframe { background: var(--color-background-primary) !important; }
.cke_chrome,
.cke_inner {
  border-color: var(--color-border-tertiary) !important;
  background: var(--color-background-primary) !important;
}
.cke_top,
.cke_bottom {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
}

/* ---------- D.11 Plugin: chosen / bootstrap-chosen ---------------------- */
.chosen-container .chosen-single,
.chosen-container-multi .chosen-choices {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  height: var(--control-min-height) !important;
  line-height: var(--select2-rendered-line-height) !important;
  color: var(--color-text-primary) !important;
}
.chosen-container .chosen-drop {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
}
.chosen-container .chosen-results li.highlighted {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}

/* ---------- D.12 iCheck plugin (custom checkboxes) ---------------------- */
.icheckbox_minimal,
.iradio_minimal,
.icheckbox_minimal-blue,
.iradio_minimal-blue,
.icheckbox_flat-blue,
.iradio_flat-blue,
.icheckbox_square-blue,
.iradio_square-blue {
  filter: none !important;
}

/* ---------- D.13 Bootstrap 4 .card / .custom-control / .custom-switch -- */
.card {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.card-header {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  font-weight: 600 !important;
  border-top-left-radius: var(--border-radius-lg) !important;
  border-top-right-radius: var(--border-radius-lg) !important;
}
.card-body  { color: var(--color-text-primary) !important; }
.card-footer {
  background: var(--color-background-secondary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
}
.custom-control-label::before {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
}
.custom-switch .custom-control-label::before { border-radius: 999px !important; }

/* ---------- D.14 Scrollbar styling -------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
  border-radius: 999px;
  border: 2px solid var(--color-background-secondary);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}
* { scrollbar-color: var(--color-border-secondary) var(--color-background-secondary); scrollbar-width: thin; }

/* ---------- D.15 AdminLTE error pages (404 / 500) ----------------------- */
.error-page {
  margin: 40px auto !important;
  max-width: 720px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}
.error-page > .headline {
  color: var(--accent-blue) !important;
  font-weight: 700 !important;
  font-size: 80px !important;
}
.error-page > .error-content > h3 {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}
.error-page > .error-content p { color: var(--color-text-secondary) !important; }

/* ---------- D.16 Preloader / loading overlay --------------------------- */
.preloader,
.loading-overlay,
.overlay {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: inherit !important;
}
html.dark-mode .preloader,
html.dark-mode .loading-overlay,
html.dark-mode .overlay {
  background: rgba(15, 23, 42, 0.65) !important;
}
.overlay > .fa,
.overlay > i { color: var(--accent-blue) !important; }

/* ---------- D.17 Notification badge dots over icons --------------------- */
.notification-badge,
.label-pill,
.badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--accent-red) !important;
  color: #fff !important;
}

/* ---------- D.18 Form layout helpers ----------------------------------- */
.form-horizontal .control-label {
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  padding-top: 7px !important;
}
.form-inline .form-control { min-height: 32px !important; }

/* ---------- D.19 Bootstrap-slider --------------------------------------- */
.slider .slider-track {
  background: var(--color-background-secondary) !important;
}
.slider .slider-selection {
  background: var(--accent-blue) !important;
}
.slider .slider-handle {
  background: var(--color-background-primary) !important;
  border: 2px solid var(--accent-blue) !important;
}

/* ---------- D.20 Sortable / drag-and-drop placeholders ------------------ */
.sortable-ghost,
.ui-sortable-placeholder {
  background: var(--color-background-info) !important;
  border: 1px dashed var(--accent-blue) !important;
  opacity: 0.7 !important;
}
.sortable-chosen { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important; }

/* ---------- D.21 Tabs: ribbon / step indicator already covered, add .nav-justified ----- */
.nav-justified > li > a,
.nav-tabs.nav-justified > li > a {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-secondary) !important;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--accent-blue) !important;
  background: var(--color-background-primary) !important;
}

/* ---------- D.22 Receipt / invoice print preview shells ----------------- */
.print-area,
.invoice-print,
#receipt_section {
  background: #fff !important;
  color: black !important;
  font-family: var(--font-sans) !important;
}

/* ---------- D.23 Bootstrap-fileinput plugin ----------------------------- */
.file-input .file-caption,
.file-input .file-caption-name,
.file-input .file-input-new .input-group {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}
.file-input .btn-file,
.file-input .fileinput-remove,
.file-input .fileinput-upload {
  border-radius: var(--border-radius-md) !important;
}

/* ---------- D.24 Select2 search dropdown z-index in modals -------------- */
.select2-container--open { z-index: 99999 !important; }

/* ---------- D.25 Skeleton / shimmer placeholders ----------------------- */
.skeleton,
.skeleton-line,
.placeholder-glow .placeholder {
  background: linear-gradient(
    90deg,
    var(--color-background-secondary) 0%,
    color-mix(in srgb, var(--color-background-secondary) 60%, var(--color-background-primary) 40%) 50%,
    var(--color-background-secondary) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: theme-skeleton-shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--border-radius-sm) !important;
  color: transparent !important;
}
@keyframes theme-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- D.26 Empty state placeholders ------------------------------ */
.empty-state,
.no-data,
.dataTables_empty {
  text-align: center !important;
  color: var(--color-text-tertiary) !important;
  padding: 32px 16px !important;
  font-size: 13px !important;
}

/* ---------- D.27 Bootstrap-3 .well already done - add .embed-responsive - */
.embed-responsive {
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
}

/* ---------- D.28 AdminLTE box-comments / box-comment ------------------- */
.box-comments {
  background: var(--color-background-secondary) !important;
  padding: 12px !important;
}
.box-comments .box-comment {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}
.box-comments .username { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.box-comments .text-muted { color: var(--color-text-tertiary) !important; }

/* ---------- D.29 AdminLTE chart legend / progress-description ---------- */
.progress-description,
.description-block .description-text { color: var(--color-text-secondary) !important; }
.description-block > .description-header {
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
}

/* ---------- D.30 AdminLTE skin-* navbar resets (kill old gradients) ---- */
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-black .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-yellow .main-header .navbar,
.skin-red .main-header .navbar,
.skin-green .main-header .navbar {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.skin-blue .main-header .logo,
.skin-black .main-header .logo,
.skin-purple .main-header .logo,
.skin-yellow .main-header .logo,
.skin-red .main-header .logo,
.skin-green .main-header .logo {
  background: var(--color-background-primary) !important;
  color: var(--accent-blue) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.skin-blue .sidebar-menu > li.active > a,
.skin-black .sidebar-menu > li.active > a,
.skin-purple .sidebar-menu > li.active > a,
.skin-yellow .sidebar-menu > li.active > a,
.skin-red .sidebar-menu > li.active > a,
.skin-green .sidebar-menu > li.active > a {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-left: 3px solid var(--accent-blue) !important;
}

/* ---------- D.31 Image cropper / preview ------------------------------- */
.cropper-view-box,
.cropper-face {
  outline-color: var(--accent-blue) !important;
}
.image-preview,
.image-thumb {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-secondary) !important;
}

/* ---------- D.32 Toolbar / action-bar utility shells ------------------- */
.toolbar,
.actions-bar,
.btn-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* ---------- D.33 Dark-mode token re-bind for all of Part D ------------- */
html.dark-mode .panel,
html.dark-mode .card,
html.dark-mode .popover,
html.dark-mode .note-editor.note-frame,
html.dark-mode .colorpicker,
html.dark-mode .file-input .file-caption,
html.dark-mode .file-input .file-caption-name,
html.dark-mode .chosen-container .chosen-single,
html.dark-mode .chosen-container .chosen-drop,
html.dark-mode .chosen-container-multi .chosen-choices,
html.dark-mode .image-preview,
html.dark-mode .image-thumb {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}
html.dark-mode .panel-heading,
html.dark-mode .card-header,
html.dark-mode .card-footer,
html.dark-mode .panel-footer,
html.dark-mode .popover-title,
html.dark-mode .popover-header,
html.dark-mode .note-editor .note-toolbar,
html.dark-mode .note-editor .note-statusbar,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .tox .tox-statusbar,
html.dark-mode .cke_top,
html.dark-mode .cke_bottom,
html.dark-mode .box-comments,
html.dark-mode .attachment-block {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}

/* =========================================================================
   PART E — Fifth pass: targeted fixes for reported UI issues
   ========================================================================= */

/* ---------- E.1 Toolbar `.filter` row with `.new-user` buttons ----------- */
/* Used on Support Tickets, Departments, Tenant DB Tickets headers, and on
   every page that ships a `.overview-filter` page header. The blade markup
   across the codebase is wildly inconsistent — some buttons have
   `.btn-primary`, some `.btn-success`, some have only `.btn-block`, some
   are bare anchors with inline `style="color:#333"`, some include
   `btn-sm`/`btn-lg` modifiers.  These rules normalise EVERY direct
   button/anchor child of `.filter` and `.overview-filter .new-user` into
   a uniform pill button, while preserving the three meaningful variants:
       1. Primary CTA       (.btn-primary, .add-user-modal-btn)  → solid dark
       2. Success action    (.btn-success)                       → solid green
       3. Neutral / utility (.btn-default, bare anchor)          → outlined
   All sizing comes from the global --control-* tokens so the slider drives
   header buttons too. */
.filter {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.filter .new-user {
  min-width: 0 !important;
  display: inline-flex !important;
}

/* ---- The unified pill: applied to anchors AND buttons regardless of any
        Bootstrap size modifier they happen to ship with --------------------- */
.filter .new-user > a,
.filter .new-user > button,
.overview-filter .new-user > a,
.overview-filter .new-user > button,
.overview-filter > .filter > a,
.overview-filter > .filter > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: 0.5px solid transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Neutralise any `btn-block` / `btn-sm` / `btn-lg` that the blade slipped
   in — they would otherwise re-inject odd widths or heights. */
.filter .new-user > .btn.btn-block,
.overview-filter .new-user > .btn.btn-block {
  display: inline-flex !important;
  width: auto !important;
}
.filter .new-user > .btn.btn-sm,
.filter .new-user > .btn.btn-lg,
.overview-filter .new-user > .btn.btn-sm,
.overview-filter .new-user > .btn.btn-lg,
.overview-filter > .filter > .btn-sm,
.overview-filter > .filter > .btn-lg {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  font-size: var(--body-font-size) !important;
}

/* ---- Variant 1: Primary CTA — solid dark pill --------------------------- */
.filter .new-user > .btn-primary,
.filter .new-user > a.btn-primary,
.filter .new-user > button.btn-primary,
.overview-filter .new-user > .btn-primary,
.overview-filter .new-user > a.btn-primary,
.overview-filter .new-user > button.btn-primary,
.overview-filter > .filter > .btn-primary,
.overview-filter .new-user > .add-user-modal-btn,
.overview-filter > .filter > .add-user-modal-btn {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.filter .new-user > .btn-primary:hover,
.overview-filter .new-user > .btn-primary:hover,
.overview-filter > .filter > .btn-primary:hover,
.overview-filter .new-user > .add-user-modal-btn:hover,
.overview-filter > .filter > .add-user-modal-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}
.filter .new-user > .btn-primary > i,
.overview-filter .new-user > .btn-primary > i,
.overview-filter > .filter > .btn-primary > i,
.overview-filter .new-user > .add-user-modal-btn > i,
.overview-filter > .filter > .add-user-modal-btn > i {
  color: inherit !important;
  font-size: 0.95em !important;
}

/* ---- Variant 2: Success action — solid green ---------------------------- */
.filter .new-user > .btn-success,
.overview-filter .new-user > .btn-success,
.overview-filter > .filter > .btn-success {
  background: var(--accent-green, #16a34a) !important;
  color: #fff !important;
  border-color: var(--accent-green, #16a34a) !important;
}
.filter .new-user > .btn-success:hover,
.overview-filter .new-user > .btn-success:hover,
.overview-filter > .filter > .btn-success:hover {
  background: color-mix(in srgb, var(--accent-green, #16a34a) 88%, #000 12%) !important;
  border-color: color-mix(in srgb, var(--accent-green, #16a34a) 88%, #000 12%) !important;
}

/* ---- Variant 3: Neutral / outlined — used for .btn-default + bare links - */
.filter .new-user > .btn-default,
.filter .new-user > a.btn-default,
.filter .new-user > button.btn-default,
.overview-filter .new-user > .btn-default,
.overview-filter > .filter > .btn-default,
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn) {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.filter .new-user > .btn-default:hover,
.overview-filter .new-user > .btn-default:hover,
.overview-filter > .filter > .btn-default:hover,
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn):hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}

/* Bare anchors in the filter row (e.g. "Print Labels" — no .btn class, no
   .new-user wrapper, sometimes inline `style="color:#333"`).  Promote them
   to a neutral outlined pill matching the rest of the row. */
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn) {
  /* Strip inline `style="color:#333"` by overriding via attr-substring */
}
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn)[style*="color"] {
  color: var(--color-text-primary) !important;
}
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn) > img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.75 !important;
}
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn):hover > img {
  opacity: 1 !important;
}
html.dark-mode .overview-filter > .filter > a:not(.btn):not(.filter-modal-btn) > img {
  filter: invert(1) brightness(1.2);
  opacity: 0.85 !important;
}

/* ---- Filter funnel icon button ----------------------------------------- */
.filter-modal-btn,
.filter > .filter-modal-btn,
.overview-filter .filter > .filter-modal-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--control-height) !important;
  height: var(--control-height) !important;
  min-width: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-secondary) !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.filter-modal-btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
}
.filter-modal-btn img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.75;
  filter: none;
}
html.dark-mode .filter-modal-btn img {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
}

/* ---------- E.2 `.storys-container` page sub-nav (Support Tickets etc.) - */
/* Re-skin the legacy storys-container as a clean tab strip.               */
.storys-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
  background: transparent !important;
  width: 100% !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}
.storys-container .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px 10px !important;
  margin: 0 8px 0 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  height: auto !important;
  line-height: 1.4 !important;
  background: transparent !important;
}
.storys-container .navbar-brand i,
.storys-container .navbar-brand .fa {
  color: var(--accent-blue) !important;
  font-size: 16px !important;
}
.storys-container .sub-menu-item {
  padding: 4px 14px 4px !important;
  margin: 0 !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  border-bottom: 2px solid transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: color .15s ease, border-color .15s ease;
}
.storys-container .sub-menu-item:hover {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--color-border-primary) !important;
}
.storys-container .sub-menu-item.active {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--accent-blue) !important;
  font-weight: 600 !important;
  background: transparent !important;
}
.storys-container::-webkit-scrollbar { height: 4px !important; }
.storys-container::-webkit-scrollbar-thumb { background: var(--color-border-secondary) !important; border-radius: 999px !important; }
.storys-container::-webkit-scrollbar-track { background: transparent !important; }

/* ---------- E.3 `.overview-filter` — center-align the Add / Filter row -- */
/* Center the Add button and its sibling filter icon inline with the title.
   Sizing now flows from the global control-height tokens (Part E.1 above)
   so this block only handles alignment / wrapper geometry, not button
   metrics. */
.overview-filter {
  align-items: center !important;
}
.overview-filter > div[style*="display: flex"],
.overview-filter > .actions,
.overview-filter > .right {
  align-items: center !important;
  justify-content: flex-end !important;
}
.overview-filter .new-user {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* The bare-`.filter` wrapper around the funnel icon inside overview-filter */
.overview-filter .filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ---------- E.4 DataTables column-visibility dropdown text color -------- */
/* `.dt-button-collection` items render as <a> inside <li> — the parent
   inherits dark text from the legacy theme but on the new tinted dropdown
   the anchor text becomes invisible. Force readable color.                 */
.dt-button-collection {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  padding: 6px !important;
  min-width: 200px !important;
}
.dt-button-collection > .dt-button,
.dt-button-collection > li.dt-button,
.dt-button-collection > li {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 1px 0 !important;
  border-radius: var(--border-radius-sm) !important;
  list-style: none !important;
}
.dt-button-collection > .dt-button > a,
.dt-button-collection > li.dt-button > a,
.dt-button-collection > li > a {
  display: block !important;
  padding: 6px 12px !important;
  color: var(--color-text-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: var(--border-radius-sm) !important;
  background: transparent !important;
  cursor: pointer;
}
.dt-button-collection > .dt-button:hover,
.dt-button-collection > .dt-button:hover > a,
.dt-button-collection > li.dt-button:hover > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
/* Active toggle (column currently visible) */
.dt-button-collection > .dt-button.active,
.dt-button-collection > li.dt-button.active {
  background: var(--color-background-info) !important;
}
.dt-button-collection > .dt-button.active > a,
.dt-button-collection > li.dt-button.active > a {
  color: var(--color-text-info) !important;
  font-weight: 600 !important;
}
.dt-button-collection > .dt-button.active > a::before,
.dt-button-collection > li.dt-button.active > a::before {
  content: "\2713";
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  color: var(--color-text-info);
  font-weight: 700;
}
html.dark-mode .dt-button-collection > .dt-button > a,
html.dark-mode .dt-button-collection > li.dt-button > a {
  color: var(--color-text-primary) !important;
}

/* The "Column visibility" toolbar button itself */
.dt-buttons .dt-button,
.dt-buttons button.dt-button {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
  box-shadow: none !important;
}
.dt-buttons .dt-button:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
}

/* ---------- E.5 Pagination double-border fix ---------------------------- */
/* `.pagination > li > a` already had a border; `.paginate_button` on the
   parent <li> added a SECOND border ring. Remove the outer one and let the
   inner anchor own the border.                                             */
.pagination > li.paginate_button,
.pagination > li.paginate_button.previous,
.pagination > li.paginate_button.next,
.pagination > li.paginate_button.first,
.pagination > li.paginate_button.last,
.pagination > li.paginate_button.disabled,
.pagination > li.paginate_button.active {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: var(--border-radius-md) !important;
}
.pagination > li.paginate_button > a,
.pagination > li.paginate_button > span {
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 11px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  display: inline-block !important;
  text-decoration: none !important;
  margin: 0 !important;
  min-width: 32px !important;
  text-align: center !important;
}
.pagination > li.paginate_button > a:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}
.pagination > li.paginate_button.active > a,
.pagination > li.paginate_button.active > span,
.pagination > li.paginate_button.active > a:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.pagination > li.paginate_button.disabled > a,
.pagination > li.paginate_button.disabled > span,
.pagination > li.paginate_button.disabled > a:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-tertiary) !important;
  border-color: var(--color-border-tertiary) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* And the same fix for any plain Bootstrap `.pagination` with non-DataTable items */
.pagination > li:not(.paginate_button) {
  background: transparent !important;
  border: 0 !important;
}
.pagination > li:not(.paginate_button) > a,
.pagination > li:not(.paginate_button) > span {
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  margin: 0 2px !important;
}
.pagination { gap: 0 !important; }

/* ---------- E.6 .input-group seam — addon + control merge cleanly ------- */
/* The mockup's rounded radii were leaving a visible gap between the addon
   icon and the form control / select2. Reset radii on adjacent edges and
   collapse the seam border so the group reads as a single pill.            */
.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
}
.input-group > .input-group-addon,
.input-group > .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--button-padding-x) !important;
  min-width: var(--control-min-height) !important;
  height: auto !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: var(--body-font-size) !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
/* leftmost addon: round only the left edge, drop the right border */
.input-group > .input-group-addon:first-child,
.input-group > .input-group-text:first-child {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}
/* rightmost addon: round only the right edge, drop the left border */
.input-group > .input-group-addon:last-child,
.input-group > .input-group-text:last-child {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}
/* control / select / textarea sandwiched between addons */
.input-group > .form-control,
.input-group > input,
.input-group > select,
.input-group > textarea {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.input-group > .form-control:first-child,
.input-group > input:first-child,
.input-group > select:first-child,
.input-group > textarea:first-child {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
}
.input-group > .form-control:last-child,
.input-group > input:last-child,
.input-group > select:last-child,
.input-group > textarea:last-child {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
}

/* When the visible control is a Select2 widget that lives AFTER the real
   <select> and we want it to merge with a leading addon ----------------- */
.input-group > .select2-container { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container .select2-selection--multiple {
  border-radius: 0 !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
}
.input-group > .input-group-addon:first-child + select.form-control,
.input-group > .input-group-addon:first-child + select,
.input-group > .input-group-addon:first-child + .select2-container .select2-selection {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}
.input-group > .select2-container:last-child .select2-selection,
.input-group > .select2-container:last-of-type .select2-selection {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
}
/* Vertically center the Select2 single-line text within control height */
.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: var(--select2-rendered-line-height) !important;
  padding-left: var(--button-padding-x) !important;
  color: var(--color-text-primary) !important;
}
.input-group > .select2-container .select2-selection--single .select2-selection__arrow {
  height: var(--control-min-height) !important;
}

/* Focus state lifts the whole group */
.input-group:focus-within > .input-group-addon,
.input-group:focus-within > .input-group-text,
.input-group:focus-within > .form-control,
.input-group:focus-within > input,
.input-group:focus-within > select,
.input-group:focus-within > .select2-container .select2-selection {
  border-color: var(--color-text-info) !important;
}
.input-group:focus-within > .form-control,
.input-group:focus-within > input,
.input-group:focus-within > select {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  position: relative;
  z-index: 2;
}

/* =========================================================================
   PART F — Sixth pass: layout/calendar/dropdown-width/tab refinements
   ========================================================================= */

/* ---------- F.1 .main-container -- restore legacy 2.063rem 3.563rem margin */
/* Earlier we reset margin/padding to 0; per latest spec, restore the
   original AdminLTE-era margin so it inherits naturally from the legacy
   sheet. We only neutralise our own previous overrides here.                */
main .main-container,
main > .main-container,
.main-container {
  margin: 2.063rem 3.563rem !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  main .main-container,
  main > .main-container,
  .main-container {
    margin: 1rem !important;
  }
}

/* ---------- F.2 daterangepicker `.drp-calendar.left` responsive -------- */
/* Bootstrap-daterangepicker renders two calendar columns side-by-side; on
   narrow viewports they overflow the picker. Stack them and let the
   picker shrink + scroll cleanly.                                         */
.daterangepicker {
  max-width: 700px !important;
  width: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding: 8px !important;
}
.daterangepicker .ranges {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  border-right: 0.5px solid var(--color-border-tertiary) !important;
}
.daterangepicker .drp-calendar {
  flex: 1 1 240px !important;
  max-width: 100% !important;
  padding: 6px !important;
  margin: 0 !important;
}
.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
  border: none !important;
  margin: 0 !important;
}
.daterangepicker .drp-calendar.left {
  border-right: 0.5px solid var(--color-border-tertiary) !important;
}
.daterangepicker .calendar-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 1px !important;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.daterangepicker .drp-buttons {
  flex: 1 0 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding-top: 8px !important;
}

/* Narrow-viewport stacking: ranges row above the calendars, calendars
   stack vertically                                                        */
@media (max-width: 720px) {
  .daterangepicker { padding: 6px !important; }
  .daterangepicker .ranges {
    border-right: 0 !important;
    border-bottom: 0.5px solid var(--color-border-tertiary) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .daterangepicker .ranges ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .daterangepicker .ranges li {
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
  }
  .daterangepicker .drp-calendar.left {
    border-right: 0 !important;
    border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  }
  .daterangepicker .drp-calendar { flex: 1 1 100% !important; }
}

/* ---------- F.3 .dt-button-collection.dropdown-menu -- size on desktop - */
/* On wide screens DataTables column-visibility menus stretched too wide.
   Constrain width and allow vertical scroll if the column count is high. */
.dt-button-collection.dropdown-menu,
.dt-button-collection {
  min-width: 180px !important;
  max-width: 240px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
@media (min-width: 1200px) {
  .dt-button-collection.dropdown-menu,
  .dt-button-collection {
    max-width: 220px !important;
    width: auto !important;
  }
}
.dt-button-collection > .dt-button > a,
.dt-button-collection > li.dt-button > a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---------- F.4 .nav-tabs — mockup-style horizontal scroll tab strip --- */
/* On project detail (and similar pages with many tabs) the nav-tabs row
   wraps onto multiple lines and looks heavy. The mockup uses a single-row
   horizontal-scroll strip with an underline accent. Apply globally to
   `.nav-tabs` so it matches the mockup tabs-bar pattern.                  */
.nav-tabs {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  margin-bottom: 18px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
  gap: 0 !important;
  position: relative;
}
.nav-tabs::-webkit-scrollbar { height: 3px !important; }
.nav-tabs::-webkit-scrollbar-thumb { background: var(--color-border-secondary) !important; border-radius: 999px !important; }
.nav-tabs::-webkit-scrollbar-track { background: transparent !important; }

.nav-tabs > li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  float: none !important;
  border: 0 !important;
  background: transparent !important;
}
.nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 9px 13px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border-bottom: 2px solid transparent !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease;
}
.nav-tabs > li > a > i,
.nav-tabs > li > a > .fa,
.nav-tabs > li > a > .fas,
.nav-tabs > li > a > .far {
  font-size: 12.5px !important;
  width: auto !important;
  margin-right: 0 !important;
  color: inherit !important;
  opacity: 0.85;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  color: var(--color-text-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: var(--color-border-primary) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--color-text-primary) !important;
}
.nav-tabs > li.active > a > i,
.nav-tabs > li.active > a > .fa,
.nav-tabs > li.active > a > .fas {
  color: var(--accent-blue) !important;
  opacity: 1;
}

/* Edge fade hint that more tabs are scrollable */
.nav-tabs {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12px,
    #000 calc(100% - 24px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}

/* When .nav-tabs sits inside `.overview-filter` (project detail header),
   keep its own row and bottom-align it nicely with the title              */
.overview-filter > .nav-tabs {
  margin-top: 12px !important;
  width: 100% !important;
  flex-basis: 100% !important;
  order: 99;
}

/* On very narrow screens, give the icons priority and shrink padding     */
@media (max-width: 540px) {
  .nav-tabs > li > a {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
}

/* =========================================================================
   PART G — Seventh pass: input-group-btn seamless merge
   ========================================================================= */

/* ---------- G.1 .input-group-btn -- merge button seamlessly ------------- */
/* In Bootstrap 3, the trailing `.input-group-btn` (e.g. quick-add `+` btn
   next to a Select2 unit dropdown) sits OUTSIDE the flex flow and renders
   as `display: table-cell`. Our flex-based seam logic in Part E missed it,
   leaving a visible gap and mismatched height/radius. Bring it into the
   flex chain and align borders/heights with the addon pattern.            */
.input-group > .input-group-btn,
.input-group > span.input-group-btn,
.input-group .input-group-btn {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  position: relative;
  white-space: nowrap !important;
}
.input-group > .input-group-btn > .btn,
.input-group .input-group-btn > .btn,
.input-group > .input-group-btn > button,
.input-group .input-group-btn > button,
.input-group > .input-group-btn > a.btn,
.input-group .input-group-btn > a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
  transition: background-color .15s ease, border-color .15s ease;
}
.input-group > .input-group-btn > .btn:hover,
.input-group .input-group-btn > .btn:hover {
  background: color-mix(in srgb, var(--color-background-secondary) 70%, var(--color-text-primary) 10%) !important;
  border-color: var(--color-border-primary) !important;
  z-index: 3;
}
.input-group > .input-group-btn > .btn:focus,
.input-group .input-group-btn > .btn:focus {
  outline: none !important;
  border-color: var(--color-text-info) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  z-index: 4;
}

/* Leading button group: round only the LEFT edge, drop right border */
.input-group > .input-group-btn:first-child > .btn,
.input-group .input-group-btn:first-child > .btn {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

/* Trailing button group: round only the RIGHT edge, drop left border */
.input-group > .input-group-btn:last-child > .btn,
.input-group .input-group-btn:last-child > .btn {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}

/* When the visible Select2 widget sits BEFORE a trailing input-group-btn,
   chop off the Select2's right radius so it butts cleanly against the btn */
.input-group > .select2-container:has(+ .input-group-btn) .select2-selection,
.input-group > .select2-container + .input-group-btn ~ * {
  /* nothing here — selector pair below handles the visual */
}
.input-group > .select2-container:nth-last-child(2) .select2-selection--single,
.input-group > .select2-container:nth-last-child(2) .select2-selection--multiple {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

/* Same trick for a real <select> / <input> sitting right before the btn */
.input-group > .form-control:nth-last-child(2),
.input-group > input:nth-last-child(2),
.input-group > select:nth-last-child(2),
.input-group > textarea:nth-last-child(2) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* And the mirror — when input-group-btn is FIRST and a control follows */
.input-group > .input-group-btn:first-child + .form-control,
.input-group > .input-group-btn:first-child + input,
.input-group > .input-group-btn:first-child + select,
.input-group > .input-group-btn:first-child + textarea,
.input-group > .input-group-btn:first-child + .select2-container .select2-selection {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Specific "btn-default bg-white btn-flat" quick-add button look ---------- */
/* The legacy markup uses bg-white + btn-flat to make this look "merged"
   with white. With the new theme it should look like an attached secondary
   button — match the addon visual instead.                                */
.input-group .input-group-btn > .btn.btn-default.bg-white,
.input-group .input-group-btn > .btn.btn-flat.bg-white,
.input-group .input-group-btn > .btn.btn-default {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.input-group .input-group-btn > .btn .text-primary,
.input-group .input-group-btn > .btn i.text-primary {
  color: var(--accent-blue) !important;
}

/* When clicking the trailing button is a quick-add (+ icon), bump z-index
   so its hover ring isn't clipped by the neighbouring select2 border     */
.input-group > .input-group-btn:hover { z-index: 3; }

/* ---------- G.1.b Normalise icon sizing inside input-group buttons ------
   Some markup uses inline-styled FA icons (`<i class="fa fa-plus-circle
   text-primary fa-lg">`) while others embed raw 24x24 SVGs (icon-tabler
   set used by the pay_sale_due button). Without size constraints the SVG
   pushes its parent button taller than the FA-icon sibling, breaking
   visual symmetry between two adjacent `.input-group-btn` cells.

   Force every icon child to a uniform 18x18 box and override inline
   border longhand from legacy markup so both buttons render at the same
   32px height the parent enforces.                                       */
.input-group .input-group-btn > .btn > svg,
.input-group .input-group-btn > .btn > .icon,
.input-group .input-group-btn > .btn > i.fa,
.input-group .input-group-btn > .btn > i.fas,
.input-group .input-group-btn > .btn > i.far,
.input-group .input-group-btn > .btn > i.icon-tabler {
  width: 18px !important;
  height: 18px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Defeat inline border longhand declarations on legacy `.add_new_customer`
   and similar quick-add buttons. Inline styles use individual edge longhand
   (`border-left:0; border-right:1px solid #d2d6de;...`) which would
   normally tie with our shorthand. Re-declare each edge as longhand
   !important to win cleanly.                                              */
.input-group .input-group-btn > .btn[style*="border"],
.input-group .input-group-btn > .btn.add_new_customer,
.input-group .input-group-btn > .btn.pay_sale_due {
  border-top: 0.5px solid var(--color-border-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-secondary) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-sizing: border-box !important;
}
.input-group .input-group-btn:last-child > .btn[style*="border"],
.input-group .input-group-btn:last-child > .btn.add_new_customer,
.input-group .input-group-btn:last-child > .btn.pay_sale_due {
  border-right: 0.5px solid var(--color-border-secondary) !important;
}

/* Dark-mode parity */
html.dark-mode .input-group > .input-group-btn > .btn,
html.dark-mode .input-group .input-group-btn > .btn,
html.dark-mode .input-group .input-group-btn > .btn.btn-default.bg-white {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
}

/* =========================================================================
   PART H — Eighth pass: settings sidebar list-group icons + active state
   ========================================================================= */

/* ---------- H.1 .pos-tab-menu .list-group (Settings sidebar) ----------- */
/* The superadmin / business settings page uses a vertical `.list-group` of
   `.list-group-item` anchors as a side-tab nav. Each item has a leading
   `.secondary-color-icon` <i>. Match the new mockup language: contained
   sticky panel, icon chip, clean active state with accent left bar.       */
.pos-tab-menu {
  padding: 0 !important;
}
.pos-tab-menu .list-group {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
}
.pos-tab-menu .list-group .list-group-item,
.pos-tab-menu .list-group > a.list-group-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
  cursor: pointer;
}
.pos-tab-menu .list-group .list-group-item:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.pos-tab-menu .list-group .list-group-item.active,
.pos-tab-menu .list-group .list-group-item.active:hover,
.pos-tab-menu .list-group .list-group-item.active:focus {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  font-weight: 600 !important;
  border: 0 !important;
}
/* Accent vertical bar on the left of the active item ------------------- */
.pos-tab-menu .list-group .list-group-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-blue);
}

/* ---------- H.2 .secondary-color-icon — settings nav icons ------------- */
/* Icons inside the settings list-group. They render as Font Awesome <i>
   elements with optional inline `style=""` and a legacy `secondary-color`
   class. Align them in a small icon chip and color them consistently.    */
.secondary-color-icon,
i.secondary-color-icon,
.list-group-item > .secondary-color-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 13px !important;
  color: var(--color-text-tertiary) !important;
  background: transparent !important;
  border-radius: var(--border-radius-sm) !important;
  flex: 0 0 22px !important;
  text-align: center !important;
  line-height: 1 !important;
  transition: color .15s ease, background-color .15s ease;
}
/* Hover lifts the icon to primary text color */
.list-group-item:hover > .secondary-color-icon,
.pos-tab-menu .list-group .list-group-item:hover > .secondary-color-icon {
  color: var(--color-text-primary) !important;
}
/* Active item: icon adopts the info-blue accent and a soft tinted chip   */
.list-group-item.active > .secondary-color-icon,
.pos-tab-menu .list-group .list-group-item.active > .secondary-color-icon,
.list-group-item.active > i.secondary-color-icon {
  color: var(--accent-blue) !important;
  background: color-mix(in srgb, var(--accent-blue) 14%, transparent) !important;
}
/* Override the inline `secondary-color` legacy class (forces a brand
   color from the legacy theme that no longer maps cleanly).               */
.list-group-item > .secondary-color-icon.secondary-color,
.list-group-item > i.secondary-color {
  color: var(--color-text-tertiary) !important;
}
.list-group-item.active > .secondary-color-icon.secondary-color,
.list-group-item.active > i.secondary-color {
  color: var(--accent-blue) !important;
}

/* ---------- H.3 Sticky behaviour on desktop ---------------------------- */
@media (min-width: 992px) {
  .pos-tab-menu {
    position: sticky;
    top: 64px;
    align-self: flex-start;
  }
}

/* ---------- H.4 Mobile/tablet collapse (≤ md) -------------------------- */
@media (max-width: 991px) {
  /* Force the column to span the full row width — Bootstrap's `col-sm-2`
     keeps it at 16.6% even on tablet, which collapsed our horizontal
     scroll strip into a tiny corner. Promote it to full width so the
     horizontal nav-strip renders edge-to-edge.                              */
  .pos-tab-menu,
  .col-sm-2.pos-tab-menu,
  .col-md-2.pos-tab-menu,
  .col-lg-2.pos-tab-menu {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 14px !important;
  }
  .pos-tab-menu .list-group {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: var(--border-radius-md) !important;
    width: 100% !important;
  }
  .pos-tab-menu .list-group .list-group-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  /* Drop the active accent bar entirely on small screens — it visually
     conflicts with the horizontal layout.                                  */
  .pos-tab-menu .list-group .list-group-item.active::before {
    display: none !important;
  }
  /* Use bottom underline as the active indicator instead of the bar       */
  .pos-tab-menu .list-group .list-group-item.active {
    box-shadow: inset 0 -2px 0 0 var(--accent-blue) !important;
    border-radius: var(--border-radius-md) !important;
  }
}

/* ---------- H.5 Dark-mode parity --------------------------------------- */
html.dark-mode .pos-tab-menu .list-group {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
}
html.dark-mode .pos-tab-menu .list-group .list-group-item {
  color: var(--color-text-secondary) !important;
}
html.dark-mode .pos-tab-menu .list-group .list-group-item:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
html.dark-mode .pos-tab-menu .list-group .list-group-item.active {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}

/* =========================================================================
   PART I — Ninth pass: centered submit buttons, mobile POS pill, language-btn
   ========================================================================= */

/* ---------- I.1 .btn-big / .save-btn / centered submit buttons --------- */
/* Footer-style "Update Settings", "Save", "Submit" buttons sit inside a
   `.text-center` column. Make them prominent, center their inner content,
   and give them comfortable touch height.                                  */
.btn.btn-big,
.btn-big,
button.btn-big,
.save-btn,
.btn.save-btn,
button.save-btn,
.text-center > .btn,
.text-center > button.btn,
.text-center .btn-primary.btn-big,
.row > .col-sm-12.text-center > .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  min-width: 200px !important;
  min-height: 40px !important;
  padding: 9px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: var(--border-radius-md) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* Center the icon vertically next to the label */
.btn.btn-big > i,
.save-btn > i,
.text-center > .btn > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* When .btn-big.btn-primary, lift it as the page CTA (solid dark) */
.btn.btn-big.btn-primary,
.save-btn.btn-primary,
button.save-btn.btn-primary {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-text-primary) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
.btn.btn-big.btn-primary:hover,
.save-btn.btn-primary:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
}

/* On mobile, make the centered submit button full-width */
@media (max-width: 540px) {
  .text-center > .btn.btn-big,
  .text-center > .save-btn,
  .row > .col-sm-12.text-center > .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---------- I.2 .pos-mobile-button — sticky POS pill on small screens -- */
/* Legacy uses `var(--secondary-color)` which got remapped. Re-skin as a
   modern floating action pill with proper z-index, safe-area inset on
   notched devices, and an accent shadow.                                   */
.pos-mobile-button {
  position: fixed !important;
  right: 16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1040 !important;
  display: none;
}
@media (max-width: 768px) {
  .pos-mobile-button {
    display: block !important;
  }
}
.pos-mobile-button a,
.pos-mobile-button > a.pos {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  min-width: 56px !important;
  padding: 0 18px !important;
  background: var(--accent-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--accent-blue) 35%, transparent),
    0 2px 6px rgba(15, 23, 42, 0.18) !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pos-mobile-button a:hover,
.pos-mobile-button > a.pos:hover {
  background: color-mix(in srgb, var(--accent-blue) 92%, #000 8%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--accent-blue) 40%, transparent),
    0 3px 8px rgba(15, 23, 42, 0.22) !important;
}
.pos-mobile-button a:active,
.pos-mobile-button > a.pos:active {
  transform: translateY(0);
}
.pos-mobile-button a svg,
.pos-mobile-button a > svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
}
.pos-mobile-button a span {
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Very narrow phones: collapse to icon-only circle */
@media (max-width: 380px) {
  .pos-mobile-button a,
  .pos-mobile-button > a.pos {
    min-width: 48px !important;
    width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .pos-mobile-button a span { display: none !important; }
}

/* ---------- I.3 .language-btn — render like .new-user CTA --------------- */
/* The Languages page uses a custom `.language-btn--primary` instead of
   `.new-user > a.btn-primary`. Visually unify it with the toolbar CTA
   pattern from Part E so the page header looks consistent.                */
.language-btn,
button.language-btn,
.filter > .language-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 var(--button-padding-x) !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.language-btn:hover,
button.language-btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}

/* Primary variant: solid dark pill (matches Part E `.new-user .btn-primary`) */
.language-btn.language-btn--primary,
button.language-btn.language-btn--primary,
.filter > .language-btn.language-btn--primary {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.language-btn.language-btn--primary:hover,
button.language-btn.language-btn--primary:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}

/* Secondary / ghost variants if they exist on other language pages       */
.language-btn.language-btn--secondary,
.language-btn.language-btn--ghost {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.language-btn.language-btn--danger {
  background: var(--color-background-error) !important;
  color: var(--color-text-error) !important;
  border-color: transparent !important;
}

/* When .language-btn sits inside `.filter` flex row, behave like new-user */
.overview-filter > .filter > .language-btn,
.overview-filter > .filter > button.language-btn {
  margin: 0 !important;
}

/* =========================================================================
   PART J — Tenth pass: collapsible filter card pattern (translations etc.)
   ========================================================================= */

/* ---------- J.1 collapse-able language-filter-card ---------------------- */
/* On pages like Languages -> Translations, the filter card is now wrapped
   in a Bootstrap `.collapse` panel that toggles via the `.filter-modal-btn`
   funnel icon (matching the `/pos` and `/purchase` pages). Give the panel
   smooth animation, breathing room, and a clean closed state.             */
.panel-collapse.collapse:not(.in) {
  display: none;
}
.panel-collapse.collapse.in {
  display: block;
}
.panel-collapse.collapsing {
  position: relative;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* When `.language-filter-card` lives inside a collapsed panel-wrapper, give
   it consistent spacing whether the panel is open or closing.              */
.panel-collapse > .language-filter-card,
#collapseTranslationsFilter > .language-filter-card,
#collapseUntranslatedFilter > .language-filter-card,
#collapseProblemsFilter > .language-filter-card,
#collapseBusinessOverridesFilter > .language-filter-card,
#collapseFilter > .language-filter-card {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

/* The toggle button itself — match the rest of `.filter-modal-btn` styling
   already defined in Part E.1, but ensure the rotation cue when active.   */
.filter-modal-btn[aria-expanded="true"] {
  background: var(--color-background-info) !important;
  border-color: var(--color-text-info) !important;
}
.filter-modal-btn[aria-expanded="true"] img {
  opacity: 1 !important;
  filter: invert(34%) sepia(89%) saturate(1500%) hue-rotate(196deg) brightness(95%) contrast(95%);
}
html.dark-mode .filter-modal-btn[aria-expanded="true"] img {
  filter: brightness(1.5);
}

/* =========================================================================
   PART K — Eleventh pass: daterangepicker visibility + custom-range fix
   ========================================================================= */

/* ---------- K.1 Stop the picker from auto-opening on the dashboard ----- */
/* Earlier in Part F.2 we declared `.daterangepicker { display: flex !important }`
   which had a side-effect: it overrode the library's inline `display: none`
   used to hide the picker until a user focuses the input. That made the
   dashboard show the picker permanently on load. Restore correct behavior
   by re-asserting `display: none` when the library has hidden it.        */
.daterangepicker:not([style*="display: block"]):not([style*="display:block"]) {
  display: none !important;
}

/* When the library makes the picker visible (inline `display: block`),
   our flex layout from Part F.2 kicks in.                                 */
.daterangepicker[style*="display: block"],
.daterangepicker[style*="display:block"] {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* ---------- K.2 Custom Range — ensure both calendars become visible ---- */
/* When the user clicks `Custom Range`, the daterangepicker library adds
   `.show-calendar` to the root and removes inline `display: none` from
   each `.drp-calendar`. Our Part F.2 rules need to be permissive enough
   that the show/hide toggling actually takes effect.                      */

/* Default state: when picker is `show-ranges` only (no custom range yet),
   the library hides the calendar columns via inline `display: none`.
   Respect that.                                                            */
.daterangepicker .drp-calendar[style*="display: none"],
.daterangepicker .drp-calendar[style*="display:none"] {
  display: none !important;
}

/* When `Custom Range` is selected, the library either:
     a) removes inline display from .drp-calendar, or
     b) adds `.show-calendar` to the root .daterangepicker
   In both cases we want the columns visible and laid out as cards.        */
.daterangepicker.show-calendar .drp-calendar.left,
.daterangepicker.show-calendar .drp-calendar.right,
.daterangepicker .drp-calendar.left:not([style*="display: none"]):not([style*="display:none"]),
.daterangepicker .drp-calendar.right:not([style*="display: none"]):not([style*="display:none"]) {
  display: block !important;
  flex: 1 1 240px !important;
  min-width: 240px !important;
  padding: 6px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure the inner calendar table expands inside the flex column.        */
.daterangepicker.show-calendar .calendar-table,
.daterangepicker .drp-calendar:not([style*="display: none"]) .calendar-table {
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
}
.daterangepicker.show-calendar .calendar-table table,
.daterangepicker .drp-calendar:not([style*="display: none"]) .calendar-table table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
}

/* Hide the right calendar when in `single-date` mode (the library applies
   `.single` to the root in single-date pickers).                          */
.daterangepicker.single .drp-calendar.right {
  display: none !important;
}

/* ---------- K.3 `Custom Range` range item — keep it always clickable --- */
/* Make sure the Custom Range list-item isn't accidentally pointer-events
   blocked.                                                                 */
.daterangepicker .ranges li[data-range-key="Custom Range"] {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ---------- K.4 Picker position bump on narrow desktop ----------------- */
/* When the picker opens with `.show-ranges.opensright` and both calendars
   become visible, total width can exceed the viewport. Make sure the
   container scrolls horizontally rather than overflowing off-screen.     */
.daterangepicker.show-calendar.show-ranges {
  max-width: 700px !important;
  overflow-x: auto !important;
}
@media (max-width: 720px) {
  .daterangepicker.show-calendar.show-ranges {
    max-width: calc(100vw - 16px) !important;
  }
  .daterangepicker.show-calendar .drp-calendar.left,
  .daterangepicker.show-calendar .drp-calendar.right {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ---------- K.5 Calendar-time hidden by default (date-only pickers) ---- */
.daterangepicker .calendar-time[style*="display: none"],
.daterangepicker .calendar-time[style*="display:none"] {
  display: none !important;
}

/* =========================================================================
   PART L — Twelfth pass: .btn.btn-xs.btn-primary cascade fix + Subscribe center
   ========================================================================= */

/* ---------- L.1 .btn.btn-xs.btn-primary — beat app.css ---------------- */
/* `app.css` defines `.btn.btn-xs.btn-primary` with higher specificity than
   our base `.btn-primary` rule, forcing
       background: var(--primary-color) !important;
   which (after our token re-bind) renders almost-black, leaving text and
   icons invisible against the dark fill. Match the app.css selector
   exactly so we win on cascade order, then re-apply the token-aware
   primary look from Part A.                                              */
.btn.btn-xs.btn-primary,
.btn.btn-sm.btn-primary,
button.btn.btn-xs.btn-primary,
button.btn.btn-sm.btn-primary,
a.btn.btn-xs.btn-primary,
a.btn.btn-sm.btn-primary {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
  height: auto !important;
  width: auto !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  border-radius: var(--border-radius-md) !important;
}
.btn.btn-xs.btn-primary:hover,
.btn.btn-sm.btn-primary:hover,
button.btn.btn-xs.btn-primary:hover,
button.btn.btn-sm.btn-primary:hover,
a.btn.btn-xs.btn-primary:hover,
a.btn.btn-sm.btn-primary:hover {
  background: color-mix(in srgb, var(--color-background-info) 70%, var(--color-text-info) 15%) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-primary > i,
.btn.btn-sm.btn-primary > i,
.btn.btn-xs.btn-primary .glyphicon,
.btn.btn-sm.btn-primary .glyphicon {
  color: inherit !important;
}

/* Same fix for `.btn.btn-xs.btn-info` / `.btn-success` / `.btn-warning` /
   `.btn-danger` so the entire small-button family stays consistent.      */
.btn.btn-xs.btn-info,
.btn.btn-sm.btn-info {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-success,
.btn.btn-sm.btn-success {
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-warning,
.btn.btn-sm.btn-warning {
  background: var(--color-background-warning) !important;
  color: var(--color-text-warning) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-danger,
.btn.btn-sm.btn-danger {
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border-color: transparent !important;
}

/* ---------- L.2 Subscribe button (Pricing page) — center it ----------- */
/* The pricing card uses
       <div class="amount text-center"><form>…<button>Subscribe</button></form></div>
   The form is a block element, so `text-center` on the parent doesn't
   center the button (it centers text *inside* the form, but the form
   itself fills the row at full width). Make the form inline so the
   button is actually horizontally centered, and lift the button to the
   solid dark page-CTA pattern we use elsewhere.                            */
.amount.text-center > form,
.amount.text-center form {
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto !important;
}
.amount.text-center {
  text-align: center !important;
}

/* Make the Subscribe button itself the proper solid CTA, not the muted
   light-blue ghost variant (it sits at the bottom of a pricing card and
   needs to stand out).                                                    */
.amount.text-center > form > .btn-primary,
.amount.text-center form button.btn-primary,
.amount.text-center form .btn.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 140px !important;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  margin: 0 auto !important;
}
.amount.text-center > form > .btn-primary:hover,
.amount.text-center form button.btn-primary:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
}

/* ---------- L.3 Centered submit safety net ---------------------------- */
/* Any `.btn-primary` whose direct parent has `.text-center` should render
   centered with proper touch height, not stretched as a block form item.  */
.text-center > .btn,
.text-center > form > .btn,
.text-center > form > button.btn,
.text-center form > .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* ---------- L.4 Dark mode parity for L.1/L.2 -------------------------- */
html.dark-mode .btn.btn-xs.btn-primary,
html.dark-mode .btn.btn-sm.btn-primary {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}
html.dark-mode .amount.text-center form .btn.btn-primary {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
}

/* =========================================================================
   PART M — Thirteenth pass: hide ::after arrow, glyphicon button height
   ========================================================================= */

/* ---------- M.1 Kill the legacy `::after` triangle arrow on active item-- */
/* `app.css` line ~500 attaches a `border-left: 10px solid #3c8dbc` triangle
   pseudo-element to the active `.pos-tab-menu .list-group > a.active`,
   and the same selector matches the business-settings list-group inside a
   `.pos-tab-menu` container. The triangle is a leftover from the old
   skin and clashes with our new tinted pill. Hide it.                     */
div.pos-tab-menu div.list-group > a.active::after,
div.pos-tab-menu div.list-group > a.active:after,
.pos-tab-menu .list-group > a.active::after,
.pos-tab-menu .list-group > a.active:after,
.pos-tab-menu .list-group .list-group-item.active::after,
.pos-tab-menu .list-group .list-group-item.active:after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* Generic safety net: any `.list-group-item.active` that has been given a
   triangle ::after via legacy CSS gets the same treatment.                */
.list-group > .list-group-item.active::after,
.list-group > a.list-group-item.active::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* ---------- M.2 Pagination — eliminate adjacent double borders --------- */
/* When two `.paginate_button > a` items sit next to each other, their
   individual `0.5px` borders touch and visually read as a `1px` doubled
   line. Collapse the inner edge by making them flush and removing the
   left border on every item except the first.                            */
.pagination {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 8px 0 !important;
  padding: 0 !important;
}
.pagination > li.paginate_button {
  margin: 0 !important;
}
.pagination > li.paginate_button > a,
.pagination > li.paginate_button > span,
.pagination > li:not(.paginate_button) > a,
.pagination > li:not(.paginate_button) > span {
  margin: 0 !important;
  border-radius: 0 !important;
  border-right-width: 0 !important;
}
/* First and last items get rounded outer corners + restore last-item border */
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
  border-right-width: 0.5px !important;
}
/* Pull adjacent items together so borders overlap cleanly */
.pagination > li.paginate_button + li.paginate_button > a,
.pagination > li.paginate_button + li.paginate_button > span {
  margin-left: -0.5px !important;
}

/* ---------- M.3 Glyphicon vs Font Awesome — uniform button height ------ */
/* `<button class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-edit"></i> Edit</button>`
   renders shorter than its sibling that uses `<i class="fa">` because
   glyphicons inherit `top: 1px` and a larger inline line-height from
   Bootstrap 3, which inflates the parent's content-box height when fa
   icons are used and shrinks it for glyphicons. Force a uniform 24px
   inner height and consistent icon sizing.                                */
.btn.btn-xs,
.btn.btn-sm,
button.btn.btn-xs,
button.btn.btn-sm,
a.btn.btn-xs,
a.btn.btn-sm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.btn.btn-xs > i,
.btn.btn-sm > i,
.btn.btn-xs > .glyphicon,
.btn.btn-sm > .glyphicon,
.btn.btn-xs > .fa,
.btn.btn-sm > .fa,
.btn.btn-xs > .fas,
.btn.btn-sm > .fas {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  top: 0 !important;
  vertical-align: middle !important;
}

/* Bootstrap 3's `.glyphicon` has `position: relative; top: 1px;` which
   nudges glyphicons down; reset it inside small buttons.                  */
.btn.btn-xs > .glyphicon,
.btn.btn-sm > .glyphicon {
  position: relative !important;
  top: 0 !important;
}

/* ---------- M.4 Action button group — equal heights -------------------- */
/* When edit / manage products / delete buttons sit in the same `<td>`
   separated by `&nbsp;`, ensure they all align to the same baseline and
   render at the same height regardless of icon library used.             */
td > .btn.btn-xs + .btn.btn-xs,
td .btn.btn-xs {
  vertical-align: middle !important;
  height: 26px !important;
  min-height: 26px !important;
}

/* =========================================================================
   PART N — Fourteenth pass: crm-data, tax-tab-bar, upload_module_btn,
                              project-detail-tabs hoisted
   ========================================================================= */

/* ---------- N.1 .crm-data-wrapper / .crm-data-item -------------------- */
/* Stat strip used on CRM dashboards (Not Sent / Sent / Failed / Sync All).
   Re-skin as a row of token-aware stat cards matching the dashboard
   `--color-background-primary` panel pattern.                              */
.crm-data-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.crm-data-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.crm-data-item:hover {
  border-color: var(--color-border-secondary) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06) !important;
}
.crm-data-item h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  line-height: 1.2 !important;
}
.crm-data-item .data-numbers,
.crm-data-item > .data-numbers {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  line-height: 1.2 !important;
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: -0.01em !important;
}
.crm-data-item .data-numbers .text-warning {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-warning) !important;
  letter-spacing: 0 !important;
}
/* Sync All button card variant — stretched primary CTA inside the card  */
.crm-data-item #syncAllBtn,
.crm-data-item .btn.btn-primary {
  margin-top: 4px !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Color-cued accent strips on the left edge of each CRM card             */
.crm-data-item:nth-child(1)::before,
.crm-data-item:nth-child(2)::before,
.crm-data-item:nth-child(3)::before,
.crm-data-item:nth-child(4)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
}
.crm-data-item:nth-child(1)::before { background: var(--color-text-tertiary) !important; }
.crm-data-item:nth-child(2)::before { background: var(--accent-teal) !important; }
.crm-data-item:nth-child(3)::before { background: var(--accent-red) !important; }
.crm-data-item:nth-child(4)::before { background: var(--accent-blue) !important; }

/* ---------- N.2 .tax-tab-bar / .tax-tab-btn — token re-skin ----------- */
/* The Taxcore reports use a custom segmented tab bar. Match the new
   theme tokens via scoped variable redefinition + supplemental rules.    */
.tax-tab-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 0 14px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
}
.tax-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: var(--border-radius-sm) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  line-height: 1.4 !important;
}
.tax-tab-btn:hover {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.tax-tab-btn.is-active,
.tax-tab-btn[aria-selected="true"] {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 0.5px var(--color-border-tertiary) !important;
}

/* When wrapped in `.tax-report-shell`, override the existing scoped vars  */
.tax-report-shell {
  --tax-tab-active-bg: var(--color-background-primary) !important;
  --tax-tab-active-color: var(--color-text-primary) !important;
  --tax-tab-bar-bg: var(--color-background-secondary) !important;
}

/* ---------- N.4 .project-detail-tabs — hoisted out of overview-filter -- */
/* The project detail page now renders the `<ul class="nav nav-tabs">`
   as a sibling of `.overview-filter` rather than a child. Adjust spacing
   so it reads as a separate horizontal strip beneath the title bar.      */
.card-wrapper > .nav-tabs.project-detail-tabs,
.nav-tabs.project-detail-tabs {
  margin: 0 -2px 16px !important;
  padding: 0 !important;
  width: auto !important;
  flex-basis: auto !important;
  order: 0 !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 10 !important;
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  /* Edge-fade mask hint for horizontal scroll — already inherited from
     the base `.nav-tabs` rule in Part F.4. Re-assert for clarity.        */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%) !important;
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%) !important;
}

/* When dark mode is active, swap the sticky background so the strip
   doesn't show through tab content underneath.                            */
html.dark-mode .nav-tabs.project-detail-tabs {
  background: var(--color-background-secondary) !important;
}

/* =========================================================================
   PART O — Fifteenth pass: .btn-block + last_sync_cat caption
   ========================================================================= */

.btn.btn-block,
button.btn.btn-block,
a.btn.btn-block,
.btn-block {
  /* Width + flex layout only — height/padding/font come from the
     base `.btn` + `--control-height` token system in Part AC.
     The previous block hardcoded `min-height: 38px` + custom padding
     which broke the size contract: a `.btn.btn-sm.btn-block` would
     ignore its `--control-height-sm` (30px) and render at 38px,
     mismatching adjacent inline `.btn-sm` controls. By dropping the
     height/padding/font here, the button inherits the right size
     from its size class (`.btn` 34, `.btn-sm` 30, `.btn-lg` 40, …)
     and just adds full-width stretch + flex centering. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.btn.btn-block.btn-primary,
button.btn.btn-block.btn-primary,
a.btn.btn-block.btn-primary {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border: 0.5px solid transparent !important;
}
.btn.btn-block.btn-primary:hover {
  background: color-mix(in srgb, var(--color-background-info) 70%, var(--color-text-info) 15%) !important;
  color: var(--color-text-info) !important;
}
.btn.btn-block > i,
.btn-block > i { font-size: 12.5px !important; }

.last_sync_cat,
.last_sync_cat > small {
  display: block !important;
  text-align: center !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
  line-height: 1.4 !important;
}

/* ---------- O.2 Add Modifier table — fix overflowing +/- action button ---
   The Add/Edit Modifier Set modal renders a small grid of inputs with a
   trailing action cell containing a `+` (add row) or `-` (remove row)
   icon button that uses `pull-right` for alignment. With the new flex
   layout system the trailing `<td>` had no explicit width — the three
   input cells consumed all the horizontal space, pushing the action
   cell (and the button it contains) past the modal edge.

   Constrain the action column to a tight 56px so it can't grow, drop
   `pull-right` flotation in favour of flex centering, and align the
   `.form-group` margin so the button vertically centers against the
   inputs (not the larger `.form-group` baseline that includes its
   bottom margin).                                                       */
#add-modifier-table thead > tr > th:last-child,
#add-modifier-table tbody > tr > td:last-child {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#add-modifier-table tbody > tr > td:last-child .btn.add-modifier-row,
#add-modifier-table tbody > tr > td:last-child .btn.remove-modifier-row {
  float: none !important;        /* defeat .pull-right */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  width: var(--control-height-xs) !important;
  height: var(--control-height-xs) !important;
  min-height: var(--control-height-xs) !important;
  padding: 0 !important;
}
/* The input cells wrap each control in `.form-group` which carries a
   `margin-bottom`. That makes its baseline taller than the action cell,
   so the +/- button visually drifts up. Strip the bottom margin on
   form-groups inside this table since the row itself provides spacing. */
#add-modifier-table tbody > tr > td > .form-group {
  margin-bottom: 0 !important;
}

/* =========================================================================
   PART P — Sixteenth pass: Select2 multi-select polish
   -------------------------------------------------------------------------
   All sizing here is keyed to the --control-* scaling tokens declared in
   :root (and overwritten at runtime by app_scaling.js). The container, the
   chip pills, and the inline search input all expand/contract together
   when the user changes the global control-height slider.
   ========================================================================= */

.select2-container--default .select2-selection--multiple {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-height: var(--control-min-height) !important;
  /* CRITICAL: never cap height — chips must wrap and the field must grow.
     override.css sets `max-height: var(--control-height)` on
     `.select2-container .select2-selection--multiple`, which clips the
     container to a single row and makes wrapped chips appear to float
     outside the border. Reset it here. `height: auto` defeats any
     fixed-height rules from older stylesheets too. */
  max-height: none !important;
  height: auto !important;
  padding: calc(var(--control-padding-y) - 1px) calc(var(--control-padding-x) - 2px) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
  cursor: text !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  row-gap: 4px !important;
  overflow: visible !important;
}
/* Belt-and-braces: also target the non `--default` selector that
   override.css uses, so the cap is removed regardless of which
   Select2 theme variant the widget was instantiated with. */
.select2-container .select2-selection--multiple {
  max-height: none !important;
  height: auto !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple:focus-within {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  min-height: calc(var(--control-min-height) - var(--control-padding-y) * 2) !important;
}
.select2-container--default .select2-search--inline {
  display: flex !important;
  flex: 1 1 80px !important;
  min-width: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
  width: 100% !important;
  min-width: 80px !important;
  height: calc(var(--control-min-height) - var(--control-padding-y) * 2 - 2px) !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: var(--body-font-size) !important;
  color: var(--color-text-primary) !important;
  outline: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--color-text-tertiary) !important;
  opacity: 1 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  height: calc(var(--control-min-height) - var(--control-padding-y) * 2 - 2px) !important;
  min-height: 22px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 999px !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  line-height: 1 !important;
  cursor: default !important;
  white-space: nowrap !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, border-color .15s ease;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
  background: var(--color-background-tertiary) !important;
  border-color: var(--color-border-secondary) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  order: 2 !important;
  margin: 0 -2px 0 2px !important;
  padding: 0 !important;
  color: var(--color-text-tertiary) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background .15s ease, color .15s ease;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--color-text-danger) !important;
  background: color-mix(in srgb, var(--color-text-danger) 15%, transparent) !important;
}

/* =========================================================================
   PART Q — Seventeenth pass: add-product-price-table + tier pricing
                              responsive layout + remove-tier-row button
   ========================================================================= */

/* ---------- Q.1 .add-product-price-table — stack columns on small screens */
/* The 4-column price-table (Purchase / Margin / Selling / Image) collapses
   into an unreadable mess below ~991px because each <td> contains nested
   `.col-sm-6` columns and inputs that don't shrink gracefully. Make every
   <td> a flex-column with full-width inputs, and at narrow widths convert
   the whole table into stacked card-style rows.                            */
.add-product-price-table {
  table-layout: fixed !important;
  width: 100% !important;
}
.add-product-price-table th,
.add-product-price-table td {
  vertical-align: top !important;
  padding: 8px !important;
  word-break: break-word !important;
}
.add-product-price-table td > .col-sm-6,
.add-product-price-table td > [class*="col-"] {
  width: 100% !important;
  float: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}
.add-product-price-table td .form-control,
.add-product-price-table td input.form-control {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12.5px !important;
}
.add-product-price-table td label {
  font-size: 11.5px !important;
  margin-bottom: 2px !important;
  color: var(--color-text-secondary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.add-product-price-table td .help-block {
  font-size: 10.5px !important;
  margin: 4px 0 0 !important;
  color: var(--color-text-tertiary) !important;
}

/* On ≤768px, convert table to stacked cards */
@media (max-width: 768px) {
  .add-product-price-table,
  .add-product-price-table tbody,
  .add-product-price-table tr,
  .add-product-price-table th,
  .add-product-price-table td {
    display: block !important;
    width: 100% !important;
  }
  .add-product-price-table thead,
  .add-product-price-table > tbody > tr > th {
    display: none !important;
  }
  .add-product-price-table > tbody > tr {
    margin-bottom: 12px !important;
    border: 0.5px solid var(--color-border-tertiary) !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
  }
  .add-product-price-table > tbody > tr > td {
    border: 0 !important;
    border-bottom: 0.5px solid var(--color-border-tertiary) !important;
    padding: 10px 12px !important;
  }
  .add-product-price-table > tbody > tr > td:last-child {
    border-bottom: 0 !important;
  }
  /* Inject pseudo-labels above each cell on mobile so users know what each
     orphaned input represents.                                              */
  .add-product-price-table > tbody > tr > td:nth-child(1)::before { content: "Purchase Price"; }
  .add-product-price-table > tbody > tr > td:nth-child(2)::before { content: "Profit Margin %"; }
  .add-product-price-table > tbody > tr > td:nth-child(3)::before { content: "Default Selling Price"; }
  .add-product-price-table > tbody > tr > td:nth-child(4)::before { content: "Product Image"; }
  .add-product-price-table > tbody > tr > td::before {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--color-text-tertiary) !important;
  }
}

/* ---------- Q.2 .tier-pricing-card — head + horizontal scroll fix ------ */
.tier-pricing-card {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: 14px !important;
  margin: 12px 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
.tier-pricing-card__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.tier-pricing-card__head > div {
  flex: 1 1 200px !important;
  min-width: 0 !important;
}
.tier-pricing-card__head h5 {
  margin: 0 0 2px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}
.tier-pricing-card__head p {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.tier-pricing-card__head .add-tier-row,
.tier-pricing-card__head .btn.btn-success {
  flex-shrink: 0 !important;
  min-width: 110px !important;
}

/* The tier table itself — let `.table-responsive` handle horizontal scroll
   on narrow screens. Force min-widths on the table itself so columns don't
   collapse into illegible widths.                                          */
.tier-pricing-card .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 0 !important;
  margin: 0 !important;
}
.tier-pricing-table {
  min-width: 640px !important;
  margin: 0 !important;
}
.tier-pricing-table th,
.tier-pricing-table td {
  vertical-align: middle !important;
  padding: 8px !important;
  font-size: 12.5px !important;
}
.tier-pricing-table .form-control {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 12.5px !important;
}

/* ---------- Q.3 .remove-tier-row "-" button — proper round icon button - */
/* Was rendering as an oversized rectangle with no visible "-" because the
   `.btn-xs` cascade fix from Part L gave it `min-height: 26px` but the
   inner `-` text inherited a transparent color from another rule.        */
.remove-tier-row,
.btn.btn-xs.btn-danger.remove-tier-row,
.btn.btn-xs.remove-tier-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border: 0 !important;
}
.remove-tier-row:hover,
.btn.btn-xs.btn-danger.remove-tier-row:hover {
  background: color-mix(in srgb, var(--color-background-danger) 60%, var(--color-text-danger) 25%) !important;
  color: var(--color-text-danger) !important;
}

/* Match `.add-tier-row` "+ Add tier" with a clean small green pill         */
.add-tier-row,
.btn.btn-xs.btn-success.add-tier-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border: 0 !important;
}

/* On very narrow screens, allow the whole tier card to keep horizontal
   scroll inside it without overflowing its parent.                        */
@media (max-width: 540px) {
  .tier-pricing-card { padding: 10px !important; }
  .tier-pricing-card__head { gap: 8px !important; padding-bottom: 8px !important; margin-bottom: 8px !important; }
  .tier-pricing-card__head .add-tier-row { width: 100% !important; }
}

/* ===========================================================================
   PART R — Variable product form
   ----------------------------------------------------------------------------
   Targets the markup rendered when a product is "variable":
     • The "Variation SKU Format" section (legacy `.form-input` radios +
       `.form-label`).
     • The "Add Variation" header with `.btn.bg-purple` "+" button.
     • The outer `.add-product-price-table` (Variation | Variation Values)
       which embeds a per-row nested `.variation_value_table.blue-header`.
     • The inner row's apply-all icon buttons
       (`.btn-default.bg-white.btn-flat.apply-all.btn-sm.p-5-5`).
     • The `.add_variation_value_row` "+" and `.remove_variation_value_row`
       "-" buttons.
     • Legacy `.width-50.f-left` helpers used in the Purchase Price cell.
     • Responsive treatment — because the inner table has 7 columns plus
       a deeply-nested `.tier-pricing-card`, stacking is impractical.  Use
       horizontal scroll inside the existing `.table-responsive` wrapper
       and keep a sensible min-width so cells don't crush.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Part AX.2 — POS product table cell alignment & layout
   --------------------------------------------------------------------------
   Overrides legacy `.pos-wrapper .pos-content .pos-table .pos-product-table
   thead tr { text-align: left }` from pos.css (specificity 0,4,2). We use
   the same selector chain here + `!important` so subtotal/qty/tax/price
   headers center properly and align with their body cells.
   -------------------------------------------------------------------------- */
.pos-wrapper .pos-content .pos-table .pos-product-table > thead > tr,
.pos-wrapper .pos-content .pos-table .pos-product-table > thead > tr > th,
#pos_table.pos-product-table > thead > tr,
#pos_table.pos-product-table > thead > tr > th {
  text-align: center !important;
  vertical-align: middle !important;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > thead > tr > th.pos-th-product,
#pos_table.pos-product-table > thead > tr > th.pos-th-product {
  text-align: left !important;
  padding-left: 12px !important;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td,
#pos_table.pos-product-table > tbody > tr > td {
  text-align: center !important;
  vertical-align: middle !important;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-product-name-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-product-name-cell {
  text-align: left !important;
  padding-left: 12px !important;
  position: relative;
}

/* Subtotal cell — keep value visually centered under the centered header
   (was previously right-aligned via inline/legacy rules). */
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-subtotal-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-subtotal-cell {
  text-align: center !important;
  white-space: nowrap;
}

/* Tax / Price cells — center the inner select/input so they sit directly
   below their headers instead of hugging the left edge of the cell. */
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-tax-cell,
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-price-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-tax-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-price-cell {
  text-align: center !important;
}
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-tax-cell .select2-container,
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-tax-cell select,
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-price-cell input,
#pos_table.pos-product-table > tbody > tr > td.pos-tax-cell .select2-container,
#pos_table.pos-product-table > tbody > tr > td.pos-tax-cell select,
#pos_table.pos-product-table > tbody > tr > td.pos-price-cell input {
  margin-left: auto;
  margin-right: auto;
}

/* Quantity cell — center the input-group stepper under the header. */
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-qty-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-qty-cell {
  text-align: center !important;
}
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-qty-cell .input-group,
#pos_table.pos-product-table > tbody > tr > td.pos-qty-cell .input-group {
  margin-left: auto;
  margin-right: auto;
}

/* Inline product image — absolutely positioned inside the name cell so
   the meta info renders under the product NAME, not under the image. */
.pos-product-table .pos-product-name-cell {
  position: relative;
}
.pos-product-table .pos-product-name-cell .pos-product-name-wrap {
  display: block;
  padding-left: 48px;
  min-height: 38px;
  position: relative;
}
.pos-product-table .pos-product-row-image {
  position: absolute;
  left: 6px;
  top: 14px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--color-background-secondary, #f4f4f5);
  border: 1px solid var(--color-border-primary, #e5e7eb);
}

@media (max-width: 1199.98px) {
  .pos-product-table .pos-product-name-cell .pos-product-name-wrap {
    padding-left: 0;
  }
  .pos-product-table .pos-product-row-image {
    display: none;
  }
}

.pos-product-table .pos-product-meta {
  margin-top: 4px;
}
.pos-product-table .pos-product-meta-stock.text-danger {
  color: var(--color-text-danger) !important;
}


/* ---------------------------------------------------------------------------
   R.1 — Variation SKU Format radio cards
   --------------------------------------------------------------------------- */
#product_form_part .form-input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  border: 1.5px solid var(--color-border-secondary) !important;
  border-radius: 50% !important;
  background: var(--color-background-default) !important;
  vertical-align: middle !important;
  position: relative !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background-color .15s ease;
}
#product_form_part .form-input[type="radio"]:hover {
  border-color: var(--color-border-primary) !important;
}
#product_form_part .form-input[type="radio"]:checked {
  border-color: var(--color-text-primary) !important;
  background: var(--color-text-primary) !important;
  box-shadow: inset 0 0 0 3px var(--color-background-default) !important;
}
#product_form_part .form-label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-secondary) !important;
  width: 100% !important;
  transition: all .15s ease;
}
#product_form_part .form-input[type="radio"]:checked + .form-label,
#product_form_part .form-group:has(.form-input:checked) .form-label {
  border-color: var(--color-text-primary) !important;
  background: var(--color-background-default) !important;
  color: var(--color-text-default) !important;
}
#product_form_part .form-group:has(.form-input[type="radio"]) {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ---------------------------------------------------------------------------
   R.2 — "Add Variation" header + `.bg-purple` "+" button
   --------------------------------------------------------------------------- */
#product_form_part h4 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-default) !important;
  margin: 18px 0 12px !important;
}
#product_form_part #add_variation,
.btn.bg-purple#add_variation {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color .15s ease;
}
#product_form_part #add_variation:hover,
.btn.bg-purple#add_variation:hover {
  background: color-mix(in srgb, var(--color-background-info) 60%, var(--color-text-info) 25%) !important;
  color: var(--color-text-info) !important;
}

/* ---------------------------------------------------------------------------
   R.3 — Outer `.add-product-price-table` (variation rows)
   --------------------------------------------------------------------------- */
#product_variation_form_part.add-product-price-table {
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  background: var(--color-background-default) !important;
  margin-bottom: 0 !important;
}
#product_variation_form_part.add-product-price-table > thead > tr > th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  border-top: 0 !important;
}
#product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td {
  padding: 12px !important;
  vertical-align: top !important;
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
}
#product_variation_form_part .variation_template {
  background: var(--color-background-default) !important;
}

/* ---------------------------------------------------------------------------
   R.4 — Inner `.variation_value_table.blue-header`
   --------------------------------------------------------------------------- */
.variation_value_table.blue-header {
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.variation_value_table.blue-header > thead > tr > th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  border-top: 0 !important;
  vertical-align: middle !important;
}
.variation_value_table.blue-header > thead > tr > th .pull-left,
.variation_value_table.blue-header > thead > tr > th .pull-right {
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-text-tertiary) !important;
}
.variation_value_table.blue-header > thead > tr > th small,
.variation_value_table.blue-header > thead > tr > th i {
  font-style: normal !important;
}
.variation_value_table.blue-header > tbody > tr > td {
  padding: 8px 10px !important;
  vertical-align: top !important;
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
}

/* ---------------------------------------------------------------------------
   R.5 — `.apply-all` icon button (input-group-btn merge)
   --------------------------------------------------------------------------- */
.btn.btn-default.bg-white.btn-flat.apply-all,
.btn.apply-all.btn-sm.p-5-5 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-left: 0 !important;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.btn.apply-all:hover {
  background: color-mix(in srgb, var(--color-background-secondary) 50%, var(--color-text-primary) 18%) !important;
  color: var(--color-text-default) !important;
}
.btn.apply-all .fa-check-double,
.btn.apply-all .fas.fa-check-double {
  font-size: 11px !important;
}
.variation_value_table .input-group .form-control.input-sm {
  border-right: 0 !important;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md) !important;
}

/* ---------------------------------------------------------------------------
   R.6 — Add / Remove value row buttons
   --------------------------------------------------------------------------- */
.add_variation_value_row,
.btn.btn-success.btn-xs.add_variation_value_row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.add_variation_value_row:hover,
.btn.btn-success.btn-xs.add_variation_value_row:hover {
  background: color-mix(in srgb, var(--color-background-success) 60%, var(--color-text-success) 25%) !important;
  color: var(--color-text-success) !important;
}
.remove_variation_value_row,
.btn.btn-danger.btn-xs.remove_variation_value_row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.remove_variation_value_row:hover,
.btn.btn-danger.btn-xs.remove_variation_value_row:hover {
  background: color-mix(in srgb, var(--color-background-danger) 60%, var(--color-text-danger) 25%) !important;
  color: var(--color-text-danger) !important;
}

/* ---------------------------------------------------------------------------
   R.7 — Legacy width helpers used inside variation Purchase Price cell
   --------------------------------------------------------------------------- */
.variation_value_table .width-50.f-left {
  width: 50% !important;
  float: left !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}
.variation_value_table .width-50.f-left + .width-50.f-left {
  padding-right: 0 !important;
  padding-left: 4px !important;
}
.variation_value_table .width-50.f-left .form-control.input-sm {
  border-radius: var(--border-radius-md) !important;
}
.variation_value_table .width-50.f-left .input-group .form-control.input-sm {
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md) !important;
}

/* The variation_images file input — keep it from looking unstyled */
.variation_value_table input.variation_images[type="file"] {
  font-size: 12px !important;
  padding: 4px !important;
  background: var(--color-background-secondary) !important;
  border: 1px dashed var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  width: 100% !important;
  min-width: 140px !important;
}

/* ---------------------------------------------------------------------------
   R.8 — Responsive: keep horizontal scroll on narrow screens
   The inner variation_value_table has 7 columns + a tier-pricing-card —
   stacking is impractical, so guarantee a min-width and let the existing
   `.table-responsive` wrapper handle horizontal scroll.
   --------------------------------------------------------------------------- */
#product_variation_form_part .variation_value_table {
  min-width: 920px !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:first-child {
  min-width: 180px !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:last-child {
  overflow-x: auto !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:last-child::-webkit-scrollbar {
  height: 8px !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:last-child::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary) !important;
  border-radius: 4px !important;
}

/* The embedded tier-pricing-card inside the selling-price cell — keep it
   compact so it doesn't dominate the row. */
.variation_value_table .tier-pricing-card {
  margin-top: 8px !important;
  padding: 10px !important;
  background: var(--color-background-secondary) !important;
}
.variation_value_table .tier-pricing-card__head h5 {
  font-size: 12px !important;
}
.variation_value_table .tier-pricing-card__head p {
  font-size: 11px !important;
}
.variation_value_table .tier-pricing-table {
  min-width: 580px !important;
}

/* On very narrow screens, stack the SKU-format radios into a single column */
@media (max-width: 540px) {
  #product_form_part > .row > .col-md-6 {
    width: 100% !important;
    float: none !important;
  }
  #product_form_part h4 {
    flex-wrap: wrap !important;
  }
}

/* ===========================================================================
   PART R.9 — Variable product form (refinement)
   ----------------------------------------------------------------------------
   The previous Part R left the row visually crowded because every selling-
   price cell embeds a full `.tier-pricing-card`.  This pass:
     • Gives the variation-row a generous min-width so columns don't crush.
     • Re-arranges the Purchase Price `width-50 f-left` cells to use flex
       with a real gap so the Inc-tax + apply-all group gets room.
     • Compresses the `.tier-pricing-card` inside variation cells to a
       muted, secondary-styled mini-card so it stops competing visually
       with the input row above it.
     • Tightens the inner table column widths so each input gets a sensible
       minimum (e.g. SKU 110px, Value 120px, prices 200px+).
     • Dims the rows that are toggled `.hide` away (no-op visually) but
       keeps `.variation_value_row` consistent.
   ============================================================================ */

/* R.9.1 — Make the variation_value_table breathe with consistent column min-widths */
#product_variation_form_part .variation_value_table {
  min-width: 1080px !important;
  table-layout: fixed !important;
}
.variation_value_table > thead > tr > th:nth-child(1) { width: 110px !important; }
.variation_value_table > thead > tr > th:nth-child(2) { width: 110px !important; }
.variation_value_table > thead > tr > th:nth-child(3) { width: 220px !important; }
.variation_value_table > thead > tr > th:nth-child(4) { width: 130px !important; }
.variation_value_table > thead > tr > th:nth-child(5) { width: auto !important; min-width: 240px !important; }
.variation_value_table > thead > tr > th:nth-child(6) { width: 140px !important; }
.variation_value_table > thead > tr > th:nth-child(7) { width: 50px !important; }

/* R.9.2 — Replace `width-50 f-left` floats with a real inline-block pair so
   the Inc-tax input + apply-all button group always has clean horizontal
   space.  We can't safely set `display: flex` on the `<td>` itself without
   breaking `table-layout: fixed`, so we keep the `<td>` as a normal table
   cell and lay out its children with explicit widths + a clearfix. */
.variation_value_table > tbody > tr > td:nth-child(3)::after {
  content: "";
  display: block;
  clear: both;
}
.variation_value_table > tbody > tr > td:nth-child(3) > .width-50.f-left {
  width: calc(50% - 4px) !important;
  float: left !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.variation_value_table > tbody > tr > td:nth-child(3) > .width-50.f-left:first-child {
  margin-right: 8px !important;
}
.variation_value_table > tbody > tr > td:nth-child(3) .input-group {
  width: 100% !important;
  display: table !important;
}
.variation_value_table > tbody > tr > td:nth-child(3) .input-group .form-control {
  width: 100% !important;
}

/* R.9.3 — Profit margin cell: keep input-group as a proper Bootstrap 3
   input-group (display: table) so the apply-all button stays glued. */
.variation_value_table > tbody > tr > td:nth-child(4) .input-group {
  display: table !important;
  width: 100% !important;
}
.variation_value_table > tbody > tr > td:nth-child(4) .input-group .form-control {
  width: 100% !important;
}

/* R.9.4 — Default Selling Price cell: vertical stack via margins.
   The cell stays as a normal `display: table-cell`; the price input gets
   a bottom margin so the embedded tier-pricing-card sits beneath it
   with a clean gap. */
.variation_value_table > tbody > tr > td:nth-child(5) > .form-control {
  width: 100% !important;
  margin-bottom: 8px !important;
}
.variation_value_table > tbody > tr > td:nth-child(5) > .form-control.hide {
  margin-bottom: 0 !important;
}

/* R.9.5 — Compress the embedded tier-pricing-card to a quiet, secondary mini-card */
.variation_value_table .tier-pricing-card {
  margin: 0 !important;
  padding: 8px !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
}
.variation_value_table .tier-pricing-card__head {
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px dashed var(--color-border-secondary) !important;
}
.variation_value_table .tier-pricing-card__head h5 {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.variation_value_table .tier-pricing-card__head p {
  display: none !important;
}
.variation_value_table .tier-pricing-card .add-tier-row {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.variation_value_table .tier-pricing-card .tier-pricing-table {
  min-width: 520px !important;
  margin: 0 !important;
}
.variation_value_table .tier-pricing-card .tier-pricing-table thead th {
  font-size: 10px !important;
  padding: 4px 6px !important;
}
.variation_value_table .tier-pricing-card .tier-pricing-table tbody td {
  padding: 4px 6px !important;
}

/* R.9.6 — Variation_template_values_div select2 should look native */
.variation_template_values_div .select2-container {
  width: 100% !important;
}
.variation_template_values_div label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--color-text-tertiary) !important;
  margin-bottom: 6px !important;
}

/* R.9.7 — Remove the harsh table-condensed default borders from inner cells */
.variation_value_table.blue-header > tbody > tr {
  border-bottom: 1px solid var(--color-border-secondary) !important;
}
.variation_value_table.blue-header > tbody > tr:last-child {
  border-bottom: 0 !important;
}
.variation_value_table.blue-header > tbody > tr > td {
  border-color: transparent !important;
  border-right: 1px solid var(--color-border-secondary) !important;
  border-left: 0 !important;
}
.variation_value_table.blue-header > tbody > tr > td:first-child {
  border-left: 0 !important;
}
.variation_value_table.blue-header > tbody > tr > td:last-child {
  border-right: 0 !important;
}

/* ===========================================================================
   PART S — Login / Verify / Social-login (was: extra/login.css)
   ----------------------------------------------------------------------------
   Re-skinned with theme tokens.  Original file at
   `public/css/extra/login.css` is now superseded by these rules — the
   selectors retained are those still rendered by the auth blade templates
   (verify-email, password-reset OTP, social login buttons).
   ============================================================================ */

/* S.1 — Show/hide password toggle */
.show_hide_icon {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--color-text-tertiary) !important;
  padding: 4px 8px !important;
  border-radius: var(--border-radius-md) !important;
  transition: color .15s ease, background-color .15s ease;
}
.show_hide_icon:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-background-secondary) !important;
}
.ltr .show_hide_icon { right: 6px !important; }
.rtl .show_hide_icon { left: 6px !important; }

/* S.2 — Social-login divider */
.social-login-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 1.5rem 0 !important;
}
.social-login-divider::before,
.social-login-divider::after {
  content: "" !important;
  flex: 1 !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  margin: 0 12px !important;
}
.social-login-divider span {
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* S.3 — Social-login button row */
.social-login-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  justify-content: center !important;
}
.social-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #ffffff !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
  border: 0 !important;
}
.social-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25);
  filter: brightness(1.05);
  color: #fff !important;
  text-decoration: none !important;
}
.social-login-btn i {
  margin-right: 8px !important;
  font-size: 1.05rem !important;
}
.social-login-btn.facebook   { background-color: #3b5998 !important; }
.social-login-btn.x-twitter  { background-color: #1da1f2 !important; }
.social-login-btn.linkedin   { background-color: #0077b5 !important; }
.social-login-btn.google     { background-color: #db4437 !important; }
.social-login-btn.github     { background-color: #24292e !important; }
.social-login-btn.gitlab     { background-color: #fc6d26 !important; }
.social-login-btn.bitbucket  { background-color: #205081 !important; }
.social-login-btn.slack      { background-color: #611f69 !important; }
.social-login-btn.twitch     { background-color: #6441a5 !important; }

/* S.4 — Verify-email / OTP card */
.verify-container {
  background: var(--color-background-default) !important;
  border-radius: var(--border-radius-lg, 12px) !important;
  box-shadow: var(--shadow-md, 0 8px 32px -8px rgba(0,0,0,0.18)) !important;
  border: 1px solid var(--color-border-secondary) !important;
  max-width: 480px !important;
  width: 100% !important;
  padding: 2.25rem !important;
  text-align: center !important;
  color: var(--color-text-default) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.verify-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 14px 40px -10px rgba(0,0,0,0.22)) !important;
}
.verify-title {
  font-size: 1.6rem !important;
  margin-bottom: 0.6rem !important;
  font-weight: 700 !important;
  color: var(--color-text-default) !important;
}
.verify-subtitle {
  font-size: 0.95rem !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 1.5rem !important;
}
.email-display {
  border: 1px solid var(--color-border-secondary) !important;
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 0.85rem 1rem !important;
  margin: 1.25rem 0 !important;
  font-size: 1rem !important;
  color: var(--color-text-default) !important;
  font-weight: 500 !important;
  word-break: break-all !important;
}

/* S.5 — OTP input boxes */
.verify-container .form-group {
  margin-bottom: 1.25rem !important;
}
.verify-container .input-group {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}
.otp-input {
  width: 44px !important;
  height: 52px !important;
  text-align: center !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-default) !important;
  color: var(--color-text-default) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.otp-input:focus {
  border-color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-primary) 18%, transparent) !important;
  outline: none !important;
}
.otp-input.filled {
  background: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-default)) !important;
  border-color: var(--color-text-primary) !important;
}

/* S.6 — Verify card auxiliary buttons & alerts */
.verify-container .btn-link {
  background: none !important;
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
  font-size: 0.85rem !important;
  padding: 0 !important;
  border: 0 !important;
}
.verify-container .timer {
  font-weight: 600 !important;
  color: var(--color-text-warning, #d97706) !important;
  font-size: 1rem !important;
}
.verify-container .alert {
  padding: 0.85rem 1rem !important;
  margin: 0.75rem 0 !important;
  border-radius: var(--border-radius-md) !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  opacity: 0;
  transition: opacity .25s ease;
}
.verify-container .alert.show {
  opacity: 1;
}
.verify-container .alert-success {
  background: var(--color-background-success) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;
  color: var(--color-text-success) !important;
}
.verify-container .alert-danger {
  background: var(--color-background-danger) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-danger) 30%, transparent) !important;
  color: var(--color-text-danger) !important;
}
.verify-container .alert-warning {
  background: var(--color-background-warning, color-mix(in srgb, #d97706 15%, var(--color-background-default))) !important;
  border: 1px solid color-mix(in srgb, #d97706 30%, transparent) !important;
  color: var(--color-text-warning, #d97706) !important;
}
.verify-container .alert-info {
  background: var(--color-background-info) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-info) 30%, transparent) !important;
  color: var(--color-text-info) !important;
}

/* S.7 — Logout / change-email controls inside verify card */
.logout-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  text-decoration: none !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: var(--border-radius-md) !important;
  margin-top: 1.25rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border: 1px solid color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
  transition: background-color .15s ease, color .15s ease;
}
.logout-button:hover {
  background: color-mix(in srgb, var(--color-background-danger) 60%, var(--color-text-danger) 25%) !important;
  color: var(--color-text-danger) !important;
  text-decoration: none !important;
}
.resend-disabled {
  color: var(--color-text-tertiary) !important;
  cursor: not-allowed !important;
}
.change-email-form {
  margin: 1.25rem 0 !important;
  padding: 1rem !important;
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  border: 1px dashed var(--color-border-secondary) !important;
}

/* S.8 — has-error / help-block kept token-aware */
.has-error .form-control {
  border-color: var(--color-text-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-danger) 12%, transparent) !important;
}
.help-block {
  font-size: 0.85rem !important;
  color: var(--color-text-danger) !important;
  text-align: left !important;
  margin-top: 0.45rem !important;
}
.verify-form {
  margin-bottom: 10px !important;
}

/* ===========================================================================
   PART T — Auth pages (login / register / verify / 2FA / password reset)
   ----------------------------------------------------------------------------
   `layouts/auth.blade.php` and the views under `resources/views/auth/*` use
   a whole vocabulary of classes (`.auth-container`, `.form-content`,
   `.input-wrapper`, `.button-wrapper`, `.demo-button`, `.toggle-wrapper`,
   `.psw-strent-wrap`, `.phone-number-wrapper`, `.forget-password`,
   `.auth-text-heading`, `.auth-logo`, `.form-footer`, `.input-error`,
   `.login-layout-fallback`, `.demo-shops`, `.demo-modules`, `.menu-button`)
   for which there were no CSS definitions anywhere in the codebase — that
   is why the login screen looks "off".  Part T provides a complete,
   token-driven skin for every one of those hooks.
   ============================================================================ */

/* T.1 — Auth page body & layout fallback */
body.auth-page {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-default) !important;
  font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif) !important;
  min-height: 100vh !important;
}
.login-layout-fallback {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px 48px !important;
  gap: 18px !important;
  background: linear-gradient(180deg,
    var(--color-background-secondary) 0%,
    var(--color-background-default) 100%) !important;
  position: relative !important;
}
body.auth-page .login-layout-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%,
      color-mix(in srgb, var(--color-text-primary) 10%, transparent) 0%,
      transparent 38%),
    radial-gradient(circle at 88% 86%,
      color-mix(in srgb, var(--color-text-info) 8%, transparent) 0%,
      transparent 42%);
  pointer-events: none;
  z-index: 0;
}
body.auth-page .login-layout-fallback > * { position: relative; z-index: 1; }

/* T.2 — Auth logo */
.auth-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 4px !important;
}
.auth-logo img {
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}
.auth-logo .logo-text {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: var(--color-text-default) !important;
}

/* T.3 — Main container & form-content panels */
.auth-container {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.auth-container.rtl { direction: rtl !important; }
.auth-container.ltr { direction: ltr !important; }
.auth-container .form-content,
.login-layout-fallback > form,
body.auth-page .details + form,
body.auth-page form[method="POST"][action*="register"] {
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-lg, 14px) !important;
  padding: 28px 28px 24px !important;
  box-shadow: 0 8px 28px -10px rgba(15, 23, 42, .12),
              0 2px 6px -2px rgba(15, 23, 42, .06) !important;
}
.auth-container .form-content + .form-content {
  margin-top: 0 !important;
}
.auth-container .form-content.demo-shops,
.auth-container .form-content.demo-modules {
  background: color-mix(in srgb, var(--color-background-default) 70%, var(--color-background-secondary)) !important;
}

/* T.4 — Headings used inside auth pages */
.auth-text-heading,
.details h2,
.auth-container .form-content h3,
.auth-container .form-content h4 {
  margin: 0 0 18px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-text-default) !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}
.details h2 { font-size: 22px !important; }
.demo-shops h4,
.demo-modules h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}
.demo-shops h4 small,
.demo-modules h4 small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 4px !important;
  font-style: italic !important;
}

/* T.5 — Input wrappers (label + input pair used in login/register) */
.input-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}
.input-wrapper label,
.phone-number-wrapper label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  letter-spacing: 0.2px !important;
  margin: 0 !important;
}
.input-wrapper input[type="text"],
.input-wrapper input[type="email"],
.input-wrapper input[type="number"],
.input-wrapper input[type="password"],
.input-wrapper input[type="tel"],
.phone-number-wrapper input,
.phone-number-wrapper select {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--color-text-default) !important;
  background: var(--color-background-secondary) !important;
  border: 0 !important;
  border-radius: var(--border-radius-md, 8px) !important;
  outline: none !important;
  transition: background-color .15s ease, box-shadow .15s ease;
  box-shadow: none !important;
}
/* Specificity-matching override for the LoginLayouts module's
   `.login-layout .form-content form .input-wrapper input` rule. */
.login-layout .form-content form .input-wrapper input,
.login-layout .form-content form .input-wrapper select,
.login-layout .form-content form .phone-number-wrapper input,
.login-layout .form-content form .phone-number-wrapper select {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--color-background-secondary) !important;
}
.input-wrapper input::placeholder,
.phone-number-wrapper input::placeholder {
  color: var(--color-text-tertiary) !important;
  opacity: 1 !important;
}
.input-wrapper input:focus,
.phone-number-wrapper input:focus,
.phone-number-wrapper select:focus {
  background: var(--color-background-default) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-primary) 16%, transparent) !important;
}
.input-wrapper .password-switch { padding-right: 44px !important; }

/* T.6 — Show/hide password icon (auth-page-specific override of S.1) */
.input-wrapper .show_hide_icon {
  position: absolute !important;
  right: 8px !important;
  top: 30px !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--color-text-tertiary) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color .15s ease, background-color .15s ease;
}
.input-wrapper .show_hide_icon:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-default) !important;
}
.input-wrapper .show_hide_icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}
.input-wrapper .show_hide_icon svg path[stroke="#000000"] { stroke: currentColor !important; }
html.dark-mode .input-wrapper .show_hide_icon svg path[stroke="#000000"] { stroke: currentColor !important; }
.rtl .input-wrapper .show_hide_icon { right: auto !important; left: 8px !important; }

/* T.7 — Input error / help block */
.input-error {
  margin: -10px 0 12px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: var(--color-text-danger) !important;
  background: var(--color-background-danger) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
  border-radius: var(--border-radius-md) !important;
}
.input-error strong { font-weight: 500 !important; }

/* T.8 — Phone number wrapper (country code + number) */
.phone-number-wrapper {
  display: grid !important;
  grid-template-columns: minmax(120px, 38%) 1fr !important;
  gap: 10px !important;
  align-items: end !important;
}
.phone-number-wrapper .country-code {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.phone-number-wrapper > div:not(.country-code) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* T.9 — Toggle switch (Remember me) */
.toggle-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 0 14px !important;
}
.toggle-wrapper p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}
.toggle-wrapper .switch {
  position: relative !important;
  display: inline-block !important;
  height: var(--switch-height) !important;
  width: var(--switch-width) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.toggle-wrapper .switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}
.toggle-wrapper .sliderCheckbox {
  position: absolute !important;
  cursor: pointer !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-border-secondary) !important;
  border-radius: 999px !important;
  transition: background-color .2s ease;
}
.toggle-wrapper .sliderCheckbox::before {
  content: "";
  position: absolute;
  height: var(--switch-knob-size);
  width: var(--switch-knob-size);
  left: var(--switch-knob-offset);
  bottom: var(--switch-knob-offset);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.toggle-wrapper .switch input:checked + .sliderCheckbox {
  background: var(--color-text-primary) !important;
}
.toggle-wrapper .switch input:checked + .sliderCheckbox::before {
  transform: translateX(var(--switch-knob-translate));
}

/* T.10 — Forgot password link */
.forget-password {
  display: inline-block !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  margin: -6px 0 14px !important;
  font-weight: 500 !important;
}
.forget-password:hover {
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
}

/* T.11 — Submit button-wrapper inside auth forms */
.button-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 6px !important;
}
.button-wrapper button[type="submit"],
.auth-container form button[type="submit"]:not(.show_hide_icon):not(.new_email_verification) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
  background: var(--color-text-primary) !important;
  border: 0 !important;
  border-radius: var(--border-radius-md, 8px) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--color-text-primary) 35%, transparent) !important;
}
.button-wrapper button[type="submit"]:hover,
.auth-container form button[type="submit"]:not(.show_hide_icon):not(.new_email_verification):hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, #000) !important;
  box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--color-text-primary) 45%, transparent) !important;
}
.button-wrapper button[type="submit"]:active {
  transform: translateY(1px);
}

/* T.12 — Form footer ("Don't have an account?") */
.form-footer {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--color-border-secondary) !important;
  text-align: center !important;
}
.form-footer p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}
.form-footer a {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.form-footer a:hover { text-decoration: underline !important; }

/* T.13 — Demo buttons (login demo-shops / demo-modules) */
.demo-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  border-radius: var(--border-radius-md, 8px) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
  border: 0 !important;
  line-height: 1.2 !important;
}
.demo-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.18);
  color: #fff !important;
  text-decoration: none !important;
}
.demo-button i { font-size: 14px !important; min-width: 16px; }

/* Demo background-color helpers (legacy `bg-*` classes) */
.demo-button.bg-olive       { background-color: #3d9970 !important; }
.demo-button.bg-maroon      { background-color: #c5594d !important; }
.demo-button.bg-orange      { background-color: #ff851b !important; }
.demo-button.bg-purple      { background-color: #7c3aed !important; }
.demo-button.bg-navy        { background-color: #1f3a8a !important; }
.demo-button.bg-red         { background-color: #dc2626 !important; }
.demo-button.bg-red-active  { background-color: #b91c1c !important; }
.demo-button.bg-woocommerce { background-color: #7f54b3 !important; }
.demo-button.bg-blue        { background-color: #2563eb !important; }

/* T.14 — Password strength indicator (.psw-strent-wrap) */
.psw-strent-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 6px 12px !important;
  margin: 6px 0 18px !important;
  padding: 12px 14px !important;
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
}
.psw-strent-wrap .item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.psw-strent-wrap .item i {
  color: var(--color-text-tertiary) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  transition: color .15s ease;
}
.psw-strent-wrap .item.valid i {
  color: var(--color-text-success) !important;
}
.psw-strent-wrap .strenght-test {
  font-size: 11.5px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.3 !important;
}
.psw-strent-wrap .item.valid .strenght-test {
  color: var(--color-text-default) !important;
}

/* T.15 — Verify card (override Part S width to fit auth layout) */
body.auth-page .verify-container {
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
body.auth-page .verify-container .input-group .form-control {
  height: 42px !important;
  border-radius: var(--border-radius-md) !important;
}
body.auth-page .verify-container .new_email_verification {
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
}

/* T.16 — Header-auth menu (used in `partials/header-auth.blade.php`) */
.menu-button {
  background: transparent !important;
  border: 1px solid var(--color-border-secondary) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--border-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-default) !important;
  cursor: pointer !important;
  transition: background-color .15s ease;
}
.menu-button:hover { background: var(--color-background-secondary) !important; }
.menu-button.active {
  background: var(--color-text-primary) !important;
  color: #fff !important;
  border-color: var(--color-text-primary) !important;
}
body.auth-page .dropdown-menu.active {
  display: block !important;
}

/* T.17 — Responsive auth */
@media (max-width: 540px) {
  .auth-container .form-content {
    padding: 22px 18px 18px !important;
  }
  .phone-number-wrapper {
    grid-template-columns: 1fr !important;
  }
  .login-layout-fallback {
    padding: 16px 12px 32px !important;
  }
}

/* T.18 — Dark-mode adjustments for auth */
html.dark-mode body.auth-page {
  background: var(--color-background-default) !important;
}
html.dark-mode .auth-container .form-content {
  background: var(--color-background-default) !important;
  box-shadow: 0 8px 28px -10px rgba(0,0,0,.5),
              0 2px 6px -2px rgba(0,0,0,.3) !important;
}

/* ===========================================================================
   PART U — Product reports / sh-* design system (was: extra/product.css)
   ----------------------------------------------------------------------------
   Inlined from `public/css/extra/product.css`.  This is a self-contained
   `sh-*` (Stock Health) component vocabulary used by stock reports,
   dashboards, panels, tables, chips, filter bars, etc.  Tokens converted
   to consume the global theme tokens where appropriate; the original
   `--sh-*` aliases are preserved so existing inline styles still resolve.
   ============================================================================ */

:root {
  --sh-radius:        var(--border-radius-lg, 14px);
  --sh-radius-sm:     var(--border-radius-md, 8px);
  --sh-radius-pill:   999px;
  --sh-border:        1px solid var(--color-border-secondary);
  --sh-shadow:        0 1px 4px rgba(15,23,42,.05);
  --sh-surface:       var(--color-background-default);
  --sh-bg:            var(--color-background-secondary);
  --sh-muted:         var(--color-text-tertiary);
  --sh-label:         var(--color-text-secondary);
  --sh-heading:       var(--color-text-default);

  --sh-red:           #dc2626;
  --sh-red-bg:        #fef2f2;
  --sh-red-text:      #991b1b;
  --sh-amber:         #d97706;
  --sh-amber-bg:      #fffbeb;
  --sh-amber-text:    #92400e;
  --sh-blue:          #2563eb;
  --sh-blue-bg:       #eff6ff;
  --sh-blue-text:     #1e40af;
  --sh-violet:        #7c3aed;
  --sh-violet-bg:     #f5f3ff;
  --sh-violet-text:   #4c1d95;
  --sh-green:         #059669;
  --sh-green-bg:      #ecfdf5;
  --sh-green-text:    #065f46;
}
html.dark-mode {
  --sh-red-bg:    color-mix(in srgb, #dc2626 18%, var(--color-background-secondary));
  --sh-red-text:  #fca5a5;
  --sh-amber-bg:  color-mix(in srgb, #d97706 18%, var(--color-background-secondary));
  --sh-amber-text:#fcd34d;
  --sh-blue-bg:   color-mix(in srgb, #2563eb 18%, var(--color-background-secondary));
  --sh-blue-text: #93c5fd;
  --sh-violet-bg: color-mix(in srgb, #7c3aed 18%, var(--color-background-secondary));
  --sh-violet-text:#c4b5fd;
  --sh-green-bg:  color-mix(in srgb, #059669 18%, var(--color-background-secondary));
  --sh-green-text:#86efac;
  --sh-shadow:    0 1px 4px rgba(0,0,0,.4);
}

/* U.1 — Page head */
.sh-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; padding-bottom: 20px;
  border-bottom: var(--sh-border);
}
.sh-page-head h1 {
  margin: 0 0 4px; font-size: 22px; font-weight: 600;
  color: var(--sh-heading); letter-spacing: -0.3px;
}
.sh-page-head p {
  margin: 0; font-size: 13.5px; color: var(--sh-muted);
  max-width: 520px; line-height: 1.55;
}

/* U.2 — Stat cards */
.sh-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
.sh-stat {
  background: var(--sh-surface); border: var(--sh-border);
  border-top: 3px solid transparent; border-radius: var(--sh-radius);
  padding: 20px 20px 18px; box-shadow: var(--sh-shadow);
  transition: box-shadow .15s;
}
.sh-stat:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.sh-stat.red    { border-top-color: var(--sh-red); }
.sh-stat.amber  { border-top-color: var(--sh-amber); }
.sh-stat.blue   { border-top-color: var(--sh-blue); }
.sh-stat.violet { border-top-color: var(--sh-violet); }

.sh-stat-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 10px; display: block;
}
.sh-stat.red    .sh-stat-eyebrow { color: var(--sh-red); }
.sh-stat.amber  .sh-stat-eyebrow { color: var(--sh-amber); }
.sh-stat.blue   .sh-stat-eyebrow { color: var(--sh-blue); }
.sh-stat.violet .sh-stat-eyebrow { color: var(--sh-violet); }

.sh-stat-value {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--sh-heading); margin-bottom: 8px; letter-spacing: -1px;
}
.sh-stat-desc {
  font-size: 12.5px; color: var(--sh-muted); line-height: 1.45; margin: 0;
}
@media (max-width: 992px) {
  .sh-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sh-stats { grid-template-columns: 1fr; }
}

/* U.3 — Toolbar */
.sh-toolbar {
  background: var(--sh-surface); border: var(--sh-border);
  border-radius: var(--sh-radius); padding: 18px 22px;
  margin-bottom: 20px; box-shadow: var(--sh-shadow);
  display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap;
}
.sh-toolbar-group { flex: 1; min-width: 220px; }
.sh-toolbar label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--sh-label); margin-bottom: 6px; letter-spacing: .02em;
}
.sh-toolbar .form-control {
  font-size: 13.5px; border-color: var(--color-border-secondary);
  border-radius: var(--sh-radius-sm); height: 36px;
  color: var(--sh-heading); background: var(--sh-surface);
}
.sh-toolbar .form-control:focus {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* U.4 — Chips */
.sh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--sh-radius-pill);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap; line-height: 1.6;
}
.sh-chip.danger  { background: var(--sh-red-bg);    color: var(--sh-red-text); }
.sh-chip.warning { background: var(--sh-amber-bg);  color: var(--sh-amber-text); }
.sh-chip.info    { background: var(--sh-blue-bg);   color: var(--sh-blue-text); }
.sh-chip.success { background: var(--sh-green-bg);  color: var(--sh-green-text); }
.sh-chip.violet  { background: var(--sh-violet-bg); color: var(--sh-violet-text); }
.sh-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* U.5 — Panel */
.sh-panel {
  background: var(--sh-surface); border: var(--sh-border);
  border-radius: var(--sh-radius); margin-bottom: 20px;
  overflow: hidden; box-shadow: var(--sh-shadow);
}
.sh-panel-head {
  padding: 18px 22px; border-bottom: var(--sh-border);
  background: var(--sh-bg);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.sh-panel-head-copy { flex: 1; min-width: 0; }
.sh-panel-head h4 {
  margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--sh-heading);
}
.sh-panel-head p {
  margin: 0; font-size: 13px; color: var(--sh-muted); line-height: 1.5;
}
.sh-panel-head-action { padding-top: 2px; }
.sh-panel-body { padding: 0; }

/* U.6 — Data table */
.sh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-table thead tr {
  border-bottom: var(--sh-border); background: var(--sh-bg);
}
.sh-table th {
  padding: 10px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sh-muted); white-space: nowrap; text-align: left;
}
.sh-table td {
  padding: 11px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-secondary) 60%, transparent);
  vertical-align: middle; color: var(--sh-label);
}
.sh-table tbody tr:last-child td { border-bottom: none; }
.sh-table tbody tr:hover {
  background: color-mix(in srgb, var(--sh-bg) 60%, var(--sh-surface));
}
.sh-table tbody tr.row-mixed {
  background: color-mix(in srgb, var(--sh-blue-bg) 50%, var(--sh-surface));
}
.sh-table tbody tr.row-mixed:hover {
  background: color-mix(in srgb, var(--sh-blue-bg) 70%, var(--sh-surface));
}
.sh-table tbody tr.row-repair {
  background: color-mix(in srgb, var(--sh-amber-bg) 35%, var(--sh-surface));
}
.sh-table tbody tr.row-repair:hover {
  background: color-mix(in srgb, var(--sh-amber-bg) 55%, var(--sh-surface));
}

.sh-product-name {
  font-weight: 600; color: var(--sh-heading);
  margin-bottom: 2px; font-size: 13px;
}
.sh-product-sub { font-size: 12px; color: var(--sh-muted); }
.sh-num { font-weight: 600; font-size: 13px; white-space: nowrap; }
.sh-num.neg { color: var(--sh-red); }
.sh-num.pos { color: var(--sh-green); }
.sh-num.neu { color: var(--sh-muted); }

/* U.7 — Buttons */
.sh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--sh-radius-sm);
  font-size: 13px; font-weight: 500; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all .12s; white-space: nowrap; line-height: 1;
}
.sh-btn i { font-size: 14px; }
.sh-btn-primary {
  background: var(--sh-blue); color: #fff; border-color: var(--sh-blue);
}
.sh-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.sh-btn-danger {
  background: var(--sh-red); color: #fff; border-color: var(--sh-red);
}
.sh-btn-danger:hover { background: #b91c1c; color: #fff; }
.sh-btn-ghost {
  background: var(--sh-surface); color: var(--sh-label);
  border-color: var(--color-border-secondary);
}
.sh-btn-ghost:hover {
  background: var(--sh-bg);
  border-color: color-mix(in srgb, var(--sh-label) 40%, transparent);
}
.sh-btn-ghost-violet {
  background: var(--sh-surface); color: var(--sh-violet);
  border-color: color-mix(in srgb, var(--sh-violet) 40%, transparent);
}
.sh-btn-ghost-violet:hover { background: var(--sh-violet-bg); }
.sh-btn-sm { padding: 5px 10px; font-size: 12px; }
.sh-btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* U.8 — Filter bar */
.sh-filter-bar {
  background: var(--sh-surface);
  border: none;
  border-radius: var(--sh-radius); padding: 18px 22px;
  margin-bottom: 20px; box-shadow: var(--sh-shadow);
}
.sh-filter-row {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.sh-filter-row .form-group { margin-bottom: 0; flex: 1; min-width: 200px; }
.sh-filter-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--sh-label); margin-bottom: 6px; letter-spacing: .02em;
}

/* U.9 — Summary strip */
.sh-summary-strip {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--sh-muted); margin-bottom: 20px;
  padding: 12px 18px; background: var(--sh-bg);
  border: var(--sh-border); border-radius: var(--sh-radius-sm);
}
.sh-summary-strip strong { color: var(--sh-heading); font-weight: 600; }
.sh-summary-sep { color: var(--color-border-secondary); }

/* U.10 — Empty state & notice */
.sh-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px; font-size: 13.5px;
  color: var(--sh-green-text); background: var(--sh-green-bg);
  border: 1px solid color-mix(in srgb, var(--sh-green) 35%, transparent);
  border-radius: var(--sh-radius); margin-bottom: 20px;
}
.sh-empty i { font-size: 16px; }
.sh-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; font-size: 13px;
  color: var(--sh-amber-text); background: var(--sh-amber-bg);
  border: 1px solid color-mix(in srgb, var(--sh-amber) 35%, transparent);
  border-radius: var(--sh-radius-sm); margin-bottom: 18px; line-height: 1.5;
}
.sh-notice i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* U.11 — Divider, manual section, search wrap */
.sh-divider {
  border: none; border-top: var(--sh-border); margin: 32px 0 28px;
}
.sh-manual-section h4 {
  font-size: 15px; font-weight: 600; color: var(--sh-heading);
  margin: 0 0 4px;
}
.sh-manual-section > p {
  font-size: 13px; color: var(--sh-muted); margin: 0 0 18px;
}
.sh-search-wrap { position: relative; }
.sh-search-wrap i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--sh-muted); font-size: 15px; pointer-events: none;
}
.sh-search-wrap input { padding-left: 34px !important; }

/* U.12 — Processing modal tweaks */
#processingModal .modal-header { border-bottom: var(--sh-border); }
#processingModal .modal-title { font-size: 15px; font-weight: 600; }
#processingModal .modal-body {
  font-size: 13.5px; color: var(--sh-muted); padding: 20px 24px;
}

/* ===========================================================================
   PART V — Standalone auth header & top-bar redesign
   ----------------------------------------------------------------------------
   The LoginLayouts module has been removed; the previous Part V was scoped
   to `.login-layout` (the module's wrapper) and is therefore inert.  This
   replacement is a free-standing redesign that covers every element used by
   `layouts/auth.blade.php` + `layouts/partials/header-auth.blade.php` +
   `layouts/partials/language_btn.blade.php`:

       .login-layout-fallback   — outer auth shell
         .header-auth           — top bar (lang on left, auth buttons on right)
           .header-left           - language picker holder
             details.dropdown
               summary.select-summary
               ul.language-dropdown-menu
           .header-right          - desktop auth buttons (Register/Pricing/Sign In)
             .btn.btn-header-auth
           .header-auth-mobile    - mobile hamburger + dropdown
             .menu-button > .hamburger-icon
             .dropdown-menu

   Aesthetic direction: a thin Linear/Notion-style top bar (translucent
   blur, hairline border-bottom) pinned to the top of the auth shell,
   while the logo + form remain centered in the viewport.
   ============================================================================ */

/* V.1 — Re-anchor the auth shell so the header pins to the top of the
   viewport and the content (logo + form) stays vertically centered.
   We keep `.login-layout-fallback` as `justify-content: center` (so the
   form is centered) and lift `.header-auth` out of normal flow. */
body.auth-page .login-layout-fallback {
  padding-top: 88px !important;
}

/* V.2 — Top bar */
body.auth-page .login-layout-fallback > .header-auth {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 28px !important;
  background: color-mix(in srgb, var(--color-background-default) 85%, transparent) !important;
  backdrop-filter: saturate(140%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  color: var(--color-text-default) !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
}
body.auth-page .login-layout-fallback > .header-auth::before { content: none !important; }

body.auth-page .header-auth .header-left,
body.auth-page .header-auth .header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.auth-page .header-auth .header-right .pull-right.text-white,
body.auth-page .header-auth .header-left .pull-right.text-white {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
  color: inherit !important;
}

/* V.3 — Auth ghost buttons (Register / Pricing / Sign In / Repair / Gym) */
body.auth-page .btn.btn-header-auth {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  color: var(--color-text-default) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap !important;
  line-height: 1 !important;
}
body.auth-page .btn.btn-header-auth:hover,
body.auth-page .btn.btn-header-auth:focus {
  color: var(--color-text-default) !important;
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  text-decoration: none !important;
  outline: none !important;
}
/* Promote the last (typically "Sign In") button to the primary CTA */
body.auth-page .header-auth .header-right .btn.btn-header-auth:last-child {
  color: #fff !important;
  background: var(--color-text-primary) !important;
  border-color: var(--color-text-primary) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 30%, transparent) !important;
}
body.auth-page .header-auth .header-right .btn.btn-header-auth:last-child:hover,
body.auth-page .header-auth .header-right .btn.btn-header-auth:last-child:focus {
  background: color-mix(in srgb, var(--color-text-primary) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, #000) !important;
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--color-text-primary) 45%, transparent) !important;
}

/* V.4 — Language picker (`<details>` + `<summary class="select-summary">`) */
body.auth-page .header-auth details.dropdown {
  position: relative !important;
  margin: 0 !important;
}
body.auth-page .select-summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-default) !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background-color .15s ease, border-color .15s ease;
  user-select: none !important;
}
body.auth-page .select-summary::-webkit-details-marker { display: none !important; }
body.auth-page .select-summary::marker { content: "" !important; }
body.auth-page .select-summary:hover {
  background: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-background-secondary)) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 18%, var(--color-border-secondary)) !important;
}
body.auth-page .select-summary img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 !important;
}
body.auth-page .select-summary .small-icon,
body.auth-page .select-summary i.fas {
  font-size: 10px !important;
  color: var(--color-text-tertiary) !important;
  transition: transform .2s ease;
}
body.auth-page details.dropdown[open] .select-summary .small-icon,
body.auth-page details.dropdown[open] .select-summary i.fas {
  transform: rotate(90deg) !important;
}

body.auth-page .language-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 180px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px -10px rgba(15, 23, 42, .18),
              0 4px 12px -3px rgba(15, 23, 42, .08) !important;
  z-index: 50 !important;
}
body.auth-page .language-dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.auth-page .language-dropdown-menu li > a,
body.auth-page .language-dropdown-menu .change_lang.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  color: var(--color-text-default) !important;
  background: transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
body.auth-page .language-dropdown-menu li > a:hover,
body.auth-page .language-dropdown-menu .change_lang.dropdown-item:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-default) !important;
  text-decoration: none !important;
}
body.auth-page .language-dropdown-menu img {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* V.5 — Mobile cluster (hamburger + dropdown) */
body.auth-page .header-auth-mobile {
  display: none !important;
  align-items: center !important;
  position: relative !important;
  float: none !important;
  color: inherit !important;
}
body.auth-page .menu-button {
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-default) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, border-color .15s ease;
  padding: 0 !important;
}
body.auth-page .menu-button:hover {
  background: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-secondary)) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 18%, var(--color-border-secondary)) !important;
}
body.auth-page .menu-button.active {
  background: var(--color-text-primary) !important;
  color: #fff !important;
  border-color: var(--color-text-primary) !important;
}
body.auth-page .menu-button .hamburger-icon {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 18px !important;
  height: 14px !important;
}
body.auth-page .menu-button .hamburger-icon span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  transition: transform .2s ease, opacity .2s ease;
}
body.auth-page .menu-button.active .hamburger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.auth-page .menu-button.active .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
body.auth-page .menu-button.active .hamburger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

body.auth-page .header-auth-mobile .dropdown-menu {
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 200px !important;
  margin: 0 !important;
  padding: 6px !important;
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px -10px rgba(15, 23, 42, .18),
              0 4px 12px -3px rgba(15, 23, 42, .08) !important;
  list-style: none !important;
  float: none !important;
  z-index: 50 !important;
}
body.auth-page .header-auth-mobile .dropdown-menu.active {
  display: block !important;
}
body.auth-page .header-auth-mobile .dropdown-menu > a {
  display: block !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--color-text-default) !important;
  background: transparent !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
body.auth-page .header-auth-mobile .dropdown-menu > a:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-default) !important;
  text-decoration: none !important;
}

/* V.6 — Auth-page logo: lift it up since the header now occupies fixed space
   and the form sits in the centered remainder. */
body.auth-page .auth-logo {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* V.7 — Responsive: hide desktop right-cluster on mobile, show hamburger */
@media (max-width: 768px) {
  body.auth-page .login-layout-fallback {
    padding-top: 80px !important;
  }
  body.auth-page .login-layout-fallback > .header-auth {
    padding: 10px 16px !important;
    min-height: 60px !important;
  }
  body.auth-page .header-auth .header-right { display: none !important; }
  body.auth-page .header-auth-mobile { display: inline-flex !important; }
}

/* V.8 — Dark-mode tweaks */
html.dark-mode body.auth-page .login-layout-fallback > .header-auth {
  background: color-mix(in srgb, var(--color-background-default) 80%, transparent) !important;
  border-bottom-color: var(--color-border-secondary) !important;
}
html.dark-mode body.auth-page .select-summary,
html.dark-mode body.auth-page .menu-button {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  color: var(--color-text-default) !important;
}
html.dark-mode body.auth-page .language-dropdown-menu,
html.dark-mode body.auth-page .header-auth-mobile .dropdown-menu {
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.45),
              0 4px 12px -3px rgba(0,0,0,.3) !important;
}

/* ===========================================================================
   PART W — Sibling-row layout for tier-pricing-card and template-values panel
   ----------------------------------------------------------------------------
   The variation form previously embedded two complex panels INSIDE table
   cells:
     1.  `.tier-pricing-card` (with its own nested `<table>`) lived inside
         the Default-Selling-Price `<td>` of every `.variation_value_row`,
         making rows visually uneven and forcing a wide column.
     2.  `.variation_template_values_div` (a select2 multi-select) lived
         inside the variation `<td>` of every `.variation_row`.

   Both are now emitted as **sibling `<tr>` rows** that span the full width
   of their parent table:
     - Inner table:  `<tr class="variation_value_tier_row">` follows each
                     `.variation_value_row`, hosting the tier-pricing-card
                     in a `<td colspan="7">` cell with class
                     `.variation-tier-host`.
     - Outer table:  `<tr class="variation_template_values_row">` follows
                     each `.variation_row`, hosting the values select2
                     in a `<td colspan="2">` cell with class
                     `.variation-values-host`.

   The host `<td>`s are stripped of all cell chrome (padding/border) so the
   embedded panel reads as a free-standing div docked under its row.
   ============================================================================ */

/* W.1 — Strip all cell chrome from the tier-host row so the card floats free */
.variation_value_table > tbody > tr.variation_value_tier_row > td.variation-tier-host {
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  padding: 6px 8px 14px !important;
  vertical-align: top !important;
}
.variation_value_table > tbody > tr.variation_value_tier_row:last-child > td.variation-tier-host {
  border-bottom: 0 !important;
}

/* W.2 — Tier card now lives in a full-width host: let it use the full row.
   Override the cramped, mini-card styles from R.9.5 — the card is no longer
   competing with form inputs to its left, so it can breathe. */
.variation_value_table .variation-tier-host > .tier-pricing-card {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md, 8px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head {
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head h5 {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-text-default) !important;
  margin: 0 0 2px 0 !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head p {
  display: block !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .add-tier-row {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-table {
  min-width: 720px !important;
  margin: 0 !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-table thead th {
  font-size: 11px !important;
  padding: 6px 8px !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-table tbody td {
  padding: 6px 8px !important;
}

/* W.3 — When the data row is hidden, the matching tier row should also hide
   to prevent an empty pricing card from floating in the table. */
tr.variation_value_tier_row.hide {
  display: none !important;
}

/* W.4 — Values-host row (template-values multi-select panel) */
#product_variation_form_part > tbody > tr.variation_template_values_row > td.variation-values-host {
  background: color-mix(in srgb, var(--color-text-primary) 4%, var(--color-background-default)) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  padding: 14px 16px 16px !important;
}
#product_variation_form_part > tbody > tr.variation_template_values_row.hide {
  display: none !important;
}
#product_variation_form_part .variation-values-host > .variation_template_values_div {
  margin: 0 !important;
}
#product_variation_form_part .variation-values-host > .variation_template_values_div > label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 0 6px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
#product_variation_form_part .variation-values-host .select2-container {
  width: 100% !important;
}

/* W.5 — Outer variation_row separator: the Variation td used to share its
   row-bottom border with the values-host below; now we want a single
   continuous bottom under the values-host row only. */
#product_variation_form_part > tbody > tr.variation_row > td {
  border-bottom: 0 !important;
}
#product_variation_form_part > tbody > tr.variation_template_values_row + tr.variation_row > td,
#product_variation_form_part > tbody > tr.variation_row:not(:has(+ tr.variation_template_values_row)) > td {
  border-bottom: 1px solid var(--color-border-secondary) !important;
}

/* W.6 — Mobile / narrow screens: keep the host row readable */
@media (max-width: 768px) {
  .variation_value_table .variation-tier-host {
    padding: 6px 4px 12px !important;
  }
  .variation_value_table .variation-tier-host > .tier-pricing-card {
    padding: 10px !important;
  }
  .variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head {
    flex-wrap: wrap !important;
  }
  #product_variation_form_part > tbody > tr.variation_template_values_row > td.variation-values-host {
    padding: 10px !important;
  }
}

/* ===========================================================================
   PART X — Dashboard v2 collapsible blocks (.d2-block / .d2-blk-*)
   ----------------------------------------------------------------------------
   `dashboard_2.blade.php` references `public/css/extra/dashboard_v2.css`,
   but that file does not exist on disk, so every `.d2-*` hook is unstyled.
   The user-reported symptom is:

       <div class="d2-blk-body">
           <div class="d2-blk-filter col-md-4">…select2…</div>
           <div id="…_table_wrapper" class="dataTables_wrapper …">…</div>
       </div>

   The `.col-md-4` floats left at 33% width and the `.dataTables_wrapper`
   that follows doesn't clear the float, so the filter and the table show
   inline side-by-side instead of stacked.

   This part:
     1. Establishes a proper card chrome for `.d2-block` (header + body).
     2. Lays out `.d2-blk-body` as a flex column (filter on top, table
        underneath, full width) — this is the actual fix for the inline
        bug — and strips the `.col-md-*` float from `.d2-blk-filter`.
     3. Caps the filter width to a sensible maximum (300px) so the select
        doesn't stretch to 100% and look broken.
     4. Polishes the toggle button, chevron, icon chip, title and hint.
     5. Lets the DataTables wrapper inside `.d2-blk-body` use the full
        cell width without inheriting a `form-inline` floating layout.
   ============================================================================ */

/* X.1 — Block card */
.d2-blocks {
  /* display: flex !important; */
  flex-direction: column !important;
  /* gap: 14px !important; */
  /* margin-top: 6px !important; */
}
.d2-block {
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-lg, 14px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  overflow: hidden !important;
}

/* X.2 — Header (toggle button) */
.d2-block .d2-blk-hdr {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  color: var(--color-text-default) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.d2-block .d2-blk-hdr:hover {
  background: color-mix(in srgb, var(--color-text-primary) 3%, var(--color-background-default)) !important;
}
.d2-block.is-open > .d2-blk-hdr,
.d2-block:not(.is-collapsed) > .d2-blk-hdr {
  border-bottom-color: var(--color-border-secondary) !important;
}
.d2-blk-hdr-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.d2-blk-ico {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--d2-blk-bg, var(--color-background-secondary)) !important;
  flex-shrink: 0 !important;
}
.d2-blk-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-default) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.1px !important;
}
.d2-blk-hint {
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}
.d2-block .d2-chevron {
  flex-shrink: 0 !important;
  color: var(--color-text-tertiary) !important;
  transition: transform .2s ease;
}
.d2-block.is-collapsed .d2-chevron {
  transform: rotate(-90deg) !important;
}

/* X.3 — Body: stack filter + table vertically, full width */
.d2-block .d2-blk-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px !important;
  background: var(--color-background-default) !important;
  /* Clear any floats from legacy Bootstrap descendants */
  overflow: visible !important;
}
.d2-block.is-collapsed .d2-blk-body {
  display: none !important;
}
/* Use ::after as a clearfix in case any descendant relies on float */
.d2-block .d2-blk-body::after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* X.4 — Filter row: kill the Bootstrap col float, cap the select width */
.d2-block .d2-blk-body > .d2-blk-filter,
.d2-block .d2-blk-body > .d2-blk-filter.col-md-4,
.d2-block .d2-blk-body > .d2-blk-filter.col-md-3,
.d2-block .d2-blk-body > .d2-blk-filter.col-md-6 {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  padding: 0 !important;
}
.d2-block .d2-blk-filter .form-control,
.d2-block .d2-blk-filter .select2-container {
  width: 100% !important;
  max-width: 320px !important;
}

/* X.5 — DataTables wrapper inside a block: own its row, no inline-flex with filter */
.d2-block .d2-blk-body > .dataTables_wrapper {
  width: 100% !important;
  margin: 0 !important;
  clear: both !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper.form-inline > * {
  display: block !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dt-buttons {
  margin-bottom: 10px !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dt-buttons .btn {
  margin: 0 !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dataTables_scroll {
  margin: 0 !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dataTables_info {
  padding: 8px 0 0 0 !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dataTables_paginate {
  padding-top: 8px !important;
  float: right !important;
}

/* X.6 — Bare table inside body (some blocks render <table> without DataTables yet) */
.d2-block .d2-blk-body > table.max-table {
  width: 100% !important;
  margin: 0 !important;
}

/* X.7 — d2-section heading (groups blocks) */
.d2-section {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--color-text-tertiary) !important;
  margin: 22px 0 10px 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
}

/* X.8 — Mobile breakpoint */
@media (max-width: 768px) {
  .d2-block .d2-blk-hdr { padding: 12px 14px !important; }
  .d2-block .d2-blk-body { padding: 14px !important; gap: 12px !important; }
  .d2-block .d2-blk-body > .d2-blk-filter,
  .d2-block .d2-blk-body > .d2-blk-filter.col-md-4 { max-width: 100% !important; }
  .d2-block .d2-blk-body > .d2-blk-filter .form-control,
  .d2-block .d2-blk-body > .d2-blk-filter .select2-container { max-width: 100% !important; }
  .d2-blk-hint { display: none !important; }
}

/* X.9 — Dark mode */
html.dark-mode .d2-block {
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
html.dark-mode .d2-block .d2-blk-hdr:hover {
  background: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-background-default)) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PART Y — login.css leak containment, fileinput .hide guard, .pos-row-form
   overflow on /sells/create

   Three independent fixes bundled together:
     Y.1  login.css ships an unscoped rule
            .input-group { display:flex; justify-content:center; gap:10px }
          (used for the OTP verify screen) that leaks into every page using
          .input-group. We re-scope it here: keep the OTP look on auth pages
          and the verify-container, neutralize it everywhere else.
     Y.2  Bootstrap-fileinput's "Cancel" button carries the `.hide` class
          while idle. Our seam rule on `.input-group .input-group-btn > .btn`
          uses `display: inline-flex !important` which beats `.hide`'s
          `display: none !important` on specificity. Force `.hide` to win.
     Y.3  `.pos-row-form` (a 2-col CSS grid in app.css) overflows its
          container on /sells/create because (a) its grid items default to
          `min-width: auto`, growing to their intrinsic content width, and
          (b) the `.payment_details_div` extra-fields blocks contain
          legacy Bootstrap `.col-md-*` floats with no `.row` parent that
          push width past the 1fr track. Cap min-width and let the details
          panel span the full width.
   ════════════════════════════════════════════════════════════════════════ */

/* Y.1 — Re-scope the leaked .input-group OTP layout from login.css
   ----------------------------------------------------------------
   login.css line ~166 declares:
       .input-group { display:flex; justify-content:center; gap:10px; }
   That rule is global. Anywhere it lands together with our E.6 seam,
   the `gap: 10px` and `justify-content: center` break the addon-merge
   look (visible gap between addon and field). We can't edit login.css
   here, so instead we:
     (a) neutralize the leaked declarations on every .input-group that
         is NOT inside the auth/verify scope, and
     (b) preserve the centered, gapped look only inside the OTP card. */
body:not(.auth-page) .input-group,
.modal .input-group,
.box .input-group,
.content .input-group {
  justify-content: flex-start !important;
  gap: 0 !important;
}
/* Re-affirm the OTP layout where it actually belongs */
.verify-container .input-group,
body.auth-page .verify-container .input-group {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.verify-container .input-group > .otp-input {
  flex: 0 0 auto !important;
  border-radius: 12px !important;
}

/* Y.2 — Bootstrap-fileinput: idle "Cancel" must stay hidden
   ---------------------------------------------------------
   Markup (when no file is selected):
     <div class="input-group-btn">
        ...
        <button class="btn btn-default hide
                       fileinput-cancel fileinput-cancel-button">
            …Cancel
        </button>
        ...
     </div>
   Our G.1 seam rule
       .input-group .input-group-btn > .btn { display: inline-flex !important; }
   has higher specificity than Bootstrap's plain `.hide { display:none !important }`,
   so the cancel button shows. Re-assert .hide with matching specificity. */
.input-group .input-group-btn > .btn.hide,
.input-group .input-group-btn > button.hide,
.input-group > .input-group-btn > .btn.hide,
.input-group > .input-group-btn > button.hide,
.file-input .input-group-btn > .btn.hide,
.file-input .input-group-btn > button.hide,
.btn.hide,
button.btn.hide,
a.btn.hide {
  display: none !important;
}
/* Same idea for the upload progress bar wrapper */
.file-input .kv-upload-progress.hide {
  display: none !important;
}

/* Y.2.b — Bootstrap-fileinput "no file selected" state
   ----------------------------------------------------
   When no file is picked, the plugin adds `.file-input-new` (or
   `.file-input-ajax-new`) to the wrapper, and vendor.css uses that
   class to hide the Remove / Upload buttons via plain `display:none`.
   Our G.1 seam rule
       .input-group .input-group-btn > .btn { display: inline-flex !important; }
   overrides the vendor's un-bang'd `display: none`, so Remove leaks
   through. Re-assert the vendor rule with !important and explicit
   button selectors so it wins on specificity. */
.file-input.file-input-new .fileinput-remove,
.file-input.file-input-new .fileinput-remove-button,
.file-input.file-input-new .fileinput-upload,
.file-input.file-input-new .fileinput-upload-button,
.file-input.file-input-new .close,
.file-input.file-input-new .file-preview,
.file-input.file-input-new .glyphicon-file,
.file-input.file-input-ajax-new .fileinput-remove-button,
.file-input.file-input-ajax-new .fileinput-upload-button,
.file-input.file-input-ajax-new .no-browse .input-group-btn,
.file-input.file-input-new .no-browse .input-group-btn,
.file-input.file-input-new .input-group-btn > button.fileinput-remove,
.file-input.file-input-new .input-group-btn > button.fileinput-remove-button,
.file-input.file-input-new .input-group-btn > button.fileinput-upload-button {
  display: none !important;
}

/* Y.3 — `.pos-row-form` overflow on /sells/create
   ------------------------------------------------
   app.css ships:
       .pos-row-form {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 10px;
       }
   In the payment modal it is wrapped by `.pos-payment-left` (a sized
   flex column inside .pos-payment-body), so the 1fr tracks resolve
   against a finite width and content fits. On /sells/create the same
   partial sits inside an unconstrained `.payment_row > .accordionContent`,
   and the grid items default to `min-width: auto` (intrinsic), which
   lets nested `.payment_details_div > .col-md-4` floats push the track
   past the container.
   Fixes:
     • Stop the grid from expanding past its container.
     • Force every direct child to honor the 1fr track (`min-width: 0`).
     • Promote the conditional details panel to span both columns so its
       internal Bootstrap row of col-md-* floats has room to lay out.
     • Defensive clearfix on those panels (they have no `.row` wrapper).
*/
.pos-row-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.pos-row-form > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Inputs/selects/textareas inside the grid must not push the track */
.pos-row-form .pos-input,
.pos-row-form .pos-select,
.pos-row-form .pos-textarea,
.pos-row-form .form-control,
.pos-row-form .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.pos-row-form .pos-input-icon-wrap {
  width: 100% !important;
  min-width: 0 !important;
}
/* The conditional payment-method detail panels (card / cheque / bank /
   custom_pay_*) carry `<div class="col-md-*">` floats without a `.row`
   wrapper — they need full width and a clearfix to behave inside the grid. */
.pos-row-form > .payment_details_div {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pos-row-form > .payment_details_div::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}
/* Their inner col-md-* should claim their share of the panel, no more */
.pos-row-form > .payment_details_div > [class*="col-"] {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.pos-row-form > .payment_details_div > [class*="col-"] .form-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* `.hide` on the panel must keep it out of the grid (otherwise it still
   reserves a row in some browsers). */
.pos-row-form > .payment_details_div.hide {
  display: none !important;
}
/* Same hardening for the legacy `.payment_row` wrapper used on /sells/create */
.payment_row > .pos-row-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Mobile: collapse to single column to remove the source of overflow */
@media (max-width: 991px) {
  .pos-row-form {
    grid-template-columns: 1fr !important;
  }
  .pos-row-form > .payment_details_div > [class*="col-"] {
    width: 100% !important;
    float: none !important;
  }
}

/* Y.4 — `.pos-input--has-icon` left padding wins over the global input rule
   ------------------------------------------------------------------------
   Symptom: on the payment row's "Paid on" field the date text was
   tucked underneath the calendar icon — text reads:
       "06/19/2026 09:50"  but only the trailing part is visible.
   Cause: the base rule at theme.css#L483-L504 sets
       input[type=text] { padding: 6px 10px !important }
   on every text input. The plain
       .pos-input--has-icon { padding-left: 30px }   (from app.css)
   has no !important, so the global 10px wins and the value collapses
   under the absolute-positioned `.pos-input-icon` at left: 10px.
   Fix: re-assert the icon offset with !important and align the icon's
   own left position to the same scale so the spacing reads correctly. */
.pos-input.pos-input--has-icon,
input.pos-input--has-icon,
.pos-input-icon-wrap > .pos-input {
  padding-left: 32px !important;
}
.pos-input-icon-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
.pos-input-icon-wrap > .pos-input-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--color-text-tertiary, #aaa) !important;
  font-size: 13px !important;
  pointer-events: none !important;
  line-height: 1 !important;
  z-index: 2 !important;
}
/* Defensive: ensure the input itself stays above the icon if the date
   picker plugin ever sets z-index on it */
.pos-input-icon-wrap > .pos-input {
  position: relative !important;
  z-index: 1 !important;
  background-clip: padding-box !important;
}

/* ==========================================================================
   Part Z — Top-bar (header_v2) drop-down theming
   --------------------------------------------------------------------------
   The header_v2 module ships its own token palette `--tb-*` in
   header_v2.css (loaded inline by header_v2.blade.php). Those tokens
   declare a parallel light/dark scheme that diverges from our
   design-system tokens (`--color-background-*`, `--color-text-*`,
   `--color-border-*`), so the open `.tb-drop` panels (language,
   quick-actions, user menu, notifications) read with the wrong surface
   color, the wrong border, and the wrong text contrast next to the
   themed shell.

   Rather than fork the module CSS, we re-bind the `--tb-*` tokens to
   our own scale at the `:root` and `html.dark-mode` levels. Every
   selector in header_v2.css consumes the vars (we audited it),
   so this single rebind cascades through the top bar, every dropdown,
   the badges, the user card, and the notification panel.

   Z.1 — Light mode rebind                                              */
:root {
  --tb-bg:          var(--color-background-primary, #ffffff) !important;
  --tb-bg-drop:     var(--color-background-primary, #ffffff) !important;
  --tb-border:      var(--color-border-secondary, #E1E4E9) !important;
  --tb-accent:      var(--color-text-primary, #1F2328) !important;
  --tb-accent-s:    color-mix(in srgb, var(--color-text-primary, #1F2328) 8%, transparent) !important;
  --tb-text-1:      var(--color-text-primary, #1F2328) !important;
  --tb-text-2:      var(--color-text-secondary, #6B7280) !important;
  --tb-text-3:      var(--color-text-tertiary, #9AA3AE) !important;
  --tb-hover:       var(--color-background-secondary, #F5F6F8) !important;
  --tb-danger:      var(--color-text-danger, #A32D2D) !important;
  --tb-success:     #16a34a !important;
  --tb-shadow:      0 1px 0 0 var(--color-border-secondary, #E1E4E9), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  --tb-drop-shadow: 0 8px 28px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  --tb-r:           8px !important;
}

/* Z.2 — Dark mode rebind */
html.dark-mode {
  --tb-bg:          var(--color-background-primary, #15171B) !important;
  --tb-bg-drop:     var(--color-background-primary, #15171B) !important;
  --tb-border:      var(--color-border-secondary, #23272E) !important;
  --tb-accent:      var(--color-text-primary, #E6E8EC) !important;
  --tb-accent-s:    color-mix(in srgb, var(--color-text-primary, #E6E8EC) 10%, transparent) !important;
  --tb-text-1:      var(--color-text-primary, #E6E8EC) !important;
  --tb-text-2:      var(--color-text-secondary, #9AA3AE) !important;
  --tb-text-3:      var(--color-text-tertiary, #6B7280) !important;
  --tb-hover:       var(--color-background-secondary, #1C1F24) !important;
  --tb-danger:      var(--color-text-danger, #ED7C7B) !important;
  --tb-success:     #34d399 !important;
  --tb-shadow:      0 1px 0 0 var(--color-border-secondary, #23272E), 0 2px 16px rgba(0, 0, 0, 0.40) !important;
  --tb-drop-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30) !important;
}

/* Z.3 — Subtle finishing touches that the rebind alone doesn't reach
   ------------------------------------------------------------------ */
.tb-drop {
  border-radius: 10px !important;
  padding: 6px !important;
  transform-origin: top right !important;
}
.tb-drop-head {
  padding: 8px 10px 6px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  margin-bottom: 4px !important;
}
.tb-drop-title {
  color: var(--color-text-tertiary) !important;
  letter-spacing: .6px !important;
}
.tb-ddi {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  gap: 10px !important;
}
.tb-ddi.active {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.tb-ddi.active svg { color: var(--color-text-primary) !important; }
.tb-sep {
  background: var(--color-border-secondary) !important;
  margin: 6px 4px !important;
}
.tb-user-card {
  background: var(--color-background-secondary) !important;
  border-radius: 8px !important;
}
.tb-av {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
}
.tb-badge {
  background: var(--color-text-danger) !important;
  border-color: var(--color-background-primary) !important;
}
.tb-notif-unread-pill {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.tb-ddi .tb-lang-flag {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
/* The check-mark glyph next to the active language uses an inline
   color:var(--tb-accent). Our rebind already maps --tb-accent to the
   primary text color, but we re-state it here for clarity. */
.tb-ddi svg[style*="--tb-accent"] {
  color: var(--color-text-primary) !important;
}

/* Z.4 — Top bar shell tweaks (consume the rebound vars) */
#bpos-topbar {
  box-shadow: none !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
}
.tb-icon-btn,
.tb-lang-btn,
.tb-user-btn,
.tb-sidebar-toggle {
  border-radius: 8px !important;
}
.tb-icon-btn.active,
.tb-lang-btn.active,
.tb-user-btn.active {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.tb-user-btn svg[style*="--tb-text-3"] {
  color: var(--color-text-tertiary) !important;
}

/* ==========================================================================
   Part AA — `.project_html` project card grid (Modules/Project)
   --------------------------------------------------------------------------
   Source markup: Modules/Project/Resources/views/project/index.blade.php
   renders a Bootstrap-3 `.row.eq-height-row` of `.col-md-4.eq-height-col`
   cards built from AdminLTE's heavy `.box.box-solid.box-primary` chrome
   (purple/blue header band, mixed icon font sizes, raw metadata list,
   stacked-but-not-overlapping avatars). The result feels dated next to the
   rest of the redesign.

   Goals of the re-skin:
     - Flat card surface using design-system tokens (no AdminLTE solid header)
     - Clean title row with a ghost "Action" button
     - Two-column metadata grid with subdued icons
     - Compact, overlapped avatar stack with rings
     - Subtle hover lift, tight responsive collapse
   ------------------------------------------------------------------------ */

/* AA.1 — Grid container & equal-height row */
.project_html {
  margin-top: 4px !important;
}
.project_html .eq-height-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}
.project_html .eq-height-row > .eq-height-col,
.project_html .eq-height-row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  padding: 0 !important;
  display: flex !important;
}

/* AA.2 — Card chrome (replaces .box.box-solid.box-primary) */
.project_html .box {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  overflow: hidden !important;
  margin: 0 !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.project_html .box:hover {
  border-color: var(--color-border-primary, var(--color-border-secondary)) !important;
  box-shadow: 0 6px 20px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  transform: translateY(-1px);
}
/* Kill the AdminLTE colored header band */
.project_html .box.box-solid.box-primary,
.project_html .box.box-solid {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.project_html .box.box-solid > .box-header {
  color: inherit !important;
  background: transparent !important;
}

/* AA.3 — Title row */
.project_html .box > .box-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 14px 14px 10px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  background: transparent !important;
}
.project_html .box > .box-header.with-border {
  border-bottom: 1px solid var(--color-border-secondary) !important;
}
.project_html .box > .box-header > .box-title {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.project_html .box > .box-header > .box-title > a {
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
}
.project_html .box > .box-header > .box-title > a:hover {
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* AA.4 — Action button (ghost) + dropdown */
.project_html .box-tools.pull-right {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.project_html .box-tools .dropdown-toggle.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.project_html .box-tools .dropdown-toggle.btn:hover,
.project_html .box-tools .dropdown.open > .dropdown-toggle.btn,
.project_html .box-tools .dropdown-toggle.btn[aria-expanded="true"] {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.project_html .box-tools .dropdown-toggle.btn > .fa,
.project_html .box-tools .dropdown-toggle.btn > i {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}
.project_html .box-tools .dropdown-menu {
  margin-top: 6px !important;
  padding: 6px !important;
  min-width: 200px !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
}
.project_html .box-tools .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}
.project_html .box-tools .dropdown-menu > li > a:hover,
.project_html .box-tools .dropdown-menu > li > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.project_html .box-tools .dropdown-menu > li > a > i,
.project_html .box-tools .dropdown-menu > li > a > .fa {
  width: 14px !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.project_html .box-tools .dropdown-menu > li > a:hover > i,
.project_html .box-tools .dropdown-menu > li > a:hover > .fa {
  color: var(--color-text-primary) !important;
}
.project_html .box-tools .dropdown-menu > li.divider {
  height: 1px !important;
  margin: 4px 2px !important;
  background: var(--color-border-secondary) !important;
}

/* AA.5 — Body: two-column metadata grid
   The blade renders raw text + <br> after each "<i> Label: Value".
   We can't easily restructure the markup from CSS, but we CAN tighten
   typography, ditch the floated col-md-8/col-md-4 pair (which leaves the
   right column empty when there's no progress bar), and make every <br>
   feel like a list separator. */
.project_html .box > .box-body {
  padding: 12px 14px !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--color-text-secondary) !important;
}
.project_html .box > .box-body > .row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
}
.project_html .box > .box-body > .row > [class*="col-"] {
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.project_html .box > .box-body > .row > .col-md-8 { flex: 1 1 auto !important; }
.project_html .box > .box-body > .row > .col-md-4 {
  flex: 0 0 auto !important;
  max-width: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.project_html .box > .box-body i,
.project_html .box > .box-body .fa,
.project_html .box > .box-body .fas {
  width: 14px !important;
  font-size: 11.5px !important;
  color: var(--color-text-tertiary) !important;
  margin-right: 6px !important;
  vertical-align: -1px !important;
}
/* Tighten the visual rhythm of the inline metadata lines */
.project_html .box > .box-body br {
  display: block !important;
  content: "" !important;
  margin-top: 2px !important;
}

/* AA.6 — Footer: overlapping avatar stack */
.project_html .box > .box-footer {
  padding: 10px 14px !important;
  background: var(--color-background-secondary) !important;
  border-top: 1px solid var(--color-border-secondary) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}
.project_html .box > .box-footer:empty {
  display: none !important;
}
.project_html .box > .box-footer > .user_avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-background-secondary) !important;
  background: var(--color-background-primary) !important;
  object-fit: cover !important;
  margin-left: -8px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06) !important;
  transition: transform .15s ease, z-index 0s;
}
.project_html .box > .box-footer > .user_avatar:first-child {
  margin-left: 0 !important;
}
.project_html .box > .box-footer > .user_avatar:hover {
  transform: translateY(-2px) scale(1.05);
  z-index: 2;
  position: relative;
}

/* AA.7 — Mobile collapse */
@media (max-width: 480px) {
  .project_html .eq-height-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .project_html .box > .box-body > .row {
    flex-direction: column !important;
  }
  .project_html .box > .box-body > .row > .col-md-4 {
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* AA.8 — Dark-mode tweaks */
html.dark-mode .project_html .box {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project_html .box:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project_html .box > .box-footer > .user_avatar {
  border-color: var(--color-background-secondary) !important;
}

/* ==========================================================================
   Part AB — `.project-kanban-board` jKanban re-skin
   --------------------------------------------------------------------------
   Source: project?project_view=kanban renders the jKanban widget inside
   `.project-kanban-board > .page > .main > .meta-tasks-wrapper > #myKanban`.
   The default jKanban CSS uses a flat slate palette with green/yellow/red
   header strips, square corners, and a hard scrollbar — visually loud
   compared to the rest of the redesign.

   Strategy: re-skin the columns and cards using design-system tokens,
   demote the colored header bars to a single accent rail per column, give
   cards proper padding/typography, normalise the chip labels, tighten the
   avatar stack (re-using AA's pattern), and make the perfect-scrollbar
   rails subtle.
   ------------------------------------------------------------------------ */

/* AB.1 — Outer wrapper & horizontal scroll surface */
.project-kanban-board {
  background: transparent !important;
  padding: 0 !important;
}
.project-kanban-board .page,
.project-kanban-board .main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.project-kanban-board .meta-tasks-wrapper {
  background: transparent !important;
  padding: 4px 2px 12px !important;
}
.project-kanban-board .meta-tasks {
  background: transparent !important;
  padding: 0 !important;
  overflow-x: auto !important;
}
.project-kanban-board .kanban-container {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 4px 6px 8px !important;
  width: auto !important;
}

/* AB.2 — Column shell */
.project-kanban-board .kanban-board {
  width: 300px !important;
  margin: 0 !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* AB.3 — Column header (status pill row) */
.project-kanban-board .kanban-board-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px 10px 14px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
}
/* Reset any color-coded background that jKanban applied via .new/.info/.warning/etc */
.project-kanban-board .kanban-board-header.new,
.project-kanban-board .kanban-board-header.info,
.project-kanban-board .kanban-board-header.good,
.project-kanban-board .kanban-board-header.warning,
.project-kanban-board .kanban-board-header.danger,
.project-kanban-board .kanban-board-header.success {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}
/* Add a left-edge accent rail per status — subtle, themable, neutral baseline */
.project-kanban-board .kanban-board-header::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 8px !important; bottom: 8px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--color-text-tertiary) !important;
  opacity: .55;
}
.project-kanban-board .kanban-board-header.new::before     { background: #9aa3ae !important; }
.project-kanban-board .kanban-board-header.info::before,
.project-kanban-board .kanban-board-header.good::before    { background: #3b82f6 !important; }
.project-kanban-board .kanban-board-header.warning::before { background: #f59e0b !important; }
.project-kanban-board .kanban-board-header.danger::before  { background: var(--color-text-danger) !important; }
.project-kanban-board .kanban-board-header.success::before { background: #16a34a !important; }

.project-kanban-board .kanban-title-board {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.project-kanban-board .kanban-title-board .board-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  color: var(--color-text-primary) !important;
  text-transform: uppercase !important;
}
.project-kanban-board .kanban-title-board .board-title i,
.project-kanban-board .kanban-title-board .board-title .fa,
.project-kanban-board .kanban-title-board .board-title .fas {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}
/* Append a count chip via attr() if jKanban doesn't supply one (graceful fallback) */
.project-kanban-board .kanban-board-header[data-count]::after {
  content: attr(data-count) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 999px !important;
}

/* AB.4 — Drag area (the column's body) */
.project-kanban-board .kanban-drag {
  flex: 1 1 auto !important;
  padding: 10px !important;
  background: transparent !important;
  min-height: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 280px) !important;
}
.project-kanban-board .kanban-drag:empty::after {
  content: "" !important;
  display: block !important;
  border: 1.5px dashed var(--color-border-secondary) !important;
  border-radius: 10px !important;
  height: 64px !important;
  opacity: .6;
}

.project-kanban-board .kanban-board > footer {
  padding: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
}

/* AB.5 — Card (kanban-item) */
.project-kanban-board .kanban-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 12px 10px !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  cursor: grab !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.project-kanban-board .kanban-item:hover {
  border-color: var(--color-border-primary, var(--color-border-secondary)) !important;
  box-shadow: 0 6px 18px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  transform: translateY(-1px);
}
.project-kanban-board .kanban-item:active {
  cursor: grabbing !important;
}

/* AB.6 — Card title row + inline action icons */
.project-kanban-board .kanban-item .card-title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--color-text-primary) !important;
}
.project-kanban-board .kanban-item .card-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 0;
  transform: translateX(2px);
  transition: opacity .15s ease, transform .15s ease;
  flex-shrink: 0 !important;
}
.project-kanban-board .kanban-item:hover .card-actions,
.project-kanban-board .kanban-item:focus-within .card-actions {
  opacity: 1;
  transform: translateX(0);
}
.project-kanban-board .kanban-item .card-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  color: var(--color-text-tertiary) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease;
}
.project-kanban-board .kanban-item .card-action:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.project-kanban-board .kanban-item .card-action i,
.project-kanban-board .kanban-item .card-action .fa,
.project-kanban-board .kanban-item .card-action .fas {
  font-size: 11px !important;
  color: inherit !important;
  margin: 0 !important;
}
.project-kanban-board .kanban-item .card-action.delete_a_project:hover {
  color: var(--color-text-danger) !important;
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
}

/* AB.7 — Tag chips inside the card */
.project-kanban-board .kanban-item .card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}
.project-kanban-board .kanban-item .card-tags br {
  display: none !important;
}
.project-kanban-board .kanban-item .card-tags > .label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 999px !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
.project-kanban-board .kanban-item .card-tags > .label > i,
.project-kanban-board .kanban-item .card-tags > .label > .fa,
.project-kanban-board .kanban-item .card-tags > .label > .fas {
  font-size: 10px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.project-kanban-board .kanban-item .card-tags > .label-danger {
  color: var(--color-text-danger) !important;
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-danger > i,
.project-kanban-board .kanban-item .card-tags > .label-danger > .fa,
.project-kanban-board .kanban-item .card-tags > .label-danger > .fas {
  color: var(--color-text-danger) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-success {
  color: #15803d !important;
  background: color-mix(in srgb, #16a34a 12%, transparent) !important;
  border-color: color-mix(in srgb, #16a34a 28%, transparent) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-warning {
  color: #92400e !important;
  background: color-mix(in srgb, #f59e0b 16%, transparent) !important;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-info {
  color: #1d4ed8 !important;
  background: color-mix(in srgb, #3b82f6 12%, transparent) !important;
  border-color: color-mix(in srgb, #3b82f6 28%, transparent) !important;
}

/* AB.8 — Avatar stack inside the card (re-uses AA's pattern, scaled down) */
.project-kanban-board .kanban-item .card-tags img.user_avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-background-primary) !important;
  background: var(--color-background-secondary) !important;
  object-fit: cover !important;
  margin-left: -6px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06) !important;
  transition: transform .15s ease;
}
.project-kanban-board .kanban-item .card-tags img.user_avatar:first-of-type {
  margin-left: 2px !important;
}
.project-kanban-board .kanban-item .card-tags img.user_avatar:hover {
  transform: translateY(-2px) scale(1.06);
  z-index: 2;
  position: relative;
}

/* AB.9 — Drag placeholder (jKanban's drop target) */
.project-kanban-board .kanban-item.is-moving,
.project-kanban-board .gu-mirror.kanban-item {
  opacity: .92 !important;
  box-shadow: 0 12px 28px rgba(15, 17, 21, 0.18) !important;
  border-color: var(--color-text-primary) !important;
  cursor: grabbing !important;
}
.project-kanban-board .kanban-item.gu-transit {
  opacity: .35 !important;
  background: var(--color-background-secondary) !important;
  border-style: dashed !important;
}

/* AB.10 — Perfect-scrollbar rails: subtle, themed */
.project-kanban-board .ps__rail-x,
.project-kanban-board .ps__rail-y {
  background: transparent !important;
  opacity: 0;
  transition: opacity .2s ease;
}
.project-kanban-board .meta-tasks:hover > .ps__rail-x,
.project-kanban-board .meta-tasks:hover > .ps__rail-y,
.project-kanban-board .kanban-drag:hover > .ps__rail-x,
.project-kanban-board .kanban-drag:hover > .ps__rail-y {
  opacity: 1;
}
.project-kanban-board .ps__thumb-x,
.project-kanban-board .ps__thumb-y {
  background: var(--color-border-secondary) !important;
  border-radius: 999px !important;
}
.project-kanban-board .ps__rail-x:hover .ps__thumb-x,
.project-kanban-board .ps__rail-y:hover .ps__thumb-y {
  background: var(--color-text-tertiary) !important;
}

/* AB.11 — Mobile: snap horizontal scroll to columns */
@media (max-width: 768px) {
  .project-kanban-board .kanban-container {
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
  }
  .project-kanban-board .kanban-board {
    width: 86vw !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
  }
  .project-kanban-board .kanban-drag {
    max-height: 60vh !important;
  }
}

/* AB.12 — Dark-mode tweaks */
html.dark-mode .project-kanban-board .kanban-item {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project-kanban-board .kanban-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project-kanban-board .kanban-item .card-tags img.user_avatar {
  border-color: var(--color-background-primary) !important;
}
html.dark-mode .project-kanban-board .gu-mirror.kanban-item,
html.dark-mode .project-kanban-board .kanban-item.is-moving {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.65) !important;
}

/* ==========================================================================
   Part AC — Uniform button height
   --------------------------------------------------------------------------
   Source of truth: --control-height (declared at :root above).
   Goal: every .btn, regardless of variant or context, paints at exactly
         the same height as a regular form-control. No more rows where
         "Create Ticket" is 34px next to a 36px Cancel pill, or where a
         table-row btn-xs sits 4px lower than the input next to it.

   We use box-sizing:border-box + an explicit `height` so vertical metrics
   are deterministic. Padding is recomputed to keep our 12.5px text
   visually centered, and `line-height` is set to 1 so multi-icon
   buttons don't grow on focus.
   ------------------------------------------------------------------------ */

/* AC.1 — Default button size (also covers extension classes from L300) */
.btn,
button.btn,
input[type=submit].btn,
input[type=button].btn,
input[type=reset].btn,
a.btn,
.add-user-modal-btn,
.max-add-btn,
.table-action-btn {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* AC.2 — Size variants */
.btn-xs {
  height: var(--control-height-xs) !important;
  min-height: var(--control-height-xs) !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.btn-sm {
  height: var(--control-height-sm) !important;
  min-height: var(--control-height-sm) !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
}
.btn-lg {
  height: var(--control-height-lg) !important;
  min-height: var(--control-height-lg) !important;
  padding: 0 18px !important;
  font-size: 13.5px !important;
}

/* AC.3 — Block-level buttons keep the height; just stretch */
.btn-block {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* AC.4 — Icon-only buttons stay square at the chosen height */
.btn.btn-icon,
.btn.btn-icon-only,
.btn[data-icon-only="true"] {
  width: var(--control-height) !important;
  padding: 0 !important;
  justify-content: center !important;
}
.btn-xs.btn-icon { width: var(--control-height-xs) !important; }
.btn-sm.btn-icon { width: var(--control-height-sm) !important; }
.btn-lg.btn-icon { width: var(--control-height-lg) !important; }

/* AC.5 — File-input "Browse"/"Remove"/"Cancel" buttons rendered by
   bootstrap-fileinput use .btn but the wrapper applies its own
   line-height. Lock them to the token too. */
.file-input .btn,
.file-caption-main .btn,
.file-input-new .btn,
.file-input-exist .btn {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
}

/* AC.6 — Buttons inside .input-group must match the input height */
.input-group .input-group-btn > .btn,
.input-group-btn > .btn,
.input-group .btn {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
}

/* AC.7 — DataTables export buttons (.dt-buttons > .btn) follow the
   small variant since they sit on a tight toolbar */
.dt-buttons .btn,
.dt-buttons .buttons-html5,
.dt-buttons .buttons-collection {
  height: var(--control-height-sm) !important;
  min-height: var(--control-height-sm) !important;
  padding: 0 var(--button-padding-x) !important;
}

/* AC.8 — Buttons inside .btn-group: align baselines, kill stray margins */
.btn-group {
  display: inline-flex !important;
  align-items: stretch !important;
}
.btn-group > .btn {
  margin: 0 !important;
}

/* AC.9 — Make sure inputs/selects align with the buttons.
   We don't ship a hard input height anywhere else, so re-declare here
   for the most common form-control selectors. */
.form-control,
input.form-control,
select.form-control,
textarea.form-control:not([rows]):not([data-allow-grow]) {
  min-height: var(--control-height) !important;
}
input.form-control,
select.form-control {
  height: var(--control-height) !important;
}
.input-group .form-control {
  height: var(--control-height) !important;
}
/* Daterangepicker entry / select2 single — keep them equal too */
.select2-container--default .select2-selection--single {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--control-height) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--control-height) - 2px) !important;
}

/* AC.10 — Native <select> chevron, anchored to --control-height tokens.
   Bootstrap 3's default <select> shows the OS dropdown caret which
   varies by browser/zoom and breaks the design language. We hide the
   native caret and paint a Font Awesome chevron via ::after on the
   parent .form-group, positioned so it always sits at the vertical
   mid-point of the select itself.

   Anchoring strategy: the .form-group can be stretched by flex
   parents, so we can't rely on its bottom edge. Instead we anchor the
   chevron against the BOTTOM of the .form-group — but cap the form-
   group at the select's natural height by giving it a known reference.
   The simplest reliable formula is: chevron bottom = (form-group
   bottom + (form-group height - control-height) - control-height/2).
   In practice the form-group's only child is the select (plus optional
   label above), so we use `bottom: ...` measured from the select via
   ::after on the select itself when ::after on a void-element isn't
   allowed. <select> doesn't accept ::after, so we keep the rule on
   .form-group, but we also force the .form-group to NOT grow taller
   than its content (height: max-content) so its bottom edge equals
   the select's bottom edge. */
.form-group:has(> select.form-control:not(.select2-hidden-accessible)),
.form-group:has(> .input-group > select.form-control:not(.select2-hidden-accessible)) {
  position: relative;
  /* Prevent flex/grid parents from stretching the form-group taller
     than its content; keeps the chevron anchor accurate. */
  align-self: flex-start;
}
.form-group:has(> select.form-control:not(.select2-hidden-accessible))::after,
.form-group:has(> .input-group > select.form-control:not(.select2-hidden-accessible))::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  right: var(--button-padding-x);
  /* Vertical-center the chevron inside the select using exact math:
       top = (control-height − chevron-glyph-height) / 2
     The chevron font-size is (--body-font-size − 1px), line-height 1,
     so its rendered box height equals that font-size. This centers
     perfectly at any --control-height (28, 34, 40, 48, …). */
  top: calc((var(--control-height) - var(--body-font-size, 13px) + 1px) / 2);
  z-index: 11;
  color: var(--color-text-tertiary, #9ca3af);
  pointer-events: none;
  font-size: calc(var(--body-font-size, 13px) - 1px);
  line-height: 1;
}
/* When a <label> sits above the select, push the chevron down by
   approximately the label's outer height so it lands on the select
   instead of the label. Bootstrap's .form-group label is line-height
   1.42857 with default 5px margin-bottom — total ~24px at 13px font. */
.form-group:has(> label):has(> select.form-control:not(.select2-hidden-accessible))::after,
.form-group:has(> label):has(> .input-group > select.form-control:not(.select2-hidden-accessible))::after {
  top: calc(
    (var(--body-font-size, 13px) * 1.42857) + 5px
    + (var(--control-height) - var(--body-font-size, 13px) + 1px) / 2
  );
}
/* Hide the native browser caret so only our chevron shows */
select.form-control:not(.select2-hidden-accessible) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: calc(var(--button-padding-x) * 2 + var(--body-font-size, 13px)) !important;
  background-image: none !important;
}
/* When the select sits inside an input-group with a trailing addon/btn,
   the chevron would overlap that addon — suppress in that case. */
.form-group:has(> .input-group > select.form-control + .input-group-addon)::after,
.form-group:has(> .input-group > select.form-control + .input-group-btn)::after,
.form-group:has(> .input-group > .input-group-addon + select.form-control:last-child)::after {
  /* keep the chevron only when the select is the right-most cell */
  display: initial;
}
.form-group:has(> .input-group > select.form-control:not(:last-child))::after {
  display: none !important;
}

/* ==========================================================================
   Part AD — Action-row button spacing & `.btn-default-submit` styling
   --------------------------------------------------------------------------
   Two issues from the product form (and other "Save & X / Save" rows):

   1. The three submit buttons are wrapped in `.btn-group`, which our
      L356-360 merge rule treats as a segmented control (zero gap, shared
      edges). For an action row with distinct verbs ("Save & Add Stock",
      "Save & Add Group Prices", "Save") this reads wrong — they should
      be discrete buttons with breathing room.

   2. The two left buttons use `.btn-default-submit`, an in-house class
      that has no rule anywhere in the app. They paint as bare browser
      submits with our generic `.btn` reset, so they look identical to
      `.btn-primary` minus the accent — flat white pills with no clear
      hierarchy.

   AD.1 fixes the layout: whenever a `.btn-group` sits inside a
   centered action wrapper (`.text-center`, `.form-actions`, or our
   `.actions-row` helper), its children become separate buttons with
   8px gap and full corner radii.

   AD.2 styles `.btn-default-submit` as a true secondary button — same
   contour as `.btn-default` but with a slightly stronger border so it
   reads as a deliberate alternate action next to the primary save.
   ------------------------------------------------------------------------ */

/* AD.1 — Spaced action-row btn-groups */
.text-center > .btn-group,
.form-actions > .btn-group,
.actions-row > .btn-group,
.modal-footer > .btn-group,
.box-footer > .btn-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.text-center > .btn-group > .btn,
.form-actions > .btn-group > .btn,
.actions-row > .btn-group > .btn,
.modal-footer > .btn-group > .btn,
.box-footer > .btn-group > .btn {
  border-radius: var(--border-radius-md) !important;
  margin: 0 !important;
}
/* Cancel the L356-360 corner-merging when we're inside an action row */
.text-center > .btn-group > .btn:first-child,
.text-center > .btn-group > .btn:last-child,
.text-center > .btn-group > .btn:not(:first-child),
.text-center > .btn-group > .btn:not(:last-child),
.form-actions > .btn-group > .btn:first-child,
.form-actions > .btn-group > .btn:last-child,
.form-actions > .btn-group > .btn:not(:first-child),
.form-actions > .btn-group > .btn:not(:last-child),
.actions-row > .btn-group > .btn:first-child,
.actions-row > .btn-group > .btn:last-child,
.actions-row > .btn-group > .btn:not(:first-child),
.actions-row > .btn-group > .btn:not(:last-child),
.modal-footer > .btn-group > .btn:first-child,
.modal-footer > .btn-group > .btn:last-child,
.modal-footer > .btn-group > .btn:not(:first-child),
.modal-footer > .btn-group > .btn:not(:last-child) {
  border-radius: var(--border-radius-md) !important;
}

/* AD.2 — Style the in-house `.btn-default-submit` as a secondary button */
.btn-default-submit,
button.btn-default-submit,
input[type=submit].btn-default-submit,
.btn.btn-default-submit {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary, var(--color-border-secondary)) !important;
  font-weight: 500 !important;
}
.btn-default-submit:hover,
button.btn-default-submit:hover,
.btn.btn-default-submit:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary, var(--color-border-secondary)) !important;
  color: var(--color-text-primary) !important;
}
.btn-default-submit:focus,
.btn-default-submit:active,
.btn.btn-default-submit:focus {
  background: var(--color-background-secondary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 20%, transparent) !important;
}

/* AD.3 — When a primary save sits next to default-submit siblings, give
   it a gentle elevation cue so the hierarchy reads at a glance. */
.text-center > .btn-group > .btn-primary.submit_product_form,
.form-actions > .btn-group > .btn-primary.submit_product_form,
.actions-row > .btn-group > .btn-primary.submit_product_form {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-info) 25%, transparent) !important;
}

/* AD.4 — Mobile: stack the action row vertically so wide labels don't
   create awkward two-line wraps mid-button */
@media (max-width: 480px) {
  .text-center > .btn-group,
  .form-actions > .btn-group,
  .actions-row > .btn-group,
  .modal-footer > .btn-group {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .text-center > .btn-group > .btn,
  .form-actions > .btn-group > .btn,
  .actions-row > .btn-group > .btn,
  .modal-footer > .btn-group > .btn {
    width: 100% !important;
  }
}

/* ==========================================================================
   Part AE — `.add-product-price-table` Variation column slimming
   --------------------------------------------------------------------------
   Issue: the outer Variable-Product table reserves `col-sm-2` (≈17%) for
   the "Variation" column even though that column only ever holds one
   small <select>. On wide screens this leaves the inner pricing table
   cramped, and on small screens the variation select grows to
   ridiculous widths.

   Fix: switch the table to a fixed-layout grid where the Variation
   column is a hard 200px (collapsing to 160px on narrow screens), give
   the inner select a sticky-top behavior so it stays visible while the
   user scrolls the values, and quiet down the column header.

   Note: we keep all of Part R intact and just override the column
   sizing + a few visual refinements. No selectors from R are removed.
   ------------------------------------------------------------------------ */

/* AE.1 — Outer table uses fixed layout so column widths are predictable */
#product_variation_form_part.add-product-price-table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* AE.2 — Slim the Variation column header and cell */
#product_variation_form_part.add-product-price-table > thead > tr > th:first-child,
#product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:first-child {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 160px !important;
}
#product_variation_form_part.add-product-price-table > thead > tr > th:last-child,
#product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:last-child {
  width: auto !important;
  max-width: none !important;
}

/* AE.3 — Override the .col-sm-2 / .col-sm-10 inline grid intent.
   The blade uses Bootstrap 3 col-* classes on the <th>, which would
   otherwise add 15px padding and a percent-based width. */
#product_variation_form_part.add-product-price-table > thead > tr > th.col-sm-2,
#product_variation_form_part.add-product-price-table > thead > tr > th.col-sm-10 {
  float: none !important;
  position: static !important;
  padding: 10px 12px !important;
}

/* AE.4 — Make the variation <select> stick to the top while the user
   scrolls long value lists. Keeps the context visible without
   reserving permanent vertical space. */
#product_variation_form_part .variation_row > td:first-child {
  vertical-align: top !important;
  padding: 14px 12px !important;
}
#product_variation_form_part .variation_row > td:first-child .variation_template {
  position: sticky !important;
  top: 8px !important;
  width: 100% !important;
}

/* AE.5 — Tighten the Variation column header label */
#product_variation_form_part.add-product-price-table > thead > tr > th:first-child {
  font-size: 11.5px !important;
  letter-spacing: .4px !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
}

/* AE.6 — Mobile: at < 768px, switch the row to a stacked block layout
   so the Variation select sits above the values table at full width
   instead of getting squeezed into the side. */
@media (max-width: 767px) {
  #product_variation_form_part.add-product-price-table,
  #product_variation_form_part.add-product-price-table > tbody,
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row,
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #product_variation_form_part.add-product-price-table > thead {
    display: none !important;
  }
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:first-child {
    border-bottom: 0 !important;
    padding-bottom: 8px !important;
  }
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:first-child::before {
    content: "Variation";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--color-text-tertiary);
    margin-bottom: 6px;
  }
  #product_variation_form_part .variation_row > td:first-child .variation_template {
    position: static !important;
  }
}

/* AE.7 — Visually quiet the inner table's box so the focus is on the
   Variation Values content, not nested borders */
.variation_value_table.blue-header {
  margin-bottom: 0 !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Part AJ — `/sells/create` POS row table redesign
   --------------------------------------------------------------------------
   Scope: only the legacy `#pos_table` rendered on /sells/create (and its
   sister /sells/edit). The modern POS form (`.pos-product-table` inside
   `.pos-product-table-wrap`) is intentionally untouched.

   Hook: we added a `.sells-create-page` class on the outer
   `.main-container` so every selector in this part is prefixed with it,
   making 100% sure no rules leak to /pos/create or /pos/edit.

   Goal:
   - Clean responsive row layout with no horizontal scrollbar at desktop.
   - Each row reads like a card on small screens (label::before chips).
   - Visual harmony with the rest of the design system (radius, borders,
     hover states, neutral surfaces).
   ------------------------------------------------------------------------ */

/* AJ.1 — Wrapper: kill the inline scrollbox, let it grow naturally */
.sells-create-page .table-responsive:has(> #pos_table) {
  overflow-x: visible !important;
  overflow-y: auto !important;
  max-height: none !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-background-primary) !important;
}
/* :has() fallback for browsers without it — also style by id of the table parent */
.sells-create-page .table-responsive {
  overflow-x: auto;
}

/* AJ.2 — Outer table chrome reset */
.sells-create-page #pos_table {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  /* Switch to fixed layout so the <col> widths defined in <colgroup> drive
     column sizing instead of the widest <td> content. With `auto` the qty
     input-group and the price input cell were stretching the body columns
     beyond their <th> col-md-* allocations, causing the header borders
     (Product / Quantity / Price / Subtotal) to drift out of alignment. */
  table-layout: fixed !important;
}
.sells-create-page #pos_table.table-bordered,
.sells-create-page #pos_table.table-striped {
  /* defeat AdminLTE/legacy striping & full grid borders */
  background: transparent !important;
}
.sells-create-page #pos_table > thead > tr > th,
.sells-create-page #pos_table > tbody > tr > td {
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-tertiary) !important;
  vertical-align: middle !important;
  padding: 10px 8px !important;
  background: transparent !important;
}
.sells-create-page #pos_table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

/* AJ.3 — Header row */
.sells-create-page #pos_table > thead > tr > th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: var(--color-text-tertiary) !important;
  background: var(--color-background-secondary) !important;
  white-space: nowrap !important;
}
.sells-create-page #pos_table > thead > tr > th:first-child {
  border-top-left-radius: var(--border-radius-lg) !important;
}
.sells-create-page #pos_table > thead > tr > th:last-child {
  border-top-right-radius: var(--border-radius-lg) !important;
}

/* AJ.4 — Row hover + alternating subtle stripe */
.sells-create-page #pos_table > tbody > tr.product_row:hover {
  background: color-mix(in srgb, var(--color-text-primary) 3%, transparent) !important;
}
.sells-create-page #pos_table > tbody > tr.product_row:nth-child(even) {
  background: color-mix(in srgb, var(--color-text-primary) 1.5%, transparent) !important;
}

/* AJ.5 — Product image cell */
.sells-create-page #pos_table .product-img {
  width: 56px !important;
  text-align: center !important;
}
.sells-create-page #pos_table .product-img img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: var(--border-radius-md) !important;
  border: 1px solid var(--color-border-tertiary) !important;
  margin: 0 !important;
  display: block !important;
  margin-inline: auto !important;
}

/* AJ.6 — Product name cell */
.sells-create-page #pos_table .pos-product-name-text {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  font-size: 13.5px !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.sells-create-page #pos_table .pos-product-meta {
  color: var(--color-text-tertiary) !important;
  font-size: 11.5px !important;
  margin-top: 0 !important;
}
.sells-create-page #pos_table .pos-product-meta-stock {
  color: var(--color-text-secondary) !important;
}
.sells-create-page #pos_table textarea[name*="sell_line_note"] {
  margin-top: 6px !important;
  font-size: 12px !important;
  resize: vertical !important;
  min-height: 36px !important;
}

/* AJ.7 — Quantity stepper redesign */
.sells-create-page #pos_table .input-number {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  background: var(--color-background-primary) !important;
  width: auto !important;
  table-layout: auto !important;
}
.sells-create-page #pos_table .input-number > .input-group-btn,
.sells-create-page #pos_table .input-number > .pos-unit-dropdown {
  display: inline-flex !important;
  width: auto !important;
}
.sells-create-page #pos_table .input-number .quantity-down,
.sells-create-page #pos_table .input-number .quantity-up,
.sells-create-page #pos_table .input-number .pos-unit-toggle {
  height: 32px !important;
  width: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sells-create-page #pos_table .input-number .quantity-down:hover {
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
}
.sells-create-page #pos_table .input-number .quantity-up:hover {
  background: color-mix(in srgb, #16a34a 12%, transparent) !important;
}
.sells-create-page #pos_table .input-number .pos-unit-toggle:hover {
  background: var(--color-background-secondary) !important;
}
.sells-create-page #pos_table .input-number .pos_quantity {
  height: 32px !important;
  width: 56px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--color-border-tertiary) !important;
  border-right: 1px solid var(--color-border-tertiary) !important;
  text-align: center !important;
  font-weight: 600 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* AJ.8 — Inputs in price/discount/tax cells */
.sells-create-page #pos_table .pos_unit_price,
.sells-create-page #pos_table .pos_unit_price_inc_tax,
.sells-create-page #pos_table .row_discount_amount,
.sells-create-page #pos_table .row_discount_type,
.sells-create-page #pos_table .tax_id,
.sells-create-page #pos_table .pos-tax-select {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
  border-radius: var(--border-radius-sm) !important;
  border: 1px solid var(--color-border-secondary) !important;
  font-size: 12.5px !important;
  padding: 0 8px !important;
  width: 100% !important;
  min-width: 80px !important;
  max-width: 140px !important;
  background: var(--color-background-primary) !important;
}
.sells-create-page #pos_table .row_discount_amount {
  margin-bottom: 4px !important;
}
.sells-create-page #pos_table .pos-tax-select {
  width: 100% !important;
  max-width: 110px !important;
}
.sells-create-page #pos_table td > br {
  display: none !important;
}

/* AJ.9 — Subtotal cell */
.sells-create-page #pos_table .pos-subtotal-cell {
  white-space: nowrap !important;
  font-weight: 600 !important;
}
.sells-create-page #pos_table .pos_line_total_text {
  color: var(--color-text-primary) !important;
  font-size: 13.5px !important;
}

/* AJ.10 — Remove button */
.sells-create-page #pos_table .pos-remove-cell {
  width: 40px !important;
  text-align: center !important;
}
.sells-create-page #pos_table .pos-remove-btn {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: var(--border-radius-md) !important;
  background: transparent !important;
  color: var(--color-text-tertiary) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  padding: 0 !important;
}
.sells-create-page #pos_table .pos-remove-btn:hover {
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
  color: var(--color-text-danger) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
}

/* AJ.11 — Tablet: hide Image col and merge stock+meta */
@media (max-width: 1100px) {
  .sells-create-page #pos_table > thead > tr > th:first-child,
  .sells-create-page #pos_table > tbody > tr > td.product-img {
    display: none !important;
  }
}

/* AJ.12 — Mobile: stack each row as a card */
@media (max-width: 767px) {
  .sells-create-page .table-responsive:has(> #pos_table),
  .sells-create-page .table-responsive {
    border: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    background: transparent !important;
  }
  .sells-create-page #pos_table,
  .sells-create-page #pos_table > tbody,
  .sells-create-page #pos_table > tbody > tr.product_row,
  .sells-create-page #pos_table > tbody > tr.product_row > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .sells-create-page #pos_table > thead {
    display: none !important;
  }
  .sells-create-page #pos_table > tbody > tr.product_row {
    border: 1px solid var(--color-border-secondary) !important;
    border-radius: var(--border-radius-lg) !important;
    background: var(--color-background-primary) !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    position: relative !important;
  }
  .sells-create-page #pos_table > tbody > tr.product_row > td {
    border: 0 !important;
    border-bottom: 1px dashed var(--color-border-tertiary) !important;
    padding: 8px 0 !important;
  }
  .sells-create-page #pos_table > tbody > tr.product_row > td:last-child {
    border-bottom: 0 !important;
  }
  .sells-create-page #pos_table > tbody > tr.product_row > td.product-img {
    display: inline-block !important;
    width: auto !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
  }
  .sells-create-page #pos_table > tbody > tr.product_row > td:not(.product-img):not(.pos-remove-cell)::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
  }
  /* Per-cell labels via :nth-child positional fallback (data-label not in markup) */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2)::before { content: "Product"; }
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(3)::before { content: "Quantity"; }
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(4)::before { content: "Unit Price"; }
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(5)::before { content: "Discount"; }
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(6)::before { content: "Tax"; }
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(7)::before { content: "Price inc. tax"; }
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(8)::before { content: "Subtotal"; }
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-remove-cell {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .sells-create-page #pos_table .pos_unit_price,
  .sells-create-page #pos_table .pos_unit_price_inc_tax,
  .sells-create-page #pos_table .row_discount_amount,
  .sells-create-page #pos_table .row_discount_type,
  .sells-create-page #pos_table .pos-tax-select {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* AJ.13 — Dark mode tweaks */
html.dark-mode .sells-create-page .table-responsive:has(> #pos_table) {
  background: var(--color-background-secondary) !important;
}
html.dark-mode .sells-create-page #pos_table > thead > tr > th {
  background: color-mix(in srgb, var(--color-background-primary) 60%, var(--color-background-secondary)) !important;
}

/* ==========================================================================
   Part AK — `/sells/create` AJ revisions
   --------------------------------------------------------------------------
   Two issues with Part AJ:

   1. `.pos-unit-menu` is always visible. The markup uses Bootstrap's
      `.open` class on the parent (`.pos-unit-dropdown.open`) to toggle
      the menu — but `.pos-unit-menu` doesn't carry the `.dropdown-menu`
      class, so Bootstrap's `.open > .dropdown-menu { display: block }`
      rule never matches. We need to declare visibility for
      `.pos-unit-menu` explicitly.

   2. Mobile (< 767px) UX with many products is impractical: every
      product card stacks 7 fields vertically, requiring lots of
      scrolling. On phones, only Qty / Subtotal / Remove are essential
      at a glance — the rest (price, discount, tax, line note) belong
      behind a modal triggered from the product name.
   ------------------------------------------------------------------------ */

/* AK.1 — Hide `.pos-unit-menu` by default, show only when parent is .open */
.sells-create-page .pos-unit-dropdown .pos-unit-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  z-index: 1000 !important;
  min-width: 140px !important;
  margin: 4px 0 0 !important;
  padding: 6px !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text-primary) 12%, transparent) !important;
  list-style: none !important;
}
.sells-create-page .pos-unit-dropdown.open > .pos-unit-menu {
  display: block !important;
}
.sells-create-page .pos-unit-dropdown {
  position: relative !important;
}
.sells-create-page .pos-unit-menu > li {
  list-style: none !important;
}
.sells-create-page .pos-unit-menu > li > a {
  display: block !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.sells-create-page .pos-unit-menu > li > a:hover {
  background: var(--color-background-secondary) !important;
}
.sells-create-page .pos-unit-menu > li > a.selected {
  background: color-mix(in srgb, var(--color-text-info) 15%, transparent) !important;
  color: var(--color-text-info) !important;
  font-weight: 600 !important;
}

/* AK.2 — Mobile redesign: keep ONLY Qty + Subtotal + Remove visible.
   Hide the image, all price/discount/tax/inc-tax inputs, and the
   description/note section. The product name becomes a modal trigger
   so users can edit hidden fields when needed. */
@media (max-width: 767px) {

  /* Re-establish row as a flex layout instead of a stacked block */
  .sells-create-page #pos_table > tbody > tr.product_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }
  .sells-create-page #pos_table > tbody > tr.product_row > td {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Reset all `::before` labels — mobile cards no longer use them */
  .sells-create-page #pos_table > tbody > tr.product_row > td::before {
    content: none !important;
  }

  /* Cell visibility — show only what matters on phones */
  .sells-create-page #pos_table > tbody > tr.product_row > td.product-img,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(4), /* Unit Price */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(5), /* Discount */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(6), /* Tax */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(7), /* Price inc. tax */
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-tax-cell,
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-price-cell {
    display: none !important;
  }

  /* Product cell — primary, takes the available row space */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: 1 !important;
  }

  /* Hide line note + meta-stock + modifier sections — they belong in the modal */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) textarea[name*="sell_line_note"],
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) .help-block,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) .modifier-display-section,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) .modifiers_html,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) br {
    display: none !important;
  }

  /* Style the product name as a tappable link to indicate the modal */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) .pos-product-name-trigger,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2) .pos-product-name-text {
    color: var(--color-text-info) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: color-mix(in srgb, var(--color-text-info) 35%, transparent) !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
  }
  /* If the markup just has `.pos-product-name-text` (no trigger wrapper)
     because the partial wasn't updated, it still looks tappable. */

  /* Quantity cell — fits the stepper inline next to subtotal */
  .sells-create-page #pos_table > tbody > tr.product_row > td.unit-quantity-flex,
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-qty-cell {
    flex: 0 0 auto !important;
    order: 2 !important;
  }
  .sells-create-page #pos_table .input-number {
    width: auto !important;
  }

  /* Subtotal cell */
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-subtotal-cell {
    flex: 1 1 auto !important;
    text-align: right !important;
    order: 3 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Remove cell — pinned to the right */
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-remove-cell {
    position: static !important;
    flex: 0 0 auto !important;
    order: 4 !important;
  }
}

/* ==========================================================================
   Part AL — AK corrections
   --------------------------------------------------------------------------
   Two issues uncovered after AK landed:

   1. Dropdown menu is clipped on click. AJ.7 set `.input-number {
      overflow: hidden }`, so when `.pos-unit-dropdown.open .pos-unit-menu`
      paints absolutely positioned at top:100%, the parent pill clips it.

   2. AK.2 used `:nth-child(4..7)` to hide unit-price/discount/tax/inc-tax
      cells, but the row markup begins with TWO hidden inputs as direct
      children of <tr>:
        <input type="hidden" name="row_id">      ← nth-child(1)
        <input type="hidden" name="quantity_cd"> ← nth-child(2)
        <td class="product-img">                 ← nth-child(3)
        <td>product name                         ← nth-child(4)  ← HIT
        <td class="unit-quantity-flex">qty       ← nth-child(5)  ← HIT
        <td>unit price                           ← nth-child(6)  ← HIT
        <td>discount                             ← nth-child(7)  ← HIT
      So the rule was hiding product/qty/unit-price/discount instead of
      unit-price/discount/tax/inc-tax. Result: only Subtotal + Remove
      visible.

   Fix: switch to `:nth-of-type` (counts only <td> siblings) and
   class/`:has()` matching for robustness.
   ------------------------------------------------------------------------ */

/* AL.1 — Release dropdown clipping & give the menu enough z-index */
.sells-create-page #pos_table .input-number {
  overflow: visible !important;
}
.sells-create-page #pos_table .pos-unit-dropdown {
  position: relative !important;
  overflow: visible !important;
}
.sells-create-page #pos_table .pos-unit-menu {
  z-index: 1050 !important;
}
.sells-create-page #pos_table .pos-unit-dropdown.open > .pos-unit-menu {
  display: block !important;
}

/* AL.2 — Mobile: revert AK's broken :nth-child hides, use class/:has */
@media (max-width: 767px) {
  /* Reset wrong-target hides from AK.2 */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(4),
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(5),
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(6),
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(7) {
    display: revert !important;
  }
  /* Reset the previous ::before content rules that targeted nth-child too */
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(2)::before,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(3)::before,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(4)::before,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(5)::before,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(6)::before,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(7)::before,
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-child(8)::before {
    content: none !important;
  }

  /* Hide image, unit-price, discount, tax, price-inc-tax cells —
     identified by class or by content (`:has()`), NOT by position. */
  .sells-create-page #pos_table > tbody > tr.product_row > td.product-img,
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-tax-cell,
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-price-cell,
  .sells-create-page #pos_table > tbody > tr.product_row > td:has(> .pos_unit_price):not(.pos-price-cell),
  .sells-create-page #pos_table > tbody > tr.product_row > td:has(> .row_discount_amount) {
    display: none !important;
  }

  /* Show + flex-order the kept cells. We use :nth-of-type, which counts
     only <td> siblings, so the leading hidden <input>s are ignored. */
  .sells-create-page #pos_table > tbody > tr.product_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  /* Product name = 1st td after the (hidden) image td. Use class/has */
  .sells-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text),
  .sells-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger),
  .sells-create-page #pos_table > tbody > tr.product_row > td:nth-of-type(2) {
    display: block !important;
    flex: 1 1 100% !important;
    order: 1 !important;
    min-width: 0 !important;
  }
  /* Quantity */
  .sells-create-page #pos_table > tbody > tr.product_row > td.unit-quantity-flex,
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-qty-cell,
  .sells-create-page #pos_table > tbody > tr.product_row > td:has(> .input-number) {
    display: block !important;
    flex: 0 0 auto !important;
    order: 2 !important;
  }
  /* Subtotal */
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-subtotal-cell {
    display: block !important;
    flex: 1 1 auto !important;
    text-align: right !important;
    order: 3 !important;
    font-weight: 700 !important;
  }
  /* Remove */
  .sells-create-page #pos_table > tbody > tr.product_row > td.pos-remove-cell {
    display: block !important;
    position: static !important;
    flex: 0 0 auto !important;
    order: 4 !important;
  }
}

/* ==========================================================================
   Part AM — REMOVED
   --------------------------------------------------------------------------
   Mobile drawer styles for `.row_edit_product_price_model` were removed
   per user request. The default Bootstrap modal behavior is restored.
   ------------------------------------------------------------------------ */

/* AM.3 — Make sure the trigger looks tappable everywhere (not just mobile) */
.sells-create-page #pos_table .pos-product-name-trigger {
  display: inline-block !important;
  cursor: pointer !important;
}


/* ==========================================================================
   Part AN — Clickability fix for product name modal trigger
   --------------------------------------------------------------------------
   The flexbox layout in AK.2 and AL.2 reordered cells visually using
   the `order` property, but didn't assign a `z-index`. This caused
   subsequent cells in the DOM (like the quantity stepper) to overlap
   and block clicks on the product name cell, which appears first
   visually but is an earlier sibling in the DOM.

   Fix: Assign a `z-index` to the flex items to ensure the product
   name cell is stacked on top and can receive clicks.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sells-create-page #pos_table > tbody > tr.product_row > td {
    position: relative;
    z-index: 1;
  }

  .sells-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger),
  .sells-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) {
    z-index: 2;
  }
}

/* ==========================================================================
   Part AO — Release the row's stacking context while a modal is open
   --------------------------------------------------------------------------
   The `.row_edit_product_price_model` modal is rendered INSIDE a
   `<td class="product_row">` cell. Part AN gave that <td>
   `position: relative; z-index: 1` to make the product name clickable
   above the qty stepper — but that creates a *stacking context* which
   traps the modal: the modal's z-index 1050 only applies relative to
   its parent stacking context, so the entire row (with modal inside)
   sits at z-index 1 against siblings.

   Fix: While `body.modal-open` is set, neutralise the row/td
   stacking context so the modal can escape.
   ------------------------------------------------------------------------ */
body.modal-open .sells-create-page #pos_table > tbody > tr.product_row,
body.modal-open .sells-create-page #pos_table > tbody > tr.product_row > td {
  position: static !important;
  z-index: auto !important;
}

/* ==========================================================================
   Part AP — /sells/create form-box: prevent float-clear gaps
   --------------------------------------------------------------------------
   Bootstrap 3's float-based grid produces empty space when columns in the
   previous row have differing heights (e.g. Status: vs Invoice Date: vs
   Selling Price Group with no extra controls). Switch the form-box's
   row container to flex-wrap so columns settle into the next available
   slot regardless of neighbour height.
   ------------------------------------------------------------------------ */
.sells-create-page .form-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.sells-create-page .form-box > .clearfix {
  display: none !important;
}

/* ==========================================================================
   Part AP.2 — Product create/edit accordion: prevent float-clear gaps
   --------------------------------------------------------------------------
   The Product Information accordion on /products/create + /products/edit
   uses the same Bootstrap 3 float pattern: a single `.row` containing
   ~10 sibling `<div class="col-sm-6">` cells that each wrap a form input
   in a `.form-group` (or a `.form-box` for the Product Name field).
   Two issues compound:
     1. `.form-group` and `.form-box` carry slightly different
        bottom-margins, producing uneven heights row-by-row.
     2. When a tall cell (e.g. select with helper button → 36px row)
        sits opposite a short cell (e.g. plain input → 34px row), BS3's
        float clearing pushes the next column down by the TALLER row's
        height, leaving a vertical empty rectangle under the shorter
        cell — exactly the red boxes the user circled.
   Switching the accordion's `.row` to `display: flex; flex-wrap: wrap`
   makes each row of two cells inherit the same cross-axis height, so
   columns settle on the next line cleanly. The form controls inside
   keep their `.form-control` / Select2 widths via `width: 100%`.       */
.accordionContent > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.accordionContent > .row > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}
.accordionContent > .row > [class*="col-"] > .form-group,
.accordionContent > .row > [class*="col-"] > .form-box {
  width: 100% !important;
  flex: 1 0 auto !important;
}
/* Hide cells with the BS3 `hide` utility class so they don't reserve
   a flex slot (otherwise the Sub Units column produces a phantom gap). */
.accordionContent > .row > [class*="col-"].hide {
  display: none !important;
}
/* The Device Module field uses `col-md-4 col-lg-4` (33%) instead of
   `col-sm-6` (50%) which breaks the two-up rhythm at lg+ widths and
   creates an uneven empty trailing slot. Promote it to a 50% cell so
   it sits flush with its sibling.                                    */
.accordionContent > .row > .col-xs-12.col-sm-6.col-md-4.col-lg-4 {
  width: 50% !important;
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
@media (max-width: 767px) {
  .accordionContent > .row > [class*="col-sm-"],
  .accordionContent > .row > .col-xs-12.col-sm-6.col-md-4.col-lg-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Part AQ — Bill To / Ship To address chips
   --------------------------------------------------------------------------
   The `<small><div class="bill-to-option">` block renders Bill To and
   Ship To addresses as raw <button> elements with un-styled inner text.
   Render them as side-by-side compact info chips: subtle border,
   uppercase label, address as small body text. On mobile they stack.
   ------------------------------------------------------------------------ */
.bill-to-option {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 0;
}
.bill-to-option > button {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--color-border-secondary, #e5e7eb);
  border-radius: var(--border-radius-md, 8px);
  background: var(--color-background-primary, #fff);
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-secondary, #6b7280);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bill-to-option > button:hover {
  border-color: var(--color-border-primary, #d1d5db);
  background: var(--color-background-secondary, #f9fafb);
}
.bill-to-option > button > div {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-primary, #111827);
  white-space: normal;
  word-break: break-word;
}
.bill-to-option > button > div:empty {
  display: none;
}
@media (max-width: 575px) {
  .bill-to-option {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Part AR — input-group: align addon / button to input height
   --------------------------------------------------------------------------
   When `.input-group` is rendered as flex (forced by various overrides),
   the `.input-group-addon` and `.input-group-btn` retain content-sized
   heights, leaving them visually mis-aligned with the form-control
   inside. Force flex behaviour with stretch alignment so all child cells
   share the row height and inner buttons fill it.
   ------------------------------------------------------------------------ */
.input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100%;
}
.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn {
  display: flex !important;
  align-items: center !important;
  height: var(--control-height, 34px) !important;
  min-height: var(--control-height, 34px) !important;
  box-sizing: border-box !important;
}
.input-group > .input-group-addon {
  justify-content: center !important;
  padding: 0 var(--button-padding-x) !important;
}
.input-group > .input-group-btn {
  width: auto !important;
}
.input-group > .input-group-btn > .btn {
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* select2 single rendered inside input-group must also follow */
.input-group > .select2-container--default .select2-selection--single {
  height: var(--control-height, 34px) !important;
  min-height: var(--control-height, 34px) !important;
  display: flex !important;
  align-items: center !important;
}

/* ==========================================================================
   Part AS — /pos/create mobile row layout (mirror of AK/AL/AN)
   --------------------------------------------------------------------------
   Both /sells/create and /pos/create render the same product_row.blade.php
   partial inside `#pos_table`, but with different table classes and outer
   page wrappers. AK/AL/AN gave /sells/create a clean mobile row. Replicate
   the same UX for /pos/create — scoped to `.pos-create-page` so the rules
   only apply on that page.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Release the table-level display so rows can flex to full width */
  .pos-create-page #pos_table,
  .pos-create-page #pos_table > tbody {
    display: block !important;
    width: 100% !important;
  }
  .pos-create-page #pos_table > thead {
    display: none !important;
  }
  .pos-create-page .pos-product-table-wrap {
    overflow-x: visible !important;
  }

  /* Re-establish row as flex */
  .pos-create-page #pos_table > tbody > tr.product_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 4px !important;
    column-gap: 10px !important;
    padding: 2px 12px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-radius: var(--border-radius-md, 8px) !important;
    background: var(--color-background-primary, #fff) !important;
  }
  .pos-create-page #pos_table > tbody > tr.product_row > td {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide image, all price/discount/tax cells via class + :has() to avoid
     :nth-child miscount caused by leading hidden <input>s. */
  .pos-create-page #pos_table > tbody > tr.product_row > td.product-img,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-tax-cell,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-price-cell,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos_unit_price):not(.pos-price-cell),
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .row_discount_amount) {
    display: none !important;
  }

  /* Product cell — first row, takes remaining width before remove */
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger),
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    order: 1 !important;
    margin-right: auto !important; /* pin remove to far right */
    z-index: 2;
    position: relative;
  }

  /* Hide product cell secondary content — note/help/modifiers belong in modal */
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) textarea[name*="sell_line_note"],
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) .help-block,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) .modifier-display-section,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) .modifiers_html,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) textarea[name*="sell_line_note"],
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) .help-block,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) .modifier-display-section,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) .modifiers_html {
    display: none !important;
  }

  /* Style the product name as tappable */
  .pos-create-page #pos_table .pos-product-name-trigger,
  .pos-create-page #pos_table .pos-product-name-text {
    color: var(--color-text-info) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: color-mix(in srgb, var(--color-text-info) 35%, transparent) !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
  }

  /* Quantity cell — full stepper redesign for mobile */
  .pos-create-page #pos_table > tbody > tr.product_row > td.unit-quantity-flex,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-qty-cell {
    flex: 0 0 auto !important;
    order: 2 !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    height: 36px !important;
    border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-radius: var(--border-radius-md, 8px) !important;
    overflow: visible !important;
    background: var(--color-background-primary, #fff) !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number > .input-group-btn {
    display: inline-flex !important;
    width: auto !important;
    height: 100% !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number .quantity-down,
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number .quantity-up,
  .pos-create-page .pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-down,
  .pos-create-page .pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-up {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number .pos_quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-right: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .pos-unit-dropdown {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 100% !important;
    margin-left: 4px !important;
    border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .pos-unit-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* Subtotal cell — second visual row, right side */
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-subtotal-cell {
    flex: 1 1 auto !important;
    text-align: right !important;
    order: 5 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Qty cell — second visual row, left side */
  .pos-create-page #pos_table > tbody > tr.product_row > td.unit-quantity-flex,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-qty-cell {
    order: 4 !important;
    flex: 0 0 auto !important;
  }
  /* Force a flex line break BETWEEN remove(order 2) and qty(order 4)
     by inserting an empty pseudo-element flex item on the TR. */
  .pos-create-page #pos_table > tbody > tr.product_row::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Remove cell — first row, far right */
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-remove-cell,
  .pos-create-page #pos_table > tbody > tr.product_row > td.text-center.v-center.pos-remove-cell {
    position: static !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    margin-left: auto !important;
    text-align: right !important;
    align-self: center !important;
  }
}

/* Modal-open: release stacking context (mirror of Part AO) */
body.modal-open .pos-create-page #pos_table > tbody > tr.product_row,
body.modal-open .pos-create-page #pos_table > tbody > tr.product_row > td {
  position: static !important;
  z-index: auto !important;
}

/* ==========================================================================
   Part AT — Modifier buttons + combo modifier display
   --------------------------------------------------------------------------
   Two related areas:
   1. Modifier btn-group inside `.panel-body` (chip-style toggleable
      buttons). Design-system colors, rounded chips, clear active state.
   2. `.combo_modifiers` and `.combo-item` blocks in product rows. Use
      tokens, compact spacing, responsive layout (chips wrap on mobile).
   ------------------------------------------------------------------------ */

/* --- 1. Modifier btn-group (chips) --- */
.panel-collapse .panel-body > .btn-group[data-toggle="buttons"],
.btn-group[data-toggle="buttons"]:has(> .modifier-btn) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}
.btn-group[data-toggle="buttons"] > .modifier-btn,
.modifier-btn,
.modifier-btn.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--color-border-secondary, #e5e7eb) !important;
  background: var(--color-background-primary, #fff) !important;
  color: var(--color-text-primary, #111827) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  margin: 0 !important;
  float: none !important;
  box-shadow: none !important;
  position: relative !important;
}
/* Inactive state */
.modifier-btn.btn.btn-outline-primary,
.modifier-btn:not(.active) {
  background: var(--color-background-primary, #fff) !important;
  color: var(--color-text-secondary, #6b7280) !important;
  border-color: var(--color-border-secondary, #e5e7eb) !important;
}
.modifier-btn.btn:hover {
  border-color: var(--color-text-success, #16a34a) !important;
  background: color-mix(in srgb, var(--color-text-success, #16a34a) 8%, #fff) !important;
}
/* Active state — strong solid green */
.modifier-btn.btn.active,
.modifier-btn.active,
.modifier-btn.btn.btn-success.active,
.modifier-btn.btn-success.active,
.btn-group[data-toggle="buttons"] > .modifier-btn.active,
.btn-group[data-toggle="buttons"] > .modifier-btn.btn-success {
  background: var(--color-text-success, #16a34a) !important;
  border-color: var(--color-text-success, #16a34a) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-success, #16a34a) 18%, transparent) !important;
}
.modifier-btn.active .modifier-icon,
.modifier-btn.btn-success .modifier-icon {
  color: #fff !important;
}
.modifier-btn .modifier-icon {
  font-size: 14px !important;
  color: var(--color-text-tertiary, #9ca3af);
}
.modifier-btn input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* --- 2. Combo modifiers section --- */
.combo-items-section {
  width: 100% !important;
  display: block !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--color-border-secondary, #e5e7eb) !important;
}
.combo-header {
  margin-bottom: 6px !important;
}
.combo_modifiers {
  margin-top: 4px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.combo-toggle-btn.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  height: auto !important;
  min-height: 26px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  background: var(--color-background-secondary, #f9fafb) !important;
  color: var(--color-text-secondary, #6b7280) !important;
}
.combo-toggle-btn .combo-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--color-text-info, #2563eb) !important;
  color: #fff !important;
}

/* Combo items list (override inline styles via !important) */
.combo_modifiers .combo-item {
  flex: 1 1 220px !important;
  min-width: 200px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-left: 3px solid var(--color-text-info, #2563eb) !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  background: var(--color-background-primary, #fff) !important;
  display: flex !important;
  flex-direction: column !important;
}
.combo_modifiers .combo-item .combo-product-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  color: var(--color-text-info, #2563eb) !important;
  font-size: 13px !important;
}
.combo_modifiers .combo-item br {
  display: none !important;
}
.combo_modifiers .selected_modifiers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
.combo_modifiers .product_modifier {
  display: inline-flex !important;
  flex-direction: column !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-left: 3px solid var(--color-text-success, #16a34a) !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  background: var(--color-background-secondary, #f9fafb) !important;
}
.combo_modifiers .product_modifier .modifier_name {
  font-weight: 600 !important;
  color: var(--color-text-success, #16a34a) !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.combo_modifiers .product_modifier small {
  font-size: 11px !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin-top: 2px !important;
}

/* Desktop: keep combo modifier chips inline horizontally */
@media (min-width: 768px) {
  .combo_modifiers .selected_modifiers {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .combo_modifiers .product_modifier {
    width: auto !important;
  }
}

/* Mobile tweaks: stack and slim */
@media (max-width: 767px) {
  .combo_modifiers {
    flex-direction: column !important;
  }
  .combo_modifiers .combo-item {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .combo_modifiers .selected_modifiers {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .combo_modifiers .product_modifier {
    width: auto !important;
    flex: 0 1 auto !important;
  }
  .panel-collapse .panel-body > .btn-group[data-toggle="buttons"] {
    gap: 6px !important;
  }
  .modifier-btn.btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
    min-height: 30px !important;
  }
}

/* ==========================================================================
   Part AU — Combo items row (separate <tr> with colspan)
   --------------------------------------------------------------------------
   Combo items now live in their own <tr class="combo_items_row"> rendered
   right after the product row. The single <td colspan="10"> spans the
   entire table width so combo cards lay out side-by-side regardless of
   the product column width.
   ------------------------------------------------------------------------ */
#pos_table tbody tr.combo_items_row {
  background: transparent !important;
}
#pos_table tbody tr.combo_items_row > td.combo_items_cell {
  padding: 0 10px 10px 10px !important;
  border-top: 0 !important;
  background: transparent !important;
}
#pos_table tbody tr.combo_items_row .combo-items-section {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: block !important;
  box-shadow: none !important;
}
#pos_table tbody tr.combo_items_row .combo-header {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px 0 !important;
  padding: 3px 8px !important;
  border: 1px solid var(--color-border-tertiary, #e5e7eb) !important;
  background: transparent !important;
  border-radius: var(--border-radius-sm, 4px) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-text-secondary, #6b7280) !important;
  cursor: pointer !important;
}
#pos_table tbody tr.combo_items_row .combo-header .combo-toggle-icon {
  font-size: 12px !important;
  color: var(--color-text-secondary, #6b7280) !important;
}
#pos_table tbody tr.combo_items_row .combo-header .combo-count {
  display: inline !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

/* Combo cards: side-by-side flex (reference: combo_items_full_row_width.html) */
#pos_table tbody tr.combo_items_row .combo_modifiers {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
/* The Bootstrap collapse <div> is the actual flex container holding the cards */
#pos_table tbody tr.combo_items_row .combo_modifiers > .collapse,
#pos_table tbody tr.combo_items_row .combo_modifiers > .collapsing,
#pos_table tbody tr.combo_items_row .combo_modifiers > .panel-collapse {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 6px !important;
}
/* Bootstrap toggles `.collapse` to `display:none` until `.in` is added —
   honor that when collapsed. */
#pos_table tbody tr.combo_items_row .combo_modifiers > .collapse:not(.in) {
  display: none !important;
}
#pos_table tbody tr.combo_items_row .combo-item {
  flex: 1 1 220px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-left: 3px solid var(--color-border-info, #93c5fd) !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
  line-height: 1.5 !important;
}
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item {
  display: inline !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--color-text-info, #2563eb) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name strong,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item strong {
  color: inherit !important;
  font-weight: 500 !important;
}
/* `>` separator after the combo-product-name, before the modifier list */
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name + .selected_modifiers::before,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item + .selected_modifiers::before,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name + br + .selected_modifiers::before,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item + br + .selected_modifiers::before {
  content: " > " !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin: 0 4px !important;
  font-weight: 500 !important;
}
/* The <br> emitted by pos_realtime.js between name and modifiers must collapse
   so we render on a single line. */
#pos_table tbody tr.combo_items_row .combo-item > br {
  display: none !important;
}
/* Modifiers inside a combo-item: flow inline on the same line as the name */
#pos_table tbody tr.combo_items_row .selected_modifiers {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#pos_table tbody tr.combo_items_row .modifier-set-group {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
#pos_table tbody tr.combo_items_row .modifier-set-name {
  display: inline !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin: 0 4px 0 0 !important;
}
#pos_table tbody tr.combo_items_row .product_modifier {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}
/* `|` divider between consecutive modifier chips on the same combo-item */
#pos_table tbody tr.combo_items_row .product_modifier + .product_modifier::before {
  content: " | " !important;
  display: inline !important;
  color: var(--color-border-tertiary, #d1d5db) !important;
  margin: 0 4px !important;
  font-weight: 400 !important;
}
#pos_table tbody tr.combo_items_row .product_modifier .modifier_name {
  display: inline !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--color-text-success, #16a34a) !important;
  margin-right: 4px !important;
}
#pos_table tbody tr.combo_items_row .product_modifier .modifier_name i {
  margin-right: 3px !important;
}
#pos_table tbody tr.combo_items_row .product_modifier small,
#pos_table tbody tr.combo_items_row .product_modifier .text-muted {
  display: inline !important;
  font-size: 11px !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin-left: 2px !important;
}
/* Defeat inline styles emitted by pos_realtime.js generateComboProducts /
   add_modifier handlers (they hard-code border/padding/margin on each chip). */
#pos_table tbody tr.combo_items_row .product_modifier[style] {
  display: inline !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#pos_table tbody tr.combo_items_row .product_modifier .modifier_name[style] {
  display: inline !important;
  font-weight: 500 !important;
  color: var(--color-text-success, #16a34a) !important;
}

/* Mobile: stack combo cards vertically */
@media (max-width: 767px) {
  #pos_table tbody tr.combo_items_row > td.combo_items_cell {
    padding: 0 8px 8px 8px !important;
  }
  #pos_table tbody tr.combo_items_row .combo-item {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Standard / single-product modifiers (.standard_modifiers > .collapse >
   .modifier-container > .selected-modifiers-display) — same inline-flow
   pattern as combo modifiers: name then "(price X qty)" inline, separated
   by " | " between consecutive modifiers.
   ------------------------------------------------------------------------ */
/* The new sibling row that hosts the modifiers section (mirrors
   tr.combo_items_row). Renders with no border and minimal padding so it
   feels like an extension of the product row above it. */
#pos_table tbody tr.modifiers_row > td.modifiers_cell {
  padding: 0 12px 8px 12px !important;
  border-top: 0 !important;
  background: transparent !important;
}
#pos_table tbody tr.modifiers_row .modifiers_html {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
}
@media (max-width: 767px) {
  #pos_table tbody tr.modifiers_row > td.modifiers_cell {
    padding: 0 8px 8px 8px !important;
  }
}
#pos_table .modifiers_html .standard_modifiers {
  display: block !important;
}
#pos_table .modifiers_html .standard_modifiers > .collapse:not(.in) {
  display: none !important;
}
#pos_table .modifiers_html .standard_modifiers > .collapse > div,
#pos_table .modifiers_html .standard_modifiers > .collapsing > div {
  border-left: 3px solid var(--color-border-info, #93c5fd) !important;
  padding: 4px 10px !important;
  margin: 4px 0 0 0 !important;
  background: transparent !important;
}
#pos_table .modifiers_html .modifier-container {
  display: block !important;
  flex-direction: row !important;
  gap: 0 !important;
  line-height: 1.5 !important;
}
#pos_table .modifiers_html .selected-modifiers-display {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier + .product_modifier::before {
  content: " | " !important;
  display: inline !important;
  color: var(--color-border-tertiary, #d1d5db) !important;
  margin: 0 4px !important;
  font-weight: 400 !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .modifier_name {
  display: inline !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--color-text-success, #16a34a) !important;
  margin-right: 4px !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .modifier_name i {
  margin-right: 3px !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier small,
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .text-muted {
  display: inline !important;
  font-size: 11px !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin-left: 2px !important;
}
/* Defeat inline styles emitted by pos_realtime.js for standard modifiers */
#pos_table .modifiers_html .selected-modifiers-display .product_modifier[style] {
  display: inline !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .modifier_name[style] {
  display: inline !important;
  font-weight: 500 !important;
  color: var(--color-text-success, #16a34a) !important;
}
/* Edit Modifiers button gets its own line below the inline list */
#pos_table .modifiers_html .modifier-edit-btn,
#pos_table .modifiers_html .select-modifiers-btn {
  display: inline-block !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}
#pos_table .modifiers_html .modifier-container::after {
  content: "" !important;
  display: block !important;
}

/* ==========================================================================
   Part AV — Quantity stepper, desktop large screens
   --------------------------------------------------------------------------
   The redesigned stepper from AS only applied to mobile (<768px). On
   desktop the inline `style="width:10px; border:none; height:30px"`
   attributes from product_row.blade.php still leak through. This part
   normalises the stepper at all breakpoints with token-based styling.
   ------------------------------------------------------------------------ */
#pos_table td.pos-qty-cell .input-group.input-number,
#pos_table td.unit-quantity-flex .input-group.input-number {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  height: var(--control-height, 34px) !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-radius: var(--border-radius-md, 8px) !important;
  overflow: visible !important;
  background: var(--color-background-primary, #fff) !important;
  vertical-align: middle !important;
}
#pos_table td.pos-qty-cell .input-group.input-number > .input-group-btn,
#pos_table td.unit-quantity-flex .input-group.input-number > .input-group-btn {
  display: inline-flex !important;
  width: auto !important;
  height: 100% !important;
}
#pos_table td.pos-qty-cell .input-group.input-number .quantity-down,
#pos_table td.pos-qty-cell .input-group.input-number .quantity-up,
#pos_table td.unit-quantity-flex .input-group.input-number .quantity-down,
#pos_table td.unit-quantity-flex .input-group.input-number .quantity-up,
.pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-down,
.pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-up {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
#pos_table td.pos-qty-cell .input-group.input-number .pos_quantity,
#pos_table td.unit-quantity-flex .input-group.input-number .pos_quantity,
#pos_table td.pos-qty-cell .input-group.input-number .input_quantity,
#pos_table td.unit-quantity-flex .input-group.input-number .input_quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-right: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
#pos_table td.pos-qty-cell .pos-unit-dropdown,
#pos_table td.unit-quantity-flex .pos-unit-dropdown {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 100% !important;
  margin-left: 0 !important;
  border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
}
#pos_table td.pos-qty-cell .pos-unit-toggle,
#pos_table td.unit-quantity-flex .pos-unit-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* End of theme.css */

/* ==========================================================================
   Part AW — DataTables toolbar top spacing
   --------------------------------------------------------------------------
   The DataTables length / buttons / search row sits flush against the
   filter card above it. Add 20px top margin so it visually separates
   from preceding content.
   ------------------------------------------------------------------------ */
.dataTables_wrapper > .row.margin-bottom-20.text-center,
.dataTables_wrapper > .row:has(> div > .dataTables_length),
.dataTables_wrapper > .row:has(> div > .dt-buttons) {
  margin-top: 20px !important;
}

/* --------------------------------------------------------------------------
   Part AX — POS product table column-width redistribution
   --------------------------------------------------------------------------
   The dedicated image column has been removed; the product image is
   embedded inline within the product name cell instead (see Part AX.1).
   The remaining columns are sized via <colgroup> with `table-layout:
   fixed` so the <th> headers always line up perfectly with the body
   cells at every breakpoint.
   ------------------------------------------------------------------------ */

/* AX.0 — Base colgroup widths (>= 1200px).
   With AJ.2 forcing `table-layout: fixed`, every <col> needs an explicit
   width or the browser will distribute equally and break alignment with
   the <th> col-md-* allocations. These widths sum to 100% and mirror the
   Bootstrap col-md-4/3/2/2/2 split in the <thead>. The dedicated image
   column has been removed; the product image is now embedded inline
   within the product name cell (see Part AX.1 below). */
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 40% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 22% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax      { width: 10% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 11% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }

/* AX.0b — Lock the POS product table to fixed layout so the <colgroup>
   widths above actually take effect. AJ.2 (further up) does this for
   `.sells-create-page #pos_table` (the non-POS sells form), but the POS
   create/edit pages don't carry that body class — they live under
   `.pos-wrapper .pos-content .pos-table` instead. Without `table-layout:
   fixed` here, the browser still auto-sizes columns from <td> content
   (wide qty stepper, price input) and headers visibly drift out of
   alignment with the body cells. */
.pos-wrapper .pos-content .pos-table .pos-product-table,
#pos_table.pos-product-table {
  table-layout: fixed !important;
  width: 100% !important;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product { width: 46% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 22% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 11% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product { width: 42% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 24% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}

/* --------------------------------------------------------------------------
   Part AX.1 — Inline product image (embedded with product name)
   --------------------------------------------------------------------------
   The dedicated image <td>/<col> has been removed from the POS product
   table. The product thumbnail is now rendered inline at the start of
   the product name cell (.pos-product-name-cell). The actual layout
   (absolute-positioned image inside the name cell) is defined in
   Part AX.2 above so the meta info renders directly under the name
   text rather than under the image. Only the .pos-product-name-body
   flex hint remains here.
   ------------------------------------------------------------------------ */
.pos-product-table .pos-product-name-cell .pos-product-name-body {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Part AY — POS filter toggle row standardization
   --------------------------------------------------------------------------
   Shared layout class for inline switch toggles inside .pos-filter rows
   (Send to kitchen, Charge to room, etc.). Aligns the label and the
   slider switch on a single row whose height matches sibling form-controls
   (selects, inputs) — sourced from the `--control-height` design token so
   any global change propagates uniformly.
   ------------------------------------------------------------------------ */
.pos-filter .pos-filter-toggle,
.hms-room-charge-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: var(--control-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.pos-filter .pos-filter-toggle > label,
.hms-room-charge-toggle > label {
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Single-booking read-only line — matches form-control height with ellipsis */
.hms-room-charge-single-booking-line {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: var(--control-height) !important;
  overflow: hidden !important;
}
.hms-room-charge-single-booking-label {
  flex: 0 0 auto !important;
  color: var(--color-text-tertiary, #667085) !important;
  font-weight: 600 !important;
}
.hms-room-charge-single-booking-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* HMS room-charge wrapper sits inside .pos-filter > .row alongside
   .col-lg-3 sibling chips. As a plain block <div> it breaks the float
   chain, forcing the next column to wrap to a new line. display:contents
   makes the wrapper transparent to layout so its child .col-lg-3 cells
   participate in the same row as their siblings. (When the wrapper has
   inline style="display:none" — no active bookings — that wins via
   specificity, keeping the partial hidden.) */
.pos-filter .hms-room-charge-wrapper {
  display: contents;
}

/* Bootstrap 3 grid-jam fix for .pos-filter rows.
   When floated cols on a previous row have unequal heights, the next
   col gets pushed right and leaves an empty slot on the left
   (e.g. taller .pos-filter-toggle next to a shorter input-group).
   Flex-wrap eliminates the jam — items flow row-by-row regardless of
   per-cell height. The HMS wrapper is display:contents above, so its
   grandchildren still participate as flex items here. */
.pos-filter > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  /* Don't stretch columns to the tallest cell in the row — keep each
     col at its natural height. Otherwise the .form-group expands,
     which shifts the bottom-anchored chevron pseudo (AC.10 above)
     below the actual select. */
  align-items: flex-start !important;
}
.pos-filter > .row > [class*="col-"] {
  float: none !important;
  align-self: flex-start !important;
}

/* AY.1 — Responsive stacking for .pos-filter columns
   --------------------------------------------------
   The `.pos-filter` container holds two distinct rows:

   1. Customer + Search-Product row → declared as `col-md-4` / `col-md-8`
      with NO `col-xs-*` / `col-sm-*` fallback. Below 992px these would
      otherwise collapse to `width: auto`, leaving an empty gap on the
      right (because of the flex-wrap rule above). Force these
      no-xs/sm columns to full width so the inputs span the row.

   2. Exchange / Price group / Order type / Toggles row → declared as
      `col-lg-3 col-md-6 col-sm-6 col-xs-6`. These already carry their
      own xs/sm widths (50%) so we let Bootstrap handle them down to
      ~459px, then force them to full width for the smallest screens.
*/
@media (max-width: 991.98px) {
  /* Force 100% only on cols that have NO xs/sm width class */
  .pos-filter > .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]),
  .pos-filter > .row > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .pos-filter .search-product,
  .pos-filter .search-product .form-group,
  .pos-filter .search-product .input-group,
  .pos-filter > .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]) .form-group,
  .pos-filter > .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]) .input-group {
    width: 100% !important;
  }
  .pos-filter .input-group > .select2-container {
    width: auto !important;
    flex: 1 1 auto !important;
  }
}

/* AY.2 — Below 459px (xxs), force every .pos-filter column to one
   per row regardless of its xs/sm width class. Targets the small
   filter row (exchange rate, price group, order type, toggles, etc.)
   that would otherwise stay at 50% width and feel cramped on tiny
   phones. */
@media (max-width: 458.98px) {
  .pos-filter > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .pos-filter .form-group,
  .pos-filter .input-group {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Part AZ — POS quick action: hide tax column
   --------------------------------------------------------------------------
   When the user toggles "Hide tax column" in #pos_quick_actions, JS adds
   .pos-tax-column-hidden to <body>. This hides the <col>, <th>, and <td>
   for the tax column across the POS table. The colspan="99" rows for
   modifiers and combo items auto-adapt because browsers clamp colspan
   to the count of visible columns.
   ------------------------------------------------------------------------ */
body.pos-tax-column-hidden #pos_table .pos-col-tax,
body.pos-tax-column-hidden #pos_table .pos-th-tax,
body.pos-tax-column-hidden #pos_table .pos-tax-cell,
body.pos-tax-column-hidden #pos_table .instant-pos-tax-column {
  display: none !important;
}

/* Redistribute remaining column widths so the table still fills the
   wrapper when the tax column is hidden. The freed 10% is spread
   evenly across the remaining columns (rather than dumping it all
   onto the product column) so no single column dominates the layout. */
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 42% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 25% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 14% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 14% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }

@media (max-width: 1300px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product { width: 41% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 26% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price,
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 14% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 40% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 26% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 14% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 36% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 28% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}

@media (max-width: 767px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 34% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 28% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 16% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 16% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}

/* ==========================================================================
   Part BA — Quick Actions menu redesign + mobile bolt trigger
   --------------------------------------------------------------------------
   Goals:
   * Replace the legacy "Quick actions" pill+dropdown look with a clean,
     Linear/Notion-style segmented pill that opens a sectioned popover.
   * The popover is grouped (Layout / Mode / System) with small-caps section
     labels, full-width row buttons, icon column, label column.
   * On screens < 768px the side pill (#pos_quick_actions) is hidden and the
     bolt trigger (.ph-btn--quick-actions) inside .ph-group--primary takes
     over. Clicking it still toggles `.is-open` on #pos_quick_actions, so the
     menu drops below the header as a sheet.
   ========================================================================== */

/* ---------- BA.1 Container ----------------------------------------------- */
/* Fixed vertical tab anchored to the right edge of the viewport. The toggle
   button stretches to the full container height (controlled by min-height
   on the toggle itself). */
.pos-header-action-buttons {
  position: fixed;
  top: 0px;
  right: 0;
  z-index: 1040;
  display: flex;
  align-items: flex-start;
}

/* ---------- BA.2 Toggle pill (vertical tab) ------------------------------ */
.pos-header-action-buttons .pos-header-actions-toggle.btn,
.pos-header-action-buttons .pos-header-actions-toggle {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 10px !important;
  min-height: 140px;
  height: auto !important;
  padding: 14px 6px !important;
  margin: 0 !important;
  border-radius: 10px 0 0 10px !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-right: none !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: var(--shadow-sm) !important;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.pos-header-action-buttons .pos-header-actions-toggle:hover,
.pos-header-action-buttons .pos-header-actions-toggle:focus {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  outline: none;
  transform: translateX(-1px);
}
.pos-header-action-buttons.is-open .pos-header-actions-toggle {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}

.pos-header-actions-toggle .pos-header-actions-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-info);
}
.pos-header-actions-toggle .pos-header-actions-toggle-icon i { font-size: 14px; line-height: 1; }
.pos-header-actions-toggle .pos-header-actions-toggle-label {
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.pos-header-actions-toggle .pos-header-actions-toggle-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: transform .14s ease;
  transform: rotate(90deg);
}
.pos-header-actions-toggle .pos-header-actions-toggle-caret i { font-size: 12px; line-height: 1; }
.pos-header-action-buttons.is-open .pos-header-actions-toggle .pos-header-actions-toggle-caret {
  transform: rotate(-90deg);
}

/* ---------- BA.3 Popover menu (slides out to the LEFT of the tab) -------- */
.pos-header-action-buttons .pos-header-actions-menu {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 6px;
  min-width: 240px;
  max-width: 280px;
  padding: 6px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-primary);
  border-radius: var(--border-radius-lg, 10px);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transform: translateX(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  pointer-events: none;
}
.pos-header-action-buttons.is-open .pos-header-actions-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* ---------- BA.4 Section grouping ---------------------------------------- */
.pos-header-actions-section {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.pos-header-actions-section + .pos-header-actions-section {
  border-top: 0.5px solid var(--color-border-tertiary);
  margin-top: 2px;
  padding-top: 6px;
}
.pos-header-actions-section-label {
  display: block;
  padding: 4px 10px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  user-select: none;
}

/* ---------- BA.5 Action button rows -------------------------------------- */
.pos-header-actions-menu .pos-header-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  margin: 0;
  border: none;
  border-radius: var(--border-radius-md, 7px);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
  box-shadow: none !important;
  white-space: nowrap;
}
.pos-header-actions-menu .pos-header-action-btn:hover,
.pos-header-actions-menu .pos-header-action-btn:focus {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  outline: none;
}
.pos-header-actions-menu .pos-header-action-btn[disabled],
.pos-header-actions-menu .pos-header-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pos-header-actions-menu .pos-header-action-btn .pos-header-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.pos-header-actions-menu .pos-header-action-btn .pos-header-action-icon i { font-size: 12px; line-height: 1; }
.pos-header-actions-menu .pos-header-action-btn:hover .pos-header-action-icon,
.pos-header-actions-menu .pos-header-action-btn:focus .pos-header-action-icon {
  color: var(--color-text-info);
}
.pos-header-actions-menu .pos-header-action-btn .pos-header-action-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-header-actions-menu .pos-header-action-btn.pos-action-hidden {
  display: none;
}

/* ---------- BA.6 Mobile bolt trigger (.ph-btn--quick-actions) ------------ */
/* Inherits the .ph-btn skin from pos_header_v2.css; we just add the
   "active" highlight and the responsive visibility rules below. */
.ph-btn.ph-btn--quick-actions { color: var(--color-text-info); }
.ph-btn.ph-btn--quick-actions:hover { color: var(--color-text-info); }
.ph-btn.ph-btn--quick-actions.ph-btn--active {
  color: var(--color-text-info);
  background: var(--color-background-info);
}

/* ---------- BA.7 Responsive visibility swap ------------------------------ */
/* Default (>= 768px): show the fixed vertical tab, hide the mobile bolt. */
#pos_quick_actions_mobile_trigger { display: none !important; }
.pos-header-action-buttons { display: flex; }

@media (max-width: 767px) {
  /* Mobile: hide the vertical tab, surface the bolt button in the header. */
  .pos-header-action-buttons { display: none; }
  #pos_quick_actions_mobile_trigger { display: inline-flex !important; }

  /* Mobile + Header collapsed: there is NO header to host the bolt button,
     so we re-show the vertical tab as a floating fallback so the user can
     re-enable the header (and reach all other quick actions). */
  body.pos-header-collapsed .pos-header-action-buttons {
    display: flex;
  }

  /* When the menu is opened from the mobile bolt trigger, anchor it as a
     sheet at the top-right of the viewport. */
  body:not(.pos-header-collapsed) #pos_quick_actions.is-open .pos-header-actions-menu {
    position: fixed;
    top: 56px;
    right: 8px;
    left: auto;
    margin-right: 0;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    z-index: 1090;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Part AZ — Settings card footer button: enforce design-system control
   --------------------------------------------------------------------------
   The original `.setting-card-wrapper .footer .footer-btn button` rule in
   style.css hardcodes `height: 48px`, an invalid `font-weight: 24px`, and
   uses arbitrary hex colors. Override here so the button respects the
   `--control-height` token system (the same height every other input,
   select, and button uses) and inherits theme colors so dark mode works.
   ------------------------------------------------------------------------ */
.setting-card-wrapper .footer .footer-btn button {
  background: var(--color-background-primary) !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  width: auto !important;
  min-width: 140px !important;
  border: 1px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--body-font-size, 14px) !important;
  font-weight: 600 !important;
  line-height: var(--control-line-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.setting-card-wrapper .footer .footer-btn button:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
}
.setting-card-wrapper .footer .footer-btn button.primary-btn {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.setting-card-wrapper .footer .footer-btn button.primary-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}
html.dark-mode a.pos{
  background-color: var(--bg-hover) !important;
}
html.dark-mode a.pos:hover{
  background-color: var(--bg-hover) !important;
}

/* =========================================================================
   PART Q — Recent Transactions modal: row action icon-buttons
   -------------------------------------------------------------------------
   The recent_transactions partial renders bare <a><i></a> icons in the
   action <td>. These rules promote those anchors into proper square
   icon-buttons that scale with the global control-height tokens, sit on
   one tidy row with consistent gaps, and provide proper hover/focus
   affordance — without requiring any blade markup change.
   ========================================================================= */

#recent_transactions_modal .table.table-slim td:last-child {
  white-space: nowrap !important;
  text-align: right !important;
  padding-right: var(--control-padding-x) !important;
}

#recent_transactions_modal .table.table-slim td:last-child > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--control-height-sm, 30px) !important;
  height: var(--control-height-sm, 30px) !important;
  padding: 0 !important;
  margin: 0 4px !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#recent_transactions_modal .table.table-slim td:last-child > a:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#recent_transactions_modal .table.table-slim td:last-child > a:focus-visible {
  outline: none !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent) !important;
}

#recent_transactions_modal .table.table-slim td:last-child > a > i {
  font-size: inherit !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Reset the inline padding hack that ships in recent_transactions.blade.php
   (`style="padding-left: 20px; padding-right: 20px"`) so the delete button
   becomes a square icon-button matching its siblings. The inline style has
   high specificity, so we use a wider selector + !important to win. */
#recent_transactions_modal .table.table-slim td:last-child > a.delete-sale[style] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Variant tints: edit = neutral, delete = danger, print = neutral.
   Tint the icon glyph itself; the button chrome stays consistent. */
#recent_transactions_modal .table.table-slim td:last-child > a.delete-sale > i { color: var(--color-text-danger) !important; }
#recent_transactions_modal .table.table-slim td:last-child > a.delete-sale:hover { border-color: color-mix(in srgb, var(--color-text-danger) 35%, var(--color-border-tertiary)) !important; background: color-mix(in srgb, var(--color-text-danger) 8%, var(--color-background-primary)) !important; }
#recent_transactions_modal .table.table-slim td:last-child > a.print-invoice-link:hover > i { color: var(--accent-blue) !important; }

/* Compact serial-number column + invoice column rhythm */
#recent_transactions_modal .table.table-slim td {
  padding: 8px var(--control-padding-x) !important;
  vertical-align: middle !important;
  font-size: var(--body-font-size) !important;
}
#recent_transactions_modal .table.table-slim td:first-child {
  width: 32px !important;
  color: var(--color-text-tertiary) !important;
  text-align: right !important;
}
#recent_transactions_modal .table.table-slim td.display_currency {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
#recent_transactions_modal .table.table-slim tr {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
#recent_transactions_modal .table.table-slim tr:last-child {
  border-bottom: 0 !important;
}
#recent_transactions_modal .table.table-slim tr:hover {
  background: var(--color-background-secondary) !important;
}

/* =========================================================================
   PART R — Payment list action buttons
   -------------------------------------------------------------------------
   The view-payments table emits a flex <td> containing edit_payment /
   delete_payment / view_payment / download buttons separated by `&nbsp;`
   text nodes. Bootstrap's `btn-xs` gives them inconsistent widths because
   each glyph (pen / trash / eye) has a different intrinsic width, and the
   stray `&nbsp;` characters insert non-uniform gaps.

   These rules:
     1. Lock every action button to a square `var(--control-height-xs)` box
        so all three render identical regardless of the icon glyph.
     2. Hide the `&nbsp;` text-nodes that the blade markup interleaves
        between buttons (we re-introduce spacing via flex `gap`).
     3. Apply a tidy hover state per variant that's consistent with the
        rest of the design system (subtle background tint instead of the
        loud Bootstrap fills).
   ========================================================================= */

td.no-print {
  /* When the cell uses `display: flex` (set inline), align icon-buttons
     centred horizontally with consistent gaps and no wrapping. */
}
td.no-print[style*="display: flex"],
td.no-print[style*="display:flex"] {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  /* Eat the literal `&nbsp;` between buttons by collapsing whitespace and
     hiding bare text nodes — easiest way is to set font-size 0 on the
     cell and reset it on the buttons + their icons. */
  font-size: 0 !important;
  white-space: nowrap !important;
}
td.no-print[style*="display: flex"] > .btn,
td.no-print[style*="display:flex"] > .btn {
  font-size: var(--body-font-size) !important;
}

/* Square icon-button geometry for every <button class="btn btn-xs"> living
   directly inside a flex action cell. Targets the three payment buttons
   (edit/delete/view) plus any sibling download <a class="btn btn-xs">. */
td.no-print[style*="display: flex"] > .btn.btn-xs,
td.no-print[style*="display:flex"] > .btn.btn-xs,
td.no-print[style*="display: flex"] > a.btn.btn-xs,
td.no-print[style*="display:flex"] > a.btn.btn-xs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--control-height-xs, 26px) !important;
  min-width: var(--control-height-xs, 26px) !important;
  height: var(--control-height-xs, 26px) !important;
  min-height: var(--control-height-xs, 26px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
td.no-print[style*="display: flex"] > .btn.btn-xs > i,
td.no-print[style*="display:flex"] > .btn.btn-xs > i,
td.no-print[style*="display: flex"] > a.btn.btn-xs > i,
td.no-print[style*="display:flex"] > a.btn.btn-xs > i {
  font-size: inherit !important;
  line-height: 1 !important;
  margin: 0 !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs:hover,
td.no-print[style*="display:flex"] > .btn.btn-xs:hover,
td.no-print[style*="display: flex"] > a.btn.btn-xs:hover,
td.no-print[style*="display:flex"] > a.btn.btn-xs:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs:focus-visible,
td.no-print[style*="display:flex"] > .btn.btn-xs:focus-visible {
  outline: none !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent) !important;
}

/* Variant-specific tints. The blade uses `btn-info` for edit, `btn-danger`
   for delete, `btn-primary` for view, `btn-success` for download. We pull
   those down to a tasteful neutral chrome and only colour the icon glyph,
   matching the recent-transactions modal language. */
td.no-print[style*="display: flex"] > .btn.btn-xs.edit_payment,
td.no-print[style*="display:flex"] > .btn.btn-xs.edit_payment {
  background: var(--color-background-primary) !important;
  color: var(--color-text-secondary) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs.edit_payment:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}

td.no-print[style*="display: flex"] > .btn.btn-xs.delete_payment,
td.no-print[style*="display:flex"] > .btn.btn-xs.delete_payment {
  background: var(--color-background-primary) !important;
  color: var(--color-text-danger) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs.delete_payment:hover {
  background: color-mix(in srgb, var(--color-text-danger) 8%, var(--color-background-primary)) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 35%, var(--color-border-tertiary)) !important;
  color: var(--color-text-danger) !important;
}

td.no-print[style*="display: flex"] > .btn.btn-xs.view_payment,
td.no-print[style*="display:flex"] > .btn.btn-xs.view_payment {
  background: var(--color-background-primary) !important;
  color: var(--color-text-secondary) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs.view_payment:hover {
  background: var(--color-background-secondary) !important;
  color: var(--accent-blue) !important;
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--color-border-tertiary)) !important;
}

td.no-print[style*="display: flex"] > a.btn.btn-xs.btn-success {
  background: var(--color-background-primary) !important;
  color: var(--color-text-success) !important;
}
td.no-print[style*="display: flex"] > a.btn.btn-xs.btn-success:hover {
  background: color-mix(in srgb, var(--color-text-success) 8%, var(--color-background-primary)) !important;
  border-color: color-mix(in srgb, var(--color-text-success) 35%, var(--color-border-tertiary)) !important;
  color: var(--color-text-success) !important;
}

/* =========================================================================
   PART S — Sell preview page (/sells/preview/{id} → sell/show.blade.php)
   -------------------------------------------------------------------------
   The legacy `public/css/invoice.css` skins this page with bespoke colours,
   hardcoded `632px` grid columns, a `f3f4f6`/`011530` palette, a 30px
   "invoice-id" headline, and oversized 16px input-group buttons that fight
   the rest of the design system. We re-skin it here using:
     • All sizing from `--control-*` tokens (slider-aware).
     • All colours from `--color-*` semantic tokens.
     • Body font scale from `--body-font-size`.
     • The same pill/button patterns as Parts E and Q so the page reads as
       part of the same product, not an island.
   The skin is scoped under `.invoice-card-wrapper` so the public customer
   invoice (which lives in a different layout) is untouched.
   ========================================================================= */

.main-container > .invoice-card-wrapper,
.invoice-card-wrapper {
  margin-top: 16px !important;
}

/* ---- Two-column grid: invoice on the left, action panel on the right -- */
.invoice-card-wrapper .invoice-preview-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
@media (max-width: 991.98px) {
  .invoice-card-wrapper .invoice-preview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- The invoice card itself ------------------------------------------ */
.invoice-card-wrapper .invoice-container-preview {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg, 12px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  padding: 24px !important;
  color: var(--color-text-primary) !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-id {
  color: var(--color-text-primary) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding-bottom: 16px !important;
  margin: 0 0 16px 0 !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}

/* ---- Date / status row above the bill blocks -------------------------- */
.invoice-card-wrapper .invoice-container-preview .invoice-date-status {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
.invoice-card-wrapper .invoice-date .item span {
  color: var(--color-text-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.invoice-card-wrapper .invoice-date .item p {
  color: var(--color-text-primary) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 600 !important;
  margin: 2px 0 0 0 !important;
}
.invoice-card-wrapper .invoice-status h5 {
  color: var(--color-text-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 6px 0 !important;
  text-align: right !important;
}
.invoice-card-wrapper .invoice-status .paid,
.invoice-card-wrapper .invoice-status .not-paid {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--control-height-xs, 26px) !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  border: 0.5px solid transparent !important;
}
.invoice-card-wrapper .invoice-status .paid {
  background: color-mix(in srgb, var(--color-text-success) 12%, var(--color-background-primary)) !important;
  color: var(--color-text-success) !important;
  border-color: color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;
}
.invoice-card-wrapper .invoice-status .not-paid {
  background: color-mix(in srgb, var(--color-text-danger) 10%, var(--color-background-primary)) !important;
  color: var(--color-text-danger) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 30%, transparent) !important;
}

/* ---- Bill blocks: kill the legacy gradient PNG, use a clean panel ----- */
.invoice-card-wrapper .invoice-container-preview .invoice-bill-info {
  background: var(--color-background-secondary) !important;
  background-image: none !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 16px !important;
  margin: 16px 0 20px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}
.invoice-card-wrapper .invoice-bill-info .company-address,
.invoice-card-wrapper .invoice-bill-info .bill-address {
  width: auto !important;
}
.invoice-card-wrapper .invoice-bill-info .company-address h3,
.invoice-card-wrapper .invoice-bill-info .bill-address h3 {
  color: var(--color-text-primary) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}
.invoice-card-wrapper .invoice-bill-info .company-address span,
.invoice-card-wrapper .invoice-bill-info .bill-address span {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ---- Pricing summary table on the right of the invoice ---------------- */
.invoice-card-wrapper .invoice-container-preview .pricing-table-wrapper {
  margin-top: 24px !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding-bottom: 8px !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table {
  width: 280px !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr td:first-child {
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr td:last-child {
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-message {
  width: 100% !important;
  max-width: none !important;
  margin-top: 16px !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-message b {
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-message p {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  line-height: 1.5 !important;
  margin: 4px 0 0 0 !important;
}

/* ---- Right column: action panel (status + amount + send) -------------- */
.invoice-card-wrapper .invoice-options-box,
.invoice-card-wrapper .invoice-link-box {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg, 12px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  padding: 16px !important;
  margin: 0 0 14px 0 !important;
}

.invoice-card-wrapper .invoice-options-box .head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}
.invoice-card-wrapper .invoice-options-box .head [class^="invoice-status-"] {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--control-height-xs, 26px) !important;
  padding: 0 12px !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 999px !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
}
.invoice-card-wrapper .invoice-options-box .head .invoice-status-final {
  background: color-mix(in srgb, var(--color-text-success) 12%, var(--color-background-primary)) !important;
  color: var(--color-text-success) !important;
  border-color: color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;
}
.invoice-card-wrapper .invoice-options-box .head .invoice-status-draft {
  background: color-mix(in srgb, var(--color-text-warning) 12%, var(--color-background-primary)) !important;
  color: var(--color-text-warning) !important;
  border-color: color-mix(in srgb, var(--color-text-warning) 30%, transparent) !important;
}
.invoice-card-wrapper .invoice-options-box .head .invoice-status-pending {
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--color-background-primary)) !important;
  color: var(--accent-blue) !important;
  border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent) !important;
}

/* The three icon-buttons in the head: print / email / action-dropdown */
.invoice-card-wrapper .invoice-options-box .head .options {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn:first-child {
  width: var(--control-height) !important;
  min-width: var(--control-height) !important;
  padding: 0 !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.75 !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn:hover img {
  opacity: 1 !important;
}
html.dark-mode .invoice-card-wrapper .invoice-options-box .head .options .invoice-btn img {
  filter: invert(1) brightness(1.2);
}

/* The "Action ▾" dropdown menu */
.invoice-card-wrapper .invoice-dropdown-wrapper {
  position: relative;
}
.invoice-card-wrapper .invoice-dropdown {
  position: absolute !important;
  width: 220px !important;
  right: 0 !important;
  left: auto !important;
  top: 100% !important;
  margin-top: 6px !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  padding: 6px !important;
  z-index: 1050 !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.invoice-card-wrapper .invoice-dropdown.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.invoice-card-wrapper .invoice-dropdown a,
.invoice-card-wrapper .invoice-dropdown button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: var(--control-height-sm, 30px) !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease;
}
.invoice-card-wrapper .invoice-dropdown a:hover,
.invoice-card-wrapper .invoice-dropdown button:hover {
  background: var(--color-background-secondary) !important;
}
.invoice-card-wrapper .invoice-dropdown hr {
  border: 0 !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  margin: 4px 0 !important;
}
.invoice-card-wrapper .invoice-dropdown #delete_invoice {
  color: var(--color-text-danger) !important;
}
.invoice-card-wrapper .invoice-dropdown #delete_invoice:hover {
  background: color-mix(in srgb, var(--color-text-danger) 8%, var(--color-background-primary)) !important;
}

/* "Amount due" hero block */
.invoice-card-wrapper .invoice-options-box .content h3 {
  color: var(--color-text-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}
.invoice-card-wrapper .invoice-options-box .content h1 {
  color: var(--color-text-primary) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding: 6px 0 0 0 !important;
  margin: 0 0 12px 0 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}
.invoice-card-wrapper .invoice-options-box .content .payment {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  margin-top: 4px !important;
}
.invoice-card-wrapper .invoice-options-box .content .payment p {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}
.invoice-card-wrapper .invoice-options-box .content .payment .primary-btn,
.invoice-card-wrapper .invoice-options-box .content .payment a.primary-btn,
.invoice-card-wrapper .invoice-options-box .content .payment button.primary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--control-height-sm, 30px) !important;
  padding: 0 14px !important;
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.invoice-card-wrapper .invoice-options-box .content .payment .primary-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}

/* Bottom row: "Also attach PDF" + toggle switch */
.invoice-card-wrapper .invoice-options-box .bottom {
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.invoice-card-wrapper .invoice-options-box .bottom p,
.invoice-card-wrapper .invoice-options-box .bottom span {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* ---- Payment-info card title ------------------------------------------ */
.invoice-card-wrapper .invoice-link-box h2.title {
  color: var(--color-text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.3 !important;
}

/* The payment-info inner table */
.invoice-card-wrapper .invoice-link-box table.bg-max-tr {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
}
.invoice-card-wrapper .invoice-link-box table.bg-max-tr tr.bg-max,
.invoice-card-wrapper .invoice-link-box table.bg-max-tr tr.bg-max th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
}
.invoice-card-wrapper .invoice-link-box table.bg-max-tr th,
.invoice-card-wrapper .invoice-link-box table.bg-max-tr td {
  padding: 8px 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  vertical-align: middle !important;
}
.invoice-card-wrapper .invoice-link-box table.bg-max-tr tr:last-child td {
  border-bottom: 0 !important;
}

/* ---- Public invoice URL: input + copy button --------------------------- */
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper {
  margin-top: 12px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 4px 4px 12px !important;
  gap: 8px !important;
  height: var(--control-height) !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  text-overflow: ellipsis !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper .copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: calc(var(--control-height) - 8px) !important;
  padding: 0 12px !important;
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border: 0 !important;
  border-radius: calc(var(--border-radius-md) - 2px) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: background-color .15s ease;
  white-space: nowrap !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper .copy-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper .copy-btn img {
  width: 12px !important;
  height: 12px !important;
  filter: invert(1) brightness(2);
}

/* ---- "Send invoice" submit button ------------------------------------- */
.invoice-card-wrapper .send-invoice-btn,
.invoice-card-wrapper button.send-invoice-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: var(--control-height-lg, 40px) !important;
  padding: 0 16px !important;
  margin: 14px 0 0 0 !important;
  background: var(--accent-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--border-radius-md) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.invoice-card-wrapper .send-invoice-btn:hover {
  background: color-mix(in srgb, var(--accent-blue) 88%, #000 12%) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-blue) 25%, transparent) !important;
}

/* ---- Preview / Download paired link buttons --------------------------- */
.invoice-card-wrapper .invoice-options-btn-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--control-height) !important;
  padding: 0 12px !important;
  margin: 0 !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
  width: auto !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.75 !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a:hover img {
  opacity: 1 !important;
}
html.dark-mode .invoice-card-wrapper .invoice-options-btn-wrapper a img {
  filter: invert(1) brightness(1.2);
}

/* ---- Switch toggle inside .bottom ------------------------------------- */
.invoice-card-wrapper .invoice-options-box .bottom .switch {
  position: relative !important;
  display: inline-block !important;
  width: var(--switch-width) !important;
  height: var(--switch-height) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch .sliderCheckbox {
  position: absolute !important;
  inset: 0 !important;
  background: var(--color-border-secondary) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background-color .2s ease;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch .sliderCheckbox::before {
  content: "";
  position: absolute;
  height: var(--switch-knob-size);
  width: var(--switch-knob-size);
  left: var(--switch-knob-offset);
  bottom: var(--switch-knob-offset);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform .2s ease;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch input:checked + .sliderCheckbox {
  background: var(--accent-blue) !important;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch input:checked + .sliderCheckbox::before {
  transform: translateX(var(--switch-knob-translate));
}

/* ---- Invoice line table: inherit standard table styles --------------- */
.invoice-card-wrapper .invoice-container-preview .table-responsive {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: auto !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive table {
  width: 100% !important;
  margin: 0 !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive td {
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  color: var(--color-text-primary) !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive tr:last-child td {
  border-bottom: 0 !important;
}

@media (max-width: 575.98px) {
  .invoice-card-wrapper .invoice-container-preview { padding: 16px !important; }
  .invoice-card-wrapper .invoice-options-box,
  .invoice-card-wrapper .invoice-link-box { padding: 14px !important; }
  .invoice-card-wrapper .invoice-container-preview .invoice-bill-info {
    grid-template-columns: 1fr !important;
  }
  .invoice-card-wrapper .invoice-options-btn-wrapper {
    grid-template-columns: 1fr !important;
  }
  .invoice-card-wrapper .invoice-options-box .head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .invoice-card-wrapper .invoice-options-box .head .options {
    justify-content: flex-end !important;
  }
}