/* ============================================================================
   GalaCRM — Global Brand Design System (V14)
   Applied site-wide via layouts/sections/styles.blade.php (loaded last so it wins).
   Source of truth: D:\Gibbz\V14\CRM\BRANDING - TO APPLY TO ENTIRE SITE (imgs 1-9).
   ========================================================================== */

:root {
  /* Brand palette */
  --brand-navy:        #2D3D51;
  --brand-navy-hover:  #26343f;
  --brand-cyan:        #8DDDEC;
  --brand-purple:      #A783FF;
  --brand-blue:        #779CFF;

  /* UI system */
  --brand-page-bg:     #F5F7FA;
  --brand-text:        #2D3D51;
  --brand-muted:       #6B7280;
  --brand-border:      #E5E7EB;
  --brand-surface:     #ffffff;
  --brand-surface-2:   #f3f4f6;
  --brand-surface-3:   #E5E8EC;
  --brand-label-text:  #3b4a5c;
  --brand-heading:     #2D3D51;

  /* Semantic (status) */
  --brand-success:     #1E9E5A;
  --brand-info:        #4C6FD8;
  --brand-warning:     #D98A2B;
  --brand-danger:      #D64545;
  --brand-synced:      #2AA5BD;
  --brand-neutral:     #6B7280;

  /* Radius / shadow / spacing */
  --brand-radius-btn:  10px;
  --brand-radius-card: 16px;
  --brand-radius-pill: 30px;
  --brand-shadow-card: 0 6px 24px rgba(45,61,81,.06);
  --brand-shadow-modal:0 20px 50px rgba(45,61,81,.15);

  /* Override Bootstrap / Sneat theme vars (was #000 primary) */
  --bs-primary: #2D3D51;
  --bs-primary-rgb: 45,61,81;
  --bs-success: #1E9E5A;   --bs-success-rgb: 30,158,90;
  --bs-info: #4C6FD8;      --bs-info-rgb: 76,111,216;
  --bs-warning: #D98A2B;   --bs-warning-rgb: 217,138,43;
  --bs-danger: #D64545;    --bs-danger-rgb: 214,69,69;
  --bs-secondary: #6B7280; --bs-secondary-rgb: 107,114,128;
  --bs-link-color: #2D3D51;
  --bs-link-color-rgb: 45,61,81;
  --bs-link-hover-color: #26343f;
  --bs-font-sans-serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: #2D3D51;
  --bs-body-color-rgb: 45,61,81;
  --bs-border-color: #E5E7EB;
}

/* ---- Typography (Poppins everywhere) ------------------------------------
   Note: we intentionally do NOT target <i>, and boxicons/FontAwesome set their
   glyph font via higher-specificity class selectors (.bx / .fa*), so icon fonts
   are never overridden by these element-level rules. */
body,
.menu, .menu-inner, .layout-navbar,
.card, .btn, .form-control, .form-select, .form-label,
.table, .nav, .dropdown-menu, .modal, .offcanvas,
h1, h2, h3, h4, h5, h6, p, span, a, label, small, div, td, th, li {
  font-family: var(--bs-font-sans-serif);
}

h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 700; }
h3, .h3, h4, .h4 { font-weight: 700; }
h5, .h5, h6, .h6 { font-weight: 600; }
.fw-bold { font-weight: 700 !important; }
.text-muted { color: var(--brand-muted) !important; }
body { color: var(--brand-text); }

/* ---- Page background ----------------------------------------------------- */
body,
.layout-wrapper,
.layout-page,
.content-wrapper { background-color: var(--brand-page-bg); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  border-radius: var(--brand-radius-btn) !important;
  font-weight: 600;
}
/* Primary — navy (Create / Save / Submit) */
.btn-primary {
  background-color: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .btn-primary:first-child:active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--brand-navy-hover) !important;
  border-color: var(--brand-navy-hover) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-dark { /* many "black" CTAs in the app — align to navy */
  background-color: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #fff !important;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  background-color: var(--brand-navy-hover) !important;
  border-color: var(--brand-navy-hover) !important;
  color: #fff !important;
}
/* Secondary — white + border (View / Edit / Filter / Export / Cancel) */
.btn-outline-secondary, .btn-outline-dark {
  background-color: var(--brand-surface) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-navy) !important;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover {
  background-color: var(--brand-surface-2) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-navy) !important;
}
/* Accent — used rarely (Continue = blue, Confirm = cyan) */
.btn-info {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}
.btn-accent-cyan {
  background-color: var(--brand-cyan) !important;
  border-color: var(--brand-cyan) !important;
  color: var(--brand-navy) !important;
}
/* Danger — outline by default; solid reserved for confirm modals (.btn-danger) */
.btn-outline-danger {
  background-color: var(--brand-surface) !important;
  border-color: var(--brand-danger) !important;
  color: var(--brand-danger) !important;
}
.btn-outline-danger:hover { background-color: var(--brand-danger) !important; color: #fff !important; }
.btn-danger {
  background-color: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: #bf3a3a !important;
  border-color: #bf3a3a !important;
}
/* V28: the theme core sets `.btn { display: inline-flex !important }`, which beat the UA
   `[hidden]` rule — every .btn carrying `hidden` (toggled by JS: Upload/Preview, Send now,
   Dismiss…) stayed visible. Two classes' specificity wins whatever the load order. */
.btn[hidden] { display: none !important; }
/* Table trash-icon delete — small, icon-only, no heavy red text */
.btn-icon.btn-delete, .btn-trash, td .btn-outline-danger.btn-icon {
  padding: .35rem .5rem !important;
}

/* ---- Forms --------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--brand-radius-btn) !important;
  border-color: var(--brand-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 .15rem rgba(45,61,81,.15) !important;
}
.form-label { font-weight: 500; color: var(--brand-label-text); }
/* required marker */
.form-label .req, label .req { color: var(--brand-danger); font-weight: 700; }

/* ---- Cards --------------------------------------------------------------- */
.card, .modern-card {
  border-radius: var(--brand-radius-card) !important;
  border: 1px solid var(--brand-border) !important;
  box-shadow: var(--brand-shadow-card) !important;
}

/* ---- Tables -------------------------------------------------------------- */
.table > :not(caption) > * > * { padding-top: .85rem; padding-bottom: .85rem; }
.table thead th, .modern-table th, .modern-table thead th {
  color: var(--brand-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: .75rem !important;
  letter-spacing: .03em !important;
  background-color: transparent !important;
}
.modern-table td { color: var(--brand-text); }

/* ---- Wide tables scroll inside their card (V26) ----------------------------
   A table wider than its card scrolls sideways inside the card, scrollbar at
   the bottom of the table; the page itself never scrolls sideways. Some pages
   forced their wrapper to overflow: visible so row action menus were not
   clipped — brand-tables.js opens those menus with a fixed position instead,
   so the wrapper always scrolls. It also wraps tables that had no wrapper.
   Screen only: a printed table keeps all its columns. */
@media screen {
  .table-responsive { overflow-x: auto !important; }
}
/* The scrollbar lands on the card's rounded bottom edge: follow the curve. */
.card > .table-responsive:last-child {
  border-bottom-left-radius: calc(var(--brand-radius-card) - 1px);
  border-bottom-right-radius: calc(var(--brand-radius-card) - 1px);
}
/* A long table's scrollbar is after its last row: while that is below the screen,
   brand-tables.js docks a copy of it to the bottom of the screen. */
.brand-table-dock {
  position: fixed;
  bottom: 0;
  z-index: 999;
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--brand-surface);
  box-shadow: 0 -2px 10px rgba(45,61,81,.08);
}
.brand-table-dock.is-on { display: block; }
.brand-table-dock > div { height: 1px; }
@media print { .brand-table-dock { display: none !important; } }
/* Always-visible scrollbar with its own track (macOS overlay scrollbars hide until scrolled). */
.table-responsive::-webkit-scrollbar,
.brand-table-dock::-webkit-scrollbar { width: 12px; height: 12px; }
.table-responsive::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-corner,
.brand-table-dock::-webkit-scrollbar-track { background: var(--brand-surface-2); }
.table-responsive::-webkit-scrollbar-thumb,
.brand-table-dock::-webkit-scrollbar-thumb {
  background-color: rgba(107,114,128,.55);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 12px;
}
.table-responsive::-webkit-scrollbar-thumb:hover,
.brand-table-dock::-webkit-scrollbar-thumb:hover { background-color: rgba(107,114,128,.8); }
@supports not selector(::-webkit-scrollbar) {
  .table-responsive,
  .brand-table-dock { scrollbar-color: rgba(107,114,128,.55) var(--brand-surface-2); }
}

/* ---- Status badges — rounded pills, fixed color meanings ----------------- */
.badge { border-radius: var(--brand-radius-pill) !important; font-weight: 600; }
.badge.bg-label-success, .badge.bg-success  { background-color: #E4F4EC !important; color: var(--brand-success) !important; }
.badge.bg-label-primary                      { background-color: #E5E8EC !important; color: var(--brand-navy) !important; }
.badge.bg-label-info                         { background-color: #E7ECFA !important; color: var(--brand-info) !important; }
.badge.bg-label-warning, .badge.bg-warning   { background-color: #FBF0E2 !important; color: var(--brand-warning) !important; }
.badge.bg-label-danger, .badge.bg-danger     { background-color: #FBE9E9 !important; color: var(--brand-danger) !important; }
.badge.bg-label-secondary                    { background-color: #EEF0F2 !important; color: var(--brand-neutral) !important; }
.badge.bg-label-cyan, .badge.bg-cyan, .badge.badge-synced { background-color: #E2F3F6 !important; color: var(--brand-synced) !important; }
/* solid primary badge → navy */
.badge.bg-primary { background-color: var(--brand-navy) !important; color: #fff !important; }

/* ---- Tabs / nav-pills / pagination — navy active ------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--brand-navy) !important; color: #fff !important; }
.nav-tabs .nav-link.active { color: var(--brand-navy) !important; border-bottom-color: var(--brand-navy) !important; }
.modern-tabs .nav-link.active { background: var(--brand-navy) !important; color: #fff !important; }
.page-item.active .page-link { background-color: var(--brand-navy) !important; border-color: var(--brand-navy) !important; }
.page-link { color: var(--brand-navy); }

/* ---- Sidebar (vertical menu) active state -------------------------------- */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) { color: var(--brand-navy); }
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link { color: var(--brand-navy); }

/* ---- Links --------------------------------------------------------------- */
a { color: var(--brand-navy); }
a:hover { color: var(--brand-navy-hover); }
.text-primary { color: var(--brand-navy) !important; }

/* ---- Toasts (toastr) — left color border + brand semantic colors --------- */
#toast-container > div {
  border-radius: 12px !important;
  box-shadow: var(--brand-shadow-card) !important;
  opacity: 1 !important;
  border-left: 4px solid transparent;
}
#toast-container > .toast-success { background-color: var(--brand-surface) !important; color: var(--brand-text) !important; border-left-color: var(--brand-success); }
#toast-container > .toast-error   { background-color: var(--brand-surface) !important; color: var(--brand-text) !important; border-left-color: var(--brand-danger); }
#toast-container > .toast-warning { background-color: var(--brand-surface) !important; color: var(--brand-text) !important; border-left-color: var(--brand-warning); }
#toast-container > .toast-info    { background-color: var(--brand-surface) !important; color: var(--brand-text) !important; border-left-color: var(--brand-info); }
.toast-title { font-weight: 700; }

/* ---- select2 — mirror .form-select exactly -------------------------------
   Two select2 stylesheets ship (CDN default theme globally + Sneat vendor css
   on some pages); this section is loaded last and unifies both. The default
   theme's b[role=presentation] border-triangle painted over the vendor svg
   chevron ("dark shape above the arrow") — it is fully hidden and replaced
   with one Bootstrap caret drawn on the arrow wrapper. */
.select2-container { font-family: var(--bs-font-sans-serif); }
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  height: auto !important;
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem 2.25rem .375rem .75rem !important;
  background-color: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-btn) !important;
  box-sizing: border-box;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.5 !important;
  color: var(--brand-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--brand-muted);
}
/* One arrow only: hide the default-theme triangle / vendor svg on <b>, draw the
   Bootstrap .form-select caret on the wrapper instead. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 0 !important;
  width: 2.25rem !important;
  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='%232D3D51' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
  border: none !important;
  background: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--brand-muted);
  font-weight: 600;
  margin-right: .5rem;
}
/* Focus / open — same navy ring as .form-control:focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 .15rem rgba(45,61,81,.15) !important;
  outline: 0;
}
/* Disabled (view-mode pages) — match a disabled .form-select */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--brand-surface-2) !important;
  cursor: default !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: var(--brand-muted) !important;
}
/* Dropdown — rounded card with shadow */
.select2-dropdown {
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-btn) !important;
  box-shadow: var(--brand-shadow-modal) !important;
  overflow: hidden;
  z-index: 1056; /* above Bootstrap modals (1055) */
}
.select2-container--default .select2-search--dropdown { padding: .5rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  padding: .375rem .75rem !important;
  font-family: var(--bs-font-sans-serif);
  color: var(--brand-text);
  outline: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 .15rem rgba(45,61,81,.15);
}
.select2-container--default .select2-results__option {
  padding: .5rem .75rem;
  color: var(--brand-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-navy) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--brand-surface-3);
  color: var(--brand-navy);
}
/* Multiple-choice chips — brand pills */
.select2-container--default .select2-selection--multiple {
  min-height: calc(1.5em + .75rem + 2px) !important;
  padding: .2rem .5rem !important;
  background-color: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-btn) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 .15rem rgba(45,61,81,.15) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--brand-surface-3) !important;
  border: none !important;
  border-radius: var(--brand-radius-pill) !important;
  color: var(--brand-navy) !important;
  padding: .15rem .6rem !important;
  margin-top: .2rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--brand-navy) !important;
  margin-right: .35rem;
}
/* Inside modals/offcanvas (dropdownParent is the modal) — keep above backdrop
   and never overflow the dialog width. */
.modal .select2-container,
.offcanvas .select2-container { z-index: 1056; max-width: 100%; }
/* View-mode convention (brandSetViewMode) — disabled controls read as static */
[data-view-mode="view"] .form-control:disabled,
[data-view-mode="view"] .form-select:disabled {
  background-color: var(--brand-surface-2);
  color: var(--brand-muted);
}

/* ---- Every dropdown is this select2 (V28, brand-ui.js §2): sizes, skins, kit parity --------
   brand-ui.js puts the classes on the rendered container AND on its open list (the CDN build has
   no containerCssClass): form-select-sm / compact kit selects → .brand-s2-sm, form-select-lg →
   .brand-s2-lg, data-select2-skin="x" → .brand-s2-x. */
.select2-container--default.brand-s2-sm .select2-selection--single {
  min-height: calc(1.5em + .5rem + 2px);
  padding: .25rem 2rem .25rem .5rem !important;
  font-size: .8125rem;
}
.select2-container--default.brand-s2-sm .select2-selection--single .select2-selection__arrow {
  width: 2rem !important;
  background-size: 12px 9px !important;
}
.select2-container--default.brand-s2-sm .select2-results__option { font-size: .8125rem; padding: .375rem .625rem; }
.select2-container--default.brand-s2-sm .select2-search--dropdown .select2-search__field { font-size: .8125rem; padding: .25rem .5rem !important; }
.select2-container--default.brand-s2-lg .select2-selection--single {
  min-height: calc(1.5em + 1rem + 2px);
  padding: .5rem 2.5rem .5rem 1rem !important;
  font-size: 1.0625rem;
}
.select2-container--default.brand-s2-pill .select2-selection--single { border-radius: var(--brand-radius-pill) !important; }
/* A kit field (ops pop-ups, job form, contacts / vendor-portal modals): the closed control matches
   the neighbouring .fld inputs (ops.css "Field = label above control"); the open list stays the brand list. */
:is(.ops, .ops-modal) .fld .select2-container--default .select2-selection--single {
  min-height: 0;
  padding: 9px 2.25rem 9px 11px !important;
  border-color: var(--ops-field, var(--brand-border)) !important;
  border-radius: 10px !important;
  background-color: var(--ops-surface, var(--brand-surface)) !important;
}
:is(.ops, .ops-modal) .fld .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ops-ink, var(--brand-text)) !important;
  line-height: inherit !important; /* same box as the .fld inputs: padding + the inherited line height */
}
:is(.ops, .ops-modal) .fld .select2-container--default.select2-container--focus .select2-selection--single,
:is(.ops, .ops-modal) .fld .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ops-b, var(--brand-navy)) !important;
  box-shadow: 0 0 0 3px rgba(74, 99, 217, .15) !important;
}
:is(.ops, .ops-modal) .fld .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--ops-soft, var(--brand-surface-2)) !important;
}
:is(.ops, .ops-modal) .fld .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: var(--ops-muted, var(--brand-muted)) !important;
}
/* Help Center fields (.hc-fld: Contact your admin, thread side panel) */
.hc-fld .select2-container--default .select2-selection--single {
  min-height: 0;
  padding: 10px 2.25rem 10px 12px !important;
  border-color: #D9DEE4 !important;
  border-radius: 10px !important;
  background-color: var(--hc-surface, var(--brand-surface)) !important;
}
.hc-fld .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: inherit !important; }
.hc-fld .select2-container--default.select2-container--focus .select2-selection--single,
.hc-fld .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--hc-navy, var(--brand-navy)) !important;
  box-shadow: 0 0 0 3px rgba(45, 61, 81, .12) !important;
}
.hc-modal .select2-container { max-width: 100%; }
/* States the page sets on the (hidden) select show on its control — the container is always the
   select's next sibling, so these follow live. */
select.is-invalid + .select2-container--default .select2-selection,
.was-validated select:invalid + .select2-container--default .select2-selection {
  border-color: var(--brand-danger) !important;
}
.ops .cosel.sug + .select2-container--default .select2-selection--single {   /* checkout row: suggested vendor */
  border-color: var(--ops-b) !important;
  background-color: #F2F5FF !important;
}
.ops .empsel[aria-busy="true"] + .select2-container { opacity: .55; pointer-events: none; }  /* team member: saving */

/* ---- Empty-state helper -------------------------------------------------- */
.brand-empty-state { text-align: center; padding: 3rem 1rem; }
.brand-empty-state .empty-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: #E2F3F6; color: var(--brand-synced);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: .75rem;
}
.brand-empty-state h6 { font-weight: 700; margin-bottom: .25rem; }
.brand-empty-state p { color: var(--brand-muted); margin-bottom: 1rem; }

/* ---- Split buttons (V17) --------------------------------------------------
   The global .btn radius !important above beats Bootstrap's own corner
   flattening for .btn-group segments, which left a visible notch/gap between
   the main segment and the caret. Mirror Bootstrap's selectors with matching
   priority so every split button site-wide joins seamlessly. */
.btn-group > .btn:not(:first-child),
.btn-group > .btn.dropdown-toggle-split,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Subtle divider between segments of solid navy split buttons */
.btn-group > .btn-primary.dropdown-toggle-split,
.btn-group > .btn-dark.dropdown-toggle-split {
  border-left: 1px solid rgba(255,255,255,.25) !important;
}

/* ---- Input groups (V23) ----------------------------------------------------
   Same problem as the split buttons: the global .form-control/.form-select/.btn
   radius !important beat Bootstrap's corner flattening, so a control kept its
   rounded corners against its addon ("AED | ____"). Mirror Bootstrap's
   selectors with !important so the inner corners are square, and give the
   addon (and the group's focus shadow) the brand radius on the outer side.
   Sneat .input-group-merge (password eye, icon prefixes) relies on the same
   corner flattening, so it now joins without a notch at the seam. */
.input-group { border-radius: var(--brand-radius-btn); }
.input-group > .input-group-text { border-radius: var(--brand-radius-btn); }
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
/* A group without .has-validation that carries its error message inside
   ("+ | phone" followed by .invalid-feedback): the part just before the message
   is still the group's right edge, so it keeps its outer corners. Same selector
   as the squaring rule above plus :has(), so it wins on specificity. */
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating):has(+ :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip)) {
  border-top-right-radius: var(--brand-radius-btn) !important;
  border-bottom-right-radius: var(--brand-radius-btn) !important;
}
/* select2 hides the <select> and renders a sibling container: flatten the
   visible selection box on the side that touches another part of the group. */
.input-group > :not(.select2-hidden-accessible) + .select2-hidden-accessible + .select2-container .select2-selection {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group > .select2-container:not(:last-child) .select2-selection {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Merged groups: one focus ring around the whole field instead of a ring that
   stops at the seam with the addon (the addon has no border on that side). */
.input-group.input-group-merge > .form-control:focus { box-shadow: none !important; }
.input-group.input-group-merge:focus-within { box-shadow: 0 0 0 .15rem rgba(45,61,81,.15); }
html.dark-style .input-group.input-group-merge > .form-control:focus { box-shadow: none !important; }
html.dark-style .input-group.input-group-merge:focus-within { box-shadow: 0 0 0 .15rem rgba(141,221,236,.2); }

/* ---- Count badge (card headers next to the Filter button) ----------------- */
.badge-count {
  background: var(--brand-surface-2); color: var(--brand-muted);
  padding: .25rem .75rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}

/* ---- Date-range pill + navy Filter (dashboard header, filter rows) -------- */
.brand-date-filter {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--brand-surface); border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  padding: .25rem .3rem .25rem .9rem;
  box-shadow: var(--brand-shadow-card);
}
.brand-date-filter .brand-date-filter-btn {
  border-radius: var(--brand-radius-pill) !important;
  padding: .45rem 1.1rem; font-size: .85rem;
}
.brand-date-range {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand-surface); border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  padding: .3rem .9rem;
}
.brand-date-filter > i, .brand-date-range > i { color: var(--brand-info); font-size: 1.05rem; }
.brand-date-filter input[type="date"],
.brand-date-range input[type="date"],
.brand-date-filter input.brand-date-alt,
.brand-date-range input.brand-date-alt {
  border: 0; outline: 0; background: transparent;
  color: var(--brand-text); font-family: var(--bs-font-sans-serif);
  font-size: .85rem; font-weight: 500; padding: .1rem;
}
.brand-date-filter input.brand-date-alt,
.brand-date-range input.brand-date-alt { width: 6.6rem; cursor: pointer; }
.brand-date-sep { color: var(--brand-muted); font-size: .8rem; }

/* Phones: the pill wraps inside the screen, the Filter button takes its own line. */
@media (max-width: 575.98px) {
  .brand-date-filter { display: flex; flex-wrap: wrap; width: 100%; border-radius: 1rem; padding: .5rem .75rem; }
  .brand-date-filter input { flex: 1 1 0; min-width: 0; }
  .brand-date-filter .brand-date-filter-btn { flex: 1 0 100%; }
}

/* Collapsed (empty) date-range: just the calendar-icon pill; click to expand. */
.brand-date-range.collapsed { cursor: pointer; padding: .35rem .6rem; }
.brand-date-range.collapsed input[type="date"],
.brand-date-range.collapsed input.brand-date-alt,
.brand-date-range.collapsed .brand-date-sep { display: none; }
.brand-date-range.collapsed:hover { border-color: var(--brand-info); }

/* ---- Column filter rows (brand-filters.js) -------------------------------- */
.brand-filter-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: var(--brand-radius-pill) !important;
  white-space: nowrap;
}
.brand-filter-toggle.active { background: var(--brand-surface-2) !important; color: var(--brand-navy) !important; }
/* Phones: the toggle is the filter icon alone (+ the active-filter count chip), so it never squeezes
   the card title (V28, moved here from brand-filters.js injectToggleCss). */
@media (max-width: 575.98px) {
  .brand-filter-toggle .brand-filter-toggle-label { display: none; }
  .brand-filter-toggle { padding: .3rem .55rem; }
}
.brand-filter-chip {
  background: var(--brand-navy); color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 600; line-height: 1.4;
  padding: .05rem .45rem; margin-left: .2rem;
}
.brand-filter-row {
  padding: .85rem 1.25rem;
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
}
.brand-filter-row[hidden] { display: none !important; }
.brand-filter-row .brand-filter-controls {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.brand-filter-row .form-select,
.brand-filter-row .form-control {
  border-radius: var(--brand-radius-pill) !important;
  width: auto; min-width: 150px;
  font-size: .85rem;
  padding-top: .35rem; padding-bottom: .35rem;
}
.brand-filter-row .select2-container { width: auto !important; min-width: 170px; }
.brand-filter-row .select2-container .select2-selection--single {
  border-radius: var(--brand-radius-pill) !important;
}
.brand-filter-row .brand-filter-reset {
  margin-left: auto;
  border-radius: var(--brand-radius-pill) !important;
  white-space: nowrap;
}
@media (max-width: 576px) {
  .brand-filter-row .form-select,
  .brand-filter-row .form-control { width: 100%; }
  .brand-filter-row .brand-filter-reset { margin-left: 0; }
}

/* ---- Shared guest-document thumbnails (task modal on dashboard,
   reservations, and any page including the task-modal partial). Without a
   sizing rule the raw <img> renders at natural size — fullscreen-huge on
   mobile. -------------------------------------------------------------- */
.doc-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .6rem; }
.doc-thumb { position: relative; border: 1px solid var(--brand-border); border-radius: .5rem; overflow: hidden; background: var(--brand-surface-2); }
.doc-thumb-link { display: block; position: relative; height: 90px; }
.doc-thumb-link img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; }
.doc-thumb-file { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #ff3e1d; }
.doc-thumb-file i { font-size: 2rem; line-height: 1; }
.doc-thumb-file small { font-size: .62rem; color: var(--brand-muted); margin-top: .15rem; font-weight: 600; }
.doc-thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.doc-thumb:hover .doc-thumb-overlay { opacity: 1; }
.doc-thumb-del { position: absolute; top: 3px; right: 3px; z-index: 2; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: #ff3e1d; color: #fff; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.doc-thumb-name { font-size: .62rem; color: var(--brand-muted); padding: .2rem .3rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--brand-border); }
@media (max-width: 576px) {
  .doc-thumb-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ============================================================================
   BRAND MODALS (V18) — one shared popup style for every add/create/edit form.
   Source: client mock "Add Forms — Consistency Pass" (popup mock bundle),
   translated to brand tokens (navy instead of the mock's indigo).

   HOW TO USE (for every group building or retrofitting a popup):
   - Add class `brand-modal` on the OUTER `.modal` div. Markup stays stock
     Bootstrap: .modal-header > h5.modal-title (+ optional icon) + .btn-close,
     .modal-body, .modal-footer with .btn-outline-secondary Cancel first and
     the navy primary action (.btn-primary or .btn-dark) last.
   - Optional subtitle under the title: a <small> inside the header (wrap
     title + small in a div), or class `brand-modal-sub` on any element.
   - Required fields: `<span class="text-danger">*</span>` (or `.req`) after
     the label text; optional fields: `<small class="text-muted">(optional)</small>`.
   - Pill toggle buttons (Yes/No, priority...): class `brand-modal-pill` on
     each button, `.active` on the selected one (JS toggles `.active`).
   - Section grouping in long forms: nested `.card` blocks render as flat
     bordered groups; the group heading takes `brand-modal-section-title`.
   - Do NOT set overflow/max-height here: modals that need a pinned footer
     (scrollable body) keep their own per-modal flex rules.
   ========================================================================== */
.brand-modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: var(--brand-shadow-modal);
}
.brand-modal .modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--brand-border);
}
.brand-modal .modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-text);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.brand-modal .modal-title i { font-size: 1.15rem; }
.brand-modal .brand-modal-sub,
.brand-modal .modal-header small {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: var(--brand-muted);
  margin-top: .25rem;
}
/* Square-rounded close chip; keep Bootstrap's background-image X (only the
   background-color is set — the shorthand would erase the glyph). */
.brand-modal .btn-close {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 7px;
  background-color: var(--brand-surface-2);
  background-size: .7em;
  opacity: 1;
}
.brand-modal .btn-close:hover,
.brand-modal .btn-close:focus {
  background-color: var(--brand-surface-3);
  opacity: 1;
  box-shadow: none;
}
.brand-modal .modal-body { padding: 1.5rem; }
.brand-modal .modal-body .form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--brand-label-text);
  margin-bottom: .35rem;
}
.brand-modal .modal-body small.text-muted,
.brand-modal .modal-body .form-text { font-size: .75rem; }
.brand-modal .form-control,
.brand-modal .form-select {
  padding: .625rem .75rem;
  border-radius: 8px !important;
  font-size: .875rem;
  border-color: var(--brand-border);
}
.brand-modal .select2-container .select2-selection--single,
.brand-modal .select2-container .select2-selection--multiple {
  border-radius: 8px !important;
}
/* Input groups follow the modal's 8px controls (inner corners: see "Input groups (V23)"). */
.brand-modal .input-group,
.brand-modal .input-group > .input-group-text { border-radius: 8px; }
.brand-modal .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating):has(+ :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip)) {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
/* The file input's "Choose file" button has to bleed to the modal's padding
   (Sneat sizes it for its own .543rem/.9375rem padding). */
.brand-modal .form-control::file-selector-button {
  padding: .625rem .75rem;
  margin: -.625rem -.75rem;
  margin-inline-end: .75rem;
}
.brand-modal .modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--brand-border);
  gap: .5rem;
}
/* Pill toggles (Yes/No, priority, entry instruction...) */
.brand-modal-pill {
  padding: .5rem 1rem;
  border-radius: 999px !important;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-label-text);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
.brand-modal-pill.active {
  border-color: var(--brand-navy) !important;
  background: var(--brand-surface-3) !important;
  color: var(--brand-navy) !important;
}
/* Section grouping (long multi-step forms): nested cards become flat groups. */
.brand-modal .modal-body .card {
  box-shadow: none !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 10px !important;
}
.brand-modal .brand-modal-section-title,
.brand-modal .mnt-modal-section {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-muted);
}
.brand-modal .mnt-modal-step { background: var(--brand-surface-3); color: var(--brand-navy); }

/* ---- Collapsed sidebar (V21 D1) — icon rail, tooltips, always-reachable pin toggle ---- */
@media (min-width: 1200px) {
  /* Sneat hides the toggle while collapsed (opacity 0) because hover-expand used to reveal it. */
  html.layout-menu-collapsed:not(.layout-menu-hover) .app-brand .layout-menu-toggle {
    opacity: 1 !important;
    left: calc(5.25rem - 1.05rem) !important; /* same overhang as the expanded state (16.25rem - 1.05rem) */
  }
  /* chevron points right = "expand" while collapsed */
  html.layout-menu-collapsed:not(.layout-menu-hover) .app-brand .layout-menu-toggle i {
    transform: rotate(180deg) !important;
  }
  /* section caret has no text to sit next to in the icon rail; it keeps its box so a header is
     exactly as tall collapsed as expanded (V28: toggling never moves the items) */
  html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-section-caret { visibility: hidden; pointer-events: none; }
}
.brand-menu-tooltip {
  --bs-tooltip-bg: #2D3D51;
  --bs-tooltip-color: #fff;
  --bs-tooltip-zindex: 1100; /* above the fixed menu (1080) */
  --bs-tooltip-font-size: .8125rem;
}
.brand-menu-tooltip .tooltip-inner { font-weight: 600; padding: .35rem .7rem; border-radius: 8px; }
html.dark-style .brand-menu-tooltip { --bs-tooltip-bg: #e6e6f1; --bs-tooltip-color: #2b2c40; }

/* ---- Uploads (V28, brand-dropzone.js + <x-brand.dropzone>) ------------------------------------
   Every upload is this drop zone, the Reservations › Manage Tasks look: dashed box, cloud icon,
   "Drag & drop files here or click to browse" / "Supports: … (Max 10MB)", chips with × under
   "Selected files:". The real input stays in the form, visually hidden but focusable (keyboard,
   required). Instant-upload tiles (.upl, .insp-upload) only get the drag-over state. */
.brand-dz { position: relative; min-width: 0; }
.brand-dz .brand-dz-zone {
  display: block;
  margin: 0;
  padding: 1rem;
  border: 2px dashed var(--brand-border);
  border-radius: .375rem;
  background: transparent;
  color: var(--brand-muted);
  font-family: var(--bs-font-sans-serif);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.brand-dz .brand-dz-zone > .bx { display: block; margin: 0 auto .25rem; font-size: 1.375rem; line-height: 1; color: var(--brand-muted); }
.brand-dz .brand-dz-title { display: block; margin-bottom: .25rem; color: var(--brand-muted); }
.brand-dz .brand-dz-hint { display: block; font-size: .8125rem; color: var(--brand-muted); }
.brand-dz .brand-dz-zone:hover,
.brand-dz.is-over .brand-dz-zone { border-color: var(--brand-navy); background: var(--brand-surface-2); }
.brand-dz:focus-within .brand-dz-zone { border-color: var(--brand-navy); box-shadow: 0 0 0 .15rem rgba(45,61,81,.15); }
.brand-dz .brand-dz-input {
  position: absolute !important;
  top: 1rem !important;
  left: 50% !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}
.brand-dz .brand-dz-files { margin-top: .5rem; }
.brand-dz .brand-dz-files[hidden], .brand-dz .brand-dz-err[hidden] { display: none !important; }
.brand-dz .brand-dz-list { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.brand-dz .brand-dz-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
  padding: .35rem .5rem .35rem .65rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.brand-dz .brand-dz-chip > .bx { font-size: .95rem; }
.brand-dz .brand-dz-name { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.brand-dz .brand-dz-size { color: var(--brand-muted); font-size: .72rem; font-weight: 400; }
.brand-dz .brand-dz-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: .1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--brand-danger);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.brand-dz .brand-dz-x:hover, .brand-dz .brand-dz-x:focus-visible { background: rgba(214,69,69,.12); outline: 0; }
.brand-dz .brand-dz-err { margin-top: .35rem; font-size: .8125rem; }
.brand-dz .brand-dz-err div + div { margin-top: .1rem; }
/* Compact: one row (inputs that had .form-control-sm or sit in a table cell, compact prop). */
.brand-dz--compact .brand-dz-zone { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; text-align: left; font-size: .8125rem; }
.brand-dz--compact .brand-dz-zone > .bx { display: inline-block; margin: 0; font-size: 1.125rem; }
.brand-dz--compact .brand-dz-title { margin: 0; }
.brand-dz--compact .brand-dz-hint { margin-left: auto; font-size: .75rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .brand-dz--compact .brand-dz-zone { flex-wrap: wrap; }
  .brand-dz--compact .brand-dz-hint { margin-left: 0; white-space: normal; }
}
/* Error painting: the zone, like a .form-control.is-invalid. */
.brand-dz.is-invalid .brand-dz-zone,
.brand-dz:has(.brand-dz-input.is-invalid) .brand-dz-zone,
.was-validated .brand-dz:has(.brand-dz-input:invalid) .brand-dz-zone { border-color: var(--brand-danger); }
.brand-dz:has(.brand-dz-input:disabled) .brand-dz-zone { cursor: not-allowed; opacity: .6; }
.brand-dz:has(.brand-dz-input:disabled) .brand-dz-zone:hover { border-color: var(--brand-border); background: transparent; }
/* No DataTransfer (very old browser): brand-dropzone.js leaves the native picker visible. */
.brand-dz-native .brand-dz .brand-dz-input { position: static !important; width: auto !important; height: auto !important; opacity: 1 !important; pointer-events: auto; margin-top: .5rem !important; }
/* Instant-upload tiles: drop = pick (ops photo groups, vendor portal steps, inspection photos). */
.ops .upl.is-over, .insp-upload.is-over, [data-dz-tile].is-over, label.brand-dz-tile.is-over {
  border-color: var(--ops-navy, var(--brand-navy)) !important;
  background: var(--brand-surface-2);
  color: var(--brand-text);
}

/* V31 — the × of every dialog (confirmations, errors, forms) sits inside its box: the theme pushed it out past the
   top-right corner (translate 23px/-25px, absolute in the header, behind html:not([dir=rtl]) selectors — hence
   !important). In the header it now closes the title row. */
.modal .btn-close,
.modal .btn-close:hover,
.modal .btn-close:focus,
.modal .btn-close:active { transform: none !important; }
.modal .modal-header .btn-close { position: static !important; flex: none; margin: 0 0 0 auto !important; }