/* ============================================================
   29-nav-dict.css — [R19 2026-09-17]
   1) TOP NAV RESPONSIVE FIX: brand (.skh-wordmark-host) ikikua
      inabana icons za kulia kwenye simu ndogo (360/390px) —
      marekebisho ya muundo: brand hugongwa (clamp), gap
      hupungua, "Kazi" label hupotea chini ya 400px (baki
      icon + title), language toggle hufupishwa. HAKUNA rubber
      b&b au cover-up — mpangilio ni flex row yenye ngog'wa
      zinazoshusha uzuri.
   2) RoleBadge component styles (70-role-identity).
   3) shared role/navigation styles.
   4) Kamusi (71) entry misc.
   ============================================================ */

/* ---------- 1) TOP NAV RESPONSIVE ---------- */
.top-nav-row { gap: 8px; }
.top-nav-left { min-width: 0; flex: 0 1 auto; }
.skh-wordmark-host {
    flex: 0 1 auto;
    min-width: 0;
    width: 132px;
    max-width: 132px;
}
/* brand SVG lazima ishawizwe 100% ya host (si width ya attribute) */
.skh-wordmark-host svg { width: 100% !important; height: auto !important; display: block; }

.top-nav-icons { flex: 0 1 auto; min-width: 0; }
.top-nav-icons .lang-toggle { white-space: nowrap; }

@media (max-width: 640px) {
    .top-nav-row { padding-left: 10px; padding-right: 10px; }
    .skh-wordmark-host { width: clamp(96px, 27vw, 120px); }
    .top-nav-icons { gap: 6px; }
    .top-nav-icons span { min-width: 22px; min-height: 22px; }
}
@media (max-width: 440px) {
    .skh-wordmark-host { width: clamp(84px, 24vw, 104px); }
    .top-nav-icons { gap: 5px; }
    /* "Kazi" label ikifanya pill kupigana na brand — baki icon + title;
       Usimamizi hubaki full kwenye mode-menu yenyewe */
    .usimamizi-btn b { display: none; }
    .usimamizi-btn { padding: 5px 8px !important; }
    .lang-toggle { padding: 6px 9px !important; gap: 4px !important; font-size: 12px !important; }
    .lang-toggle .lang-caret { width: 8px; height: 8px; }
}
@media (max-width: 368px) {
    .skh-wordmark-host { width: clamp(76px, 22vw, 96px); }
}

/* ---------- 2) ROLE BADGES (role-identity component) ---------- */
.skh-rb-wrap { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 3px 0; }
.skh-rb {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px 2px 6px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1.5;
    border: 1px solid rgba(18,104,168,.18);
    background: #eaf4fb; color: #1268A8;
    white-space: nowrap;
}
.skh-rb svg { flex: 0 0 auto; color: currentColor; }
.skh-rb--seller           { background:#eaf4fb; color:#1268A8; }
.skh-rb--service_provider { background:#ecfdf5; color:#0f8a5f; border-color:rgba(24,169,130,.25); }
.skh-rb--transporter      { background:#fff7e8; color:#a0720e; border-color:rgba(216,184,58,.3); }
.skh-rb--buyer            { background:#eff6ff; color:#2B82BD; }
.skh-rb--business         { background:#f1f5f9; color:#334155; }
.skh-rb--agent            { background:#faf2ff; color:#7c3aed; }
.skh-rb--more             { background:#e2e8f0; color:#475569; }

.skh-verified-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: #18A982; color: #fff;
    font-size: 10px; font-weight: 900;
    vertical-align: 2px;
}
.skh-verified-badge svg { width: 9px; height: 9px; }

/* ---------- 3) shared sheet overlays ---------- */
/* ---------- 4) KAMUSI misc ---------- */
#sokohaiLanguageCenterModal .skh-settings-modal-card { overflow-y: auto; }
#skhDictResults { max-height: 48vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.skh-d-cat { transition: background .15s ease; }

/* ---------- shared sheet overlay for Group Soga and Kamusi ---------- */
.skh-sheet-overlay {
    position: fixed; inset: 0; z-index: 9600;
    background: rgba(11, 47, 80, .42);
    display: flex; justify-content: center; align-items: flex-end;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.skh-sheet-overlay.open { opacity: 1; pointer-events: auto; }
.skh-sheet {
    width: 100%; max-width: 720px;
    max-height: 92vh; height: 92vh;
    background: #FFFFFF;
    border-radius: 22px 22px 0 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -12px 44px rgba(11,47,80,.28);
}
.skh-sheet-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 10px;
    background: #F1FBF7;
    color: #18352D;
    border-bottom: 1px solid #D9EEE5;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
}
.skh-sheet-title {
    font-size: 17px; letter-spacing: .2px;
    white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; display: block;
    writing-mode: horizontal-tb !important;
}
.skh-sheet-sub {
    opacity: .82; font-size: 11.5px;
    white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; display: block;
    writing-mode: horizontal-tb !important;
}
.skh-sheet-back {
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid #CCEBDD; background: #fff; color: #17604E;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.skh-sheet-back svg { width: 17px; height: 17px; }
.skh-sheet-gear {
    width: 34px; height: 34px; border-radius: 10px; border: none;
    background: #fff; color: #17604E; border-color: #CCEBDD; font-size: 16px; cursor: pointer;
}
.skh-sheet-search {
    display: flex; align-items: center; gap: 9px;
    margin: 12px 12px 8px; padding: 0 13px;
    background: #fff; border: 1.5px solid #dbe4ed; border-radius: 14px;
}
.skh-sheet-search input {
    flex: 1; border: none; outline: none; padding: 12px 0;
    font-size: 14.5px; font-family: inherit; background: transparent; color: #0f172a;
}
.skh-sheet-svg { color: #1268A8; display: flex; align-items: center; }
.skh-sheet-tabs {
    display: flex; gap: 6px; padding: 2px 12px 10px;
    overflow-x: auto; scrollbar-width: none;
}
.skh-sheet-tabs::-webkit-scrollbar { display: none; }
.skh-sheet-results { flex: 1; overflow-y: auto; padding: 4px 12px 24px; -webkit-overflow-scrolling: touch; }

/* shared modal sheets (profiles, preview, dictionary) */
.skh-modal {
    display: none; position: fixed; inset: 0; z-index: 100020;
    background: rgba(15,23,42,.55); align-items: center; justify-content: center;
}
.skh-modal-card {
    background: #fff; border-radius: 20px; padding: 18px;
    width: 92%; max-width: 400px; max-height: 86vh; overflow-y: auto;
}
.skh-modal-x {
    border: none; background: #f1f5f9; width: 30px; height: 30px;
    border-radius: 50%; cursor: pointer; font-weight: 800; font-size: 15px; color: #475569;
}

/* desktop: overlay ikuu inakuwa centered card */
@media (min-width: 901px) {
    .skh-sheet-overlay { align-items: center; }
    .skh-sheet { height: 84vh; max-height: 84vh; border-radius: 22px; }
}

/* ================= [R21 KAMUSI PAGE + LANGUAGE MENU] ================= */
.skh-k-chip {
    flex: 0 0 auto; border: none; border-radius: 999px;
    background: #eef4fa; color: #334155; font-size: 12.5px; font-weight: 700;
    padding: 7px 14px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.skh-k-chip.on { background: #0b5a99; color: #fff; }
.skh-k-count { font-size: 11.5px; opacity: .65; margin: 4px 2px 8px; }
.skh-k-entry {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff; border: 1.5px solid #e4ebf2; border-radius: 15px;
    padding: 12px 14px; margin-bottom: 9px;
}
.skh-k-sym {
    flex: 0 0 auto; min-width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(150deg, #f0f7fd, #e2eef9);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; padding: 0 8px;
}
.skh-k-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.skh-k-name { font-size: 14.5px; color: #0f172a; }
.skh-k-desc { font-size: 12.5px; color: #334155; line-height: 1.45; }
.skh-k-meta { font-size: 10.5px; color: #64748b; line-height: 1.4; }
.skh-k-cat { color: #0b5a99; font-weight: 700; }
.skh-k-ex { font-size: 11.5px; color: #0b5a99; font-style: italic; }
.skh-k-empty { text-align: center; padding: 46px 18px; color: #334155; display: flex; flex-direction: column; gap: 8px; }
.skh-k-empty small { opacity: .7; }

/* --- Language MENU (🌐 button → 2 options, w/ mobile sheet) --- */
#langDropdown .lang-menu-opt, #langDropdown .lang-menu-back {
    width: 100%; display: flex; align-items: center; gap: 12px;
    border: none; background: transparent; cursor: pointer;
    padding: 12px 14px; border-radius: 12px; text-align: left; font-family: inherit;
}
#langDropdown .lang-menu-opt:hover, #langDropdown .lang-menu-back:hover { background: #eef4fa; }
#langDropdown .lang-menu-ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(150deg, #eaf5fd, #dcecf8);
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
#langDropdown .lang-menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#langDropdown .lang-menu-title { font-size: 14.5px; font-weight: 800; color: #0f172a; }
#langDropdown .lang-menu-sub { font-size: 11.5px; color: #64748b; }
#langDropdown .lang-menu-back { color: #0b5a99; font-weight: 700; font-size: 13px; padding: 8px 14px; }
#langDropdown .menu-title-row { padding: 4px 14px 2px; font-size: 11px; font-weight: 800; letter-spacing: .8px; color: #94a3b8; text-transform: uppercase; }

/* mobile: dropdown inakuwa bottom-sheet (founder §13) */
@media (max-width: 900px) {
    #langDropdown.lang-dropdown {
        position: fixed !important; left: 10px !important; right: 10px !important; bottom: 12px !important; top: auto !important;
        border-radius: 20px !important; box-shadow: 0 18px 42px rgba(9, 32, 63, .4) !important;
        max-width: none !important; z-index: 45000;
    }
}