/* =============================================================
 * Mundimoto Stock Management – Global Design System
 * -------------------------------------------------------------
 * Design tokens + layout primitives that are shared by every
 * page of the app. Originally extracted from the Motorbike
 * Detail view so the rest of the app can inherit the same
 * clean look & feel.
 *
 * Scope:
 *   - CSS custom properties (tokens) on :root
 *   - Structural layout wrappers (.mm-page, .mm-sidebar, .mm-main)
 *   - Reusable UI primitives (.mm-card, .mm-section, .mm-badge,
 *     .mm-btn, .mm-link-chip, .mm-field-grid, …)
 *   - Navbar search styling (used by common/navigation_bar.html)
 *   - Polishing tweaks for the top navbar and sidebar
 *
 * NOTE: Classes are intentionally prefixed with `mm-` so they do
 * not collide with the existing Bootstrap / Sneat template. The
 * `.moto-detail` scoped classes that already existed continue to
 * work; this file now also exposes the same tokens globally.
 * ============================================================= */

:root {
  /* Surfaces */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f7f6f2;
  --color-background-tertiary: #fbfaf7;

  /* Text */
  --color-text-primary: #1f1e1c;
  --color-text-secondary: #5f5e5a;
  --color-text-tertiary: #8a8983;

  /* Borders */
  --color-border-tertiary: #e8e6df;
  --color-border-secondary: #d4d2ca;

  /* Accent */
  --color-accent: #D85A30;
  --color-accent-hover: #b84a27;
  --color-accent-bg: #FAECE7;

  /* App canvas – matches the "Precio B2C" stat-card background so the
     whole app sits on the same warm off-white surface. */
  --color-canvas: #f7f6f2;

  /* Semantic – positive / warning / info / danger / neutral */
  --color-positive-bg: #EAF3DE;
  --color-positive-fg: #3B6D11;
  --color-warning-bg: #FAEEDA;
  --color-warning-fg: #854F0B;
  --color-info-bg:    #E6F1FB;
  --color-info-fg:    #185FA5;
  --color-neutral-bg: #F1EFE8;
  --color-neutral-fg: #5F5E5A;
  --color-danger-bg:  #FAECE7;
  --color-danger-fg:  #993C1D;

  /* Radii */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-pill: 99px;

  /* Structural spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
}

body {
  color: var(--color-text-primary);
  background: var(--color-canvas) !important;
}

/* Make sure the Sneat wrappers don't paint a different white over our
   canvas – keep the warm off-white flowing behind every page. */
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.container-xxl.flex-grow-1,
.container-p-y {
  background: var(--color-canvas) !important;
}

/* =============================================================
 * Layout wrappers
 * These are light-weight, generic wrappers the app can use on
 * any page to get consistent spacing without fighting Bootstrap.
 * ============================================================= */

.mm-page {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.mm-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* =============================================================
 * Fixed sidebar
 * Pin the left navigation to the viewport on desktop so it no
 * longer scrolls away with the page content (which left an
 * empty stripe when the content was shorter than the menu, or
 * at the bottom of long pages). The main content gets shifted
 * right by the sidebar width so nothing is covered. This mirrors
 * Sneat's built-in `.layout-menu-fixed` behavior but applies it
 * globally, without having to add the class to every template.
 * ============================================================= */

@media (min-width: 1200px) {
  .layout-wrapper .layout-menu,
  .layout-wrapper .layout-menu.mm-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1080;
    margin: 0 !important;
  }

  /* Shift the main content so the fixed sidebar doesn't overlap it.
     16.25rem matches the Sneat sidebar width (see core.css). */
  .layout-wrapper .layout-page {
    padding-left: 16.25rem;
  }

  /* Flipped (RTL-style) layouts keep the sidebar on the right. */
  .layout-wrapper.layout-menu-flipped .layout-menu {
    left: auto;
    right: 0;
  }
  .layout-wrapper.layout-menu-flipped .layout-page {
    padding-left: 0;
    padding-right: 16.25rem;
  }
}

/* Thin, subtle scrollbar inside the sidebar. */
.layout-menu::-webkit-scrollbar { width: 6px; }
.layout-menu::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
  border-radius: 3px;
}
.layout-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* =============================================================
 * Sidebar navigation
 * Collapsible section headers (Operaciones, Finanzas, Logística…)
 * with icons and a clearly visible active state on the current
 * page. Works on top of Sneat's `.layout-menu` + `.menu-toggle`
 * JS – the server-rendered `<li.menu-item>` wrapping each section
 * is already what drives the collapsible behavior; we just give
 * it a tighter visual language.
 * ============================================================= */

/* Top-level section headers (each MenuOptionSection becomes a
   `.menu-item` whose direct child is `.menu-link.menu-toggle`). */
.layout-menu .menu-inner > .menu-item > .menu-link.menu-toggle {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px !important;
  font-weight: 600;
  color: var(--color-text-tertiary) !important;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--border-radius-md);
  margin: 2px 8px;
}
.layout-menu .menu-inner > .menu-item > .menu-link.menu-toggle:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-background-secondary);
}
.layout-menu .menu-inner > .menu-item > .menu-link.menu-toggle .menu-icon {
  font-size: 16px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* Collapse indicator (chevron) on section headers.
   Sneat's core.css draws an L-shaped arrow via border-top + border-right
   on the same ::after. We fully reset those properties so only our
   text-based chevron remains. */
.layout-menu .menu-inner > .menu-item > .menu-link.menu-toggle::after {
  content: "\203A" !important; /* › */
  position: static !important;
  display: inline-block !important;
  margin-left: auto;
  border: none !important;
  width: auto !important;
  height: auto !important;
  font-size: 14px;
  color: var(--color-text-tertiary);
  transition: transform 0.15s ease;
  transform: none !important;
}
.layout-menu .menu-inner > .menu-item.open > .menu-link.menu-toggle::after {
  transform: rotate(90deg) !important;
}

/* Sub-items inside a section. */
.layout-menu .menu-sub .menu-link {
  color: var(--color-text-secondary) !important;
  padding: 7px 16px 7px 42px;
  margin: 1px 8px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1.35;
  transition: background 0.12s ease, color 0.12s ease;
}
.layout-menu .menu-sub .menu-link:hover {
  background: var(--color-background-secondary);
  color: var(--color-text-primary) !important;
}

/* ============ Active state – strong & obvious ============ */
.layout-menu .menu-sub .menu-link.active,
.layout-menu .menu-item.active > .menu-link.menu-toggle {
  background: var(--color-accent-bg) !important;
  color: var(--color-accent) !important;
  font-weight: 600 !important;
}
.layout-menu .menu-item.active > .menu-link.menu-toggle .menu-icon,
.layout-menu .menu-item.active > .menu-link.menu-toggle::after {
  color: var(--color-accent) !important;
}

/* Left accent bar on the currently active leaf. */
.layout-menu .menu-sub .menu-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-accent);
}

/* =============================================================
 * Sidebar polish
 * Applied on top of the Sneat .layout-menu aside.
 * ============================================================= */

.mm-sidebar .app-brand {
  padding: 16px 20px 8px;
}

/* =============================================================
 * Top navbar polish
 * ============================================================= */

.mm-navbar,
.mm-navbar.layout-navbar,
.mm-navbar.navbar-detached {
  background: var(--color-background-primary) !important;
  border: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
  min-height: 48px !important;
}

/* Keep the navbar (and its motorbike search bar) pinned to the top of the
   viewport while the page scrolls, so users can look up another bike from
   anywhere in any list/detail view without scrolling back to the top.
   The sidebar is already fixed (see "Fixed sidebar" above), so sticking
   the navbar gives a fully fixed shell around the scrolling content. */
.mm-navbar,
.mm-navbar.layout-navbar,
.mm-navbar.navbar-detached {
  position: sticky;
  top: 0;
  z-index: 1075;
}

/* ----- Navbar search bar ----- */

.mm-navbar-search {
  position: relative;
  flex: 1;
}

.mm-navbar-search-form {
  position: relative;
  display: flex;
  align-items: center;
}

.mm-navbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.mm-navbar-search-input {
  width: 100%;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 7px 10px 7px 32px;
  font-size: 13px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mm-navbar-search-input::placeholder { color: var(--color-text-tertiary); }
.mm-navbar-search-input:focus {
  border-color: var(--color-accent);
}

.mm-navbar-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1090;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
  max-height: 300px;
  overflow-y: auto;
}

.mm-navbar-search-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-background-secondary);
  font-size: 13px;
  color: var(--color-text-primary);
}
.mm-navbar-search-item:last-child { border-bottom: none; }
.mm-navbar-search-item small { color: var(--color-text-tertiary); }
.mm-navbar-search-item small.muted { color: var(--color-text-tertiary); opacity: 0.8; }
.mm-navbar-search-item:hover { background: var(--color-background-secondary); }

/* =============================================================
 * Reusable UI primitives (opt-in via the `mm-` prefix)
 * These mirror the look-and-feel of the Motorbike Detail view
 * so other pages can adopt the same design without having to
 * copy/paste styles.
 * ============================================================= */

.mm-card,
.mm-section {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.mm-section-header {
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mm-section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.mm-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--border-radius-pill);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.mm-badge-green, .badge-green { background: var(--color-positive-bg); color: var(--color-positive-fg); }
.mm-badge-amber, .badge-amber { background: var(--color-warning-bg);  color: var(--color-warning-fg);  }
.mm-badge-blue,  .badge-blue  { background: var(--color-info-bg);     color: var(--color-info-fg);     }
.mm-badge-gray,  .badge-gray  { background: var(--color-neutral-bg);  color: var(--color-neutral-fg);  }
.mm-badge-coral, .badge-coral { background: var(--color-danger-bg);   color: var(--color-danger-fg);   }

.mm-btn {
  padding: 6px 14px;
  border-radius: var(--border-radius-md);
  font-size: 13px;
  cursor: pointer;
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mm-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.mm-btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}
.mm-btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #ffffff;
}

.mm-link-chip {
  padding: 4px 10px;
  border-radius: var(--border-radius-pill);
  font-size: 12px;
  border: 0.5px solid var(--color-border-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  background: var(--color-background-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mm-link-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

.mm-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) { .mm-field-grid { grid-template-columns: 1fr; } }

.mm-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  padding: 11px 20px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  display: flex;
  align-items: center;
}
.mm-field-value {
  font-size: 13px;
  color: var(--color-text-primary);
  padding: 11px 20px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  display: flex;
  align-items: center;
  border-left: 0.5px solid var(--color-border-tertiary);
  word-break: break-word;
}
.mm-field-value.empty { color: var(--color-text-tertiary); }

/* ----- Price summary (read-only B2C / B2B fields) ----- */
.mm-price-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
@media (max-width: 768px) { .mm-price-fields { grid-template-columns: 1fr; } }

.mm-price-field {
  padding: 10px 14px;
  border-right: 0.5px solid var(--color-border-tertiary);
}
.mm-price-field:last-child { border-right: none; }
@media (max-width: 768px) {
  .mm-price-field {
    border-right: none;
    border-bottom: 0.5px solid var(--color-border-tertiary);
  }
  .mm-price-field:last-child { border-bottom: none; }
}

.mm-price-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}
.mm-price-label-offer { color: var(--color-warning-fg); }

.mm-price-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* =============================================================
 * GLOBAL STANDARDIZATION
 * Restyle every Bootstrap / Sneat component (cards, tables,
 * forms, buttons, badges, modals, DataTables) so they match
 * the motorbike-detail design language. This means all pages
 * look consistent without touching each template individually.
 * ============================================================= */

/* ----- Cards ----- */
.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: none !important;
  overflow: visible;
  max-width: 100%;
}
.card-header {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 12px 16px !important;
}
.card-body {
  padding: 14px 16px !important;
}
.card-footer {
  background: var(--color-background-primary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  padding: 12px 16px !important;
}
.card-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 12px !important;
}

/* ----- Tables ----- */
.table,
.datatables-basic {
  width: 100%;
  border-collapse: collapse;
  --bs-table-color: var(--color-text-primary) !important;
  --bs-table-hover-color: var(--color-text-primary) !important;
  --bs-table-striped-color: var(--color-text-primary) !important;
  --bs-table-active-color: var(--color-text-primary) !important;
}
.table > thead > tr > th,
.datatables-basic > thead > tr > th,
table.dataTable > thead > tr > th {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-tertiary) !important;
  padding: 8px 10px !important;
  text-align: left;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-top: none !important;
  font-weight: 500 !important;
  white-space: nowrap;
  background: var(--color-background-primary) !important;
}
.table > tbody > tr > td,
.datatables-basic > tbody > tr > td,
table.dataTable > tbody > tr > td {
  padding: 8px 10px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-top: none !important;
  color: var(--color-text-primary) !important;
  vertical-align: middle;
  font-size: 12px !important;
}
.table > tbody > tr:last-child > td { border-bottom: none !important; }
.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > td {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}
.table-striped > tbody > tr:nth-of-type(odd):hover > td {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.table-responsive { overflow-x: auto; }
.table-border-bottom-0 > tr:last-child > td { border-bottom: none !important; }

/* Prevent any table from overflowing its parent card/section. When a
   table is a direct or near-direct child of a card-body, section-body,
   or text-nowrap wrapper, the parent scrolls horizontally. */
.card-body > .table,
.card-body > form > .table,
.card-body > div > .table,
.section-body > .table,
.section-body > div > .table,
.section-body > form > .table,
.moto-detail .section-body {
  overflow-x: auto;
  max-width: 100%;
}
.text-nowrap { overflow-x: auto; max-width: 100%; }

/* DataTables search / info / pagination wrappers */
.dataTables_wrapper .dataTables_filter input {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--color-accent) !important;
}
.dataTables_wrapper .dataTables_info {
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  padding-top: 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 12px !important;
  border-radius: var(--border-radius-md) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--color-accent-bg) !important;
  color: var(--color-accent) !important;
  border-color: transparent !important;
  font-weight: 600;
}

/* ----- DataTable column filter row ----- */
.dt-filter-row th {
  padding: 4px 8px !important;
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.dt-filter-row .form-control-sm,
.dt-filter-row .form-select-sm {
  font-size: 12px !important;
  padding: 4px 8px !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
}
.dt-filter-row .form-control-sm:focus,
.dt-filter-row .form-select-sm:focus {
  border-color: var(--color-accent) !important;
  outline: none;
  box-shadow: none !important;
}

/* ----- Forms ----- */
.form-control,
.form-select {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}
.form-control::placeholder,
.form-select::placeholder { color: var(--color-text-tertiary) !important; }

/* When no real value is chosen the select itself shows placeholder-style text.
   :has() matches when the currently-selected option is the blank / disabled one. */
.form-select:has(option[value=""]:checked),
.form-select:has(option:disabled:checked) {
  color: var(--color-text-tertiary) !important;
}
.form-select option:not([value=""]):not(:disabled) {
  color: var(--color-text-primary) !important;
}
.form-label,
.col-form-label {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500;
}
.form-text {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
  background: var(--color-background-secondary) !important;
  cursor: not-allowed;
}

/* ----- Flatpickr date inputs ----- */
.flatpickr-input,
.flatpickr-input[readonly],
.flatpickr-input ~ .form-control[readonly] {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.flatpickr-input:focus,
.flatpickr-input ~ .form-control:focus {
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}
.flatpickr-input::placeholder,
.flatpickr-input ~ .form-control::placeholder {
  color: var(--color-text-tertiary) !important;
}
.flatpickr-input:disabled,
.flatpickr-input ~ .form-control:disabled {
  background: var(--color-background-secondary) !important;
  cursor: not-allowed;
}

/* ----- Buttons (Bootstrap) ----- */
.btn {
  border-radius: var(--border-radius-md) !important;
  font-size: 12px !important;
  padding: 5px 12px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-primary,
.btn-outline-primary:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}
.btn-outline-primary {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  background: transparent !important;
}
.btn-outline-secondary {
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-secondary) !important;
}
.btn-outline-secondary:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.btn-sm {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

/* ----- Badges (Bootstrap bg-label-*) ----- */
.badge,
[class*="bg-label-"] {
  display: inline-flex !important;
  align-items: center;
  padding: 3px 8px !important;
  border-radius: var(--border-radius-pill) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  white-space: nowrap;
  border: none !important;
}
.bg-label-success, .badge.bg-label-success {
  background: var(--color-positive-bg) !important;
  color: var(--color-positive-fg) !important;
}
.bg-label-warning, .badge.bg-label-warning {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning-fg) !important;
}
.bg-label-primary, .badge.bg-label-primary {
  background: var(--color-accent-bg) !important;
  color: var(--color-accent) !important;
}
.bg-label-info, .badge.bg-label-info {
  background: var(--color-info-bg) !important;
  color: var(--color-info-fg) !important;
}
.bg-label-secondary, .badge.bg-label-secondary,
.bg-label-dark, .badge.bg-label-dark {
  background: var(--color-neutral-bg) !important;
  color: var(--color-neutral-fg) !important;
}
.bg-label-danger, .badge.bg-label-danger {
  background: var(--color-danger-bg) !important;
  color: var(--color-danger-fg) !important;
}

/* Strong contrast for critical sale commercial requirements (limitations, 100L trunk, etc.) */
.badge.commercial-requirement-attention {
  background: #c62828 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
option.commercial-requirement-option-attention {
  color: #b71c1c !important;
  font-weight: 700 !important;
}
.select2-container--default .select2-results__option.commercial-requirement-option-attention,
.select2-container--default .select2-results__option--highlighted.commercial-requirement-option-attention {
  color: #b71c1c !important;
  font-weight: 700 !important;
}

/* ----- Modals ----- */
.modal-content {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.12) !important;
}
.modal-header {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 14px 20px !important;
}
.modal-title {
  font-size: 14px !important;
  font-weight: 500 !important;
}
.modal-body { padding: 16px 20px !important; }
.modal-footer {
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  padding: 14px 20px !important;
}

/* ----- Select2 (used in many views) ----- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
  min-height: 34px;
}
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background: var(--color-neutral-bg) !important;
  color: var(--color-text-tertiary) !important;
  cursor: default;
}
.select2-container--default .select2-selection--single:focus-within,
.select2-container--default .select2-selection--multiple:focus-within,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--color-accent) !important;
}
.select2-dropdown {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 0.25rem 1rem rgba(161,172,184,0.45) !important;
}
.select2-results__option--highlighted[aria-selected] {
  background: var(--color-accent-bg) !important;
  color: var(--color-accent) !important;
}

/* ----- Bootstrap Select (selectpicker) ----- */
.bootstrap-select .dropdown-menu {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 0.25rem 1rem rgba(161,172,184,0.35) !important;
  z-index: 1060;
  background: var(--color-background-primary) !important;
}
.bootstrap-select .dropdown-menu .inner {
  max-height: 220px;
  overflow-y: auto;
}
.bootstrap-select .dropdown-menu li a {
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  padding: 6px 14px !important;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li a.active {
  background: var(--color-accent-bg) !important;
  color: var(--color-accent) !important;
}
.bootstrap-select .dropdown-menu .bs-searchbox .form-control {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: 13px !important;
}

/* ----- Popovers & Tooltips ----- */
.popover {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 0.25rem 1rem rgba(161,172,184,0.35) !important;
}
.tooltip-inner {
  background: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: 12px !important;
}

/* ----- Content-area spacing & overflow containment ----- */
.container-p-y {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Remove the 1440px cap so the app uses the full available width. */
.container-xxl {
  max-width: 100% !important;
  padding-left: 1.625rem !important;
  padding-right: 1.625rem !important;
}

/* The detached navbar also carries .container-xxl; match its sizing
   and padding to the content container so they always align. */
.layout-navbar.navbar-detached.container-xxl {
  max-width: 100% !important;
  width: calc(100% - calc(1.625rem * 2)) !important;
  padding-left: 1.625rem !important;
  padding-right: 1.625rem !important;
}

/* Prevent any child (wide table, price grid, etc.) from pushing the
   content area wider than the viewport minus the sidebar. */
.content-wrapper { overflow: hidden; }
.container-xxl.flex-grow-1 { min-width: 0; overflow: hidden; }
.card + .card,
.card.mb-3 { margin-top: 16px; }
.card.mb-3 { margin-bottom: 0 !important; }

/* ----- Card DataTable responsive wrapper ----- */
.card-datatable { padding: 0 !important; }
.card-datatable .table-responsive { padding: 0 !important; }
.card-datatable .dataTables_wrapper { padding: 10px 12px; }