/* =====================================================================
   VONA — vendor override layer (loaded last).
   The bundled theme ships 120+ high-specificity !important rules
   (backend/libs/css/style.css, backend/css/custom.css). These selectors
   out-rank them so the design system always wins. Skin only — no layout
   or behaviour is changed here.
   ===================================================================== */

/* base -------------------------------------------------------------- */
html body{background:var(--v-body-bg) !important;color:var(--v-text) !important;
  font-family:var(--v-font) !important;font-size:14px !important;line-height:1.5 !important;font-weight:400 !important}
/* Headings: force the VONA face everywhere, but set the colour WITHOUT !important so a
   heading sitting on a dark/brand panel can still be white. */
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .h1,html body .h2,html body .h3,html body .h4,html body .h5{font-family:var(--v-font) !important}
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .h1,html body .h2,html body .h3,html body .h4,html body .h5{color:var(--v-heading)}
/* inverted surfaces keep white type */
html body .lxa-side :is(h1,h2,h3,h4,h5,h6),
html body .lxlg .lxc-hero :is(h1,h2,h3,h4,h5,h6),
html body .lxwl-balance :is(h1,h2,h3,h4,h5,h6),
html body .lxab-mission :is(h1,h2,h3,h4,h5,h6),
html body .lxfq-cta :is(h1,h2,h3,h4,h5,h6),
html body .lxh-cta :is(h1,h2,h3,h4,h5,h6),
html body .lxh-section-dark :is(h1,h2,h3,h4,h5,h6),
html body .lxsv-cta :is(h1,h2,h3,h4,h5,h6),
html body .lxf :is(h1,h2,h3,h4,h5,h6),
html body .bg-primary :is(h1,h2,h3,h4,h5,h6),
html body .text-white :is(h1,h2,h3,h4,h5,h6){color:#fff}
html body input::placeholder,html body textarea::placeholder{color:var(--v-g400) !important}
html body input:focus::placeholder,html body textarea:focus::placeholder{color:var(--v-g300) !important}
html body a{color:var(--v-primary)}
html body .text-primary,html body .text-brand{color:var(--v-primary) !important}

/* buttons ----------------------------------------------------------- */
html body a.btn,html body button.btn,html body label.btn,html body input.btn,html body .btn{
  border-radius:var(--v-r-sm) !important;font-family:var(--v-font) !important;font-weight:500 !important;
  background-image:none !important;text-transform:none !important;letter-spacing:0 !important}
html body a.btn.btn-lg,html body button.btn.btn-lg,html body .btn.btn-lg{border-radius:var(--v-r) !important}
html body .btn.rounded-pill,html body .btn-rounded{border-radius:var(--v-r-pill) !important}
html body .btn.btn-primary,html body a.btn.btn-primary,html body button.btn.btn-primary{
  background:var(--v-primary) !important;border-color:var(--v-primary) !important;color:#fff !important}
html body .btn.btn-primary:hover,html body a.btn.btn-primary:hover,html body button.btn.btn-primary:hover{
  background:var(--v-primary-h) !important;border-color:var(--v-primary-h) !important}
html body .btn.btn-success{background:var(--v-success) !important;border-color:var(--v-success) !important;color:#fff !important}
html body .btn.btn-danger{background:var(--v-danger) !important;border-color:var(--v-danger) !important;color:#fff !important}
html body .btn.btn-warning{background:var(--v-warning) !important;border-color:var(--v-warning) !important;color:#fff !important}
html body .btn.btn-info{background:var(--v-info) !important;border-color:var(--v-info) !important;color:#fff !important}
html body .btn.btn-secondary{background:var(--v-secondary) !important;border-color:var(--v-secondary) !important;color:#fff !important}
html body .btn.btn-light,html body .btn.btn-white,html body .btn.btn-default{
  background:var(--v-surface) !important;border-color:var(--v-border) !important;color:var(--v-text) !important}

/* sidebar ----------------------------------------------------------- */
html body .nav-left-sidebar,html body .sidebar-dark,html body .sidebarNavigation .offcanvas{
  background:var(--v-surface) !important;border-right:.8px solid var(--v-border) !important}
html body .nav-left-sidebar .navbar-nav .nav-link,
html body .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link{
  font-family:var(--v-font) !important;color:#55606e !important;background:transparent !important;
  border-radius:var(--v-r-sm) !important;font-size:14px !important;font-weight:500 !important;padding:8px 14px !important}
html body .nav-left-sidebar .navbar-nav .nav-link i,
html body .nav-left-sidebar .nav-link:hover i{color:#55606e !important}
html body .nav-left-sidebar .navbar-nav .nav-link:hover{background:var(--v-light) !important;color:var(--v-heading) !important}
html body .nav-left-sidebar .navbar-nav .nav-link:hover i{color:var(--v-heading) !important}
html body .nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active{
  background:var(--v-primary-soft) !important;color:var(--v-primary-d) !important;font-weight:600 !important}
html body .nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active i,
html body .nav-left-sidebar .nav-link.active i{color:var(--v-primary) !important}
html body .nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active[data-toggle="collapse"]{
  background:transparent !important;color:var(--v-heading) !important}
html body .nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active[data-toggle="collapse"] i{color:var(--v-heading) !important}
html body .nav-left-sidebar .submenu .nav-link,html body .nav-left-sidebar .collapse .nav-link{
  color:var(--v-muted) !important;font-size:13.5px !important;border-radius:var(--v-r-sm) !important;padding:7px 10px 7px 16px !important}
html body .nav-left-sidebar .submenu .nav-link.active,html body .nav-left-sidebar .collapse .nav-link.active{color:var(--v-primary) !important}
html body .nav-left-sidebar{padding:0 !important}
html body .nav-left-sidebar .navbar-nav .nav-divider{
  color:var(--v-g400) !important;font-size:11px !important;font-weight:600 !important;letter-spacing:.06em}

/* cards / panels ---------------------------------------------------- */
html body .card,html body .auth-boxs,html body .dashboard-card{
  background:var(--v-surface) !important;border:.8px solid var(--v-border) !important;
  border-radius:var(--v-r-card) !important;box-shadow:var(--v-shadow) !important}
html body .card-header{background:transparent !important;border-bottom:.8px solid var(--v-border) !important;padding:11px 17px !important}
html body .card-body{padding:15px 17px !important}

/* forms ------------------------------------------------------------- */
html body input.form-control,html body select.form-control,html body textarea.form-control,
html body .form-control,html body .form-select,html body select,
html body .dashboard-main-wrapper input.form-control,html body .dashboard-main-wrapper select.form-control{
  background-color:var(--v-surface) !important;border:.8px solid var(--v-border) !important;
  border-radius:var(--v-r) !important;color:var(--v-text) !important;font-family:var(--v-font) !important;
  font-size:14px !important;min-height:38px !important;padding:7px 12px !important;box-shadow:none !important}
html body textarea.form-control{min-height:90px !important;padding:9px 12px !important}
html body .form-control:focus,html body select:focus,html body input.form-control:focus,html body textarea.form-control:focus{
  border-color:var(--v-primary) !important;box-shadow:0 0 0 3px rgba(var(--v-primary-rgb),.13) !important;background:var(--v-surface) !important}
html body .form-control:disabled,html body .form-control[readonly],html body select:disabled{
  background:var(--v-light) !important;color:var(--v-muted) !important}
html body label,html body .form-group label{font-family:var(--v-font) !important;font-size:13px !important;
  font-weight:500 !important;color:var(--v-g600) !important}
html body .form-check-input:checked{background-color:var(--v-primary) !important;border-color:var(--v-primary) !important}

/* tables ------------------------------------------------------------ */
html body .table thead th{background:var(--v-light) !important;color:var(--v-muted) !important;
  font-size:12px !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:.03em !important;
  padding:11px 14px !important;border:0 !important;border-bottom:.8px solid var(--v-border) !important}
html body .table tbody td{padding:12px 14px !important;border:0 !important;
  border-bottom:.8px solid var(--v-border) !important;color:var(--v-text) !important;font-size:13.5px !important;vertical-align:middle}
html body .table tbody tr:hover td{background:var(--v-light) !important}
html body .table tbody tr:last-child td{border-bottom:0 !important}

/* badges / alerts / pagination -------------------------------------- */
html body .badge{border-radius:var(--v-r-sm) !important;font-size:11.5px !important;font-weight:600 !important;padding:4px 8px !important}
html body .badge.badge-success,html body .badge-pill.badge-success{background:var(--v-success-soft) !important;color:#1c8c4c !important}
html body .badge.badge-danger,html body .badge-pill.badge-danger{background:var(--v-danger-soft) !important;color:var(--v-danger) !important}
html body .badge.badge-warning,html body .badge-pill.badge-warning{background:var(--v-warning-soft) !important;color:#a9711a !important}
html body .badge.badge-info,html body .badge-pill.badge-info{background:var(--v-info-soft) !important;color:#128796 !important}
html body .badge.badge-primary,html body .badge-pill.badge-primary{background:var(--v-primary-soft) !important;color:var(--v-primary-d) !important}
html body .badge.badge-dark,html body .badge-pill.badge-dark{background:#e7eaee !important;color:var(--v-dark) !important}
html body .badge.badge-secondary,html body .badge-pill.badge-secondary,html body .badge-light{background:var(--v-light) !important;color:var(--v-g600) !important}
html body .page-item.active .page-link{background:var(--v-primary) !important;border-color:var(--v-primary) !important;color:#fff !important}
html body .page-link{border-radius:var(--v-r-sm) !important;color:var(--v-text) !important;border-color:var(--v-border) !important}

/* topbar / misc ----------------------------------------------------- */
html body .dashboard-header .navbar,html body .navbar.lxtb{background:var(--v-surface) !important;border-bottom:.8px solid var(--v-border) !important}
html body .nav-user-dropdown .dropdown-item{padding:8px 12px !important}
html body .nav-user-info{background:var(--v-primary) !important}
html body .modal-content{border-radius:var(--v-r-xl) !important;border:0 !important}
html body .dropdown-menu{border-radius:var(--v-r-lg) !important;border:.8px solid var(--v-border) !important;box-shadow:var(--v-shadow-lg) !important}
html body .progress-bar{background:var(--v-primary) !important}
html body .lxtb-cta,html body .lxtb-todo{border-radius:var(--v-r-sm) !important}

/* phone type scale kept in the Vona ramp ---------------------------- */
@media screen and (max-width:768px){
  html body,html body p,html body select,html body textarea,html body button.dropdown-item{font-size:13.5px !important}
  html body .btn,html body a.btn,html body button.btn{font-size:13.5px !important}
  html body .form-control,html body input.form-control,html body select{font-size:16px !important}
  html body .table thead th{font-size:11px !important}
  html body .table tbody td{font-size:12.5px !important}
  html body h1,html body .h1{font-size:21px !important}
  html body h2,html body .h2{font-size:18px !important}
  html body h3,html body .h3,html body .card-header .h3,html body .page-title,html body .pageheader-title{font-size:16px !important}
  html body .lxpc-title{font-size:18px !important}
}

/* --- sidebar: kill the vendor's coloured right-border on nav links (it draws a
       crescent against the pill radius). The caret ::after keeps its own borders. --- */
html body .nav-left-sidebar .navbar-nav .nav-link,
html body .nav-left-sidebar .submenu .nav-link,
html body .nav-left-sidebar .collapse .nav-link{border:0 !important;box-shadow:none !important}

/* --- filter inputs that carry a leading icon need room for it.
       .lx-search / .lxgeo-search lay the icon out as a flex child, so they are left
       alone; only .lxpl-f positions its icon over the field. --- */
html body .lxpl-f{position:relative}
html body .lxpl-f>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--v-g400);font-size:16px;pointer-events:none;z-index:2}
html body .lxpl-f>i+.form-control,
html body .lxpl-f>i+input{padding-left:36px !important}
html body .lxpl-f .select2-container .select2-selection__rendered{padding-left:12px !important}

/* --- topbar action buttons collapse to square icon buttons below lg ------------- */
@media (max-width:991px){
  html body .lxtb-todo,html body .lxtb-cta,html body .lxtb-quick>.btn{
    width:38px !important;min-width:38px;height:38px;padding:0 !important;
    display:inline-flex !important;align-items:center;justify-content:center;
    border-radius:var(--v-r) !important;overflow:hidden;gap:0}
  html body .lxtb-todo>span:not(.lx-sheen),html body .lxtb-cta>span:not(.lx-sheen){
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  html body .lxtb-todo i,html body .lxtb-cta i{font-size:18px;margin:0}
}

/* --- select2 single-selects: one authoritative geometry for the whole app.
       select2's own stylesheet gives .select2-selection__rendered a 42px line-height,
       which sits the label low inside our 40px control. Page stylesheets must not
       set select2's internal box; they only colour it. --- */
html body .select2-container--default .select2-selection--single{
  height:40px !important;min-height:40px !important;padding:0 !important;
  display:flex !important;align-items:center;
  border:.8px solid var(--v-border) !important;border-radius:var(--v-r) !important;
  background:var(--v-surface) !important}
html body .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:38px !important;height:38px !important;padding:0 34px 0 12px !important;
  color:var(--v-text) !important;font-size:14px !important;display:block;width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:var(--v-g400) !important}
html body .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:38px !important;top:0 !important;right:8px !important;width:20px}
html body .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--v-g400) transparent transparent transparent !important}
html body .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--v-primary) !important;box-shadow:0 0 0 3px rgba(var(--v-primary-rgb),.13) !important}
html body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent var(--v-g400) transparent !important}
html body .select2-container{width:100% !important}
html body .select2-container--default .select2-selection--multiple{
  min-height:40px !important;padding:3px 8px !important;
  border:.8px solid var(--v-border) !important;border-radius:var(--v-r) !important}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--v-primary-soft) !important;border:.8px solid var(--v-primary-soft-2) !important;
  color:var(--v-primary-d) !important;border-radius:var(--v-r-sm) !important;
  padding:2px 8px !important;margin:3px 4px 0 0 !important;font-size:13px}
/* native selects keep a matching height and a visible caret */
html body select.form-control,html body select.custom-select{
  height:40px !important;min-height:40px !important;padding:0 34px 0 12px !important;
  line-height:38px !important;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23838ea3' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 12px center !important}

/* --- parcel/store form fields (.lxpc-field) keep the same 40px control height as the
       rest of the app; lxc.css still asks for 44px with !important. --- */
html body .lxpc-field .form-control:not(.select2-hidden-accessible),
html body .lxpc-field select.form-control,
html body .lxpc-field input.form-control{
  height:40px !important;min-height:40px !important;width:100% !important}
html body .lxpc-field textarea.form-control{height:auto !important;min-height:96px !important}
html body .lxpc-field .select2-container{width:100% !important}
html body .lxpc-field .select2-container .select2-selection--single{height:40px !important}

/* =====================================================================
   Contrast on brand surfaces
   ===================================================================== */

/* 1. Home "stats" band sits on the pale mint wash, so its numbers and labels
      are ink, not white. */
html body .lxh-stats .lxh-stat h2,
html body .lxh-stats .lxh-stat h2 .odometer,
html body .lxh-stats .lxh-stat h2 .odometer-value,
html body .lxh-stats .lxh-stat h2 .odometer-position,
html body .lxh-stats .lxh-stat h2 font{color:var(--v-heading) !important}
html body .lxh-stats .lxh-stat p{color:var(--v-text) !important;opacity:1}
html body .lxh-stats .lxh-stat-icon{background:var(--v-surface);color:var(--v-primary-d)}

/* 2. Anything sitting ON the solid brand green gets white text and white icons.
      Controls (buttons, badges, inputs) are excluded — they carry their own
      colours and would otherwise go white-on-white. */
html body :is(.lxsvc-feature,.lxh-cta,.lxh-section-dark,.lxab-mission,.lxfq-cta,
  .lxsv-cta,.lxwl-balance,.lxa-side,.lxlg .lxc-hero,.card.bg-primary,section.bg-primary,
  .card-dark,.lx-dark,.footer-img)
  :is(h1,h2,h3,h4,h5,h6,p,li,span,small,b,strong,em,a,i,time,dt,dd,label):not(
    [class*="pill"],[class*="chip"],[class*="tile"],[class*="badge"],[class*="tag"],
    .btn,.btn *,.badge,.form-control,input,select,textarea,
    .lxsvc-feature-cta,.lxsvc-feature-cta *,.lxh-eyebrow,.lxh-eyebrow *,.lxa-kicker,.lxa-kicker *){
    color:#fff}
html body .lxsvc-feature,html body .lxsvc-feature:hover{color:#fff !important}
html body .lxsvc-feature p{color:rgba(255,255,255,.85) !important}
html body .lxsvc-feature .lxsvc-no{color:rgba(255,255,255,.55) !important}
html body .lxsvc-feature-cta{background:#fff !important;color:var(--v-primary-d) !important}

/* 3. Round icon tiles that carry the brand fill show a white glyph. */
html body :is(.lx-chip-dark,.lxn-burger,.offcanvas-nav-btn,.lxp-pop,.lxa-art-head i,
  .lx-bottom-nav a.lx-primary i,.lx-tile-brand,.lxtl-dot.done){color:#fff !important}
html body :is(.lx-chip-dark,.lxn-burger,.offcanvas-nav-btn,.lxp-pop) i{color:#fff !important}
html body .swiper-pagination-bullet-active{background:var(--v-primary) !important}

/* --- mobile drawer: the vendor's backend/css/custom.css paints every child of a
       sidebar link white below 992px (`.nav-left-sidebar .navbar-nav .nav-link *`),
       which made the menu labels invisible on the now-white drawer. Repaint them. --- */
@media screen and (max-width:991px){
  html body .nav-left-sidebar .navbar-nav .nav-link,
  html body .nav-left-sidebar .navbar-nav .nav-link *{color:#55606e !important}
  html body .nav-left-sidebar .navbar-nav .nav-link .lxsb-label{color:inherit !important}
  html body .nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active,
  html body .nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active *{color:var(--v-primary-d) !important}
  html body .nav-left-sidebar .navbar-nav .nav-link:hover,
  html body .nav-left-sidebar .navbar-nav .nav-link:hover *{color:var(--v-heading) !important}
  html body .nav-left-sidebar .navbar-nav .nav-divider{color:var(--v-g400) !important}
  html body .nav-left-sidebar .submenu .nav-link,
  html body .nav-left-sidebar .submenu .nav-link *,
  html body .nav-left-sidebar .collapse .nav-link,
  html body .nav-left-sidebar .collapse .nav-link *{color:var(--v-muted) !important}
  html body .nav-left-sidebar .submenu .nav-link.active,
  html body .nav-left-sidebar .submenu .nav-link.active *,
  html body .nav-left-sidebar .collapse .nav-link.active,
  html body .nav-left-sidebar .collapse .nav-link.active *{color:var(--v-primary) !important}
  /* the drawer chrome itself is light now, so its close button and language pill follow */
  html body .offcanvas.text-bg-dark,html body .offcanvas-nav{color:var(--v-text) !important}
  html body .offcanvas .btn-close-white{filter:none;opacity:.65}
  html body .offcanvas .lang-dropdown .dropdown-toggle,
  html body .offcanvas .lang-dropdown .dropdown-toggle *{color:var(--v-text) !important}
}

/* --- topbar user menu: long names and e-mail addresses used to run outside the box
       (the flex child could not shrink and nothing truncated). --- */
html body .lxtb-user-menu{min-width:252px !important;max-width:min(320px,calc(100vw - 24px)) !important;
  overflow:hidden}
html body .lxtb-user-head{display:flex;align-items:center;gap:10px;min-width:0}
html body .lxtb-user-head>div{min-width:0;flex:1 1 auto}
html body .lxtb-user-head b,html body .lxtb-user-head small{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .lxtb-user-menu .dropdown-item{display:flex;align-items:center;gap:9px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .lxtb-user-menu .dropdown-item i{flex:none;width:18px;text-align:center}
/* the same guard for every other dropdown panel in the topbar */
html body .dropdown-menu{max-width:min(340px,calc(100vw - 20px))}
html body .navbar-right-top .dropdown-menu,html body .lxtb-quick .dropdown-menu{
  max-width:min(340px,calc(100vw - 20px))}
html body .dropdown-menu .dropdown-item{overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   Mobile safety net — nothing may push the page sideways on a phone,
   including before lxc.js has had a chance to stack a table into cards.
   ===================================================================== */
@media (max-width:991px){
  /* a table that is not stacked scrolls inside its own wrapper */
  html body .table-responsive{overflow-x:auto !important;-webkit-overflow-scrolling:touch;max-width:100%}
  html body .table-responsive:has(>.table.lx-stack){overflow:visible !important}
  html body .dataTables_wrapper{overflow-x:auto;max-width:100%}
  /* long, unbreakable content (ids, e-mails, urls) wraps instead of stretching its cell */
  html body .table td,html body .table th{overflow-wrap:anywhere}
  /* the page canvas and its cards never exceed the viewport */
  html body .container,html body .container-fluid,html body .dashboard-content,
  html body .card,html body .card-body,html body .card-header,html body .main-content{max-width:100%}
  html body .row{margin-left:-8px;margin-right:-8px}
  html body .row>[class^="col"],html body .row>[class*=" col"]{padding-left:8px;padding-right:8px;min-width:0}
  html body img,html body svg,html body video,html body iframe,html body canvas{max-width:100%}
  html body pre,html body code{white-space:pre-wrap;overflow-wrap:anywhere}
  /* strips that are meant to scroll do so smoothly rather than overflowing the page */
  html body .nav-tabs,html body .nav-pills,html body .lxar-tabs,html body .lxpc-tabs{
    overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;max-width:100%}
  html body .nav-tabs::-webkit-scrollbar,html body .nav-pills::-webkit-scrollbar,
  html body .lxar-tabs::-webkit-scrollbar{height:0}
  html body .nav-tabs .nav-link,html body .nav-pills .nav-link,html body .lxar-tab{white-space:nowrap}
}
@media (max-width:767px){
  /* stacked table rows: keep the value column from being squeezed to nothing */
  html body .table.lx-stack tbody td::before{flex:0 0 40% !important}
  html body .table.lx-stack tbody td{gap:10px;overflow-wrap:anywhere}
  html body .table.lx-stack tbody td.lx-actions .btn{margin:2px 0 2px 4px}
  /* filter forms and card-header toolbars stack and fill the width */
  html body .card-header{flex-wrap:wrap;gap:8px}
  html body .card-header>.btn,html body .card-header .float-right>.btn,
  html body .card-header .float-end>.btn{flex:1 1 auto;justify-content:center}
  html body form .row>[class^="col"],html body form .row>[class*=" col"]{flex:0 0 100%;max-width:100%}
  html body .form-inline,html body .form-inline>*{width:100%}
  html body .input-group{flex-wrap:nowrap}
  html body .pagination{flex-wrap:wrap;row-gap:6px}
  html body .modal-dialog{margin:10px;max-width:calc(100vw - 20px)}
  html body .modal-body{padding:16px;overflow-x:auto}
  html body .select2-container{max-width:100%}
  html body .select2-dropdown{max-width:calc(100vw - 24px)}
  html body .daterangepicker{max-width:calc(100vw - 20px);overflow-x:auto}
}

/* --- public pricing block: `1fr` tracks take their minimum from content, so a wide
       rate matrix stretched the whole grid past the phone viewport and the copy got
       clipped. Let the tracks shrink and give the matrix its own scroll. --- */
html body .lxp-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){html body .lxp-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
html body .lxp-copy,html body .lxp-panel{min-width:0;max-width:100%}
html body .lxp-panel .table-responsive,html body .lxp-matrix-wrap{overflow-x:auto;max-width:100%}
html body .lxp-matrix{min-width:max-content}

/* --- service detail: same `1fr` min-content trap as the pricing grid --- */
html body .lxsv-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){html body .lxsv-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}}
html body .lxsv-main,html body .lxsv-side{min-width:0;max-width:100%}

/* --- and everywhere else: a single-column grid track must be allowed to shrink,
       otherwise one wide child stretches the whole page on a phone --- */
@media (max-width:1023px){
  html body .lxh-hero-grid,html body .lxh-why-grid,html body .lxsvc-grid,
  html body .lxab-grid,html body .lxct-grid,html body .lxf-grid,html body .lxlg-grid,
  html body .lxd-grid,html body .lxap-grid,html body .lxav-grid,html body .lxgeo-grid,
  html body .lxpc-grid,html body .lxst-grid{grid-template-columns:minmax(0,1fr) !important}
  html body .lxh-hero-grid>*,html body .lxh-why-grid>*,html body .lxsvc-grid>*,
  html body .lxab-grid>*,html body .lxct-grid>*,html body .lxlg-grid>*,
  html body .lxd-grid>*,html body .lxap-grid>*,html body .lxav-grid>*,
  html body .lxpc-grid>*,html body .lxst-grid>*{min-width:0}
}