/* ==== css/01-core.css ==== */
/* === MABORESHO YA POS NA KIKAPU CHA MAUZO === */
#posCartItems {
    background: #ffffff;
    border-radius: 12px;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
}

/* Kadi ndogo ya bidhaa ndani ya Kikapu cha POS */
.pos-cart-item-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Vitufe vya Bidhaa za Haraka (Quick POS Buttons) */
.pos-quick-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
.pos-quick-btn:hover {
    background: #18A982;
    color: #ffffff;
    border-color: #18A982;
}

/* === NYONGEZA YA MAPAMBO YA SETUP WIZARD === */
.setup-wizard-step {
    animation: fadeIn 0.3s ease-in-out;
}

/* Hakikisha Modal ya Setup haikatwi chini */
#shopSetupModal .form-box {
    max-height: 85vh !important;
    overflow-y: auto !important;
    border-top: 8px solid #00509d;
}

/* Mapambo ya maelezo ya ziada ya duka (Suggestions) */
#onboardingSuggestedBox {
    background: #fffbeb;
    border: 1.5px dashed #d97706;
    border-radius: 12px;
    padding: 15px;
    font-size: 12px;
    margin-top: 15px;
}

/* === BOS SETUP OPTION CARDS (HIGH CONTRAST & SELECTION STATE) === */
.setup-option-card {
    background: #ffffff;
    border: 2px solid #0f172a; /* Mpaka mweusi imara na ulio wazi */
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: left;
    position: relative; /* Inaruhusu kuweka kibandiko cha Imechaguliwa */
}
.setup-option-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.setup-option-card.selected {
    border: 3.5px solid #00509d !important; /* Mpaka mnene wa rangi ya bluu imara */
    background: #f0f9ff !important;
    box-shadow: 0 4px 15px rgba(0, 80, 157, 0.25) !important;
}
/* Kibandiko cha juu kulia kionyeshe kuwa kadi imechaguliwa kwa herufi kubwa za uoni wa juu */
.setup-option-card.selected::after {
    content: "✓ IMECHAGULIWA";
    position: absolute;
    top: 10px;
    right: 15px;
    background: #18A982;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

        /* Master rule ya Plus Menu - inazuia kufunika Bottom Nav na inaruhusu kuteleza (Scrollable) */
#plusMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 62px) !important;
    background: rgba(0, 34, 68, 0.9);
    z-index: 14000 !important;
    display: none;
    flex-direction: column;
    justify-content: center; /* Inasogeza kadi katikati ya kioo vizuri */
    align-items: center;
    padding: 20px 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-sizing: border-box;
    overflow-y: auto; /* 🟢 MPYA: Inaruhusu kuteleza juu na chini kwenye simu */
    -webkit-overflow-scrolling: touch; /* Inafanya kuteleza kuwe laini kwenye iPhone */
}
.variant-chip {
    padding: 8px 15px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    background: white;
    transition: 0.2s;
}
.variant-chip.selected {
    border-color: #18A982;
    background: #e0f2fe;
    color: #03509d;
    box-shadow: 0 0 0 3px rgba(3, 80, 157, 0.1);
}

.form-box {
    display: none;
    z-index: 1000001 !important;
    background: white !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%; /* Inaruhusu nafasi ndogo kushoto na kulia kwenye simu */
    max-width: 450px;
    max-height: 85vh; /* Inazuia fomu kuzama chini ya kioo au kufunika upau wa chini */
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 24px;
    padding: 20px; /* Umbali wa ndani umepunguzwa ili fomu ienee vizuri */
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    -webkit-overflow-scrolling: touch;
}

#sellerForm {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100005 !important; /* Namba kubwa zaidi ili ikae juu ya blue */
    background: white;
    width: 95%;
    max-width: 450px;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
#sidebarMenuModal {
    justify-content: flex-start !important; /* Inasukuma menu upande wa kushoto */
}

.menu-item-new {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
        #categoryModal .overlay-menu { align-items: center; justify-content: center; }
#categoryModal > div {
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 25px;
    width: 95%;
    max-width: 450px;
}






/* Inazuia upau wa juu usivurugike unapoteleza (Scroll) */
.sticky-top-section {
    position: sticky;
    top: 0;
    z-index: 2050;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

/* Hii ilikuwa inakosekana kabisa, ndio inayoficha vitu mteja anapo-scroll chini */
.scroll-hidden {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    border: none !important;
}
/* Vibox vya hatua moja moja (Steps) */
.setup-step-box {
    display: none; /* Zote zinajificha kwa asili */
}

/* Hatua iliyo hai (Active) ndiyo pekee inatokea */
.setup-step-box.active {
    display: block !important;
}

.overlay-menu {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 34, 68, 0.95);
    z-index: 100000;
    display: none; /* Inajificha mpaka iitwe */
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}




@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}






/* 2. Style ya UZA (Dhahabu) - Ipo mda wote */
/* [BOTTOM NAV · SCROLL SLIDE · 2026-11-01]
   Upau wa chini unateleza chini unaposhuka, unarudi unapovuta juu (Facebook style).
   Tunatumia transform pekee: haibadilishi nafasi ya ukurasa, kwa hiyo hakuna
   kuruka kwa maudhui na hakuna kifungu cha maandishi kinachofunikwa. */
@media (max-width: 1024px) {
    .bottom-area-wrapper {
        transition: transform 220ms cubic-bezier(.22, .61, .36, 1);
        will-change: transform;
    }
    /* +18px = ziada ya kifuto cha "Uza" (margin-bottom:-8px) na kivuli cha juu */
    .bottom-area-wrapper.nav-slide-hidden {
        transform: translate3d(0, calc(100% + 18px), 0);
        pointer-events: none;
    }
    .bottom-area-wrapper.nav-slide-hidden .sell-action-fab,
    .bottom-area-wrapper.nav-slide-hidden .bottom-nav-main {
        pointer-events: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bottom-area-wrapper,
    .bottom-area-wrapper.nav-slide-hidden { transition: none; }
}

.sell-circle-glow {
    background: #18A982 !important;
    box-shadow: 0 7px 18px rgba(24,169,130,.28) !important;
}

/* Big Announcement Bar inapokuwa dharura */

/* WRAPPER KUU YA CHINI */
.bottom-area-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4000; /* CHINI ya modals zote (>=7000) — isifunike chat, maoni, cart n.k. */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* Inaruhusu kugusa bar iliyo chini */
}

/* 🌟 KITUFE CHA "UZA" - KIMEKAA JUU YA NAV BAR (KAMA TUFE) */
.sell-action-fab {
    pointer-events: auto !important;
    margin-bottom: -8px;
    z-index: 6000 !important; /* CHINI ya modali zote (>=7600) — kisifunike chat, cart, maoni n.k. */
    display: flex;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* Kitufe cha "+" kinafichwa kwenye kurasa zisizo za mbele (front) —
   nav tabs zinabaki. (setSellFab inaongeza/inaondoa hii class) */
.bottom-area-wrapper.fab-hidden .sell-action-fab {
    display: none !important;
}

.sell-circle-glow {
    width: 58px;
    height: 58px;
    background: #18A982; /* Primary SokoHai action */
    border-radius: 50%;
    border: 4px solid #ffffff; /* Border nyeupe inayoifanya ionekane imekaa juu */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Kivuli kikubwa chini kuonyesha kimeinuka (Floating effect) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sell-text-btn {
    font-size: 30px; /* Alama ya + kubwa na wazi */
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    display: block;
}

/* 📱 BOTTOM NAV BLOCK (BLOCK MOJA NYOOFU) */
.bottom-nav-main {
    pointer-events: auto;
    width: 100%;
    background: #ffffff;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    border-radius: 20px 20px 0 0; /* Pembe za juu tu zimeviringishwa */
}

.main-nav-icons {
    display: flex;
    height: 62px;
    align-items: center;
    justify-content: space-around; /* Inatandaza icons 5 kwa usawa */
    padding: 0 5px;
}

.nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: 0.3s;
}

.nav-tab.active {
    color: var(--gold);
    transform: translateY(-2px);
}

.nav-tab svg {
    width: 19px;
    height: 19px;
    margin-bottom: 4px;
}

.nav-tab span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;      /* Neno lisivunjike wima/kwa herufi */
    letter-spacing: 0.3px;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}


/* Kurekebisha muonekano wa Main Menu ya Plus iwe kama "Popup" yenye uwezo wa kuteleza (Scrollable) */
#mainMenu {
    width: 92% !important;
    margin-bottom: 10px;
    border-radius: 20px !important;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.3) !important;
    max-height: 80vh !important; /* 🟢 MPYA: Inazuia kadi isizidi urefu wa kioo cha simu */
    overflow-y: auto !important; /* 🟢 MPYA: Inaruhusu kuteleza ndani ya kadi yenyewe kuona chaguo za chini */
    -webkit-overflow-scrolling: touch;
}














    /* =========================================
   LIVE TRACKING PROGRESS BAR (●----->---○)
   ========================================= */
.tracker-wrap { position: relative; margin: 30px 0 15px; }
.tracker-line { position: absolute; top: 10px; left: 0; width: 100%; height: 4px; background: #cbd5e1; z-index: 1; border-radius: 2px; }
.tracker-fill { position: absolute; top: 10px; left: 0; height: 4px; background: var(--green); z-index: 1; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; }
.tracker-steps { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.t-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 25%; }
.t-dot { width: 24px; height: 24px; border-radius: 50%; background: white; border: 3px solid #94a3b8; box-sizing: border-box; transition: 0.3s; }
.t-step.done .t-dot { background: var(--green); border-color: var(--green); }
.t-step.active .t-dot { background: white; border-color: var(--primary-blue); box-shadow: 0 0 12px rgba(0, 80, 157, 0.4); animation: pulse 1.5s infinite; }
.t-step.error .t-dot { border-color: #ef4444; background: #fee2e2; }
.t-label { font-size: 13px; font-weight: 800; color: #0f172a; text-align: center; text-transform: uppercase; line-height: 1.1; margin-top: 4px; }
.t-step.done .t-label { color: var(--green); font-weight: 900; }
.t-step.active .t-label { color: var(--primary-blue); font-weight: 900; }
.t-step.error .t-label { color: #ef4444; font-weight: 900; }
    /* Inafanya vitu vya juu viteleze kwa ulaini.
       [FIX 2026-09] overflow:hidden IMEONDOLEWA kwenye .top-nav-row —
       ilikuwa inakata dropdown ya lugha (position:absolute) isionekane.
       Kuficha (scroll-hidden) sasa kunatumia overflow pekee wakati wa kujificha. */
.top-nav-row, .big-announcement, .filter-toggles {
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 150px; /* Urefu wa kawaida */
    opacity: 1;
}
.top-nav-row { overflow: visible; }
.big-announcement, .filter-toggles { overflow: hidden; }

/* Hii inalazimisha Search Bar na Big Announcement zionekane muda wote */
.search-nav-row {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 3000;
    background: white;
}

.big-announcement {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    background: #FFFFFF;
}

    /* CSS MPYA YA AUTH MODAL */
.auth-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Inatenganisha kila input na button kwa usawa */
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #94a3b8;
    font-size: 13px;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.divider:not(:empty)::before { margin-right: .5em; }
.divider:not(:empty)::after { margin-left: .5em; }

.google-btn {
    width: 100%;
    padding: 14px;
    background: white;
    color: #444;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 700;
    transition: 0.3s;
}

.google-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.link-btn {
    background: none;
    border: none;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: 0.3s;
    margin-top: 5px; /* Inatenganisha na input ya password */
}

.link-btn:hover {
    background: #e0f2fe; /* Rangi ya bluu hafifu kwa nyuma */
    color: var(--primary-dark);
    text-decoration: underline;
}

/* FIX YA INPUT KUTANUKA MNO KWENYE LOGIN */
.auth-form-wrap input {
    margin: 0 !important; /* Inazuia kugongana kwa margin na 'gap:12px' */
}

    /* =========================================
       1. GLOBAL VARIABLES & RESET
       ======================================== */
    :root {
        --primary-dark: #17604E;
        --primary-blue: #18A982;
        --green: #18A982;
        --terracotta: #BC4A3C;
      --danger-red: #ef4444; /* Kwa ajili ya Community Alert */
--trust-green: #059669; /* Kwa ajili ya Trust Score */
--business-purple: #8b5cf6; /* Kwa ajili ya Business OS */
        --gold: #D4AF37;
        --white: #ffffff;
        --grey: #f1f5f9;
        --dark-bg: #0f172a;
        --card-bg: #ffffff;
        --text-muted: #64748b;
    }

    * {
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--grey);
        padding-bottom: 220px;
        overflow-x: hidden;
    }
/* =========================================
   MARKET MODES NAVIGATION & BADGES
   ========================================= */
.market-modes-nav {
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    background: var(--white);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #f1f5f9;
    position: sticky;
    top: 60px; /* Inakaa chini ya search bar */
    z-index: 2040;
}
.market-modes-nav::-webkit-scrollbar { display: none; }

.mode-tab-btn {
    padding: 8px 16px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mode-tab-btn.active {
    background: var(--primary-dark);
    color: var(--gold);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(0, 34, 68, 0.2);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
    /* =========================================
       2. HEADER ROWS (TOP NAV & SEARCH NAV)
       ========================================= */

    .top-nav-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .top-nav-left {
        display: flex;
        align-items: center;
        gap: 9px; /* [NAV BALANCE 2026-09-17] distance sawa, si ya kubantia */
    }

    /* [NAV BALANCE 2026-09-17] Hamburger imefupishwa — ikoni ndogo, hit-area
       compact, rasimu isilete mwanya mkubwa kufikia logo */
    .menu-btn {
        font-size: 20px;
        color: var(--primary-dark);
        font-weight: 900;
        cursor: pointer;
        transition: 0.2s;
        line-height: 0;
        padding: 3px;
    }

    .menu-btn:hover {
        color: var(--gold);
    }

    /* [BRAND TEXT 2026-09-17] Wordmark TEXT kubwa inayoumbwa kimfumo
       (kama Amazon/noon) — haibiliki faili la logo, haifinywi. */
    .skh-brand-wordmark {
        font-size: 28px;
        font-weight: 800;
        font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; /* rounded kama logo ya asili */
        letter-spacing: -0.2px; /* herufi karibu kama logo */
        line-height: 1;
        white-space: nowrap;
        display: inline-flex;
        align-items: baseline;
        background: linear-gradient(100deg, #1f6faf 0%, #23917b 55%, #79bc41 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    /* 'a' ya logo = gari (cart icon) isimame kama herufi 'a'
       (class pekee — itumike pia kwenye splash .skh-bs-word & zote) */
    .skh-cart-a {
        display: inline-block;
        width: 0.82em;
        height: 0.82em;
        margin: 0 0.01em;
        vertical-align: -0.13em; /* magurudumu yakae kwenye baseline kama 'a' */
        flex: 0 0 auto;
        font-size: inherit;
    }
    .skh-cart-a svg { width: 100%; height: 100%; display: block; }
    .skh-brand-wordmark .skh-brand-i { font: inherit; letter-spacing: inherit; }
    /* fallback: browsers zisizoualia gradient-text zione rangi ya brand */
    @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
        .skh-brand-wordmark { color: #03509d; -webkit-text-fill-color: currentColor; }
    }
    /* Specificity: brand-text(16px) inavaliwa UPYA kwa wordmark (23px) — hii
       lazima halali hata kwa .modal h2 (25-typography!) ili zipote SHIDA. */
    .brand-text.skh-brand-wordmark { font-size: 28px !important; font-weight: 800; }
    /* [BRAND TEXT] simu ndogo: kubwa zaidi hata mbele — ushidi wa nafasi */
    @media (max-width: 380px) {
        .brand-text.skh-brand-wordmark { font-size: 23px !important; }
    }
    #welcomeModal h2.skh-brand-wordmark { font-size: 34px !important; font-weight: 800 !important; }

    .brand-text {
        font-size: 16px;
        font-weight: 900;
        color: var(--primary-dark);
        letter-spacing: 0.5px;
    }

    .top-nav-icons {
        display: flex;
        gap: 10px; /* [NAV BALANCE] distance moja kwa kila item */
        font-size: 19px;
        color: var(--primary-dark);
        align-items: center;
        cursor: pointer;
        flex-shrink: 0; /* Inazuia icons zisibanwe */
    }

    /* [NAV BALANCE] Kila ikoni iwe na kitengo CHA KUSAWA — hitbox ya 24px,
       kila rangi iwe ya kati ili hit-box spacing ziwakawwe sawasawa */
    .top-nav-icons span {
        transition: transform 0.2s, color 0.2s;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        min-height: 24px;
    }

    .top-nav-icons span:hover {
        color: var(--gold);
        transform: scale(1.1);
    }

    .badge {
        position: absolute;
        top: -6px;
        right: -8px;
        background: var(--terracotta);
        color: white;
        font-size: 12px;
        font-weight: bold;
        border-radius: 50%;
        padding: 2px 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }



    .search-nav-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 12px 15px 14px;
        background: var(--white);
        border-bottom: 2px solid var(--gold);
        transition: 0.3s;
        position: sticky;
    top: 0;
    z-index: 2050; /* Z-index kubwa kuliko bidhaa ili isifunikwe */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Kivuli */
    }

.user-dp-wrapper {
        position: relative;
        cursor: pointer;
        transition: 0.2s;
        flex-shrink: 0; /* Inazuia picha isikatwe */
    }
    .user-dp-wrapper:active {
        transform: scale(0.95);
    }

    .user-dp {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--primary-blue);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .search-wrap {
        position: relative;
        width: 75%;
        max-width: 280px;
    }

    .search-wrap input {
        width: 100%;
        height: 36px;
        border-radius: 18px;
        border: 1px solid #ccc;
        padding: 0 35px 0 15px;
        font-size: 13px;
        outline: none;
        background: #f8fafc;
        transition: all 0.3s ease;
    }

    .search-wrap input:focus {
        border-color: var(--primary-blue);
        background: #fff;
        box-shadow: 0 0 8px rgba(0,80,157,0.15);
    }

    .camera-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #666;
        cursor: pointer;
        transition: 0.2s;
    }

    .camera-icon:hover {
        color: var(--primary-blue);
    }

    /* =========================================
       3. ANNOUNCEMENT MARQUEE
       ========================================= */
    .big-announcement {
        background: #FFFFFF;
        color: #18352D;
        border: 1px solid #E5ECEC;
        padding: 12px 10px;
        text-align: center;
        border-radius: 12px;
        margin: 10px 15px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .big-announcement::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 12px;
        padding: 2px;
        background: linear-gradient(90deg, #eeAF37, #10b981, #00509d, #D4AF37);
       -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;
mask-composite: exclude;
        animation: borderGlow 4s linear infinite;
    }

    @keyframes borderGlow {
        0% { filter: hue-rotate(0deg); }
        100% { filter: hue-rotate(360deg); }
    }

    .marquee-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 900;
        color: #fff;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        animation: scrollText 20s linear infinite;
    }

    @keyframes scrollText {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }

/* =========================================
   4. NEW CATEGORY, SUBCATEGORY & FILTERS UI
   ========================================= */
.cat-trigger-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 12px 15px;
    margin: 10px 15px 0;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    font-weight: 900;
    color: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: 0.3s;
}
.cat-trigger-btn:active { transform: scale(0.98); }

@keyframes slideInFromRight {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.dynamic-sliders-container {
    padding: 0 15px 15px;
    display: none;
    flex-direction: column;
    gap: 12px;
}

.slide-row-wrap {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scrollbar-width: none;
    animation: slideInFromRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    padding-bottom: 5px;
    /* SCROLLING YA KITAALAMU: laini + inasimama vizuri kwenye kila chip */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.slide-row-wrap::-webkit-scrollbar { display: none; }

.subcat-chip {
    padding: 8px 16px;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #bae6fd;
    transition: 0.3s;
    scroll-snap-align: start;
    flex-shrink: 0;
}
.subcat-chip.active { background: #0284c7; color: white; box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3); }

.filter-chip {
    padding: 8px 16px;
    background: white;
    color: #475569;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
    scroll-snap-align: start;
    flex-shrink: 0;
}
.filter-chip:hover { border-color: var(--gold); color: var(--primary-dark); }
.filter-chip::after { content: '▾'; font-size: 14px; }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}
.cat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px 5px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}
.cat-box:active { transform: scale(0.95); background: #e0f2fe; border-color: var(--primary-blue); }
.cat-box .cat-icon { font-size: 32px; margin-bottom: 8px; }
.cat-box .cat-name { font-size: 13px; font-weight: 900; color: var(--primary-dark); line-height: 1.2; }


    /* =========================================
       5. BUYER FEED & SLIDERS
       ========================================= */
    .scroll-content {
        padding-top: 15px;
    }

    .strategy-row {
        margin-bottom: 25px;
        padding: 15px 15px 15px 20px;
        /* [DARK-BLUE FIX 2026-09] Msingi wa bluu nzito wa zamani umeondolewa —
           kadi nyepesi (.skh-section) ndiyo inayotumika sasa. */
        background: transparent;
        border-left: 4px solid var(--skh-primary, #1268A8);
        margin-right: 15px;
        border-radius: 0 20px 20px 0;
        box-shadow: none;
    }

    .strategy-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .strategy-header b {
        font-size: 14px;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .item-slider {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 10px;
        /* SCROLLING YA KITAALAMU */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .item-slider::-webkit-scrollbar {
        display: none;
    }
    .large-card {
    min-width: 150px;
    flex-shrink: 0; /* Hii inazuia kadi kusinyaa upande wa pembeni */
    height: 196px;
    background: white;
    border-radius: 14px;
    border: 1px solid #e6ecf2;
    display: flex;
    flex-direction: column;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,34,68,0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    scroll-snap-align: start;
}

/* Mtindo wa picha ndani ya kadi za slides ili isivuruge vipimo */
.card-img {
    width: 100%;
    height: 104px;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f7fa;
    flex-shrink: 0;
}

    .large-card:active {
        transform: scale(0.96);
    }

    .main-feed {
        padding: 0 15px;
    }

    .feed-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
    }

.feed-card-box {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e6ecf2;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 8px rgba(0,34,68,0.05); /* Kivuli hafifu kinavutia zaidi */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
    .feed-card-box:hover {
        box-shadow: 0 10px 20px rgba(0,34,68,0.12);
        transform: translateY(-3px);
    }

    .feed-card-box:active {
        transform: scale(0.97);
    }

    .feed-img-box {
        width: 100%;
        aspect-ratio: 1 / 1;                /* [STANDARD v1] square 1:1 */
        position: relative;
        background: #F7FAF9;                /* neutral-light */
        padding: 10px;                      /* picha isigonge kingo */
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .feed-img-box img {
        width: 100%;
        height: 100%;
        /* [PRODUCT CARD STANDARD v1] contain — bidhaa HAICROP/HAIKATWI.
           Mandhari neutral-light; picha yote inaonekana (maamuzi 3,4,6). */
        object-fit: contain;
        object-position: center;
        background: #f4f7fa;
        display: block;
        box-sizing: border-box;
        transition: opacity 0.3s, transform 0.35s ease;
    }

    .feed-img-box img:hover {
        transform: scale(1.05);
    }

    .boost-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: linear-gradient(45deg, #FFD700, #FDB931);
        color: #000;
        font-size: 12px;
        font-weight: 900;
        padding: 3px 8px;
        border-radius: 12px;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        gap: 3px;
    }

    @keyframes shimmer {
        0% { background-position: -200px 0; }
        100% { background-position: calc(200px + 100%) 0; }
    }

    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200px 100%;
        animation: shimmer 1.5s infinite;
    }

    .skeleton img {
        opacity: 0;
    }

    .feed-info-box {
        padding: 12px 10px;
        display: flex;
        flex-direction: column;
    }

    .feed-info-box b {
        font-size: 13px;
        color: var(--primary-dark);
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .feed-info-box .price {
        color: var(--terracotta);
        font-weight: 900;
        font-size: 15px;
    }

    .feed-info-box .stats-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6px;
        font-size: 12.5px;
        color: var(--text-muted);
    }

    .feed-info-box small.owner {
        color: var(--primary-blue);
        font-weight: 800;
        margin-top: 8px;
        font-size: 13px;
    }

    /* =========================================
       6. COMPREHENSIVE DASHBOARD STYLES (REAL)
       ========================================= */
    .dashboard-view {
        display: none;
        padding: 0 15px 30px;
    }













    .stars {
        color: #f59e0b;
        font-size: 20px;
        letter-spacing: 3px;
    }

    .timeline {
        border-left: 2px solid #e2e8f0;
        margin-left: 10px;
        padding-left: 20px;
        position: relative;
    }

    .timeline-item {
        position: relative;
        margin-bottom: 20px;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -27px;
        top: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary-blue);
        border: 3px solid white;
        box-shadow: 0 0 0 1px var(--primary-blue);
    }

    .timeline-time {
        font-size: 13px;
        color: #94a3b8;
        margin-bottom: 4px;
        display: block;
        font-weight: bold;
    }

    .timeline-content {
        background: #f8fafc;
        padding: 12px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        font-size: 13px;
        color: #334155;
        line-height: 1.5;
    }

    .timeline-content b {
        color: var(--primary-dark);
    }

    .section-title {
        font-size: 15px;
        color: var(--primary-dark);
        text-transform: uppercase;
        margin-bottom: 18px;
        border-left: 5px solid var(--gold);
        padding-left: 12px;
        font-weight: 900;
        letter-spacing: 0.5px;
    }

    .dash-item {
        display: flex;
        background: white;
        padding: 15px;
        border-radius: 14px;
        margin-bottom: 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
        align-items: center;
        border: 1px solid #f1f5f9;
        transition: 0.2s;
    }

    .dash-item:hover {
        border-color: var(--gold);
        box-shadow: 0 6px 15px rgba(212, 175, 55, 0.15);
    }

    .dash-item img {
        width: 65px;
        height: 65px;
        border-radius: 10px;
        object-fit: cover;
        margin-right: 15px;
        border: 1px solid #eee;
    }





    .metric {
        font-size: 13px;
        color: #64748b;
        background: #f8fafc;
        padding: 4px 8px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
        border: 1px solid #e2e8f0;
        font-weight: bold;
    }





    /* =========================================
       7. BOTTOM NAV & SUB NAV YA CHINI
       ========================================= */
    .sub-slider-nav {
        pointer-events: auto;
        display: flex;
        width: 100%;
        gap: 16px;
        overflow-x: auto;
        padding: 10px 15px;
        scrollbar-width: none;
        margin-bottom: 5px;
        background: linear-gradient(to top, rgba(241,245,249,1), rgba(241,245,249,0));
    }

    .sub-slider-nav::-webkit-scrollbar {
        display: none;
    }

    .sub-slider-nav::after {
        content: '';
        padding-right: 15px;
    }

/* REKEBISHO LA PLUS MENU (Ili lianzie juu ya Nav) */
#plusMenu {
    height: calc(100% - 62px) !important;
}

    .main-nav-icons {
        display: flex;
        height: 70px;
        align-items: center;
        justify-content: space-around;
        padding: 5px 10px 10px;
    }

    .nav-tab.active {
        color: var(--gold);
        transform: translateY(-3px);
    }


    /* =========================================
       8. MODALS & FORMS (OVERLAYS)
       ========================================= */


/* BOX LA FOMU (FORM CARD) */
.form-box {
    display: none;
    background: white;
    padding: 25px;
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    animation: popIn 0.3s ease-out;
}


#map {
    height: 500px;
    width: 100%;
    background: #e5e7eb;
}

#mapModal > div {
    height: 90vh !important;
    max-width: 600px !important;
    display: flex;
    flex-direction: column;
}
/* KIOO CHA RAMANI KIWE KIKUBWA */
#mapModal > div {
    height: 85vh !important;
    max-width: 600px !important;
}
    @keyframes popIn {
        0% { transform: scale(0.9); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }

    .menu-item {
        background: var(--white);
        width: 100%;
        max-width: 350px;
        padding: 20px;
        margin: 8px 0;
        border-radius: 16px;
        text-align: left;
        border-left: 8px solid var(--gold);
        cursor: pointer;
        transition: 0.2s;
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
    }

    .menu-item:active {
        transform: scale(0.96);
    }

    .menu-item b {
        display: block;
        color: var(--primary-dark);
        font-size: 16px;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .menu-item span {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.4;
    }


    .form-box h3 {
        color: var(--primary-dark);
        text-align: center;
        margin-top: 0;
        margin-bottom: 25px;
        font-size: 22px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 2px solid #f1f5f9;
        padding-bottom: 15px;
    }

    .form-box input,
    .form-box select,
    .form-box textarea {
        width: 100%;
        padding: 15px;
        margin: 10px 0;
        border-radius: 12px;
        border: 1px solid #cbd5e1;
        font-size: 14px;
        outline: none;
        transition: 0.3s;
        background: #f8fafc;
    }

    .form-box input:focus,
    .form-box select:focus,
    .form-box textarea:focus {
        border-color: var(--primary-blue);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(0,80,157,0.1);
    }

    .form-box textarea {
        resize: vertical;
        min-height: 100px;
    }

    .form-box label {
        font-size: 13px;
        color: var(--primary-dark);
        display: block;
        margin: 15px 0 5px;
        font-weight: bold;
    }

    .form-box button[type="submit"] {
        width: 100%;
        padding: 16px;
        color: white;
        border: none;
        border-radius: 14px;
        font-weight: 900;
        font-size: 16px;
        margin-top: 20px;
        cursor: pointer;
        transition: 0.3s;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .form-box button[type="submit"]:active {
        transform: scale(0.98);
    }
    /* Kuzuia Double Click na Kuonyesha Inapakia (Loading State) */
    button:disabled, .form-box button[type="submit"]:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        transform: none !important;
        background: #94a3b8 !important;
        box-shadow: none !important;
    }

    .form-box .btn-close {
        width: 100%;
        padding: 15px;
        background: #e2e8f0;
        color: #334155;
        border: none;
        border-radius: 14px;
        margin-top: 12px;
        cursor: pointer;
        font-weight: bold;
        transition: 0.2s;
    }

    .form-box .btn-close:hover {
        background: #cbd5e1;
    }

    /* =========================================
       9. CUSTOM MODALS & INTERACTIONS UI
       ========================================= */
    .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .list-item img {
        width: 55px;
        height: 55px;
        border-radius: 10px;
        object-fit: cover;
        margin-right: 15px;
        border: 1px solid #e2e8f0;
    }

    .list-info {
        flex: 1;
    }

    .list-info b {
        display: block;
        font-size: 14px;
        color: var(--primary-dark);
        margin-bottom: 4px;
    }

    .list-info span {
        font-size: 13px;
        color: var(--terracotta);
        font-weight: 900;
    }

    .chat-bubble {
        max-width: 78%;
        padding: 8px 12px;
        border-radius: 8px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.4;
        word-wrap: break-word;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }

    .chat-bubble.me {
        background: #DCF8C6;
        color: #111b21;
        align-self: flex-end;
    }

    .chat-bubble.them {
        background: #ffffff;
        color: #111b21;
        align-self: flex-start;
    }

    .action-btn {
        flex: 1;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        font-weight: bold;
        color: var(--primary-dark);
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .action-btn:hover {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

    .action-btn:active {
        transform: translateY(0);
    }

    .action-btn.liked {
        color: #ef4444;
        background: #fef2f2;
        border-color: #fecaca;
    }

    .comments-section {
        background: #f8fafc;
        border-radius: 16px;
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
    }

    .comment-box {
        background: white;
        padding: 12px;
        border-radius: 10px;
        margin-bottom: 10px;
        font-size: 13px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .comment-box b {
        color: var(--primary-dark);
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
    }

    .comment-box span {
        font-size: 12.5px;
        color: #94a3b8;
        float: right;
    }

    .follow-btn {
        padding: 8px 18px;
        font-size: 12px;
        border-radius: 20px;
        font-weight: 900;
        cursor: pointer;
        border: none;
        transition: 0.3s;
        display: flex;
        align-items: center;
        gap: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .btn-not-following {
        background: var(--primary-blue);
        color: white;
    }

    .btn-not-following:hover {
        background: var(--primary-dark);
    }

    .btn-following {
        background: #e2e8f0;
        color: #334155;
    }

    .btn-following:hover {
        background: #cbd5e1;
        color: #ef4444;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

   /* ====================================================
   FIX KWA AJILI YA FOMU NDEFU KUKATWA / KUFICHWA CHINI
   ==================================================== */


/* Tunailinda Product Modal ibaki chini na isiharibiwe na mabadiliko haya */
#productModal {
    justify-content: flex-end !important;
}

/* Inahakikisha kioo cha bidhaa hakikatwi upande wa chini */
#productModal > div {
    margin: 0 auto !important;
    max-height: 90vh !important; /* Inapunguza urefu kidogo ili ionekane yote */
    overflow-y: auto !important; /* Inaruhusu ku-scroll ndani ya fomu */
    -webkit-overflow-scrolling: touch;
}


/* =========================================
   MFUMO WA KUTOA NYOTA (RATING STARS)
   ========================================= */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 8px;
    margin: 15px 0;
}
.star-rating input { display: none; }
.star-rating label {
    font-size: 45px;
    color: #cbd5e1;
    cursor: pointer;
    transition: 0.2s;
}
/* Hii inafanya nyota ziwake rangi ya dhahabu ukibofya */
.star-rating input:checked ~ label { color: #f59e0b; }
.star-rating label:hover,
.star-rating label:hover ~ label { color: #fbbf24; }






   /* realistic map view */




.nav-tab svg { width: 19px; height: 19px; margin-bottom: 4px; }
.nav-tab span { font-size: 12px; font-weight: 900; text-transform: uppercase; }


/* HUU MCHEZO WA KUTIKISIKA KIDOGO UKIGUSA */
.sell-circle-glow:active {
    transform: scale(0.9) translateY(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* Kakijumbe ka FOMO (Social Proof) */
#fomoToast {
    position: fixed;
    bottom: 110px;
    left: 20px;
    background: rgba(0, 34, 68, 0.9);
    color: white;
    padding: 12px 18px;
    border-radius: 15px;
    font-size: 12px;
    z-index: 6500; /* CHINI ya modali (>=7600) — isifunike sanduku la kuandika chat */
    display: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-left: 5px solid var(--gold);
    animation: fomoSlide 0.5s ease-out;
}

@keyframes fomoSlide {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.sw-l {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    margin-top: 8px;
    cursor: pointer;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
/* SOKOHAI PREMIUM LOGISTICS CARDS & BADGES */
.cargo-card-pro {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cargo-card-pro:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--gold);
}



/* =====================================================================
   MABORESHO YA CSS KWA AJILI YA CONTROL TOWER DASHBOARD (COCKPIT LAYOUT)
   ===================================================================== */
.control-tower-wrapper {
    display: flex;
    min-height: 100vh;
    height: auto !important; /* Huruhusu urefu kuongezeka kwa kuteleza */
    background: #f1f5f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    overflow-y: visible !important; /* Huruhusu scrolling nyoofu kwenda chini */
}

#dashboardViews {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
}

.dashboard-row-block {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 18px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    width: 100%;
}

/* Sidebar ya Kushoto ya Dashboard */
.ct-sidebar {
    width: 260px;
    background: #ffffff;
    color: #18352D;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ct-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E5ECEC;
    padding-bottom: 15px;
    text-align: left;
}

.ct-sidebar-brand-text h3 {
    margin: 0;
    font-size: 18px;
    color: #17604E;
    font-weight: 900;
}

.ct-sidebar-brand-text span {
    font-size: 13px;
    color: #65757A;
}

.ct-sidebar-group-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
    text-align: left;
}

.ct-sidebar-menu-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #65757A;
    padding: 12px 15px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: 0.2s ease-in-out;
}

.ct-sidebar-menu-btn:hover, .ct-sidebar-menu-btn.active {
    background: #F1F8F5;
    color: #17604E;
}

.ct-sidebar-menu-btn.active {
    border-color: #CCEBDD;
    border-left: 4px solid #18A982;
}

/* Sehemu Kuu ya Maudhui (Cockpit Workspace) */
.ct-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    min-width: 0; /* Inazuia kufurika upande wa pembeni */
    box-sizing: border-box;
}

.ct-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 15px 25px;
    border-bottom: 1px solid #e2e8f0;
}

.ct-header-search {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 20px;
    padding: 6px 15px;
    width: 280px;
}

.ct-header-search input {
    border: none;
    background: transparent;
    outline: none;
    margin-left: 8px;
    width: 100%;
    font-size: 13px;
}

.ct-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ct-pos-btn {
    background: var(--green, #10b981);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
}

.ct-pos-btn:hover {
    opacity: 0.9;
}



.ct-workspace {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}





/* Split Layout */
.ct-dashboard-layout {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 20px;
}

.ct-chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* Cards na Chati */
.ct-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
}

/* Tables Custom Styling */
.ct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ct-table th {
    text-align: left;
    color: #64748b;
    padding: 8px 5px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}

.ct-table td {
    padding: 10px 5px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    text-align: left;
}

/* Alerts List */
.ct-alert-item {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    text-align: left;
}

.ct-alert-icon {
    font-size: 20px;
    background: #fee2e2;
    color: #ef4444;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-alert-content b {
    display: block;
    font-size: 12px;
    color: #0f172a;
}

.ct-alert-content span {
    font-size: 13px;
    color: #64748b;
}


/* Staili mpya na nadhifu ya Kadi za Bidhaa za Stoo kuzuia mbanano */
.ct-inventory-card {
    padding: 15px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    margin-bottom: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    transition: 0.2s;
    text-align: left;
    width: 100%;
}
.ct-inventory-card.low-stock {
    border-color: #fecaca;
    background: #fff5f5;
}
/* === SOKOHAI COMMAND COCKPIT GRAPHICS ENGINE === */
.control-tower-wrapper {
    display: flex;
    min-height: 100vh;
    height: auto !important; /* Inalazimisha kurasa ku-scroll vizuri chini bila kukatika */
    background: #f1f5f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    overflow-y: visible !important;
}

#dashboardViews {
    overflow-y: visible !important;
    height: auto !important;
}

.ct-dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-row-block {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 18px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    width: 100%;
}

/* Media Query kwa ajili ya Simu/Tablets - Sidebar slide-out drawer */
@media (max-width: 900px) {

    .ct-sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        height: 100vh;
        z-index: 999999;
        transition: 0.3s ease-in-out;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }
    .ct-sidebar.active {
        left: 0 !important;
    }
    .control-tower-wrapper {
        flex-direction: row !important;
    }
    .ct-main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .ct-dashboard-layout {
        grid-template-columns: 1fr;
    }
}

/* Kuzuia ukurasa mzima usivurugike kwa upana kwenye simu (Horizontal Scroll Prevention) */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    scroll-behavior: smooth; /* Scrolling laini ya kitaalamu kwenye ukurasa mzima */
}

/* Horizontal scrollers zote ziwe laini (iOS momentum) */
.item-slider, .slide-row-wrap, .market-modes-nav, .service-modes-nav, .delivery-modes-nav, .sub-slider-nav {
    -webkit-overflow-scrolling: touch;
}

/* Sheria maalum za uimarishaji wa muonekano kwenye Simu na Tablets */
@media (max-width: 900px) {
    .ct-sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        height: 100vh;
        z-index: 999999 !important;
        transition: 0.3s ease-in-out;
        box-shadow: 5px 0 15px rgba(0,0,0,0.15);
        overflow-y: auto !important; /* Inaruhusu ku-scroll ndani ya sidebar yenyewe */
    }
    .ct-sidebar.active {
        left: 0 !important;
    }
}

@media (max-width: 768px) {
    /* KPI Cards za juu: Moja au Mbili kwa mstari kulingana na nafasi bila kubana maandishi */


    /* Chati na mpangilio wa dashibodi hushuka chini kuwa safu moja nyoofu */
    .ct-dashboard-layout, .ct-chart-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .ct-workspace {
        padding: 12px !important;
        gap: 15px !important;
    }



    .ct-header-bar {
        padding: 10px 12px !important;
    }

    .ct-header-search {
        width: 100% !important;
        max-width: 160px !important;
    }

    .ct-inventory-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

}

@media (max-width: 480px) {

}


/* === SOKOPAY TRUST DASHBOARD COMPONENTS & RESPONSIVE STYLES === */
#sokopayForm {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kuzuia fomu kutosoma urefu vizuri ikifunguliwa kama Dashboard */
#sokopayForm.form-box {
    max-height: 90vh !important;
    overflow-y: hidden !important; /* Tutatumia scrolling za ndani ya layout */
}
/* === SOKOPAY TRUST DASHBOARD COMPONENTS & RESPONSIVE STYLES === */
#sokopayForm {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
    border-radius: 0px !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* SokoPay Sidebar — white-first shared payment navigation */
.sp-sidebar {
    width: 260px;
    background: #ffffff;
    color: #18352D;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    box-sizing: border-box;
    border-right: 1px solid #E5ECEC;
    height: 100%;
}

.sp-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-left: 10px;
}

.sp-brand-logo {
    width: 32px;
    height: 32px;
    background: #18A982;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: white;
    font-size: 18px;
}

.sp-brand-name {
    font-size: 18px;
    font-weight: 900;
    color: #17604E;
    letter-spacing: 0.5px;
}

.sp-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    overflow-y: auto;
    text-align: left;
    padding-right: 5px;
}

.sp-menu-heading {
    font-size: 12px;
    font-weight: 800;
    color: #7B8D87;
    text-transform: uppercase;
    margin: 15px 0 5px 12px;
    letter-spacing: 0.8px;
    display: block;
}

.sp-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: #65757A;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.sp-sidebar-link:hover {
    background: #F1F8F5;
    color: #17604E;
}

.sp-sidebar-link.active {
    background: #EAF8F2;
    color: #17604E;
    box-shadow: inset 3px 0 0 #18A982;
}

.sp-sidebar-link svg {
    width: 18px;
    height: 18px;
    color: currentColor;
    flex-shrink: 0;
}

.sp-badge-count.danger {
    background: #ef4444;
}

/* Bottom Profile Card and Support Link Style */
.sp-bottom-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 15px;
    margin-top: 10px;
}

.sp-profile-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: left;
}

.sp-profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sp-profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.sp-profile-details {
    min-width: 0;
}

.sp-profile-name {
    font-size: 12px;
    font-weight: 700;
    color: white;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-profile-verified {
    font-size: 12px;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: bold;
}

.sp-toggle-btn.active {
    background: #18A982;
    color: white;
}

/* === SOKOPAY STAGE 2: WORKSPACE HEADER & RIGHT PANEL === */
.sp-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 15px;
    margin-bottom: 25px;
    flex-shrink: 0;
}

.sp-header-left {
    text-align: left;
}

.sp-header-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
}

.sp-header-subtitle {
    margin: 4px 0 0;
    color: #64748B;
    font-size: 12px;
}

.sp-header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-search-box {
    display: flex;
    align-items: center;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 6px 12px;
    width: 280px;
    border: 1px solid transparent;
    transition: 0.2s;
    box-sizing: border-box;
}

.sp-search-box:focus-within {
    border-color: #18A982;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 80, 157, 0.08);
}

.sp-search-input {
    border: none;
    background: transparent;
    outline: none;
    margin-left: 8px;
    font-size: 12px;
    color: #334155;
    width: 100%;
}

.sp-search-shortcut {
    font-size: 12px;
    font-weight: bold;
    color: #64748B;
    background: #E2E8F0;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

.sp-header-btn {
    background: transparent;
    border: none;
    color: #475569;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    transition: 0.15s;
}

.sp-header-btn:hover {
    background: #F1F5F9;
    color: #00509d;
}

.sp-header-btn svg {
    width: 18px;
    height: 18px;
}

.sp-header-btn .badge-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 1.5px solid white;
}

.sp-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #E2E8F0;
    cursor: pointer;
}

/* Gridi na Muonekano Mpya wa KPI Cards */
.sp-kpi-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

/* Right Panel Elements (Live Tracking Feed & Quick Actions Grid) */
.sp-right-panel-modern {
    width: 320px;
    background: #ffffff;
    border-left: 1px solid #E2E8F0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
}

.sp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sp-section-title-tag {
    font-size: 12px;
    font-weight: 900;
    color: #0F172A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-section-action-link {
    font-size: 13px;
    font-weight: bold;
    color: #00509d;
    text-decoration: none;
}

.sp-tracking-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sp-tracking-card-item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    border-left: 2px solid #E2E8F0;
    margin-left: 10px;
    padding-left: 16px;
    position: relative;
}

.sp-tracking-card-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.sp-tracking-dot {
    position: absolute;
    left: -11px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
}

.sp-tracking-info-box {
    flex-grow: 1;
    text-align: left;
}

.sp-tracking-info-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.sp-tracking-code {
    font-size: 13px;
    font-weight: bold;
    color: #0F172A;
}

.sp-tracking-status {
    font-size: 12.5px;
    font-weight: bold;
    text-transform: capitalize;
}

.sp-tracking-desc {
    font-size: 13px;
    color: #64748B;
    margin-top: 2px;
}

.sp-tracking-time-offset {
    font-size: 12.5px;
    color: #94A3B8;
    margin-top: 4px;
    display: block;
}

/* Quick Actions Button Grid */
.sp-quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
    border: none;
    text-transform: uppercase;
    text-align: center;
}

.sp-quick-action-btn:active {
    transform: scale(0.96);
}

/* Wallet Summary Legend with colored indicator dots */
.sp-legend-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.sp-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: bold;
    color: #475569;
}

.sp-legend-tag {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-legend-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sp-legend-amount-bold {
    color: #0F172A;
    font-weight: 800;
}

.sp-step-node.active .sp-step-circle {
    background: #10B981;
    border-color: #10B981;
}

.sp-step-node.active .sp-step-circle-check-icon {
    display: block;
}

.sp-step-node.active .sp-step-label {
    color: #0F172A;
}



/* Custom Table premium styling */
.sp-premium-table-wrap {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    margin-top: 5px;
}

.sp-contracts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sp-contracts-table th {
    text-align: left;
    color: #64748B;
    padding: 10px 8px;
    border-bottom: 1.5px solid #E2E8F0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.sp-contracts-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
    font-weight: 600;
}

.sp-contracts-table tbody tr:last-child td {
    border-bottom: none;
}

.sp-table-badge.progress { background: #EFF6FF; color: #3B82F6; }
.sp-table-badge.action { background: #FFFBEB; color: #D97706; }
.sp-table-badge.active { background: #ECFDF5; color: #10B981; }
.sp-table-badge.transit { background: #EFF6FF; color: #3B82F6; }
.sp-table-badge.pending { background: #FFFBEB; color: #D97706; }



.sp-support-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    padding: 5px 10px;
    font-weight: 600;
    transition: 0.2s;
}

.sp-support-link:hover {
    color: white;
}

/* === SOKOPAY RESPONSIVE GRID LAYOUT (DESKTOP & MOBILE) === */

/* Wrapper Kuu inayofunganya mfumo mzima */
.app-layout-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Eneo la Maudhui ya Kati (Fluid Content) */
.app-content-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f1f5f9;
}

/* --- SHERIA ZA RESPONSIVE (MEDIA QUERIES) --- */

/* 💻 LAPTOP / DESKTOP (Skrini kubwa zaidi ya 1024px) */
@media (min-width: 1025px) {
    .app-content-main {
        margin-left: 0 !important; /* UI asilia inachukua kioo kizima */
    }
    .bottom-area-wrapper {
        display: flex !important; /* Bottom Nav inaonekana muda wote */
    }

}

/* 📱 SIMU / TABLET (Skrini ndogo chini ya 1024px) */
@media (max-width: 1024px) {
    .bottom-area-wrapper {
        display: flex !important;
    }


    /* SokoPay Main Layout Responsive Fixes */
    #sokopayMainLayout {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    #sokopayLeftSidebar {
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    #sokopayRightSidebar {
        width: 100% !important;
        height: auto !important;
        border-left: none !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    #sokopayWorkspace {
        width: 100% !important;
        padding: 15px !important;
    }
    .sp-kpi-grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .sp-header-controls .sp-search-box {
        width: 100% !important;
        max-width: 200px !important;
    }
}

@media (max-width: 480px) {
    .sp-kpi-grid-premium {
        grid-template-columns: 1fr !important;
    }
}

/* === SOKOPAY KPI CARDS & WIDGETS === */
.sp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.sp-kpi-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 15px;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.sp-kpi-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.sp-kpi-value {
    font-size: 18px;
    font-weight: 900;
    color: #000000;
    display: block;
}

.sp-kpi-sub {
    font-size: 12.5px;
    font-weight: 700;
    margin-top: 5px;
    display: block;
}

/* Gridi kuu ya Dashboard: Kati (Nguzo Mbili) na Kulia (Wallet summary) */
.sp-dashboard-grid {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 20px;
}

.sp-widget-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    box-sizing: border-box;
}

.sp-widget-title {
    font-size: 12px;
    font-weight: 900;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 4px solid #00509d;
    padding-left: 10px;
    margin-bottom: 15px;
    display: block;
    text-align: left;
}

/* Gridi ya Active Contracts Overview */
.sp-overview-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.sp-overview-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 5px;
    text-align: center;
}

.sp-overview-box span {
    font-size: 20px;
}

.sp-overview-box b {
    font-size: 13px;
    display: block;
    margin-top: 4px;
}

.sp-overview-box small {
    font-size: 12px;
    color: #64748b;
    display: block;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1024px) {
    .sp-kpi-grid {
        grid-template-columns: repeat(2, 1fr); /* Kwenye simu, kadi zinakaa mbili kwa kila mstari */
    }
    .sp-dashboard-grid {
        grid-template-columns: 1fr; /* Nguzo ya kulia inashuka chini ya uwanja wa kati kwenye simu */
    }
    .sp-overview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .sp-kpi-grid {
        grid-template-columns: 1fr; /* Simu ndogo sana kadi zinajipanga moja moja */
    }
    .sp-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 📱 SIMU / MOBILE (Skrini ndogo chini ya 1024px) */
@media (max-width: 1024px) {
    .app-content-main {
        margin-left: 0 !important; /* Hakuna margin upande wa pembeni kwenye simu */
    }
    /* Hakikisha upau wa chini unakuwepo kwa watumiaji wa simu */
    .bottom-area-wrapper {
        display: flex !important;
    }
    /* Hamburger menu ya juu inakuwa wazi */

}
/* === SOKOPAY PRODUCTS LIFE-CYCLE STYLES === */


.sp-tab-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: #475569;
    font-weight: bold;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    white-space: nowrap;
}

.sp-tab-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    color: #0f172a;
}

.sp-tab-btn.active {
    background: #ffffff !important;
    color: #00509d !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Timeline ya Safari na Mikataba ya SokoPay */
.sp-timeline {
    position: relative;
    border-left: 2px solid #cbd5e1;
    padding-left: 20px;
    margin-left: 10px;
    text-align: left;
}

.sp-timeline-item {
    position: relative;
    margin-bottom: 15px;
}

.sp-timeline-item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 2px solid #ffffff;
}

.sp-timeline-item.active::before {
    background: #10b981; /* Kijani ya SokoPay */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.sp-timeline-title {
    font-size: 12px;
    font-weight: bold;
    color: #0f172a;
}

.sp-timeline-desc {
    font-size: 12.5px;
    color: #64748b;
}

/* Vyeti na Nyaraka za Kifedha (Invoice/Receipts) */
.sp-doc-card {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* [PHASE 5.2-UX] Sajili Mwanachama (Plus Menu) — wakala approved pekee.
   Default: HAIIONEKANI. Interval ya app (agent check) inaweka display:flex
   kwa mtumiaji aliye approved agent — inline style inashinda hii rule. */
/* [PHASE 6.0] ionekane SIKU ZOTE (agizo la mmiliki): kubofya bila uidhinishi
   kunafungua fomu ya KUJIUNGE KUWA WAKALA — si kifo mguu. */
.agent-only-menu {
    display: flex;
}


/* ===== [PHASE 2.2 UI] Usimamizi pill — kwenye skrini ndogo neno HULIFICHI tena
   (agizo la mmiliki 2026-09): linabanwa tu, laonekane kila simu. ===== */
@media (max-width: 380px) {
    .usimamizi-btn { padding: 6px 8px !important; }
}