/* Project-wide text cursor (caret) + focus border color, overriding the
   theme defaults in style.css (which use --primary-600, a blue-purple).
   caret-color only affects the blinking text-entry cursor inside inputs —
   browsers don't allow recoloring the mouse hover-cursor arrow itself. */
input,
textarea,
select,
[contenteditable] {
  caret-color: #4b5563;
}

.form-select:focus,
.form-select:active,
.form-control:focus,
.form-control:active,
textarea:focus,
textarea:active {
  border-color: #0ea5e9 !important;
}

.jvm-zoom-btn.jvm-zoomin,
.jvm-zoom-btn.jvm-zoomout {
  top: 10px;
  background: #d1d5db;
  color: #111827;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
}

.slick-dots {
  display: flex !important;
}

.fc-toolbar-title {
  font-size: 24px !important;
  font-weight: 600;
}

.fc-button {
  border-color: var(--primary-600) !important;
  background: #fff !important;
  color: var(--primary-600) !important;
  font-weight: 600 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 80px !important;
}

.fc-button:hover {
  background-color: var(--primary-50) !important;
}

.fc-button-active {
  color: #fff !important;
  background-color: var(--primary-600) !important;
}

.fc-button-active:hover {
  color: #fff !important;
  background-color: var(--primary-600) !important;
}

.fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: none !important;
}

.fc-toolbar-chunk {
  display: flex !important;
}

.fc .fc-button-primary:focus {
  box-shadow: none !important;
}

.fc-h-event {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-h-event .fc-event-main {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-v-event .fc-event-main {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-daygrid-day-number {
  transition: background-color 0.2s;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  border-radius: 50%;
}

.fc-daygrid-day:hover .fc-daygrid-day-number {
  background-color: var(--primary-100) !important;
  color: var(--primary-600) !important;
  transition: background-color 0.2s;
}

.slider-progress .active {
  transition: all 0.3s linear;
}

.slick-list {
  margin: 0 -7px;
}

.slick-slide > div {
  padding: 0 10px;
}

.center-gap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-grid {
  display: inline-grid;
}

.image-upload__boxInner.custom {
  display: flex;
  justify-content: center;
  align-items: center;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: unset !important;
}

/* Hide all submenus by default */
.sidebar-submenu {
  /* display: none; */
  list-style: none;
  padding-left: 20px;
  /* Adjust as needed */
}

.sidebar-menu .sidebar-submenu {
  display: block;
}

/* Optional: Add transition for smooth toggle */
.sidebar-menu .dropdown .sidebar-submenu {
  transition: max-height 0.3s linear;
  overflow: hidden;
  max-height: 0px;
}

/* .sidebar-menu .dropdown.open .sidebar-submenu {
  max-height: 1000px;
} */

.sidebar-menu li > a > i {
  margin-inline-end: 0;
}

.mr-10 {
  margin-right: 10px !important;
}

.sidebar-menu .sidebar-submenu li a {
  gap: 12px;
}

.sidebar-menu .sidebar-submenu li > .active-page {
  background-color: var(--button-secondary);
  color: var(--text-primary-light);
}

.sidebar-menu li > a.active-page:hover {
    color: var(--text-primary-light);
}
.me-8 {
  margin-right: 8px;
}

.gap-10 {
  display: flex;
  gap: 8px;
}

.w-33 {
  width: 33.33%;
}

.overlay::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  opacity: 0.65;
  transition: all 0.3s;
  z-index: 2;
}

.overlay.active::after {
  width: 100%;
}

.Gallery-masonry {
  background: #000;
  z-index: 99999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}

.travel-slider .slick-slide{
  margin: 0;
}

.Check.complete{
  stroke-dashoffset: 65.9734px !important;
}

/* Shimmer / skeleton loading placeholders — theme-aware via the existing
   --neutral-200/--neutral-300 variables so it reads correctly in both
   light and dark mode without a separate override. */
@keyframes shimmer-sweep {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.shimmer {
  display: block;
  border-radius: 8px;
  background-color: var(--neutral-200);
  background-image: linear-gradient(
    90deg,
    var(--neutral-200) 0px,
    var(--neutral-300) 40px,
    var(--neutral-200) 80px
  );
  background-size: 400px 100%;
  background-repeat: no-repeat;
  animation: shimmer-sweep 1.4s ease-in-out infinite;
}

.shimmer-text {
  height: 14px;
  width: 100%;
  margin-bottom: 8px;
}

.shimmer-title {
  height: 20px;
  width: 45%;
  margin-bottom: 16px;
}

.shimmer-row {
  height: 40px;
  width: 100%;
  margin-bottom: 12px;
}

.shimmer-circle {
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none;
  }
}

/* Mobile/tablet FAB navigation — replaces the full-width slide-in sidebar
   below the app's existing 1200px sidebar breakpoint with a floating round
   button that expands into a compact nav list, instead of covering the
   whole screen with the desktop sidebar. */
@media (max-width: 1199.98px) {
  .sidebar.sidebar-open {
    inset-inline-start: -100% !important;
  }
  /* Replaced by .mobile-fab-menu-btn below — the old hamburger opened the
     full desktop sidebar, which no longer slides in at this width. */
  .sidebar-mobile-toggle {
    display: none !important;
  }
}

.mobile-fab-menu-btn {
  display: none;
}

@media (max-width: 1199.98px) {
  .mobile-fab-menu-btn {
    display: flex;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-600);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-600) 45%, transparent);
    z-index: 1050;
    border: none;
    transition: transform 0.15s ease;
  }

  .mobile-fab-menu-btn:active {
    transform: scale(0.94);
  }

  .mobile-fab-menu-btn .icon {
    font-size: 1.6rem;
  }

  .mobile-fab-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
  }

  /* Neumorphic panel: sits flush with its own background (no separate
     white-card-on-dark-backdrop look) and gets its depth purely from a
     soft dual shadow, matching the sidebar/cards elsewhere in the app. */
  .mobile-fab-menu-panel {
    position: fixed;
    bottom: 92px;
    right: 24px;
    max-height: 65vh;
    width: min(280px, calc(100vw - 48px));
    overflow-y: auto;
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.18), -6px -6px 16px rgba(255, 255, 255, 0.7);
    z-index: 1045;
    padding: 12px;
    animation: fab-panel-in 0.18s ease-out;
  }
  :root[data-theme="dark"] .mobile-fab-menu-panel {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -6px -6px 16px rgba(255, 255, 255, 0.03);
  }

  @keyframes fab-panel-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .mobile-fab-menu-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-fab-menu-panel li a,
  .mobile-fab-menu-panel li button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    color: var(--text-primary-light);
    text-decoration: none;
    background: none;
    border: none;
    text-align: start;
    font-size: 0.9rem;
    box-shadow: none;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
  }

  .mobile-fab-menu-panel li a:hover:not(.active-page) {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15), -3px -3px 6px rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
  }
  :root[data-theme="dark"] .mobile-fab-menu-panel li a:hover:not(.active-page) {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35), -3px -3px 6px rgba(255, 255, 255, 0.03);
  }

  .mobile-fab-menu-panel li a.active-page {
    background-color: color-mix(in srgb, var(--primary-600) 10%, transparent);
    color: var(--primary-600);
    font-weight: 600;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  }
  :root[data-theme="dark"] .mobile-fab-menu-panel li a.active-page {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4), inset -2px -2px 5px rgba(255, 255, 255, 0.03);
  }

  .mobile-fab-menu-panel li a .icon,
  .mobile-fab-menu-panel li button .icon {
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* Colorful per-item icon badge — same idea as the desktop sidebar's
     .sidebar-icon-badge, using each nav item's own color (item.color in
     MasterLayout.jsx) instead of a flat monochrome icon. */
  .mobile-fab-icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .mobile-fab-menu-panel hr {
    margin: 8px 0;
    border-color: var(--neutral-200);
  }
}
/* Every dropdown-item across the app (product search, customer-name
   suggestions, ...) — Bootstrap's default :hover background stays a plain
   light-gray regardless of theme, which read as barely-visible light-on-
   light or dark-on-dark text depending on mode. Blue background + white
   text is legible and consistent in both themes, rather than only fixing
   contrast for one. Applies universally, not per-component, so any new
   dropdown-item added later gets this for free. */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background-color: #487FFF !important;
  color: #fff !important;
}
.dropdown-item:hover *,
.dropdown-item:focus *,
.dropdown-item.active * {
  color: #fff !important;
}

/* Number input spin buttons eat horizontal space in narrow table cells
   (Quantity/Price columns) without adding real value — users can still
   type or use real up/down arrow keys, just no visible stepper widget. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Disabled inputs (e.g. Paid Amount when Sale Type is Cash) used
   Bootstrap's own --bs-secondary-bg for their background, which stays a
   light gray in both themes since nothing here redefines it -- while the
   app's own .form-control rule keeps the text color themed light/white in
   dark mode, leaving light text on a light background. Use the app's
   already-theme-aware input variables instead so it stays readable (and
   visually distinct as "disabled") in both themes. */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--input-bg) !important;
  color: var(--text-secondary-light) !important;
  opacity: 1;
}

/* Inventory table: always show the horizontal scrollbar when the table is
   scrollable (below the fixed-layout breakpoint further down, or on
   mobile/tablet), instead of Bootstrap's overflow-x: auto default, which
   some OS/browser combinations only reveal on hover or while actively
   scrolling -- easy to miss that Unit/Cost/Stock/etc. exist off-screen at
   all with no visible affordance. overflow-x: scroll keeps the scrollbar
   track rendered at rest; on a device where the whole table already fits
   (nothing to scroll), the track is simply inert, not scroll-active. */
.inventory-table-wrapper {
  overflow-x: scroll;
}

/* Inventory table: on desktop, stretch to fill the available width instead
   of sizing to content (which left empty space on wide screens or forced
   horizontal scroll on medium ones) -- long Product/Category/Brand values
   truncate with an ellipsis (full text still available via the title
   attribute) rather than pushing the table wider than the screen. Left
   untouched below the desktop breakpoint so mobile/tablet keep the normal
   content-sized table with table-responsive's horizontal scroll, since a
   squeezed fixed layout would make cramped columns worse there, not better.
   Breakpoint is 1400px, not Bootstrap's 992px "desktop" -- this table has
   10 columns, and a windowed desktop app or a lower-resolution monitor is
   routinely 992-1399px wide with real content area well under what those
   columns need (~1070px) once the sidebar and page padding are subtracted;
   below 1400px it now falls through to the same content-sized table +
   horizontal scroll as mobile/tablet, instead of squeezing every column
   until header labels like "Reorder Level" wrap mid-word. */
@media (min-width: 1400px) {
  .inventory-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0 !important;
  }
}

/* Below the fixed-layout breakpoint above, the table falls back to natural
   (auto) layout -- browsers size auto-layout columns to fit content, but
   header cells are still free to wrap onto multiple lines if a column ends
   up narrower than its label. Force headers to a single line so a squeeze
   pushes the table into table-responsive's horizontal scroll instead of
   wrapping "Reorder Level" into "Reor der Level". */
.inventory-table thead th {
  white-space: nowrap;
}

/* Paid Amount (New Sale) gets its own green-tinted treatment instead of
   the generic disabled-input styling -- both readable and a clear visual
   cue that this figure represents money received, in both themes. */
.paid-amount-input,
.paid-amount-input:disabled {
  background-color: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #16a34a !important;
  font-weight: 600;
  opacity: 1;
}

/* Brand heading row (Sale/Quotation product tables) at half the normal
   row height -- table-py-8 sets td padding with !important, so this needs
   the same specificity to win. */
tbody > tr > td.brand-heading-cell {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* Inventory page: on desktop, let the card use the full content width
   instead of leaving unused space beside it -- this page's table already
   stretches to fill its card (see .inventory-table above); this widens the
   card itself so that fill actually reaches the edges of the screen.
   Mobile/tablet/low-res-desktop untouched, same 1400px breakpoint as
   .inventory-table above (must match -- widening the card without the
   table also switching to fixed-stretch layout just adds empty space
   instead of fixing anything). */
@media (min-width: 1400px) {
  .inventory-page-card {
    width: 100%;
    max-width: none;
  }
  .inventory-page-card .card-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Same treatment for the super admin User Log: its Activity column was
   getting clipped at the right edge on desktop because the card was
   narrower than the content it holds. Mobile/tablet untouched. */
@media (min-width: 992px) {
  .user-logs-page-card {
    width: 100%;
    max-width: none;
  }
  .user-logs-page-card .card-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------------------------------------------------------------------
   Neumorphism (soft UI) for icon-circle buttons and status pills,
   app-wide -- not just the dashboard. Deliberately dedicated marker
   classes (.neu-icon-circle / .neu-status-pill) added at each call site,
   rather than matching the existing Bootstrap-style utility combos
   (.w-40-px.h-40-px.rounded-circle etc.) directly -- that compound-class
   approach measured as unreliable in testing (one specific selector
   silently failed to make it into the parsed stylesheet while visually
   identical neighboring rules worked fine; never fully root-caused, but
   reproducible), so a plain dedicated class sidesteps it entirely.
   ------------------------------------------------------------------- */

/* Topbar icon buttons (theme toggle, notifications, profile) and every
   table row's circular action buttons (View/Print/Record Payment/Edit,
   etc.) -- background swapped for the theme's own card/surface color
   (var(--white), which style.css already redefines to a dark navy in
   dark theme) with a soft raised dual shadow instead of a flat tint
   fill. The icon's own color utility (text-primary-600, text-purple,
   etc.) is untouched, so each button keeps its distinguishing color. */
.neu-icon-circle {
  background-color: var(--white) !important;
  border: none !important;
  box-shadow: 3px 3px 6px rgba(163, 177, 198, 0.4), -3px -3px 6px rgba(255, 255, 255, 0.8) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.neu-icon-circle:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 9px rgba(163, 177, 198, 0.5), -4px -4px 9px rgba(255, 255, 255, 0.9) !important;
}
:root[data-theme="dark"] .neu-icon-circle {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5), -3px -3px 6px rgba(255, 255, 255, 0.03) !important;
}
:root[data-theme="dark"] .neu-icon-circle:hover {
  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.6), -4px -4px 9px rgba(255, 255, 255, 0.05) !important;
}

/* Status pills (Paid/Partial/Unpaid, and anything sharing this pattern)
   keep their semantic bg-*-focus color -- that color is functional (it's
   how a status is scanned at a glance), not decorative, so it stays.
   What changes is the flat-fill edge: a soft inset shadow gives it a
   gently pressed, embossed look instead of a hard-edged solid badge. */
.neu-status-pill {
  border: none !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.08), inset -1px -1px 3px rgba(255, 255, 255, 0.6) !important;
}
:root[data-theme="dark"] .neu-status-pill {
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35), inset -1px -1px 3px rgba(255, 255, 255, 0.05) !important;
}

/* ---------------------------------------------------------------------
   Neumorphism for every button app-wide, via Bootstrap's own variant
   classes (.btn-primary, .btn-outline-danger, etc.) directly -- each
   used here as a single, plain class selector (not chained with other
   classes into a compound selector), matching the pattern already
   proven reliable for .neu-icon-circle/.neu-status-pill above. See the
   comment on those for why a compound selector was avoided.
   ------------------------------------------------------------------- */
.btn {
  transition: box-shadow 0.2s ease, transform 0.15s ease, color 0.15s ease;
}
.btn:active {
  transform: translateY(0) !important;
}
/* Text color feedback on hover. Icon-only circular buttons
   (.neu-icon-circle) are excluded deliberately — their icon glyph uses
   `color` too, so this would recolor every action icon on hover, not
   just buttons with visible text, which is what was actually asked for. */
.btn:not(.neu-icon-circle):hover {
  color: #EF9E2B !important;
}

/* Outline buttons (Quotations, Returns, Cancel, Resume, etc.): background
   swapped for the page/card's own surface color, border dropped, soft
   raised dual shadow takes its place -- the variant's own text/icon color
   is untouched. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success {
  background-color: var(--white) !important;
  border-color: transparent !important;
  box-shadow: 3px 3px 6px rgba(163, 177, 198, 0.4), -3px -3px 6px rgba(255, 255, 255, 0.8) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-success:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 9px rgba(163, 177, 198, 0.5), -4px -4px 9px rgba(255, 255, 255, 0.9) !important;
}
:root[data-theme="dark"] .btn-outline-primary,
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-danger,
:root[data-theme="dark"] .btn-outline-success {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5), -3px -3px 6px rgba(255, 255, 255, 0.03) !important;
}
:root[data-theme="dark"] .btn-outline-primary:hover,
:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-danger:hover,
:root[data-theme="dark"] .btn-outline-success:hover {
  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.6), -4px -4px 9px rgba(255, 255, 255, 0.05) !important;
}

/* Solid/filled buttons (New Sale, Create, Save, etc.): keep their own
   fill color -- that's the primary-action signal, not decorative -- but
   swap Bootstrap's flat drop shadow for a soft shadow tinted with the
   button's own color plus a faint light-side highlight, for the same
   raised-off-the-page feel instead of a flat rectangle. */
.btn-primary {
  border: none !important;
  box-shadow: 4px 4px 10px color-mix(in srgb, var(--primary-600) 35%, transparent), -2px -2px 6px rgba(255, 255, 255, 0.5) !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 14px color-mix(in srgb, var(--primary-600) 45%, transparent), -2px -2px 6px rgba(255, 255, 255, 0.6) !important;
}
.btn-secondary {
  border: none !important;
  box-shadow: 4px 4px 10px rgba(108, 117, 125, 0.3), -2px -2px 6px rgba(255, 255, 255, 0.5) !important;
}
.btn-danger {
  border: none !important;
  box-shadow: 4px 4px 10px color-mix(in srgb, var(--primary-600) 35%, transparent), -2px -2px 6px rgba(255, 255, 255, 0.5) !important;
}
.btn-success {
  border: none !important;
  box-shadow: 4px 4px 10px rgba(25, 135, 84, 0.35), -2px -2px 6px rgba(255, 255, 255, 0.5) !important;
}
.btn-warning {
  border: none !important;
  box-shadow: 4px 4px 10px rgba(255, 193, 7, 0.4), -2px -2px 6px rgba(255, 255, 255, 0.5) !important;
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .btn-success,
:root[data-theme="dark"] .btn-warning {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.45), -2px -2px 6px rgba(255, 255, 255, 0.05) !important;
}

/* Brand green for Bootstrap's own primary components (buttons, pills, focus
   rings, checks). style.css recolors the app's --primary-* ramp, but
   Bootstrap's .btn-primary etc. read --bs-primary, which stays blue unless
   overridden here. */
:root, [data-bs-theme] {
  --bs-primary: var(--primary-600);
  --bs-primary-rgb: 11, 102, 35;
  --bs-link-color: var(--primary-600);
  --bs-link-color-rgb: 11, 102, 35;
  --bs-link-hover-color: var(--primary-700);
  --bs-link-hover-color-rgb: 9, 82, 28;
  --bs-focus-ring-color: color-mix(in srgb, var(--primary-600) 25%, transparent);
}
.btn-primary {
  --bs-btn-bg: var(--primary-600);
  --bs-btn-border-color: var(--primary-600);
  --bs-btn-hover-bg: var(--primary-700);
  --bs-btn-hover-border-color: var(--primary-700);
  --bs-btn-active-bg: var(--primary-800);
  --bs-btn-active-border-color: var(--primary-800);
  --bs-btn-disabled-bg: var(--primary-600);
  --bs-btn-disabled-border-color: var(--primary-600);
  --bs-btn-focus-shadow-rgb: 11, 102, 35;
}
.btn-outline-primary {
  --bs-btn-color: var(--primary-600);
  --bs-btn-border-color: var(--primary-600);
  --bs-btn-hover-bg: var(--primary-600);
  --bs-btn-hover-border-color: var(--primary-600);
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
  --bs-btn-disabled-color: var(--primary-600);
  --bs-btn-disabled-border-color: var(--primary-600);
  --bs-btn-focus-shadow-rgb: 11, 102, 35;
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary-600); }
.form-check-input:checked { background-color: var(--primary-600); border-color: var(--primary-600); }
.form-control:focus, .form-select:focus { border-color: var(--primary-600); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary-600) 20%, transparent); }
.btn-success { --bs-btn-bg: var(--primary-600); --bs-btn-border-color: var(--primary-600); --bs-btn-hover-bg: var(--primary-700); --bs-btn-hover-border-color: var(--primary-700); --bs-btn-active-bg: var(--primary-800); --bs-btn-active-border-color: var(--primary-800); }

/* Select dropdown arrow: the theme pinned the chevron flush against the
   right edge (background-position-x: right) with no inset, and the dark
   theme pointed at an image file that isn't shipped. Inset it, size it, and
   draw it as an inline SVG in both themes. */
.form-select {
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 14px 10px !important;
  padding-right: 2.5rem !important;
}
.form-select.form-select-sm { padding-right: 2.25rem !important; background-position: right 0.75rem center !important; }
[dir="rtl"] .form-select { background-position: left 0.85rem center !important; padding-right: 0.9375rem !important; padding-left: 2.5rem !important; }
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Checkboxes/radios: the theme zeroes .form-check's left padding and expects
   a flex row (it was built around its own radio dot), so a plain
   <div class="form-check"> laid the box above its label and lost the check
   mark. Make it a proper row and give checkboxes a real green check. */
.form-check { display: flex; align-items: flex-start; gap: 10px; min-height: 0; margin-bottom: 8px; }
.form-check .form-check-input { float: none; flex-shrink: 0; margin-top: 0.15rem; }
.form-check .form-check-input[type="checkbox"] { border-radius: 4px; }
.form-check .form-check-input[type="checkbox"]::before { display: none; }
.form-check .form-check-input[type="checkbox"]:checked {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.form-check .form-check-label { cursor: pointer; line-height: 1.4; }

/* ---- Account colour palettes (chosen from the palette icon in the top bar; the
   slug is on <html data-scheme>). Only the primary ramp and page tint change;
   the default "food-logic" green lives in style.css. ---- */
[data-scheme="ba-classic"] { --primary-50: #ecf9f6; --primary-100: #d4f2ea; --primary-200: #aee7d7; --primary-300: #83dbc2; --primary-400: #54cdaa; --primary-500: #2ec197; --primary-600: #11b989; --primary-700: #0e9b73; --primary-800: #0b7a5a; --primary-900: #085942; --bg-color: #f8fafc; --bs-primary-rgb: 17, 185, 137; --bs-link-color-rgb: 17, 185, 137; }
[data-scheme="black-gold"] { --primary-50: #fff8ec; --primary-100: #feeed4; --primary-200: #fee0ae; --primary-300: #fdcf83; --primary-400: #fdbd54; --primary-500: #fcae2e; --primary-600: #fca311; --primary-700: #d4890e; --primary-800: #a66c0b; --primary-900: #794e08; --bs-primary-rgb: 252, 163, 17; --bs-link-color-rgb: 252, 163, 17; }
[data-scheme="fiery-ocean"] { --primary-50: #faeced; --primary-100: #f4d4d7; --primary-200: #eaaeb3; --primary-300: #df848b; --primary-400: #d2545e; --primary-500: #c82e3a; --primary-600: #c1121f; --primary-700: #a20f1a; --primary-800: #7f0c14; --primary-900: #5d090f; --bg-color: #fbf5e9; --bs-primary-rgb: 193, 18, 31; --bs-link-color-rgb: 193, 18, 31; }
[data-scheme="ocean-breeze"] { --primary-50: #ebf4f9; --primary-100: #d1e7f2; --primary-200: #a8d1e6; --primary-300: #7ab8d9; --primary-400: #479dca; --primary-500: #1f87bf; --primary-600: #0077b6; --primary-700: #006499; --primary-800: #004f78; --primary-900: #003957; --bg-color: #f3fafc; --bs-primary-rgb: 0, 119, 182; --bs-link-color-rgb: 0, 119, 182; }
[data-scheme="earthy-tones"] { --primary-50: #eef3f0; --primary-100: #d9e5de; --primary-200: #b7cec1; --primary-300: #91b4a0; --primary-400: #67977c; --primary-500: #457f5f; --primary-600: #2c6e49; --primary-700: #255c3d; --primary-800: #1d4930; --primary-900: #153523; --bg-color: #fcfcee; --bs-primary-rgb: 44, 110, 73; --bs-link-color-rgb: 44, 110, 73; }
[data-scheme="cool-coastal"] { --primary-50: #feedef; --primary-100: #fcd7dc; --primary-200: #fab4bd; --primary-300: #f78d9a; --primary-400: #f36173; --primary-500: #f13d53; --primary-600: #ef233c; --primary-700: #c91d32; --primary-800: #9e1728; --primary-900: #73111d; --bg-color: #f5f8fa; --bs-primary-rgb: 239, 35, 60; --bs-link-color-rgb: 239, 35, 60; }
[data-scheme="warm-earth"] { --primary-50: #fef1ee; --primary-100: #fde0d9; --primary-200: #fbc5b8; --primary-300: #f8a692; --primary-400: #f68468; --primary-500: #f46946; --primary-600: #f2542d; --primary-700: #cb4726; --primary-800: #a0371e; --primary-900: #742816; --bg-color: #f9f4eb; --bs-primary-rgb: 242, 84, 45; --bs-link-color-rgb: 242, 84, 45; }
[data-scheme="orange-sunset-sky"] { --primary-50: #fef5f1; --primary-100: #fce9e0; --primary-200: #fad5c5; --primary-300: #f7bfa6; --primary-400: #f3a684; --primary-500: #f19269; --primary-600: #ef8354; --primary-700: #c96e47; --primary-800: #9e5637; --primary-900: #733f28; --bg-color: #f7f7f8; --bs-primary-rgb: 239, 131, 84; --bs-link-color-rgb: 239, 131, 84; }
[data-scheme="vibrant-summer"] { --primary-50: #edf3f8; --primary-100: #d7e3f0; --primary-200: #b4cae2; --primary-300: #8daed3; --primary-400: #618fc2; --primary-500: #3d77b4; --primary-600: #2364aa; --primary-700: #1d548f; --primary-800: #174270; --primary-900: #113052; --bg-color: #f4f8fa; --bs-primary-rgb: 35, 100, 170; --bs-link-color-rgb: 35, 100, 170; }

/* Dark themes keep the primary tint translucent, whichever palette is picked. */
[data-theme="dark"][data-scheme] { --primary-50: color-mix(in srgb, var(--primary-600) 8%, transparent); }