/* ============================================================================
   EL MOUCHIR — MODERN UI LAYER  v3.0 (green)
   ----------------------------------------------------------------------------
   Drop-in overlay. Load AFTER all2.css (see layouts/css.blade.php).
   Zero HTML changes required: it restyles the classes your views already use
   (Bootstrap 4, ts-*, kt-*, select2, owl). Safe to remove at any time.
   ============================================================================ */

/* ============================== 1. TOKENS ================================= */
:root{
  /* Brand — Algeria green */
  --mui-primary:#0a9c53;
  --mui-primary-600:#087a41;
  --mui-primary-700:#065f34;
  --mui-primary-100:#d7f3e4;
  --mui-primary-50:#ecfaf2;
  --mui-grad:linear-gradient(135deg,#23c274 0%,#0a9c53 55%,#067a40 100%);

  /* Ink & surfaces */
  --mui-bg:#f3faf6;
  --mui-surface:#ffffff;
  --mui-surface-2:#f6fbf8;
  --mui-ink:#0d211a;
  --mui-text:#20312a;
  --mui-muted:#5c7167;
  --mui-border:#e1efe7;
  --mui-border-strong:#cbe2d5;

  /* Semantic */
  --mui-success:#16a34a;
  --mui-warning:#f59e0b;
  --mui-danger:#e11d48;
  --mui-info:#0891b2;

  /* Elevation */
  --mui-shadow-xs:0 1px 2px rgba(13,33,26,.06);
  --mui-shadow-sm:0 2px 6px rgba(13,33,26,.07),0 1px 2px rgba(13,33,26,.05);
  --mui-shadow:0 8px 24px rgba(13,33,26,.09),0 2px 6px rgba(13,33,26,.06);
  --mui-shadow-lg:0 18px 44px rgba(13,33,26,.14),0 6px 14px rgba(13,33,26,.08);
  --mui-ring:0 0 0 4px rgba(10,156,83,.22);

  /* Shape */
  --mui-r-sm:10px;
  --mui-r:14px;
  --mui-r-lg:18px;
  --mui-r-pill:999px;

  /* Motion */
  --mui-ease:cubic-bezier(.22,.61,.21,1);
  --mui-spring:cubic-bezier(.34,1.4,.44,1);
  --mui-d1:.16s; --mui-d2:.24s; --mui-d3:.36s;

  /* Layout */
  --mui-header-top:40px;
  --mui-header-main:64px;
  --mui-dock-h:64px;
  --mui-safe-b:env(safe-area-inset-bottom,0px);
}

/* Re-tint the template variables your css.blade already defines */
body,body *{
  --main-color:var(--mui-primary);
  --second-color:var(--mui-primary-600);
  --third-color:var(--mui-primary);
  --another-color-1:var(--mui-primary);
  --another-color-2:var(--mui-primary-600);
  --main-background:var(--mui-bg);
  --second-background:var(--mui-surface);
  --main-font-color:var(--mui-text);
  --second-font-color:var(--mui-muted);
  --border-color:var(--mui-border);
}

/* ============================== 2. BASE =================================== */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--mui-bg);
  color:var(--mui-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  font-size:16px;line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{font-family:'Tajawal','Inter',-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;letter-spacing:0}

::selection{background:rgba(10,156,83,.22);color:var(--mui-ink)}
img{max-width:100%;height:auto}
a{transition:color var(--mui-d1) var(--mui-ease)}
a:not(.btn):hover{text-decoration:none}

/* Headings — fluid & confident (overrides the tiny sizes forced inline) */
h1,.h1{font-weight:800;letter-spacing:-.02em;color:var(--mui-ink)}
h2,.h2,h3,.h3{font-weight:700;letter-spacing:-.015em;color:var(--mui-ink)}
h4,.h4,h5,.h5,h6,.h6{font-weight:700;color:var(--mui-ink)}
.display-1{font-size:clamp(1.9rem,1.2rem + 3.4vw,3.4rem)!important;font-weight:800!important;letter-spacing:-.03em;line-height:1.08}
.display-2{font-size:clamp(1.6rem,1.1rem + 2.6vw,2.7rem)!important;font-weight:800;letter-spacing:-.025em}
.display-3{font-size:clamp(1.35rem,1rem + 2vw,2.15rem)!important;font-weight:700}
.display-4{font-size:clamp(1.15rem,.95rem + 1.2vw,1.6rem)!important;font-weight:700}
.lead{font-size:clamp(1rem,.95rem + .4vw,1.15rem)!important;color:var(--mui-muted);font-weight:400}
p{color:var(--mui-text)}
.text-muted{color:var(--mui-muted)!important}

/* Focus visible — accessible everywhere */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--mui-ring)!important;border-radius:var(--mui-r-sm)}
a:focus-visible,button:focus-visible{box-shadow:var(--mui-ring)!important}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#bcd8c9;border-radius:99px;border:2px solid var(--mui-bg)}
::-webkit-scrollbar-thumb:hover{background:#9cc4ad}
*{scrollbar-width:thin;scrollbar-color:#bcd8c9 transparent}

/* Skip to content (a11y) */
.mui-skip{position:fixed;top:-48px;left:16px;z-index:3000;background:var(--mui-ink);color:#fff;padding:.55rem 1rem;border-radius:0 0 12px 12px;font-weight:600;transition:top var(--mui-d2) var(--mui-ease)}
.mui-skip:focus{top:0;color:#fff}

/* ============================== 3. BUTTONS ================================ */
.btn{
  border-radius:12px;
  font-weight:600;
  letter-spacing:.01em;
  padding:.6rem 1.15rem;
  transition:transform var(--mui-d1) var(--mui-spring),box-shadow var(--mui-d2) var(--mui-ease),background-color var(--mui-d1) var(--mui-ease),border-color var(--mui-d1) var(--mui-ease),color var(--mui-d1) var(--mui-ease);
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus,.btn:focus-visible{box-shadow:var(--mui-ring)!important}
.btn-lg{padding:.8rem 1.6rem;border-radius:14px;font-size:1.05rem}
.btn-sm{padding:.4rem .85rem;border-radius:10px}
.btn-xs{border-radius:8px}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
  background:var(--mui-grad)!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(10,156,83,.35),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.btn-primary:hover,.btn-primary:focus{
      color: white !important;
  background:linear-gradient(135deg,#2fd184,#12ab5f 55%,#088a49)!important;
  border-color:transparent!important;
  box-shadow:0 10px 24px rgba(10,156,83,.45),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.btn-primary.disabled,.btn-primary:disabled{background:#93d9b5!important;box-shadow:none!important}

.btn-outline-primary{border-width:1.5px;border-color:var(--mui-primary)!important;color:var(--mui-primary)!important;background:transparent!important}
.btn-outline-primary:hover,.btn-outline-primary:not(:disabled):not(.disabled):active{background:var(--mui-primary)!important;color:#fff!important;box-shadow:0 8px 20px rgba(10,156,83,.35)!important}

.btn-dark{background:var(--mui-ink)!important;border-color:var(--mui-ink)!important;border-radius:12px}
.btn-dark:hover{background:#16283d!important;box-shadow:0 10px 24px rgba(13,33,26,.3)}
.btn-outline-dark{border-width:1.5px;border-radius:12px}
.btn-light{background:var(--mui-surface);border:1.5px solid var(--mui-border);color:var(--mui-text)}
.btn-light:hover{background:var(--mui-surface-2);border-color:var(--mui-border-strong)}
.btn-secondary{border-radius:12px}
.btn-link{font-weight:600;color:var(--mui-primary)}
.btn-link:hover{color:var(--mui-primary-600)}

/* Arrow button used on cards */
.ts-btn-arrow{font-weight:700;color:var(--mui-primary)!important;display:inline-flex;align-items:center;gap:.35rem;transition:gap var(--mui-d1) var(--mui-ease),color var(--mui-d1)}
.ts-btn-arrow:hover{gap:.6rem;color:var(--mui-primary-600)!important}
.ts-btn-arrow:after{transition:transform var(--mui-d1) var(--mui-ease)}
.ts-btn-arrow:hover:after{transform:translateX(3px)}

/* Ripple (injected by modern-ui.js) */
.mui-ripple{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.22;pointer-events:none;animation:mui-ripple .55s var(--mui-ease) forwards}
@keyframes mui-ripple{to{transform:scale(2.6);opacity:0}}

/* ============================== 4. FORMS ================================== */
label:not(.custom-control-label):not(.label){font-size:.82rem!important;font-weight:600!important;color:var(--mui-muted);letter-spacing:.02em;margin-bottom:.35rem}
.form-control,.custom-select,textarea.form-control{
  border:1.5px solid var(--mui-border);
  border-radius:12px;
  background-color:var(--mui-surface);
  color:var(--mui-text);
  padding:.62rem .95rem;
  min-height:46px;
  transition:border-color var(--mui-d1) var(--mui-ease),box-shadow var(--mui-d2) var(--mui-ease),background-color var(--mui-d1);
  box-shadow:var(--mui-shadow-xs);
}
textarea.form-control{min-height:110px}
.form-control::placeholder{color:#93a89b}
.form-control:hover,.custom-select:hover{border-color:var(--mui-border-strong)}
.form-control:focus,.custom-select:focus,textarea.form-control:focus{
  border-color:var(--mui-primary);
  box-shadow:var(--mui-ring),var(--mui-shadow-xs);
  background-color:var(--mui-surface);
}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--mui-danger)}
.form-control.is-invalid:focus{box-shadow:0 0 0 4px rgba(225,29,72,.18)}
.input-group-text{border:1.5px solid var(--mui-border);background:var(--mui-surface-2);border-radius:12px;color:var(--mui-muted)}
.custom-select{background-size:14px;padding-right:2.2rem}
.custom-control-label{cursor:pointer}
.custom-checkbox .custom-control-label::before{border-radius:6px;border:1.5px solid var(--mui-border-strong);transition:all var(--mui-d1) var(--mui-ease)}
.custom-control-input:checked~.custom-control-label::before{background:var(--mui-grad);border-color:transparent;box-shadow:0 2px 8px rgba(10,156,83,.4)}
.custom-control-input:focus~.custom-control-label::before{box-shadow:var(--mui-ring)}

/* iOS: 16px inputs prevent auto-zoom */
@media (max-width:767.98px){
  .form-control,.custom-select,input,select,textarea{font-size:16px!important}
}

/* Select2 — full restyle */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
  border:1.5px solid var(--mui-border)!important;
  border-radius:12px!important;
  background:var(--mui-surface)!important;
  min-height:46px!important;
  box-shadow:var(--mui-shadow-xs);
  transition:border-color var(--mui-d1) var(--mui-ease),box-shadow var(--mui-d2) var(--mui-ease);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--mui-text);line-height:1.6;padding-top:2px}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple{
  border-color:var(--mui-primary)!important;
  box-shadow:var(--mui-ring)!important;
}
.select2-dropdown{
  border:1px solid var(--mui-border)!important;
  border-radius:14px!important;
  box-shadow:var(--mui-shadow-lg)!important;
  overflow:hidden;
  animation:mui-pop var(--mui-d2) var(--mui-ease);
  background:var(--mui-surface)!important;
}
.select2-search--dropdown .select2-search__field{border:1.5px solid var(--mui-border)!important;border-radius:10px!important;padding:.5rem .75rem!important}
.select2-results__option{padding:.6rem .95rem!important;transition:background var(--mui-d1),color var(--mui-d1)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--mui-primary-50)!important;color:var(--mui-primary-700)!important}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--mui-primary-100)!important;color:var(--mui-primary-700)}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--mui-primary-50)!important;border:1px solid var(--mui-primary-100)!important;
  border-radius:999px!important;color:var(--mui-primary-700)!important;
  padding:.15rem .6rem!important;font-weight:600;
}

/* ============================== 5. HEADER ================================= */
#ts-header{
  background:transparent;
  transition:box-shadow var(--mui-d3) var(--mui-ease),transform var(--mui-d3) var(--mui-ease);
  will-change:transform;
}
/* Top utility bar */
#ts-secondary-navigation{
  background:var(--mui-ink);
  color:#c3dccf;
  min-height:var(--mui-header-top);
  font-size:.82rem;
}
#ts-secondary-navigation a,#ts-secondary-navigation span{color:#c3dccf}
#ts-secondary-navigation a:hover{color:#fff}
#ts-secondary-navigation .custom-select,
#ts-secondary-navigation #language{
  background-color:transparent!important;border:0!important;color:#e9f6ef!important;
  font-weight:600;box-shadow:none;min-height:auto;padding:.25rem 1.4rem .25rem .5rem;cursor:pointer;
}
#ts-secondary-navigation #language option{color:var(--mui-ink)}
#openBtnSearch{cursor:pointer;width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;transition:background var(--mui-d1) var(--mui-ease),transform var(--mui-d1) var(--mui-spring)}
#openBtnSearch:hover{background:rgba(255,255,255,.12);transform:scale(1.06)}

/* Main navigation — glass */
#ts-primary-navigation{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(230,236,244,.9);
  min-height:var(--mui-header-main);
  transition:background var(--mui-d3) var(--mui-ease),box-shadow var(--mui-d3) var(--mui-ease),min-height var(--mui-d3) var(--mui-ease);
}
.mui-scrolled #ts-primary-navigation{
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 24px rgba(13,33,26,.08);
}
#ts-primary-navigation .navbar-toggler{color:var(--mui-ink);font-weight:700}
#ts-primary-navigation .navbar-toggler small{color:var(--mui-muted);font-weight:600}
#ts-primary-navigation .nav-link{
  color:var(--mui-text)!important;
  font-weight:600;font-size:.92rem!important;
  padding:.55rem .95rem;border-radius:10px;
  transition:color var(--mui-d1) var(--mui-ease),background var(--mui-d1) var(--mui-ease);
}
#ts-primary-navigation .navbar-nav>.nav-item>.nav-link:hover{color:var(--mui-primary)!important;background:var(--mui-primary-50);border: 1px solid transparent !important;}
#ts-primary-navigation .navbar-nav>.nav-item>.nav-link.active{color:var(--mui-primary)!important;background:var(--mui-primary-50);box-shadow:inset 0 0 0 1px var(--mui-primary-100)}

/* Dropdown / mega panel */
#ts-primary-navigation .ts-child{
  border:1px solid var(--mui-border);
  border-radius:16px;
  box-shadow:var(--mui-shadow-lg);
  padding:.5rem;
  background:var(--mui-surface);
  transform-origin:top center;
}
#ts-primary-navigation .ts-child .nav-link{border-radius:10px;padding:.55rem .8rem;font-weight:500}
#ts-primary-navigation .ts-child .nav-link:hover{background:var(--mui-primary-50);color:var(--mui-primary)!important;padding-left:1rem}

/* Mobile menu — app-like sheet */
@media (max-width:767.98px){
  #navbarPrimary{
    position:absolute;left:0;right:0;top:100%;
    background:var(--mui-surface);
    border-radius:0 0 20px 20px;
    box-shadow:0 24px 48px rgba(13,33,26,.18);
    padding:.75rem .9rem 1.1rem;
    max-height:calc(100dvh - var(--mui-header-top) - var(--mui-header-main));
    overflow-y:auto;overscroll-behavior:contain;
  }
  #navbarPrimary .nav-link{min-height:48px;display:flex;align-items:center;font-size:1rem!important;border-radius:12px}
  #navbarPrimary .navbar-nav>.nav-item{border-bottom:1px solid var(--mui-border)}
  #navbarPrimary .navbar-nav>.nav-item:last-child{border-bottom:0}
  #navbarPrimary .ts-child{box-shadow:none;border:0;padding:0 0 .4rem .6rem;background:transparent}
  .navbar-toggler{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px}
  .navbar-toggler:active{background:var(--mui-primary-50)}
}

/* Hide header on scroll-down, reveal on scroll-up (mobile only) */
@media (max-width:991.98px){
  .mui-hide-header #ts-header{transform:translateY(-100%)}
}

/* ============================== 6. HERO / SLIDER ========================== */
.ts-hero-slider .ts-slide{position:relative}
.ts-hero-slider .ts-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,18,32,.35) 0%,rgba(8,18,32,.15) 40%,rgba(8,18,32,.65) 100%);
}
.ts-hero-slider .ts-slide-description{position:relative;z-index:2}
.ts-hero-slider .ts-slide-description h2,
.ts-hero-slider .ts-slide-description h3,
.ts-hero-slider .ts-slide-description h4,
.ts-hero-slider .ts-slide-description .display-1{
  color:#fff;font-weight:800!important;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  font-size:clamp(1.4rem,1rem + 2.6vw,2.6rem)!important;
}
.owl-item.active .ts-slide-description>*{animation:mui-up .7s var(--mui-ease) both}
.owl-item.active .ts-slide-description>*:nth-child(2){animation-delay:.08s}
.owl-item.active .ts-slide-description>*:nth-child(3){animation-delay:.16s}
.owl-item.active .ts-slide-description>*:nth-child(4){animation-delay:.24s}

/* Owl dots & arrows */
.owl-carousel .owl-dots{margin-top:.75rem}
.owl-carousel .owl-dots .owl-dot span{
  width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.55);
  transition:all var(--mui-d2) var(--mui-ease);margin:0 4px;
}
.owl-carousel .owl-dots .owl-dot.active span{width:26px;background:var(--mui-primary)}
.ts-hero-slider-control .owl-prev,.ts-hero-slider-control .owl-next,
.owl-nav .owl-prev,.owl-nav .owl-next{
  width:44px;height:44px;border-radius:50%!important;
  background:rgba(255,255,255,.92)!important;color:var(--mui-ink)!important;
  box-shadow:var(--mui-shadow);display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--mui-d1) var(--mui-spring),box-shadow var(--mui-d2),background var(--mui-d1);
}
.owl-nav .owl-prev:hover,.owl-nav .owl-next:hover{transform:scale(1.08);background:#fff!important;box-shadow:var(--mui-shadow-lg)}

/* Hero search bar → floating pill */
.ts-hero-slider form .form-row,
.mui-search-pill{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(8,18,32,.28);
  align-items:end;gap:.25rem;
}
.ts-hero-slider form .form-row .form-control,
.ts-hero-slider form .form-row .custom-select,
.mui-search-pill .form-control,.mui-search-pill .custom-select{
  border-color:transparent;background:transparent;box-shadow:none;min-height:48px;
}
.ts-hero-slider form .form-row .form-control:focus{border-color:var(--mui-primary-100);background:var(--mui-surface)}
.ts-hero-slider form .form-group.border-left{border-color:var(--mui-border)!important}
.ts-hero-slider form .btn{min-height:48px}

/* ============================== 7. CARDS ================================== */
.card{
  border:1px solid var(--mui-border);
  border-radius:var(--mui-r-lg);
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-sm);
  transition:transform var(--mui-d2) var(--mui-ease),box-shadow var(--mui-d3) var(--mui-ease),border-color var(--mui-d2);
  overflow:hidden;
}
.card-body{color:var(--mui-text)}
.card-footer{background:transparent;border-top:1px solid var(--mui-border)}
.card-header{background:var(--mui-surface);border-bottom:1px solid var(--mui-border);font-weight:700}

@media (hover:hover) and (pointer:fine){
  .card:hover,.ts-box:hover{transform:translateY(-4px);box-shadow:var(--mui-shadow-lg);border-color:var(--mui-border-strong)}
  a.card:hover{border-color:var(--mui-primary-100)}
}
.card:active{transform:scale(.995)}

/* Directory item cards (products / featured) */
/*
.ts-item{position:relative}
.ts-item .card-img,.ts-item .ts-item__image,.ts-item .card-img2{
  transition:transform .6s var(--mui-ease);
  transform-origin:center;
  background-color:#e8f4ed;
  border-radius:0;
}
@media (hover:hover) and (pointer:fine){
  .ts-item:hover .card-img,.ts-item:hover .ts-item__image,.ts-item:hover .card-img2{transform:scale(1.06)}
}
.ts-item .card-img h4,.ts-item .card-img2 h4{text-shadow:0 2px 14px rgba(0,0,0,.45)}
.ts-item__info{color:var(--mui-muted)}

.ts-box{
  background:var(--mui-surface);
  border:1px solid var(--mui-border);
  border-radius:var(--mui-r-lg);
  box-shadow:var(--mui-shadow-sm);
  transition:transform var(--mui-d2) var(--mui-ease),box-shadow var(--mui-d3) var(--mui-ease);
}


#agencies .toutcompany,#agencies-list .toutcompany,.toutcompany{
  position:relative;
  background:var(--mui-surface);
  border:1px solid var(--mui-border);
  border-radius:var(--mui-r-lg);
  box-shadow:var(--mui-shadow-xs);
  margin-bottom:1rem;
  transition:transform var(--mui-d2) var(--mui-ease),box-shadow var(--mui-d3) var(--mui-ease),border-color var(--mui-d2);
}
@media (hover:hover) and (pointer:fine){
  .toutcompany:hover{transform:translateY(-3px);box-shadow:var(--mui-shadow);border-color:var(--mui-primary-100)}
}
.toutcompany .card-body{padding:1rem 1.1rem}
.toutcompany h6{font-size:1rem}
.toutcompany a{color:inherit}
.toutcompany h6 strong:hover{color:var(--mui-primary)}
*/
/* Logo avatar circle — gradient ring */
.ts-circle{
  background-size:cover;background-position:center;background-color:#edf7f1;
  box-shadow:0 0 0 3px var(--mui-surface),0 0 0 5px var(--mui-primary-100),var(--mui-shadow-sm);
  transition:box-shadow var(--mui-d2) var(--mui-ease),transform var(--mui-d2) var(--mui-spring);
}
.toutcompany:hover .ts-circle,.ts-item:hover .ts-circle{transform:scale(1.05);box-shadow:0 0 0 3px var(--mui-surface),0 0 0 5px var(--mui-primary),var(--mui-shadow)}

/* Ribbons → modern floating pills (keeps your 6 status colors) */
.ts-ribbon-corner{
  position:absolute!important;
  top:.6rem!important;inset-inline-start:.6rem!important;left:auto;
  width:auto!important;height:auto!important;
  overflow:visible!important;z-index:5;
  background:transparent!important;border:0!important;
}
[dir="ltr"] .ts-ribbon-corner,html:not([dir="rtl"]) .ts-ribbon-corner{left:.6rem!important;right:auto!important}
[dir="rtl"] .ts-ribbon-corner{right:.6rem!important;left:auto!important}
.ts-ribbon-corner span{
  position:static!important;
  display:inline-block!important;
  transform:none!important;
  width:auto!important;left:auto!important;top:auto!important;
  padding:.28rem .65rem!important;
  border-radius:999px!important;
  font-size:.68rem!important;font-weight:700!important;letter-spacing:.04em;
  line-height:1.1!important;text-transform:uppercase;
  color:#fff!important;text-align:center;
  box-shadow:0 3px 10px rgba(13,33,26,.25);
}

/* Badges */
.badge{border-radius:999px;font-weight:600;padding:.35rem .7rem;letter-spacing:.02em}
.badge-primary{background:var(--mui-grad)}
.badge-light{background:var(--mui-primary-50);color:var(--mui-primary-700)}

/* ============================== 8. LISTS / TABS / TABLES ================== */
.list-group-item{border-color:var(--mui-border);transition:background var(--mui-d1),color var(--mui-d1),padding-left var(--mui-d1)}
.list-group-item-action:hover{background:var(--mui-primary-50);color:var(--mui-primary-700)}

.nav-tabs{border-bottom:1px solid var(--mui-border);gap:.25rem}
.nav-tabs .nav-link{
  border:0;color:var(--mui-muted);font-weight:600;
  padding:.65rem 1rem;border-radius:10px 10px 0 0;position:relative;
  transition:color var(--mui-d1) var(--mui-ease);
}
.nav-tabs .nav-link::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:-1px;height:3px;border-radius:99px;background:var(--mui-grad);transform:scaleX(0);transition:transform var(--mui-d2) var(--mui-ease)}
.nav-tabs .nav-link:hover{color:var(--mui-text)}
.nav-tabs .nav-link.active{color:var(--mui-primary);background:transparent}
.nav-tabs .nav-link.active::after{transform:scaleX(1)}

.table{color:var(--mui-text)}
.table thead th{
  border-bottom:1px solid var(--mui-border);border-top:0;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mui-muted);
  background:var(--mui-surface-2);
}
.table td,.table th{border-color:var(--mui-border);vertical-align:middle}
.table-hover tbody tr{transition:background var(--mui-d1)}
.table-hover tbody tr:hover{background:var(--mui-primary-50)}

/* Pagination — pill cluster */
.pagination{gap:.35rem;flex-wrap:wrap}
.page-item .page-link{
  border:0;border-radius:12px;
  min-width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--mui-text);font-weight:600;
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-xs);
  transition:all var(--mui-d1) var(--mui-ease);
  padding:0 .8rem;
}
.page-item .page-link:hover{background:var(--mui-primary-50);color:var(--mui-primary);transform:translateY(-1px)}
.page-item.active .page-link{background:var(--mui-grad);color:#fff;box-shadow:0 6px 16px rgba(10,156,83,.4)}
.page-item.disabled .page-link{background:transparent;box-shadow:none;color:#a9c2b3}

/* Breadcrumb */
.breadcrumb{background:transparent;padding:.5rem 0;font-size:.85rem}
.breadcrumb-item+.breadcrumb-item::before{color:#a9c2b3}
.breadcrumb-item a{color:var(--mui-muted);font-weight:600}
.breadcrumb-item a:hover{color:var(--mui-primary)}
.breadcrumb-item.active{color:var(--mui-ink);font-weight:600}

/* Alerts */
.alert{border:0;border-radius:14px;border-left:4px solid transparent;box-shadow:var(--mui-shadow-xs);font-weight:500}
.alert-success{background:#ecfdf3;color:#0b6b3a;border-left-color:var(--mui-success)}
.alert-danger{background:#fef1f4;color:#9f1239;border-left-color:var(--mui-danger)}
.alert-warning{background:#fffaeb;color:#92610a;border-left-color:var(--mui-warning)}
.alert-info{background:#eefbfe;color:#0e6e84;border-left-color:var(--mui-info)}

/* Dropdown menus (Bootstrap) */
.dropdown-menu{
  border:1px solid var(--mui-border);border-radius:14px;
  box-shadow:var(--mui-shadow-lg);padding:.4rem;
  animation:mui-pop var(--mui-d2) var(--mui-ease);
}
.dropdown-item{border-radius:9px;padding:.55rem .8rem;font-weight:500;transition:background var(--mui-d1),color var(--mui-d1)}
.dropdown-item:hover{background:var(--mui-primary-50);color:var(--mui-primary-700)}
.dropdown-divider{border-color:var(--mui-border)}

/* Modals */
.modal-content{border:0;border-radius:20px;box-shadow:0 32px 80px rgba(8,18,32,.35);overflow:hidden}
.modal-header{border-bottom:1px solid var(--mui-border);padding:1.1rem 1.4rem}
.modal-header .close{transition:transform var(--mui-d1) var(--mui-spring)}
.modal-header .close:hover{transform:rotate(90deg)}
.modal-footer{border-top:1px solid var(--mui-border)}
.modal.fade .modal-dialog{transform:translateY(26px) scale(.97);transition:transform var(--mui-d3) var(--mui-ease)}
.modal.show .modal-dialog{transform:none}
.modal-backdrop.show{opacity:.55;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* Tooltips */
.tooltip .tooltip-inner{background:var(--mui-ink);border-radius:9px;padding:.45rem .7rem;font-weight:500;box-shadow:var(--mui-shadow)}
.tooltip .arrow::before{border-top-color:var(--mui-ink)}

/* ============================== 9. FOOTER ================================= */
#ts-footer{
  background:linear-gradient(165deg,#07271a 0%,#0b3a26 55%,#05170f 100%);
  color:#c6d5e8;margin-top:3rem!important;
  content-visibility:auto;contain-intrinsic-size:1px 520px;
}
#ts-footer h4{
  color:#fff!important;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:.6rem;margin-bottom:1rem;position:relative;
}
#ts-footer h4::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:28px;height:3px;border-radius:99px;background:var(--mui-grad)}
#ts-footer p,#ts-footer address{color:#9cc2ad!important}
#ts-footer .nav-link{
  color:#9cc2ad!important;padding:.4rem 0!important;margin:0!important;font-weight:500;
  transition:color var(--mui-d1) var(--mui-ease),transform var(--mui-d1) var(--mui-ease);
}
#ts-footer .nav-link:hover{color:#fff!important;transform:translateX(5px)}
[dir="rtl"] #ts-footer .nav-link:hover{transform:translateX(-5px)}
#ts-footer a:not(.btn){color:#bfe3cf}
#ts-footer a:not(.btn):hover{color:#fff}
#ts-footer .btn-outline-dark{border-color:rgba(255,255,255,.4)!important;color:#fff!important}
#ts-footer .btn-outline-dark:hover{background:#fff!important;color:var(--mui-ink)!important;border-color:#fff!important}
#ts-footer hr{border-color:rgba(255,255,255,.1)}
#ts-footer .form-control{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
#ts-footer .form-control::placeholder{color:#7ba18c}
#ts-footer-secondary,#ts-footer .ts-footer-secondary{border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#88ab97}
#ts-footer .fa,#ts-footer .fab,#ts-footer .fas{transition:transform var(--mui-d1) var(--mui-spring),color var(--mui-d1)}
#ts-footer a:hover .fa,#ts-footer a:hover .fab{transform:scale(1.15)}

/* ============================== 10. WIDGETS =============================== */
/* Back-to-top with progress ring (ring injected by JS) */
#back-to-top{
  width:50px;height:50px;border-radius:50%!important;
  background:var(--mui-surface)!important;color:var(--mui-primary)!important;
  border:0!important;box-shadow:var(--mui-shadow-lg)!important;
  display:none;align-items:center;justify-content:center;
  bottom:24px;right:24px;z-index:1040;padding:0!important;
  transition:transform var(--mui-d1) var(--mui-spring),box-shadow var(--mui-d2)!important;
}
#back-to-top:hover{transform:translateY(-3px) scale(1.05)}
#back-to-top i{position:relative;z-index:2;font-size:.95rem}
#back-to-top .mui-ring-svg{position:absolute;inset:3px;transform:rotate(-90deg);pointer-events:none}
#back-to-top .mui-ring-svg circle{fill:none;stroke:var(--mui-primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .1s linear}
#back-to-top .mui-ring-bg{stroke:var(--mui-primary-100)!important;stroke-dashoffset:0!important}
[dir="rtl"] #back-to-top{right:auto;left:24px}
@media (max-width:991.98px){
  body.has-mui-dock #back-to-top{bottom:calc(var(--mui-dock-h) + var(--mui-safe-b) + 16px)}
}

/* Page-load progress bar */
#mui-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--mui-grad);z-index:4000;
  box-shadow:0 0 12px rgba(10,156,83,.7);
  border-radius:0 99px 99px 0;
  transition:width .25s var(--mui-ease),opacity .4s;
  pointer-events:none;
}

/* Loader — inert wrapper; overlay + spinner ONLY while actually loading
   (your JS toggles .hide on #img_lod — modern-ui.js mirrors that onto .mui-loading) */
#loader{background:transparent!important;pointer-events:none}
#loader img,#img_lod{display:none!important}
#loader.mui-loading{background:rgba(6,20,13,.72)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto}
#loader.mui-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.2);border-top-color:var(--mui-primary);
  animation:mui-spin .7s linear infinite;
}

/* Fullscreen search overlay (keeps your #myOverlay + openSearch/closeSearch) */
.overlay{
  background:rgba(8,16,28,.72)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  z-index:2000;position:fixed;inset:0;width:100%;height:100%;
}
.overlay .overlay-content{
  position:relative;top:32%;width:min(680px,90%);margin:0 auto;text-align:center;
  animation:mui-pop .3s var(--mui-ease);
}
.overlay .overlay-content form{display:flex;gap:.5rem;background:#fff;border-radius:18px;padding:.5rem;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.overlay .overlay-content input[type="text"]{
  flex:1;border:0;outline:0;background:transparent;
  font-size:1.15rem;padding:.8rem 1rem;color:var(--mui-ink);
}
.overlay .overlay-content button{
  border:0;border-radius:14px;background:var(--mui-grad);color:#fff;
  width:54px;height:54px;font-size:1.1rem;cursor:pointer;
  box-shadow:0 8px 20px rgba(10,156,83,.45);
  transition:transform var(--mui-d1) var(--mui-spring);
}
.overlay .overlay-content button:hover{transform:scale(1.06)}
.overlay .closebtn{
  position:absolute;top:24px;inset-inline-end:32px;font-size:2.2rem;color:#fff;cursor:pointer;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.1);
  transition:background var(--mui-d1),transform var(--mui-d2) var(--mui-spring);
}
.overlay .closebtn:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}

/* Dark-mode toggle switch (your #mode checkbox) */
.dark .label{
  background:#233246!important;border:0!important;width:52px!important;height:26px!important;
  transform:none!important;padding:3px!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
  transition:background var(--mui-d2) var(--mui-ease);
}
.dark .label .round{
  background:#fff!important;width:20px!important;height:20px!important;top:3px!important;left:3px!important;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform var(--mui-d2) var(--mui-spring)!important;
}
.dark .checkbox:checked+.label{background:var(--mui-primary)!important}
.dark .checkbox:checked+.label .round{transform:translateX(26px)!important}
.dark .label .fa-moon{color:#cfe2ff;font-size:.7rem}
.dark .label .fa-sun{color:#ffd66b;font-size:.7rem}

/* Metronic (user dashboard) — light facelift */
.kt-portlet{border-radius:16px!important;box-shadow:var(--mui-shadow-sm)!important;border:1px solid var(--mui-border)}
.kt-portlet .kt-portlet__head{border-bottom:1px solid var(--mui-border)}
.kt-widget__item,.kt-notification .kt-notification__item{transition:background var(--mui-d1)}
.kt-notification .kt-notification__item:hover{background:var(--mui-primary-50)}
.kt-badge{border-radius:999px}

/* ============================ 11. MOBILE DOCK ============================= */
#mui-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:1050;
  height:calc(var(--mui-dock-h) + var(--mui-safe-b));
  padding-bottom:var(--mui-safe-b);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid var(--mui-border);
  box-shadow:0 -8px 30px rgba(13,33,26,.08);
  display:none;
  transition:transform var(--mui-d3) var(--mui-ease);
}
@media (max-width:991.98px){
  #mui-dock{display:flex}
  body.has-mui-dock{padding-bottom:calc(var(--mui-dock-h) + var(--mui-safe-b))}
  body.has-mui-dock #ts-footer{margin-bottom:0}
  .mui-hide-header #mui-dock{transform:translateY(110%)}
}
#mui-dock .mui-dock-inner{display:flex;width:100%;max-width:560px;margin:0 auto}
#mui-dock a,#mui-dock button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:transparent;color:var(--mui-muted);
  font-size:.62rem;font-weight:600;letter-spacing:.02em;
  padding-top:8px;min-height:var(--mui-dock-h);cursor:pointer;
  position:relative;overflow:hidden;
  transition:color var(--mui-d1) var(--mui-ease);
  -webkit-tap-highlight-color:transparent;text-decoration:none;
}
#mui-dock i{font-size:1.15rem;transition:transform var(--mui-d1) var(--mui-spring)}
#mui-dock a:active i,#mui-dock button:active i{transform:scale(.88)}
#mui-dock .active{color:var(--mui-primary)}
#mui-dock .active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 99px 99px;background:var(--mui-grad)}
#mui-dock .mui-dock-primary{color:#fff}
#mui-dock .mui-dock-primary i{
  width:28px;height:28px;border-radius:50%;
  background:var(--mui-grad);display:flex;align-items:center;justify-content:center;
  margin-top:-22px;box-shadow:0 10px 24px rgba(10,156,83,.5),0 0 0 5px var(--mui-surface);
  font-size:1.05rem;
}
#mui-dock .mui-dock-primary span{color:var(--mui-primary);font-weight:700}
#mui-dock .mui-dock-primary:active i{transform:scale(.92)}

/* ============================ 12. ANIMATIONS ============================== */
@keyframes mui-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mui-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mui-spin{to{transform:rotate(360deg)}}
@keyframes mui-shimmer{from{background-position:-460px 0}to{background-position:460px 0}}
@keyframes mui-pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Scroll-reveal (elements tagged automatically by modern-ui.js) */
[data-mui-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--mui-ease),transform .6s var(--mui-ease);transition-delay:var(--mui-d,0s);will-change:opacity,transform}
[data-mui-reveal].mui-in{opacity:1;transform:none}
html.mui-no-js [data-mui-reveal]{opacity:1;transform:none}

/* Skeleton shimmer for lazy backgrounds — overlay only, never touches the real image */
:where([data-bg-image]){position:relative}
:where([data-bg-image])>*{position:relative;z-index:1}
[data-bg-image]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background-color:#e7f3ec;
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%);
  background-size:460px 100%;background-repeat:no-repeat;
  animation:mui-shimmer 1.3s linear infinite;
  opacity:1;transition:opacity .35s var(--mui-ease);
}
[data-bg-image].mui-bg-loaded::before{opacity:0;animation:none}
img.mui-fade{opacity:0;transition:opacity .45s var(--mui-ease)}
img.mui-fade.mui-loaded{opacity:1}

/* Utilities */
.mui-glass{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6)}
.mui-gradient-text{background:var(--mui-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mui-hide-scroll{scrollbar-width:none}
.mui-hide-scroll::-webkit-scrollbar{display:none}
.mui-chips{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem .1rem;scroll-snap-type:x mandatory}
.mui-chip{scroll-snap-align:start;white-space:nowrap;background:var(--mui-surface);border:1.5px solid var(--mui-border);border-radius:999px;padding:.45rem 1rem;font-weight:600;font-size:.85rem;color:var(--mui-text);transition:all var(--mui-d1) var(--mui-ease);cursor:pointer;text-decoration:none}
.mui-chip:hover,.mui-chip.active{background:var(--mui-primary);border-color:var(--mui-primary);color:#fff;box-shadow:0 6px 14px rgba(10,156,83,.35)}

/* ============================ 13. DARK MODE =============================== */
/* Your toggle adds body.navbar-dark — these tokens turn it into a real theme */
body.navbar-dark{
  --mui-bg:#0a1410;
  --mui-surface:#112018;
  --mui-surface-2:#0d1a13;
  --mui-ink:#eefbf3;
  --mui-text:#d9e9df;
  --mui-muted:#8fae9c;
  --mui-border:#1d3327;
  --mui-border-strong:#2a4636;
  --mui-primary-50:rgba(35,194,116,.13);
  --mui-primary-100:rgba(35,194,116,.24);
  --mui-shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --mui-shadow-sm:0 2px 8px rgba(0,0,0,.45);
  --mui-shadow:0 10px 28px rgba(0,0,0,.5);
  --mui-shadow-lg:0 22px 50px rgba(0,0,0,.6);
  background:var(--mui-bg)!important;color:var(--mui-text)!important;
}
body.navbar-dark img{filter:none!important}
body.navbar-dark h1,body.navbar-dark h2,body.navbar-dark h3,body.navbar-dark h4,body.navbar-dark h5,body.navbar-dark h6{color:var(--mui-ink)}
body.navbar-dark p{color:var(--mui-text)!important}
body.navbar-dark .text-muted{color:var(--mui-muted)!important}

body.navbar-dark .card,
body.navbar-dark .ts-box,
body.navbar-dark .toutcompany,
body.navbar-dark .list-group-item,
body.navbar-dark .dropdown-menu,
body.navbar-dark .modal-content,
body.navbar-dark .kt-portlet{
  background:var(--mui-surface)!important;color:var(--mui-text)!important;border-color:var(--mui-border)!important;
}
body.navbar-dark .card-header,body.navbar-dark .modal-header,body.navbar-dark .modal-footer,body.navbar-dark .card-footer{background:var(--mui-surface)!important;border-color:var(--mui-border)!important;color:var(--mui-ink)!important}
body.navbar-dark .toutcompany h6 strong,body.navbar-dark .toutcompany a,body.navbar-dark dd{color:var(--mui-text)!important}

body.navbar-dark #ts-primary-navigation{background:rgba(10,22,16,.86);border-bottom-color:rgba(29,51,39,.9)}
body.navbar-dark.mui-scrolled #ts-primary-navigation{background:rgba(10,22,16,.95)}
body.navbar-dark #ts-primary-navigation .nav-link{color:var(--mui-text)!important}
body.navbar-dark #ts-primary-navigation .navbar-toggler,body.navbar-dark #ts-primary-navigation .navbar-toggler small{color:var(--mui-ink)!important}
body.navbar-dark #ts-primary-navigation .ts-child,body.navbar-dark #navbarPrimary{background:var(--mui-surface);border-color:var(--mui-border)}
body.navbar-dark .navbar-toggler-icon{filter:invert(1)}

body.navbar-dark .form-control,
body.navbar-dark .custom-select,
body.navbar-dark textarea{
  background:var(--mui-surface-2)!important;border-color:var(--mui-border)!important;color:var(--mui-text)!important;
}
body.navbar-dark .form-control::placeholder{color:#5e7f6d}
body.navbar-dark .input-group-text{background:var(--mui-surface)!important;border-color:var(--mui-border)!important;color:var(--mui-muted)!important}
body.navbar-dark .select2-container .select2-selection--single,
body.navbar-dark .select2-container .select2-selection--multiple{background:var(--mui-surface-2)!important;border-color:var(--mui-border)!important}
body.navbar-dark .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--mui-text)!important}
body.navbar-dark .select2-dropdown{background:var(--mui-surface)!important;border-color:var(--mui-border)!important}
body.navbar-dark .select2-results__option{color:var(--mui-text)}
body.navbar-dark .select2-search--dropdown .select2-search__field{background:var(--mui-surface-2)!important;border-color:var(--mui-border)!important;color:var(--mui-text)}

body.navbar-dark .page-item .page-link{background:var(--mui-surface);color:var(--mui-text)}
body.navbar-dark .page-item.active .page-link{background:var(--mui-grad);color:#fff}
body.navbar-dark .table{color:var(--mui-text)}
body.navbar-dark .table thead th{background:var(--mui-surface-2);color:var(--mui-muted);border-color:var(--mui-border)}
body.navbar-dark .table td,body.navbar-dark .table th{border-color:var(--mui-border);color:var(--mui-text)!important}
body.navbar-dark .nav-tabs{border-color:var(--mui-border)}
body.navbar-dark .nav-tabs .nav-link.active{background:transparent;color:var(--mui-primary)}
body.navbar-dark .dropdown-item{color:var(--mui-text)}
body.navbar-dark .dropdown-item:hover{background:var(--mui-primary-50);color:#fff}
body.navbar-dark .breadcrumb-item.active{color:var(--mui-ink)}
body.navbar-dark .btn-light{background:var(--mui-surface-2);border-color:var(--mui-border);color:var(--mui-text)}
body.navbar-dark #back-to-top{background:var(--mui-surface)!important}
body.navbar-dark #mui-dock{background:rgba(10,22,16,.94);border-top-color:var(--mui-border);box-shadow:0 -8px 30px rgba(0,0,0,.5)}
body.navbar-dark #mui-dock .mui-dock-primary i{box-shadow:0 10px 24px rgba(10,156,83,.5),0 0 0 5px var(--mui-surface)}
body.navbar-dark .ts-circle{box-shadow:0 0 0 3px var(--mui-surface),0 0 0 5px rgba(10,156,83,.35),var(--mui-shadow-sm)}
body.navbar-dark [data-bg-image]::before{
  background-color:#14261c;
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 100%);
}
body.navbar-dark .overlay .overlay-content form{background:var(--mui-surface)}
body.navbar-dark .overlay .overlay-content input[type="text"]{color:var(--mui-ink)}
body.navbar-dark .mui-chip{background:var(--mui-surface);border-color:var(--mui-border);color:var(--mui-text)}
body.navbar-dark ::-webkit-scrollbar-thumb{background:#2f5340;border-color:var(--mui-bg)}

/* ============================ 14. ACCESS / PERF =========================== */
@media (max-width:991.98px){
  .btn,.nav-link,.page-link,.dropdown-item{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-mui-reveal]{opacity:1!important;transform:none!important}
  [data-bg-image]::before{animation:none!important}
}
@media print{
  #mui-dock,#mui-progress,#back-to-top,#ts-secondary-navigation,.overlay{display:none!important}
  #ts-header{position:static!important}
  body{background:#fff}
}


/* ============================ 15. V2 FIXES ================================ */
/* --- Desktop dropdowns: absolute panel, opens on hover OR .mui-open (tap) --- */
@media (min-width:768px){
  #ts-primary-navigation .navbar-nav .ts-has-child{position:relative}
  #ts-primary-navigation .navbar-nav .ts-has-child>.ts-child{
    position:absolute;top:calc(100% + 8px);inset-inline-start:0;
    min-width:250px;z-index:1030;margin:0;
    display:block;opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(8px) scale(.98);
    transition:opacity var(--mui-d2) var(--mui-ease),transform var(--mui-d2) var(--mui-ease),visibility 0s linear var(--mui-d2);
  }
  #ts-primary-navigation .navbar-nav .ts-has-child:hover>.ts-child,
  #ts-primary-navigation .navbar-nav .ts-has-child.mui-open>.ts-child{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s;
  }
  /* nested level */
  #ts-primary-navigation .ts-child .ts-has-child>.ts-child{top:-.5rem;inset-inline-start:100%}
  /* hover-bridge so the panel doesn't close in the gap */
  #ts-primary-navigation .navbar-nav .ts-has-child>.ts-child::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
}
/* caret on parents (both breakpoints) */
#ts-primary-navigation .ts-has-child>.nav-link::after{
  content:"\f078";font-family:"Font Awesome 5 Free";font-weight:900;font-size:.55rem;
  margin-inline-start:.45rem;opacity:.55;transition:transform var(--mui-d2) var(--mui-ease);display:inline-block;
}
#ts-primary-navigation .ts-has-child:hover>.nav-link::after,
#ts-primary-navigation .ts-has-child.mui-open>.nav-link::after{transform:rotate(180deg);opacity:1}

/* --- Nav density: keep one line between 768–1200px --- */
@media (min-width:768px){
  #ts-primary-navigation .navbar-nav{align-items:center;flex-wrap:nowrap}
  #ts-primary-navigation .navbar-nav>.nav-item>.nav-link{white-space:nowrap}
}
@media (min-width:768px) and (max-width:1199.98px){
  #ts-primary-navigation .navbar-nav>.nav-item>.nav-link{padding:.5rem .55rem;font-size:.8rem!important}
  #ts-primary-navigation .navbar-toggler small{display:none}
  #ts-primary-navigation .btn{padding:.4rem .7rem;font-size:.78rem}
  #ts-primary-navigation .navbar-toggler{font-size:1rem}
}
@media (min-width:768px) and (max-width:919.98px){
  #ts-primary-navigation .navbar-nav>.nav-item>.nav-link{padding:.45rem .4rem;font-size:.74rem!important;letter-spacing:0}
}

/* --- Mobile submenus: accordion via .mui-open --- */
@media (max-width:767.98px){
  #navbarPrimary .ts-has-child>.ts-child{display:none}
  #navbarPrimary .ts-has-child.mui-open>.ts-child{display:block;animation:mui-pop var(--mui-d2) var(--mui-ease)}
  #navbarPrimary .ts-has-child>.nav-link{justify-content:space-between;width:100%}
}

/* --- data-bg-image: center & cover (fixes dark/edge-cropped sector cards) --- */
[data-bg-image]{background-position:center center!important;background-size:cover!important;background-repeat:no-repeat}

/* --- Sector / large item cards (.card-img2): readable, lighter, responsive --- */
.ts-item .card-img2{
  position:relative;height:13rem;display:flex;align-items:flex-end;
  background-color:#10261b;overflow:hidden;
}
.ts-item .card-img2::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,13,0) 30%,rgba(6,20,13,.78) 100%);
}
.ts-item .card-img2 h4,.ts-item .card-img2 .display-1{
  position:relative;z-index:2;color:#fff;
  font-size:1.05rem!important;font-weight:700!important;letter-spacing:0;
  padding:0 1.1rem 1rem;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.45);
}
@media (max-width:767.98px){
  .ts-item .card-img2{height:11rem}
  .ts-item .card-img2 h4{font-size:.95rem!important}
}

/* --- Standalone search bar (.ts-box form) under hero: single clean pill --- */
#featured-properties .ts-box{border-radius:22px;box-shadow:var(--mui-shadow-lg);border:1px solid var(--mui-border)}
#featured-properties .form-group{margin:0}
#featured-properties .form-group.border-left{border:0!important}
#featured-properties .form-control{border-color:transparent;box-shadow:none;min-height:52px;font-size:1rem}
#featured-properties .form-control:focus{border-color:var(--mui-primary-100);background:var(--mui-primary-50)}
#featured-properties .btn{min-height:48px;border-radius:14px}

/* --- jQuery-UI autocomplete dropdown (search suggestions) --- */
.ui-autocomplete{
  border:1px solid var(--mui-border)!important;border-radius:14px!important;
  box-shadow:var(--mui-shadow-lg)!important;background:var(--mui-surface)!important;
  padding:.35rem!important;z-index:2100!important;max-height:320px;overflow-y:auto;
}
.ui-menu .ui-menu-item-wrapper,.ui-menu .ui-menu-item>a{border:0!important;border-radius:9px;padding:.55rem .8rem!important;color:var(--mui-text)}
.ui-menu .ui-menu-item-wrapper.ui-state-active,.ui-menu .ui-menu-item a.ui-state-focus{
  background:var(--mui-primary-50)!important;color:var(--mui-primary-700)!important;margin:0!important;
}
body.navbar-dark .ui-autocomplete{background:var(--mui-surface)!important;border-color:var(--mui-border)!important}
body.navbar-dark .ui-menu .ui-menu-item-wrapper{color:var(--mui-text)}

/* --- Owl stage sanity on mobile (prevents squished slides from old inline rules) --- */
.owl-carousel .owl-stage{display:flex}
.owl-carousel .owl-item>div{width:100%}

/* --- Footer nav: enforce clean column on mobile --- */
#ts-footer .nav{flex-direction:column!important;align-items:flex-start}
#ts-footer .nav-link{width:100%}
ul.navbar-nav > .ts-has-child > .nav-link:after {
    right: 0.3rem;
    top: 0.5rem;
}
.page-item.active .page-link:after {
    border-color:  transparent transparent transparent transparent;
}