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