/* ================================================================
 * 57-home-brand-header.css — [HOME BRAND + HEADER 2026-11-04 · R3]
 * ----------------------------------------------------------------
 * R2: inafuata design ya mtumiaji (mockup) — logo yake halisi
 * (assets/img/sokohai-logo.png, background imetolewa), utepe wa
 * green+gold juu kushoto/nyuma, divider za dhahabu, nav yenye
 * pill ya green, search yenye mstari wa dhahabu + kitufe cha green,
 * na kadi za kategoria zenye picha halisi.
 *
 * Rangi ZOTE zinatoka css/00-tokens.css:
 *   green  #18A982  (brand secondary / nav active / search action)
 *   blue   --sokohai-blue #4D91AA  (BLUE YA MFUMO — "Soko")
 *   gold   #D8B83A  (mapambo pekee)
 * Hakuna rangi mpya iliyobuniwa. Ni nyongeza — hakuna CSS
 * iliyoandikwa upya wala module iliyogusiwa.
 * ================================================================ */

:root {
    --skh-brand-blue: var(--sokohai-blue);   /* BLUE YA MFUMO (00-tokens.css) */
    --skh-brand-blue-2: var(--sokohai-blue);
    --skh-gold-a: #D8B83A;
    --skh-gold-b: #F0D98A;
    --skh-header-line: rgba(216, 184, 58, 0.34);
    --skh-ink: #0F2C46;          /* navy ya ikoni/maandishi ya header */
}

/* ================================================================
 * 0. BACKGROUND/MAPAMBO YA JUU (utepe wa green + gold — kama design)
 *    Utepe unakaa kwenye "band" ya juu; content inaanza chini yake.
 * ================================================================ */
.sticky-top-section {
    position: relative;
    isolation: isolate;
    background: #fff;
    padding-top: 34px;      /* band ya mapambo (content ianze CHINI yake) */
}

/* utepe wa juu-kushoto */
.sticky-top-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: min(260px, 32vw);
    height: 40px;
    pointer-events: none;
    z-index: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 52' preserveAspectRatio='none'><path d='M0 0 H340 C250 6 150 26 0 52 Z' fill='%2318A982'/><path d='M0 52 C150 26 250 6 340 0' stroke='%23F2DCA0' stroke-width='4' fill='none'/><path d='M0 56 C152 30 252 10 344 4' stroke='%23D8B83A' stroke-width='2' fill='none'/></svg>") no-repeat 0 0 / 100% 100%;
}

/* utepe wa juu-kulia */
.sticky-top-section::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: min(240px, 28vw);
    height: 46px;
    pointer-events: none;
    z-index: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 64' preserveAspectRatio='none'><path d='M300 0 H0 C110 4 210 24 300 64 Z' fill='%2318A982'/><path d='M0 0 C110 4 210 24 300 64' stroke='%23F2DCA0' stroke-width='5' fill='none'/><path d='M-4 -6 C108 -2 208 18 300 58' stroke='%23D8B83A' stroke-width='2' fill='none'/></svg>") no-repeat 0 0 / 100% 100%;
}

/* ================================================================
 * 1. BRAND: logo + divider ya dhahabu + "SokoHai" + tao
 * ================================================================ */
.top-nav-row .skh-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

.top-nav-row .skh-brand-logo {
    display: block;
    width: auto;
    height: 64px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* divider ya dhahabu kati ya logo na jina */
.top-nav-row .skh-brand-div {
    width: 2px;
    height: 50px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(216,184,58,.15), var(--skh-gold-a) 45%, rgba(216,184,58,.15));
    flex: 0 0 auto;
}

.top-nav-row .skh-brand-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    line-height: 1;
    min-width: 0;
}

.top-nav-row .skh-brand-word {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    font-family: var(--skh-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1.1px;
    white-space: nowrap;
    font-feature-settings: "ss01" 0, "cv05" 1, "cv11" 1;
}

.top-nav-row .skh-brand-word b { font-weight: 800; }
.top-nav-row .skh-brand-soko { color: var(--skh-brand-blue); }
.top-nav-row .skh-brand-hai  { color: var(--sokohai-green); }

/* tao la dhahabu chini ya jina */
.top-nav-row .skh-brand-arc {
    display: block;
    height: 7px;
    margin-top: 2px;
    border-bottom: 3px solid var(--skh-gold-a);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    opacity: .95;
}

.top-nav-row .brand-text { display: none !important; }

/* ================================================================
 * 2. KAZI BUTTON + SHEET  (nav ya juu imeondolewa — nav ipo bottom nav)
 * ================================================================ */
.top-nav-row .top-nav-icons {
    order: 3;
    margin-left: auto;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--skh-ink);
    position: relative;
    z-index: 2;
}

/* ---------- vitufe vya header (icon pekee) ---------- */
.top-nav-row .skh-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--sokohai-border);
    border-radius: 50%;
    background: #fff;
    color: var(--skh-ink);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.top-nav-row .skh-icon-btn:hover {
    background: var(--sokohai-green-soft);
    border-color: rgba(24, 169, 130, .45);
    color: var(--sokohai-green-dark);
    box-shadow: 0 3px 10px rgba(24, 169, 130, .14);
}

.top-nav-row .skh-icon-btn:focus-visible { outline: 2px solid var(--sokohai-gold); outline-offset: 2px; }
.top-nav-row .skh-icon-btn svg { flex: 0 0 auto; }

/* Kazi: green kidogo ili ionekane kama kitufe kikuu */
.top-nav-row .skh-kazi-btn {
    background: var(--sokohai-green-soft);
    border-color: rgba(24, 169, 130, .3);
    color: var(--sokohai-green-dark);
}

/* namba ya badge kwenye kitufe */
.top-nav-row .skh-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sokohai-green);
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(15, 44, 70, .3);
    pointer-events: none;
}

.top-nav-row .skh-count[hidden] { display: none !important; }

.skh-kazi-dot { display: none !important; }

/* ---------- sheet ---------- */
.skh-kazi-sheet {
    background: rgba(15, 44, 70, .38);
    backdrop-filter: blur(2px);
}

.skh-kazi-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto max(10px, env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 18px 46px rgba(15, 44, 70, .26);
    overflow: hidden;
    animation: skhKaziUp .18s ease-out;
}

@keyframes skhKaziUp {
    from { transform: translateY(14px); opacity: .6; }
    to   { transform: translateY(0); opacity: 1; }
}

.skh-kazi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--sokohai-border);
}

.skh-kazi-head b {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--skh-ink);
}

.skh-kazi-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--sokohai-surface-soft);
    color: var(--sokohai-text-2);
    cursor: pointer;
}

.skh-kazi-close:hover { background: var(--sokohai-green-soft); color: var(--sokohai-green-dark); }

.skh-kazi-list { padding: 6px 8px 10px; }

.skh-kazi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease;
}

.skh-kazi-item:hover { background: var(--sokohai-surface-soft); }
.skh-kazi-item:focus-visible { outline: 2px solid var(--sokohai-gold); outline-offset: -2px; }

.skh-kazi-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--sokohai-green-soft);
    color: var(--sokohai-green-dark);
}

.skh-kazi-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.skh-kazi-txt b { font-size: 14px; font-weight: 800; color: var(--sokohai-text); }
.skh-kazi-txt small { font-size: 11.5px; color: var(--sokohai-text-2); }

.skh-kazi-chev { color: #9BB0B8; font-size: 18px; font-weight: 900; flex: 0 0 auto; }

.skh-kazi-badge {
    position: static !important;
    display: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sokohai-green);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* account row kwenye sidebar */
.skh-menu-account-row { border-bottom: 1px solid var(--sokohai-border); }

/* ================================================================
 * 3. SEARCH: pill yenye mstari wa dhahabu + kitufe cha green
 * ================================================================ */
.search-nav-row .search-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    border: 1.5px solid var(--skh-gold-a);
    border-radius: 999px;
    background: #fff;
    padding: 3px 3px 3px 14px;
    box-shadow: 0 1px 3px rgba(15, 44, 70, .05);
}

.search-nav-row .search-wrap:focus-within {
    border-color: var(--sokohai-green);
    box-shadow: 0 0 0 3px rgba(24, 169, 130, .12);
}

.search-nav-row .skh-search-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--sokohai-green);
}

.search-nav-row .search-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 12px;
    font-size: 15px;
    color: var(--sokohai-text);
}

.search-nav-row .search-wrap input::placeholder { color: #7A8B92; }

/* divider nyembamba kabla ya kitufe */
.search-nav-row .skh-search-div {
    width: 1px;
    height: 26px;
    flex: 0 0 auto;
    margin: 0 8px 0 6px;
    background: rgba(216, 184, 58, .55);
}

/* camera ya repo (skh-ss-tools kutoka js/23-smart-search.js) */
.search-nav-row .search-wrap .skh-ss-tools {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    margin-right: 4px;
    flex: 0 0 auto;
    order: 3;
}
.search-nav-row .search-wrap .skh-input-host,
.search-nav-row .search-wrap input { order: 2; }
.search-nav-row .skh-search-ico { order: 1; }
.search-nav-row .skh-search-div { order: 4; }
.search-nav-row .skh-search-go { order: 5; }
.search-nav-row .search-wrap .skh-ss-tool { color: var(--skh-ink); }
.search-nav-row .search-wrap .camera-icon { display: none; }

/* kitufe cha kutafuta — green, ndani ya pill */
.search-nav-row .skh-search-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #1FB98C, var(--sokohai-green));
    color: #fff;
    cursor: pointer;
    transition: filter .16s ease, transform .12s ease, box-shadow .16s ease;
    box-shadow: 0 2px 8px rgba(24, 169, 130, .3);
    -webkit-tap-highlight-color: transparent;
}

.search-nav-row .skh-search-go span,
.search-nav-row .skh-search-go svg { color: #fff; }
.search-nav-row .skh-search-go:hover { filter: brightness(1.06); }
.search-nav-row .skh-search-go:active { transform: scale(.96); }
.search-nav-row .skh-search-go:focus-visible { outline: 2px solid var(--skh-gold-a); outline-offset: 2px; }

/* ================================================================
 * 4. HOME CHROME: blue = primary accents zinazobaki
 * ================================================================ */
#buyerView .cat-trigger-btn,
#buyerView #activeCategoryText { color: var(--skh-brand-blue); }
#buyerView .cat-trigger-btn:hover { border-color: rgba(77, 145, 170, 0.4); }

#buyerView .skh-section-icon {
    color: var(--skh-brand-blue);
    background: var(--sokohai-blue-soft);
    border-color: rgba(77, 145, 170, 0.16);
}

.bottom-nav-main .nav-tab.active,
.bottom-nav-main .nav-tab.active span,
.bottom-nav-main .nav-tab.active svg { color: var(--skh-brand-blue); }

/* ================================================================
 * 5. GUNDUA SOKO — kadi za picha + "More"
 * ================================================================ */
.gds-section {
    margin: 16px 0 6px;
    padding: 16px 0 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    position: relative;
}

.gds-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 2px;
}

.gds-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: var(--skh-ink);
    white-space: nowrap;
}

/* kipande cha dhahabu kando ya kichwa */
.gds-title-bar {
    display: inline-block;
    width: 5px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--skh-gold-b), var(--skh-gold-a));
}

.gds-more-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--sokohai-green);
    cursor: pointer;
    white-space: nowrap;
}

.gds-more-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.gds-more-link:focus-visible { outline: 2px solid var(--skh-gold-a); outline-offset: 3px; border-radius: 6px; }

/* grid: 6 kadi + More */
.gds-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
}

.gds-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 1px solid var(--sokohai-border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 44, 70, .06);
    transition: border-color .16s ease, box-shadow .16s ease, transform .14s ease;
    -webkit-tap-highlight-color: transparent;
}

.gds-tile:hover {
    border-color: rgba(216, 184, 58, .8);
    box-shadow: 0 8px 20px rgba(15, 44, 70, .12);
    transform: translateY(-2px);
}

.gds-tile:active { transform: translateY(0) scale(.99); }
.gds-tile:focus-visible { outline: 2px solid var(--skh-gold-a); outline-offset: 2px; }

/* picha ya kategoria */
.gds-tile-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sokohai-surface-soft);
    line-height: 0;
}

.gds-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* sehemu ya jina: ukingo wa green uliopinda + jina */
.gds-tile-name {
    position: relative;
    display: block;
    padding: 12px 6px 11px;
    margin-top: -9px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--skh-ink);
    border-radius: 10px 10px 0 0;
    z-index: 1;
}

/* wimbi la green kwenye mstari wa picha/jina */
.gds-tile-name::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,7 C18,0 32,10 50,6 C68,2 82,10 100,5' fill='none' stroke='%2318A982' stroke-width='2.2'/></svg>");
    background-size: 100% 10px;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ---- kadi ya "More" ---- */
.gds-tile--more {
    border-color: rgba(24, 169, 130, .22);
    background: linear-gradient(180deg, #EAF8F2 0%, #F4FBF8 62%, #fff 100%);
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.gds-tile--more .gds-tile-img--more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: auto;
    height: 62%;
    background: transparent;
    color: var(--sokohai-green);
    padding-top: 12px;
}

.gds-tile--more .gds-tile-name {
    background: transparent;
    margin-top: 0;
    padding-bottom: 20px;
    font-size: 15px;
    font-weight: 800;
    color: var(--sokohai-green);
}

.gds-tile--more .gds-tile-name::before { content: none; }

/* tao la dhahabu kwenye kadi ya More */
.gds-tile--more::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 8px;
    height: 10px;
    border-bottom: 3px solid var(--skh-gold-b);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.gds-tile--more:hover { border-color: var(--sokohai-green); }

/* ================================================================
 * 6. RESPONSIVE
 * ================================================================ */
@media (max-width: 1180px) and (min-width: 861px) {
    .top-nav-row .skh-topnav { margin: 0 2px; gap: 0; }
    .top-nav-row .skh-topnav-item { padding: 7px 9px; font-size: 12.5px; gap: 5px; }
    .top-nav-row .skh-topnav-ico { width: 16px; height: 16px; }
    .top-nav-row .skh-brand-word { font-size: 29px; }
    .top-nav-row .skh-brand-logo { height: 50px; }
    .top-nav-row .skh-brand { gap: 9px; }
    .top-nav-row .skh-brand-div { height: 36px; }
    .gds-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .sticky-top-section { padding-top: 28px; }
    .sticky-top-section::before { width: 200px; height: 32px; }
    .sticky-top-section::after { width: 180px; height: 38px; }
}

@media (max-width: 860px) {
    /* Row 1: menu+brand (kushoto) | icons (kulia). Row 2: nav. */
    .top-nav-row { flex-wrap: wrap; row-gap: 4px; }
    .top-nav-row .top-nav-left { order: 1; }
    .top-nav-row .top-nav-icons { order: 2; margin-left: auto; padding-left: 6px; gap: 6px !important; }
    .top-nav-row .skh-icon-btn { width: 38px; height: 38px; }
    .top-nav-row .skh-icon-btn svg { width: 18px; height: 18px; }
    .top-nav-row .top-nav-icons { gap: 6px !important; }
    .top-nav-row .top-nav-icons > * { flex: 0 0 auto; }
    .top-nav-row .top-nav-icons::before { height: 26px; }

    .top-nav-row .skh-topnav {
        order: 4;
        flex: 1 0 100%;
        width: 100%;
        margin: 2px 0 0;
        gap: 0;
        justify-content: space-between;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 3px;
    }
    .top-nav-row .skh-topnav::-webkit-scrollbar { display: none; }

    .top-nav-row .skh-topnav-item {
        padding: 7px 9px;
        font-size: 12.5px;
        flex: 1 0 auto;
        justify-content: center;
        gap: 5px;
    }
    .top-nav-row .skh-topnav-ico { width: 16px; height: 16px; }

    .top-nav-row .skh-brand-word { font-size: 26px; letter-spacing: -0.8px; }
    .top-nav-row .skh-brand-logo { height: 46px; }
    .top-nav-row .skh-brand { gap: 8px; margin-left: 4px; }
    .top-nav-row .skh-brand-div { height: 30px; width: 1.5px; }

    .sticky-top-section { padding-top: 22px; }
    .sticky-top-section::before { width: 140px; height: 24px; }
    .sticky-top-section::after { width: 120px; height: 28px; }

    /* search */
    .search-nav-row .search-wrap { padding-left: 10px; }
    .search-nav-row .search-wrap input { font-size: 14px; padding-left: 9px; }
    .search-nav-row .skh-search-go { width: 46px; height: 40px; }
    .search-nav-row .skh-search-div { margin: 0 6px 0 4px; height: 22px; }

    /* Gundua Soko */
    .gds-section { margin: 14px 0 4px; padding-top: 12px; }
    .gds-title { font-size: 16px; gap: 8px; }
    .gds-title-bar { height: 19px; width: 4px; }
    .gds-more-link { font-size: 12px; gap: 3px; }
    .gds-more-link svg { width: 14px; height: 14px; }
    .gds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .gds-tile-name { font-size: 12px; padding: 10px 4px 9px; }
    .gds-tile--more .gds-tile-name { font-size: 13px; }
}

@media (max-width: 480px) {
    .top-nav-row .skh-topnav-item {
        padding: 6px 6px;
        font-size: 11px;
        gap: 4px;
        letter-spacing: -0.1px;
    }
    .top-nav-row .skh-topnav-ico { width: 14px; height: 14px; }
    .top-nav-row .skh-topnav { gap: 0; justify-content: space-between; }
}

@media (max-width: 430px) {
    .top-nav-row .skh-brand-word { font-size: 23px; letter-spacing: -0.6px; }
    .top-nav-row .skh-brand-logo { height: 40px; }
    .top-nav-row .skh-brand { gap: 6px; }
    .top-nav-row .skh-brand-div { height: 26px; }
    .top-nav-row .skh-brand-arc { height: 4px; border-bottom-width: 2px; }
    .search-nav-row .skh-search-go { width: 42px; height: 38px; }
}

@media (max-width: 400px) {
    .top-nav-row .skh-brand-word { font-size: 21px; letter-spacing: -0.5px; }
    .top-nav-row .skh-brand-logo { height: 36px; }
    .top-nav-row .skh-topnav-item { padding: 6px 4px; font-size: 10.5px; gap: 3px; }
    .gds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .gds-title { font-size: 15px; }
    .gds-more-link { font-size: 11.5px; }
    .search-nav-row .skh-search-go { width: 40px; height: 36px; }
}

/* ================================================================
 * 7. DARK MODE
 * ================================================================ */
html[data-theme="dark"] .top-nav-row .skh-brand-word,
body.dark-mode .top-nav-row .skh-brand-word { filter: brightness(1.35); }


/* ================================================================
 * 8. ADS KATIKA FEED — zimeondolewa (Home, Bidhaa, Huduma, Usafiri, Chat)
 *    In-feed sponsored cells pekee; ads-studio preview (.mas-preview-cell)
 *    haiathiriki.
 * ================================================================ */
.skh-ad-cell:not(.mas-preview-cell) { display: none !important; }

/* ================================================================
 * 9. HEADER = KITUFE KIMOJA TU (KAZI). Lugha imehamia sidebar.
 * ================================================================ */
.top-nav-row .top-nav-icons .lang-switch,
.top-nav-row .top-nav-icons #langSwitchWrap { display: none !important; }

/* chip ya lugha kwenye sidebar */
.skh-lang-chip {
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--sokohai-green-soft);
    color: var(--sokohai-green-dark);
    font-size: 11.5px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}


/* ================================================================
 * 10. SIDEBAR MENU — IREMBWE (majengo ya dhahabu + brand + icons)
 * ================================================================ */
#sidebarMenuModal.skh-account-menu { background: rgba(15, 44, 70, .42); backdrop-filter: blur(2px); }

#sidebarMenuModal .skh-menu-drawer {
    position: relative;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(24, 169, 130, .12) 0%, rgba(24, 169, 130, 0) 46%),
        radial-gradient(120% 90% at 100% 0%, rgba(216, 184, 58, .16) 0%, rgba(216, 184, 58, 0) 48%),
        #fff;
    border-right: 1px solid var(--sokohai-border);
}

/* utepe wa dhahabu juu ya drawer */
#sidebarMenuModal .skh-menu-drawer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sokohai-green), var(--sokohai-gold) 55%, rgba(216, 184, 58, .1));
    z-index: 3;
}

/* kichwa cha drawer */
#sidebarMenuModal .skh-menu-head { padding-top: 14px; }

#sidebarMenuModal .skh-menu-top b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .3px;
    color: var(--sokohai-green-dark);
}

/* kadi ya mtumiaji */
#sidebarMenuModal .skh-user-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid rgba(24, 169, 130, .22);
    border-radius: 16px;
    background: linear-gradient(180deg, #F3FBF7, #fff);
    box-shadow: 0 3px 12px rgba(15, 44, 70, .05);
}

#sidebarMenuModal .skh-user-card img {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(24, 169, 130, .35);
    flex: 0 0 auto;
}

#sidebarMenuModal .skh-user-card b { font-size: 14.5px; font-weight: 900; color: var(--sokohai-text); }
#sidebarMenuModal .skh-user-card small { font-size: 11.5px; color: var(--sokohai-text-2); }

/* vitengo vya menyu */
#sidebarMenuModal .skh-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    margin: 6px 0;
    border: 1px solid var(--sokohai-border);
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .16s ease, transform .12s ease;
}

#sidebarMenuModal .skh-menu-item:hover {
    border-color: rgba(24, 169, 130, .45);
    background: var(--sokohai-green-soft);
    box-shadow: 0 6px 16px rgba(24, 169, 130, .12);
    transform: translateX(2px);
}

#sidebarMenuModal .skh-menu-item .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 11px;
    background: var(--sokohai-green-soft);
    color: var(--sokohai-green-dark);
    flex: 0 0 auto;
}

#sidebarMenuModal .skh-menu-item .txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
#sidebarMenuModal .skh-menu-item .txt b { font-size: 13.5px; font-weight: 800; color: var(--sokohai-text); }
#sidebarMenuModal .skh-menu-item .txt small { font-size: 11px; color: var(--sokohai-text-2); }
#sidebarMenuModal .skh-menu-item .chev { color: #A9BCC4; font-weight: 900; }

/* vichwa vya sehemu */
#sidebarMenuModal .skh-menu-sec-h {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(24, 169, 130, .10), rgba(216, 184, 58, .10));
    border: 1px solid rgba(216, 184, 58, .22);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--sokohai-green-dark);
}

#sidebarMenuModal .skh-menu-divider {
    height: 1px;
    margin: 14px 6px;
    background: linear-gradient(90deg, rgba(216, 184, 58, .55), rgba(216, 184, 58, 0));
}

/* Akaunti Yangu + Lugha (zilizoingizwa na js/app/82) */
#sidebarMenuModal .skh-menu-account-row,
#sidebarMenuModal .skh-menu-lang-row {
    border-color: rgba(216, 184, 58, .3);
    background: linear-gradient(180deg, #FFFDF4, #fff);
}

#sidebarMenuModal .skh-menu-lang-row { margin-bottom: 10px; }

/* Logout */
#sidebarMenuModal .skh-logout {
    border-color: rgba(217, 83, 79, .28);
    background: #FFF7F7;
}

#sidebarMenuModal .skh-logout .ico { background: #FDECEC; color: #C0392B; }

/* scrollbar */
#sidebarMenuModal .skh-menu-scroll { scrollbar-width: thin; }
#sidebarMenuModal .skh-menu-scroll::-webkit-scrollbar { width: 6px; }
#sidebarMenuModal .skh-menu-scroll::-webkit-scrollbar-thumb { background: rgba(24, 169, 130, .35); border-radius: 999px; }

@media (max-width: 860px) {
    #sidebarMenuModal .skh-menu-item { padding: 10px; gap: 10px; }
    #sidebarMenuModal .skh-menu-item .ico { width: 32px; height: 32px; }
    #sidebarMenuModal .skh-menu-item .txt b { font-size: 13px; }
}

/* ============================================================
   §11 DRAWER (sidebar) — urefu kamili + usomaji mzuri
   ============================================================ */
@media (max-width: 620px) {
    #sidebarMenuModal .skh-menu-drawer { width: 100vw !important; max-width: 100vw !important; }
}
#sidebarMenuModal .skh-menu-item { padding-top: 9px !important; padding-bottom: 9px !important; }
#sidebarMenuModal .skh-menu-item .sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
#sidebarMenuModal .skh-menu-item .ico { color: var(--sokohai-green); }
#sidebarMenuModal .skh-menu-item .ico svg { width: 18px; height: 18px; stroke-width: 2; }

/* ============================================================
   §12 USIMAMIZI (dashboards) — muundo WA MWANZO umehifadhiwa.
   Markup/design ni zile zile za GitHub (commit 03a6811): `.menu-item`
   yenye border-left ya rangi, kichwa "Usimamizi", kitufe "Funga X".
   Marekebisho PEKEE hapa: dashboards zote 7 zinaonekana bila kukatwa
   (kadi imefanywa fupi kidogo, sanduku limepandishwa urefu kidogo).
   ============================================================ */
#modeMenuModal > div {
    max-height: 94vh;
    padding: 18px 20px 16px !important;
}

#modeMenuModal > div > h2 {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    font-size: 18px !important;
}

#modeMenuModal .menu-item {
    padding: 12px 14px !important;
    margin: 5px 0 !important;
    max-width: 100% !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06) !important;
}

#modeMenuModal .menu-item b {
    font-size: 14px !important;
    line-height: 1.25 !important;
    display: flex;
    align-items: center;
    gap: 7px;
}

#modeMenuModal .menu-item b svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--sokohai-green);
}

#modeMenuModal .menu-item span {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
}

#modeMenuModal > div > button {
    margin-top: 10px !important;
    padding: 12px !important;
}

/* ============================================================
   [R6r · JOB 23 · 2026-11-05] HAMBURGER YA HEADER = KITUFE KAMA ICON ZINGINE
   ------------------------------------------------------------
   Kabla: `.menu-btn` ilikuwa ikoni pekee (18px, hakuna chip) — ilionekana
   ndogo na nyepesi ukilinganisha na Usimamizi / SokoPay / Kikapu / Taarifa
   (kila kimoja ni kitufe cha duara 38×40 chenye mstari).
   Sasa: hamburger ina chip ile ile (38×40, duara, mstari, hover sawa) na
   ikoni 19px — inaonekana kama icon zingine, sio ndogo.
   HAITUMIWI kubadilisha `onclick="openSidebarMenu()"` — ni CSS pekee.
   ============================================================ */
.top-nav-row .top-nav-left .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--sokohai-border);
    border-radius: 50%;
    background: #fff;
    color: var(--skh-ink);
    line-height: 0;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.top-nav-row .top-nav-left .menu-btn:hover {
    background: var(--sokohai-green-soft);
    border-color: rgba(24, 169, 130, .45);
    color: var(--sokohai-green-dark);
    box-shadow: 0 3px 10px rgba(24, 169, 130, .14);
}
.top-nav-row .top-nav-left .menu-btn:focus-visible { outline: 2px solid var(--sokohai-gold); outline-offset: 2px; }
.top-nav-row .top-nav-left .menu-btn svg { width: 19px; height: 19px; display: block; }

/* Desktop: vitufe vya header ni 42×42 (css/57 §2) — hamburger sawa */
@media (min-width: 900px) {
    .top-nav-row .top-nav-left .menu-btn { width: 42px; height: 42px; }
    .top-nav-row .top-nav-left .menu-btn svg { width: 20px; height: 20px; }
}