/* =====================================================================
   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}
}

/* --- stacked table cards: a value that cannot fit beside its label wraps under it
       instead of being clipped (long e-mails, addresses, and cells that hold a
       small media block such as avatar + name + e-mail). --- */
@media (max-width:767px){
  html body .table.lx-stack tbody td{
    flex-wrap:wrap;align-items:center;row-gap:4px;overflow:visible !important;
    text-align:right}
  html body .table.lx-stack tbody td::before{flex:0 0 38%;max-width:38%;align-self:center}
  html body .table.lx-stack tbody td>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
  /* a media block (avatar + name + e-mail) gets the whole width under its label */
  html body .table.lx-stack tbody td>.row,
  html body .table.lx-stack tbody td>.media,
  html body .table.lx-stack tbody td>.d-flex{flex:1 1 100%;margin:0;text-align:left;justify-content:flex-start}
  html body .table.lx-stack tbody td>.row>*{padding-left:0;padding-right:8px;min-width:0}
  html body .table.lx-stack tbody td .text-truncate{overflow:visible;white-space:normal;text-overflow:clip}
  html body .table.lx-stack tbody td img{max-width:40px;height:auto}
}

/* --- search fields whose icon is positioned over the box need room for it --- */
html body .lxgeo-search>i+.form-control,
html body .lxpm-search>i+.form-control,
html body .lxar-search>i+.form-control{padding-left:36px !important}

/* --- modals on phones: comfortable header, full-width tap targets in the footer --- */
@media (max-width:575px){
  html body .modal-header{padding:14px 16px}
  html body .modal-title{font-size:16px;line-height:1.3}
  html body .modal-footer{padding:12px 16px;gap:8px;flex-wrap:wrap}
  html body .modal-footer>.btn{flex:1 1 auto;justify-content:center;min-height:44px;margin:0}
  html body .modal-body .row>[class^="col"],html body .modal-body .row>[class*=" col"]{
    flex:0 0 100%;max-width:100%}
  html body .swal2-popup{width:calc(100vw - 32px) !important;padding:20px 16px}
  html body .swal2-actions{flex-wrap:wrap;gap:8px}
  html body .swal2-actions>button{flex:1 1 auto;min-height:44px;margin:0}
}

/* =====================================================================
   Public site — mobile navbar and drawer
   The drawer was designed as a DARK panel; once the brand token became the
   bright VONA green its links ended up green-on-green and the menu was
   invisible. It is now a white panel like the rest of the skin.
   ===================================================================== */
html body .lxn-drawer{background:var(--v-surface) !important;color:var(--v-text) !important;
  border-left:.8px solid var(--v-border);box-shadow:-18px 0 40px -24px rgba(3,7,18,.35)}
html body .lxn-drawer .lxn-drawer-head{border-bottom:.8px solid var(--v-border);padding-bottom:14px}
html body .lxn-drawer .lxn-drawer-head img{filter:none}
html body .lxn-close{background:var(--v-light) !important;border:.8px solid var(--v-border) !important;
  color:var(--v-g600) !important;border-radius:var(--v-r) !important;width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center}
html body .lxn-close:hover{background:var(--v-border) !important;color:var(--v-heading) !important}
html body .lxn-drawer-menu a,
html body .lxn-drawer-menu a span,
html body .lxn-drawer-menu a i{color:var(--v-text) !important}
html body .lxn-drawer-menu a{border-radius:var(--v-r) !important;font-size:15.5px;font-weight:500;padding:12px 14px}
html body .lxn-drawer-menu a i:first-child{color:var(--v-g400) !important;opacity:1}
html body .lxn-drawer-menu a:hover{background:var(--v-light) !important}
html body .lxn-drawer-menu a:hover,html body .lxn-drawer-menu a:hover span,
html body .lxn-drawer-menu a:hover i{color:var(--v-heading) !important}
html body .lxn-drawer-menu a.active{background:var(--v-primary-soft) !important}
html body .lxn-drawer-menu a.active,html body .lxn-drawer-menu a.active span,
html body .lxn-drawer-menu a.active i{color:var(--v-primary-d) !important;font-weight:600}
/* the two call-to-action buttons keep their own colours */
html body .lxn-drawer-cta .lxn-btn-lime{background:var(--v-primary) !important;color:#fff !important;
  border:0 !important;border-radius:var(--v-r) !important}
html body .lxn-drawer-cta .lxn-btn-lime i{color:#fff !important}
html body .lxn-drawer-cta .lxn-btn-ghost-light{background:var(--v-surface) !important;
  border:.8px solid var(--v-border) !important;border-radius:var(--v-r) !important}
html body .lxn-drawer-cta .lxn-btn-ghost-light,
html body .lxn-drawer-cta .lxn-btn-ghost-light i{color:var(--v-g600) !important}
/* footer block */
html body .lxn-drawer-foot{border-top:.8px solid var(--v-border) !important;color:var(--v-muted) !important}
html body .lxn-drawer-foot a{color:var(--v-text) !important}
html body .lxn-drawer-foot a:hover{color:var(--v-primary) !important}
html body .lxn-drawer-foot .lxn-social a,html body .lxn-drawer-foot .lxf-social a{
  background:var(--v-light) !important;border:.8px solid var(--v-border) !important;color:var(--v-g600) !important}
html body .lxn-lang-dark a{color:var(--v-g600) !important;border-color:var(--v-border) !important}
html body .lxn-lang-dark a.on{background:var(--v-primary-soft) !important;color:var(--v-primary-d) !important}

/* the bar needs a real side gutter on a phone, or the burger sits on the edge */
@media (max-width:767px){
  html body .lxn-top>.container,html body .lxn-bar{padding-left:16px;padding-right:16px}
  html body .lxn-bar{gap:10px}
  html body .lxn-burger{flex:none;width:42px;height:42px;border-radius:var(--v-r) !important}
  html body .lxn-icon{flex:none}
  html body .lxn-logo{min-width:0}
  html body .lxn-logo img{max-width:150px;height:30px;object-fit:contain;object-position:left center}
}

/* --- empty state inside a stacked table ------------------------------------
   lxc.js labels any cell holding a button as an "actions" cell, which in stacked
   mode right-aligns it next to a label — so the "no results" block sat off-centre
   and its text ran past the card. A full-width (colspan) cell is never a data
   cell: it is centred, label-less and fills the card. --- */
@media (max-width:767px){
  html body .table.lx-stack tbody td[colspan],
  html body .table.lx-stack tbody td:has(.lxst-empty),
  html body .table.lx-stack tbody td:has(.lx-empty),
  html body .table.lx-stack tbody td:has(.no-data){
    display:block !important;width:100%;min-height:0 !important;
    text-align:center !important;padding:4px 0 !important;
    border-bottom:0 !important;background:transparent !important}
  html body .table.lx-stack tbody td[colspan]::before,
  html body .table.lx-stack tbody td:has(.lxst-empty)::before,
  html body .table.lx-stack tbody td:has(.lx-empty)::before,
  html body .table.lx-stack tbody td:has(.no-data)::before{display:none !important}
  /* the row behind an empty state is not a record card */
  html body .table.lx-stack tbody tr:has(td[colspan]){
    background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}
}
/* the empty state itself is centred at every width, and can never be wider than
   the card it sits in (its paragraph used to keep a 36ch measure and spill out) */
html body .lxst-empty,html body .lx-empty,html body .lxpl-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:6px;padding:40px 18px;margin-left:auto;margin-right:auto;
  width:100%;max-width:min(440px,100%);box-sizing:border-box}
html body .lxst-empty i,html body .lx-empty i{font-size:32px;color:var(--v-g300);margin:0 0 4px}
html body .lxst-empty b,html body .lx-empty b{font-size:15.5px;color:var(--v-heading)}
html body .lxst-empty p,html body .lx-empty p{margin:0 auto;color:var(--v-muted);font-size:13.5px;
  line-height:1.55;max-width:100%;overflow-wrap:anywhere;text-wrap:pretty}
html body .lxst-empty .btn,html body .lx-empty .btn{margin-top:12px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
@media (max-width:575px){
  html body .lxst-empty,html body .lx-empty{padding:32px 14px}
  html body .lxst-empty .btn,html body .lx-empty .btn{width:100%;max-width:290px}
}

/* --- action cells in any stacked table: buttons wrap and stay inside the card --- */
@media (max-width:767px){
  html body .table.lx-stack tbody td.lx-actions{overflow:hidden}
  html body .table.lx-stack tbody td.lx-actions>*{max-width:100%}
  html body .table.lx-stack tbody td.lx-actions .btn,
  html body .table.lx-stack tbody td.lx-actions .lxst-btn,
  html body .table.lx-stack tbody td.lx-actions .dropdown-toggle{
    max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* =====================================================================
   Form footer actions — every "Save / Cancel" pair in the admin, merchant
   and hub panels. The theme shipped them as two loose .btn-space buttons
   floating under the last field; they now sit in a proper action bar:
   a hairline rule, right-aligned on desktop with the primary action last,
   and a full-width stack on phones with the primary action on top.
   Applied here, once, so all ~150 forms pick it up without markup churn.
   ===================================================================== */
html body.lxv-page .btn-space{margin-right:0 !important;margin-bottom:0 !important}

html body.lxv-page [class*="col-"]:has(>.btn-space),
html body.lxv-page .form-group:has(>.btn-space),
html body.lxv-page .lx-formbar{
  display:flex !important;flex-direction:row-reverse;flex-wrap:wrap;
  align-items:center;justify-content:flex-start;gap:10px;
  width:100%;margin-top:4px;padding-top:16px;
  border-top:.8px solid var(--v-border)}

html body.lxv-page [class*="col-"]:has(>.btn-space)>.btn-space,
html body.lxv-page .form-group:has(>.btn-space)>.btn-space,
html body.lxv-page .lx-formbar>.btn-space{
  min-width:118px;min-height:42px;padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:600;border-radius:var(--v-r) !important;
  box-shadow:none !important}

/* the theme's "secondary" is the cancel link — make it a quiet outline */
html body.lxv-page .btn-secondary.btn-space,
html body.lxv-page .btn-default.btn-space,
html body.lxv-page .btn-light.btn-space{
  background:var(--v-surface) !important;border:.8px solid var(--v-border) !important;
  color:var(--v-g600) !important}
html body.lxv-page .btn-secondary.btn-space:hover,
html body.lxv-page .btn-default.btn-space:hover,
html body.lxv-page .btn-light.btn-space:hover{
  background:var(--v-light) !important;border-color:var(--v-border-2) !important;
  color:var(--v-heading) !important}

@media (max-width:767px){
  html body.lxv-page [class*="col-"]:has(>.btn-space),
  html body.lxv-page .form-group:has(>.btn-space),
  html body.lxv-page .lx-formbar{
    flex-direction:column;align-items:stretch;gap:8px}
  html body.lxv-page [class*="col-"]:has(>.btn-space)>.btn-space,
  html body.lxv-page .form-group:has(>.btn-space)>.btn-space,
  html body.lxv-page .lx-formbar>.btn-space{width:100%;min-width:0}
}

/* A page's own empty state may sit in a <td colspan>; the shared .lx-empty block above
   turns its box into a flex column, which on a table cell collapses the colspan and
   squeezes the message into the first column. Cells stay cells. */
html body td.lx-empty,
html body .table tbody td:has(> [class$="-empty"]){
  display:table-cell !important;text-align:center;vertical-align:middle}