/* ============================================================
   ASSETS INVENTORY — global styles 
   for header (& index) page in components/css/assets-inventory.css
   ============================================================ */
 
*, *::before, *::after { box-sizing: border-box; }
 
:root {
    --carr-blue:     #004B98;
    --carr-red:      #E30613;
    --nav-height:    58px;
    --body-bg:       #f5f6f8;
    --card-bg:       #ffffff;
    --card-border:   #e4e7ec;
    --card-radius:   12px;
    --card-shadow:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --card-shadow-h: 0 6px 20px rgba(0,0,0,.10);
    --text-primary:  #111827;
    --text-muted:    #6b7280;
    --text-success:  #97bc65;
    --font:          'Plus Jakarta Sans', sans-serif;
}
 
body {
    font-family:     var(--font);
    background:      var(--body-bg);
    color:           var(--text-primary);
    margin:          0;
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
}
 
main {
    flex:            1;   /* ocupa tot spatiul disponibil intre navbar si footer */
    display:flex;
    flex-direction:column;
}
 
/* ── Navbar ─────────────────────────────────────────────── */
.ai-navbar {
    height:          var(--nav-height);
    background:      #ffffff;
    border-bottom:   1px solid var(--card-border);
    padding:         0 20px;
    display:         flex;
    align-items:     center;
    gap:             8px;
    position:        sticky;
    top:             0;
    z-index:         1000;
}
 
/* Logo */
.ai-logo {
    display:         flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    margin-right:    8px;
    flex-shrink:     0;
}
.ai-logo-icon {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
 
/* Nav links */
.ai-nav-links {
    display:         flex;
    align-items:     center;
    gap:             2px;
    list-style:      none;
    margin:          0;
    padding:         0;
    flex:            1;          /* occupa tot spatiul disponibil */
    flex-wrap:       nowrap;     /* forteaza un singur rand */
}
.ai-nav-links li a {
    display:         flex;
    align-items:     center;
    gap:             4px;
    padding:         6px 9px;
    border-radius:   8px;
    font-size:       .8rem;
    font-weight:     500;
    color:           var(--text-muted);
    text-decoration: none;
    transition:      background .15s, color .15s;
    white-space:     nowrap;
}
.ai-nav-links li a:hover {
    background:      #f3f4f6;
    color:           var(--text-primary);
}
.ai-nav-links li a.active {
    background:      #f0f4ff;
    color:           var(--carr-blue);
    font-weight:     600;
}
.ai-nav-links li a i { font-size: .875rem; }
 
/* Right side */
.ai-nav-right {
    display:         flex;
    align-items:     center;
    gap:             8px;
    margin-left:     auto;
}
.ai-btn-scanner {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 14px;
    border-radius:   8px;
    border:          1px solid var(--card-border);
    background:      #fff;
    font-size:       .8125rem;
    font-weight:     600;
    color:           var(--text-primary);
    cursor:          pointer;
    transition:      all .15s;
    white-space:     nowrap;
    text-decoration: none;
}
.ai-btn-scanner:hover {
    background:      #f3f4f6;
    border-color:    #d1d5db;
    color:           var(--text-primary);
}
.ai-btn-scanner i { font-size: .95rem; }
 
/* User avatar dropdown */
.ai-avatar-btn {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    border:          1.5px solid var(--card-border);
    background:      #e5e7eb;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      border-color .15s;
    flex-shrink:     0;
    font-size:       .75rem;
    font-weight:     700;
    color:           #374151;
    padding:         0;
}

.ai-scanner-text { display: none; }
.ai-avatar-btn:hover,
.ai-avatar-btn:focus { border-color: #9ca3af; box-shadow: none; }
.ai-avatar-btn::after { display: none; }
 
.ai-user-menu {
    border:          1px solid var(--card-border);
    border-radius:   10px;
    box-shadow:      0 8px 24px rgba(0,0,0,.10);
    padding:         6px;
    min-width:       200px;
}
.ai-user-menu .dropdown-item {
    border-radius:   6px;
    padding:         7px 12px;
    font-size:       .8125rem;
    font-weight:     500;
    display:         flex;
    align-items:     center;
    gap:             8px;
    color:           var(--text-primary);
}
.ai-user-menu .dropdown-item:hover { background: #f3f4f6; }
.ai-user-menu .dropdown-item.text-danger:hover { background: #fef2f2; }
.ai-user-header {
    padding:         10px 12px 8px;
    border-bottom:   1px solid var(--card-border);
    margin-bottom:   4px;
}
.ai-user-header .name {
    font-size:       .8125rem;
    font-weight:     600;
    color:           var(--text-primary);
}
.ai-user-header .role {
    font-size:       .75rem;
    color:           var(--text-success);
    margin-top:      1px;
}

.ai-user-header .email {
    font-size:       .75rem;
    color:           var(--text-muted);
    margin-top:      1px;
}

/* Hamburger (mobile) */
.ai-hamburger {
    display:         none;
    background:      none;
    border:          none;
    padding:         6px;
    font-size:       1.25rem;
    color:           var(--text-primary);
    cursor:          pointer;
    margin-left:     auto;
}
 
/* Mobile menu — ascuns implicit pe toate ecranele */
.ai-mobile-menu { display: none; }
 
/* ── Page header (reutilizabil pe orice pagina) ──────────── */
.ai-page-header {
    padding:         28px 24px 18px;
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
}
.ai-page-title {
    font-size:       1.25rem;
    font-weight:     700;
    color:           var(--text-primary);
    margin:          0 0 4px;
    line-height:     1.3;
}
.ai-page-subtitle {
    font-size:       .8125rem;
    color:           var(--text-muted);
    margin:          0;
}
 
/* ── All Stores dropdown ─────────────────────────────────── */
.ai-store-dropdown .dropdown-toggle {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         7px 14px;
    border-radius:   8px;
    border:          1px solid var(--card-border);
    background:      #fff;
    font-size:       .8125rem;
    font-weight:     600;
    color:           var(--text-primary);
    cursor:          pointer;
    transition:      all .15s;
    white-space:     nowrap;
}
.ai-store-dropdown .dropdown-toggle:hover,
.ai-store-dropdown .dropdown-toggle:focus {
    background:      #f9fafb;
    border-color:    #9ca3af;
    box-shadow:      none;
    outline:         none;
}
.ai-store-dropdown .dropdown-toggle::after  { display: none; }
.ai-store-dropdown .dropdown-toggle i       { font-size: .95rem; }
.ai-store-dropdown .dropdown-toggle .ai-caret {
    font-size:       .75rem;
    color:           var(--text-muted);
    transition:      transform .2s;
}
.ai-store-dropdown.show .ai-caret           { transform: rotate(180deg); }
 
.ai-store-dropdown .dropdown-menu {
    border:          1px solid var(--card-border);
    border-radius:   10px;
    box-shadow:      0 8px 24px rgba(0,0,0,.10);
    padding:         6px;
    min-width:       260px;
    max-height:      360px;
    overflow-y:      auto;
}
.ai-store-dropdown .dropdown-item {
    border-radius:   6px;
    padding:         7px 12px;
    font-size:       .8125rem;
    font-weight:     500;
    color:           var(--text-primary);
    display:         flex;
    align-items:     center;
    gap:             8px;
    transition:      background .1s;
}
.ai-store-dropdown .dropdown-item:hover     { background: #f3f4f6; }
.ai-store-dropdown .dropdown-item.active    { background: #f0f4ff; color: var(--carr-blue); }
.ai-store-dropdown .badge-code {
    font-size:       .6875rem;
    font-weight:     600;
    color:           var(--text-muted);
    background:      #f3f4f6;
    padding:         2px 6px;
    border-radius:   4px;
    margin-left:     auto;
}
.ai-store-dropdown .dropdown-divider        { margin: 4px 0; }
.dropdown-search                            { padding: 6px 8px 2px; }
.dropdown-search input {
    width:           100%;
    border:          1px solid var(--card-border);
    border-radius:   6px;
    padding:         5px 10px;
    font-size:       .8125rem;
    outline:         none;
    font-family:     var(--font);
}
.dropdown-search input:focus               { border-color: var(--carr-blue); }
 
/* ── Cards grid ──────────────────────────────────────────── */
.ai-cards-section { padding: 0 24px 32px; }
 
.ai-card {
    background:      var(--card-bg);
    border:          1px solid var(--card-border);
    border-radius:   var(--card-radius);
    padding:         22px 20px 20px;
    cursor:          pointer;
    transition:      box-shadow .2s, transform .2s, border-color .2s;
    text-decoration: none;
    display:         block;
    height:          100%;
    position:        relative;
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    gap:             14px;
}
.ai-card::before {
    content:         '';
    position:        absolute;
    top:             0; left: 0; right: 0;
    height:          3px;
    background:      var(--card-accent, transparent);
    border-radius:   var(--card-radius) var(--card-radius) 0 0;
    opacity:         0;
    transition:      opacity .2s;
}
.ai-card:hover {
    box-shadow:      var(--card-shadow-h);
    transform:       translateY(-2px);
    border-color:    #d1d5db;
    text-decoration: none;
}
.ai-card:hover::before { opacity: 1; }

.ai-card-content{
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    min-width:       0;
}
.ai-card-icon-wrap {
    width:           52px;
    height:          52px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    margin-bottom:   0;
}
.ai-card-icon-wrap i  { font-size: 1.5rem; }
.ai-card-title {
    font-size:       .9375rem;
    font-weight:     700;
    color:           var(--text-primary);
    margin:          0 0 6px;
    line-height:     1.3;
}
.ai-card-desc {
    font-size:       .8rem;
    color:           var(--text-muted);
    margin:          0;
    line-height:     1.5;
}
 
/* Card icon color themes */
.ic-blue   { background:#eff6ff; } .ic-blue   i { color:#2563eb; }
.ic-purple { background:#f5f3ff; } .ic-purple i { color:#7c3aed; }
.ic-orange { background:#fff7ed; } .ic-orange i { color:#ea580c; }
.ic-red    { background:#fef2f2; } .ic-red    i { color:#dc2626; }
.ic-green  { background:#f0fdf4; } .ic-green  i { color:#16a34a; }
.ic-teal   { background:#f0fdfa; } .ic-teal   i { color:#0f766e; }
.ic-pink   { background:#fdf2f8; } .ic-pink   i { color:#db2777; }
.ic-cyan   { background:#ecfeff; } .ic-cyan   i { color:#0891b2; }
.ic-amber  { background:#fffbeb; } .ic-amber  i { color:#d97706; }
 
/* ── Footer bar ──────────────────────────────────────────── */
.ai-footer {
    height:          var(--nav-height);
    background:      #ffffff;
    border-top:      1px solid var(--card-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         0 20px;
    font-size:       .8125rem;
    color:           var(--text-muted);
    margin-top:      auto;
}
.ai-footer-demo {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    font-size:       .75rem;
    font-weight:     600;
    color:           var(--carr-blue);
    background:      #f0f4ff;
    padding:         2px 10px;
    border-radius:   20px;
}
.ai-footer-demo i { font-size: .7rem; }

 
/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .col-xxl-5ths {
        width: 20%;
        flex: 0 0 20%;
    }
    
}
@media (max-width: 1370px) {
    .ai-card-title{
        font-size: .855rem;
    }
}
/* ── Navbar compact: 992px–1199px ─────────────────────────*/
@media (min-width: 992px) and (max-width: 1199.98px) {

    .ai-navbar { padding: 0 12px; gap: 4px; }

    .ai-nav-links { gap: 0; }

    .ai-nav-links li a {
        padding:   5px 6px;
        font-size: .72rem;
        gap:       3px;
    }
    .ai-nav-links li a i { font-size: .8rem; }

    /* Scanner mai compact */
    .ai-btn-scanner { padding: 5px 9px; font-size: .75rem; }

    /* mai puțin spațiu în dreapta */
    .ai-nav-right { gap: 5px; }
}
@media (min-width: 1200px) {
    .ai-scanner-text { display: inline; }
}
@media (max-width: 991.98px) {
    .ai-nav-links   { display: none; }
    .ai-hamburger {
        display:     block;
        order:       1;        
        margin-left: 8px;     
    }
    .ai-nav-right {
        order:       2;       
    }    
 
    .ai-navbar > a svg { height: 26px; }
    .ai-navbar > a > div { width: 50px !important; }
    .ai-navbar > a > div > span:first-child {
        font-size:      20px !important;
        letter-spacing: 2px !important;
    }
    .ai-navbar > a > div > span:nth-of-type(2) {
        display: none !important;
    }
    .ai-mobile-menu {
        position:    fixed;
        top:         var(--nav-height);
        left:        0; right: 0;
        background:  #ffffff;
        border-bottom: 1px solid var(--card-border);
        padding:     8px 12px 12px;
        z-index:     999;
        box-shadow:  0 4px 12px rgba(0,0,0,.08);
    }
    .ai-mobile-menu.open { display: block; }
 
    .ai-mobile-menu ul {
        list-style:  none;
        margin:      0; padding: 0;
    }
    .ai-mobile-menu ul li a {
        display:     flex;
        align-items: center;
        gap:         8px;
        padding:     10px 12px;
        border-radius: 8px;
        font-size:   .875rem;
        font-weight: 500;
        color:       var(--text-primary);
        text-decoration: none;
        transition:  background .15s;
    }
    .ai-mobile-menu ul li a:hover { background: #f3f4f6; }
    .ai-mobile-menu ul li a.active {
        background:  #f0f4ff;
        color:       var(--carr-blue);
        font-weight: 600;
    }
}
 
@media (max-width: 575.98px) {
    .ai-page-header  { padding: 20px 16px 12px; }
    .ai-cards-section{ padding: 0 16px 24px; }
    .ai-page-title   { font-size: 1.1rem; }
    .ai-navbar       { padding: 0 14px; }
    .ai-card-title   {font-size: .8125rem;}
}





/* ============================================================
   FLASH TOAST — top-center
   De adaugat in: components/css/assets-inventory.css
   ============================================================ */

.ai-toast-container {
    position:        fixed;
    top:             20px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         1100;
    min-width:       320px;
    max-width:       500px;
    width:           max-content;
}

.ai-toast {
    border:          none;
    border-radius:   10px;
    box-shadow:      0 8px 24px rgba(0,0,0,.18);
    opacity:         0;
    transition:      opacity .2s ease;
}
.ai-toast.show { opacity: 1; }

.ai-toast-body {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         13px 16px;
    font-family:     var(--font);
    font-size:       .875rem;
    font-weight:     500;
    color:           #fff;
    border-radius:   10px;
}
.ai-toast-body i:first-child {
    font-size:       1.1rem;
    flex-shrink:     0;
}
.ai-toast-body span {
    flex:            1;
    line-height:     1.4;
}
.ai-toast-body strong { font-weight: 700; }

.ai-toast-close {
    background:      none;
    border:          none;
    color:           rgba(255,255,255,.75);
    cursor:          pointer;
    padding:         0;
    font-size:       1rem;
    line-height:     1;
    flex-shrink:     0;
    transition:      color .15s;
}
.ai-toast-close:hover { color: #fff; }

/* Variante de culoare */
.ai-toast-success .ai-toast-body { background: #16a34a; }
.ai-toast-error   .ai-toast-body { background: #dc2626; }
.ai-toast-warning .ai-toast-body { background: #d97706; }
.ai-toast-info    .ai-toast-body { background: #2563eb; }

/* Mobile */
@media (max-width: 575.98px) {
    .ai-toast-container {
        min-width:   calc(100vw - 32px);
        max-width:   calc(100vw - 32px);
        left:        16px;
        transform:   none;
    }
}


/* ============================================================
   SHARED STYLES — used on ALL pages
   (badges, form controls, buttons, modals, back button)
   ============================================================ */

/* ── Badges ──────────────────────────────────────────────── */
.ai-badge {
    display:         inline-block;
    padding:         2px 8px;
    border-radius:   20px;
    font-size:       .7rem;
    font-weight:     600;
    white-space:     nowrap;
}
.ai-badge-success  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.ai-badge-danger   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.ai-badge-warning  { background: #fffbeb; color: #d97706; border: 1px solid #fed7aa; }
.ai-badge-blue     { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.ai-badge-muted    { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }

.ai-badge-info  { background: #f0fdfa; color: #0f766e; border: 1px solid #99f6e4; }
.ai-badge-ok    { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* ── Back button ─────────────────────────────────────────── */
.ai-btn-back {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         7px 14px;
    border:          1px solid var(--card-border);
    border-radius:   8px;
    background:      #fff;
    font-size:       .8125rem;
    font-weight:     600;
    color:           var(--text-primary);
    text-decoration: none;
    transition:      all .15s;
}
.ai-btn-back:hover {
    background:      #f3f4f6;
    color:           var(--text-primary);
    border-color:    #d1d5db;
}

/* ── Form labels, hints, req marker ──────────────────────── */
.ai-form-label {
    display:         block;
    font-size:       .8rem;
    font-weight:     600;
    color:           #9ca3af;   
    margin-bottom:   5px;
}

.req {
    color:           #dc2626;
    margin-left:     2px;
}

.ai-form-hint {
    display:         block;
    font-size:       .72rem;
    color:           var(--text-muted);
    margin-top:      3px;
}

/* ── Form controls (input, textarea, select) ─────────────── */
.ai-form-control {
    display:         block;
    width:           100%;
    height:          36px;
    padding:         0 10px;
    font-size:       .8375rem;
    font-family:     var(--font);
    color:           var(--text-primary);
    background:      #fff;
    border:          1px solid var(--card-border);
    border-radius:   7px;
    outline:         none;
    transition:      border-color .15s, box-shadow .15s;
    appearance:      none;
}
.ai-form-control:focus {
    border-color:    var(--carr-blue);
    box-shadow:      0 0 0 3px rgba(0,75,152,.1);
}
.ai-form-control:disabled {
    background:      #f9fafb;
    color:           #9ca3af;
    cursor:          not-allowed;
}
.ai-form-control.is-invalid {
    border-color:    #dc2626;
    box-shadow:      0 0 0 3px rgba(220,38,38,.1);
}

textarea.ai-form-control {
    height:          auto;
    padding:         8px 10px;
    resize:          vertical;
    line-height:     1.5;
}

select.ai-form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    padding-right:   30px;
    cursor:          pointer;
}

/* ── Modal styles ────────────────────────────────────────── */
.ai-modal {
    border-radius:   14px;
    border:          none;
    overflow:        hidden;
}
.ai-modal-header {
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         20px 20px 14px;
    border-bottom:   1px solid var(--card-border);
}
.ai-modal-icon-wrap {
    width:           44px;
    height:          44px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.ai-modal-icon-wrap.danger    { background: #fef2f2; }
.ai-modal-icon-wrap.danger i  { font-size: 1.3rem; color: #dc2626; }

.modal-title         { font-size: .9375rem; font-weight: 700; margin: 0 0 2px; }
.ai-modal-subtitle   { font-size: .75rem; color: var(--text-muted); margin: 0; }

.ai-modal-body {
    padding:         18px 20px;
    font-size:       .875rem;
    color:           var(--text-primary);
}
.ai-modal-body p     { margin: 0 0 12px; }

.ai-modal-asset-info {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 14px;
    background:      #f9fafb;
    border:          1px solid var(--card-border);
    border-radius:   8px;
    font-size:       .8125rem;
}

.ai-modal-footer {
    padding:         14px 20px;
    border-top:      1px solid var(--card-border);
    display:         flex;
    justify-content: flex-end;
    gap:             8px;
}

.ai-btn-cancel {
    padding:         7px 16px;
    border-radius:   8px;
    border:          1px solid var(--card-border);
    background:      #fff;
    font-size:       .8125rem;
    font-weight:     600;
    color:           var(--text-primary);
    cursor:          pointer;
    transition:      background .15s;
}
.ai-btn-cancel:hover { background: #f3f4f6; }

.ai-btn-danger {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         7px 16px;
    border-radius:   8px;
    border:          none;
    background:      #dc2626;
    color:           #fff;
    font-size:       .8125rem;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    transition:      background .15s;
}
.ai-btn-danger:hover { background: #b91c1c; color: #fff; }
.ai-btn-danger i     { font-size: .85rem; }

/* ── Save button ─────────────────────────────────────────── */
.ai-btn-save {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 22px;
    background:      var(--carr-blue);
    color:           #fff;
    border:          none;
    border-radius:   8px;
    font-size:       .875rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      background .15s, transform .1s;
}
.ai-btn-save:hover    { background: #003d7a; transform: translateY(-1px); }
.ai-btn-save:disabled { background: #9ca3af; cursor: not-allowed; transform: none; }
.ai-btn-save i        { font-size: 1rem; }

/* ── Execution / plan info bar ───────────────────────────── */
.ai-exec-plan-info {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px 20px;
    padding:         10px 14px;
    background:      #fafafa;
    border:          1px solid var(--card-border);
    border-radius:   8px;
    font-size:       .8125rem;
    color:           var(--text-primary);
}
.ai-exec-info-item {
    display:         flex;
    align-items:     center;
    gap:             5px;
}
.ai-exec-info-item i { color: #9ca3af; font-size: .85rem; }

/* ── Map (home) ─────────────────────────────────────────── */
.ai-map-section{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:0 24px 30px;
}

.ai-map-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px;                 
    box-shadow: var(--card-shadow);
    flex: 1;
    display: flex;
}
.ai-map-wrapper {
    position: relative;
    border-radius: 8px;          
    overflow: hidden;
    flex: 1;
}
#map{
    width:100%;
    height:100%;
    min-height:350px;
}

/* search box flotant peste hartă */
.ai-map-search {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    width: 280px;
    max-width: calc(100% - 24px);
}
.ai-map-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ai-map-search-inner input {
    border: none;
    outline: none;
    width: 100%;
    font-size: .8125rem;
    font-family: var(--font);
}
#searchResults {
    margin-top: 6px;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    max-height: 260px;
    overflow-y: auto;
    display: none;
}
.ai-map-search-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: .8125rem;
    border-bottom: 1px solid #f3f4f6;
}
.ai-map-search-item:last-child { border-bottom: none; }
.ai-map-search-item:hover { background: #f3f4f6; }

@media (max-width: 575.98px) {
    .ai-map-section { padding: 0 16px 16px; }
    #map { height: 320px; }
}

/* ============================================================
   MULTI-SELECT DROPDOWN 
   ============================================================ */

.ai-ms-wrap {
    position:        relative;
    flex-shrink:     0;
}

.ai-ms-trigger {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    height:          34px;
    padding:         0 10px;
    background:      #fff;
    border:          1px solid var(--card-border);
    border-radius:   7px;
    font-size:       .8125rem;
    font-weight:     500;
    color:           var(--text-primary);
    font-family:     var(--font);
    cursor:          pointer;
    white-space:     nowrap;
    transition:      all .15s;
}
.ai-ms-trigger > i:first-child  { font-size: .85rem; color: #9ca3af; }
.ai-ms-trigger .ai-ms-caret     { font-size: .7rem; color: #9ca3af; margin-left: 2px; transition: transform .2s; }
.ai-ms-wrap.open .ai-ms-caret   { transform: rotate(180deg); }

.ai-ms-trigger:hover,
.ai-ms-trigger.has-selection    {
    border-color:    var(--carr-blue);
    color:           var(--carr-blue);
}
.ai-ms-trigger.has-selection > i:first-child { color: var(--carr-blue); }

.ai-ms-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       18px;
    height:          18px;
    padding:         0 5px;
    background:      var(--carr-blue);
    color:           #fff;
    border-radius:   9px;
    font-size:       .7rem;
    font-weight:     700;
    line-height:     1;
}

.ai-ms-panel {
    display:         none;
    position:        absolute;
    top:             calc(100% + 4px);
    left:            0;
    min-width:       230px;
    background:      #fff;
    border:          1px solid var(--card-border);
    border-radius:   10px;
    box-shadow:      0 8px 24px rgba(0,0,0,.12);
    z-index:         500;
    overflow:        hidden;
}
.ai-ms-wrap.open .ai-ms-panel   { display: block; }

.ai-ms-panel-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 12px 8px;
    font-size:       .8125rem;
    font-weight:     700;
    color:           var(--text-primary);
    border-bottom:   1px solid #f3f4f6;
}

.ai-ms-search-box {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 10px;
    border-bottom:   1px solid #f3f4f6;
}
.ai-ms-search-box > i          { font-size: .8rem; color: #9ca3af; flex-shrink: 0; }
.ai-ms-search-input {
    flex:            1;
    border:          none;
    outline:         none;
    font-size:       .8rem;
    font-family:     var(--font);
    color:           var(--text-primary);
    background:      transparent;
}

.ai-ms-options {
    max-height:      210px;
    overflow-y:      auto;
    padding:         4px 0;
}
.ai-ms-option {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         6px 12px;
    cursor:          pointer;
    margin:          0;
    font-size:       .8125rem;
    font-weight:     400;
    color:           var(--text-primary);
    transition:      background .1s;
    user-select:     none;
}
.ai-ms-option:hover                   { background: #f3f4f6; }
.ai-ms-option input[type="checkbox"]  {
    width:           15px;
    height:          15px;
    cursor:          pointer;
    accent-color:    var(--carr-blue);
    flex-shrink:     0;
}

.ai-ms-footer {
    display:         flex;
    gap:             6px;
    padding:         8px 10px;
    border-top:      1px solid #f3f4f6;
    background:      #fafafa;
}
.ai-ms-btn-clear {
    flex:            1;
    height:          30px;
    border:          1px solid var(--card-border);
    border-radius:   6px;
    background:      #fff;
    font-size:       .8rem;
    font-weight:     600;
    color:           var(--text-muted);
    cursor:          pointer;
    font-family:     var(--font);
    transition:      all .15s;
}
.ai-ms-btn-clear:hover  { background: #f3f4f6; color: var(--text-primary); }
.ai-ms-btn-apply {
    flex:            2;
    height:          30px;
    border:          none;
    border-radius:   6px;
    background:      var(--carr-blue);
    font-size:       .8rem;
    font-weight:     600;
    color:           #fff;
    cursor:          pointer;
    font-family:     var(--font);
    transition:      background .15s;
}
.ai-ms-btn-apply:hover  { background: #003d7a; }

#storeMsHome .ai-ms-panel { left: auto; right: 0; min-width: 340px; }
#storeMsHome .ai-ms-option span { white-space: nowrap; }

@media (max-width: 767.98px) {
    .ai-ms-panel    { left: auto; right: 0; min-width: 200px; }
}