/* ==== css/13-ui-polish.css ==== */
/* ============================================================
   SOKOHAI — UPAMBAJI WA UI WA MFUMO MZIMA (2026-09-11)
   ------------------------------------------------------------
   1) Chapa nzuri (font siyo hafifu) + maandishi yasikatike
   2) Vitufe visikae wima / visibanwe
   3) Blocks zisikatwe — maandishi yasitokeze nje ya block
   4) Kadi za kupendeza na zenye mpangilio (systematic)
   ⚠️ ADDITIVE — inapakia MWISHO baada ya CSS zote, haibadilishi
      logic wala mpangilio wa layout (grid/flex) wa msingi.
   ============================================================ */

/* ============================================================
   1. CHAPA (Typography) — msingi wa mfumo
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #0f172a;
    letter-spacing: 0.1px;
}
/* Nambari zipangike vizuri (tabular figures) */
.sp-kpi-value, .price, [class*='total'], [class*='amount'] {
    font-variant-numeric: tabular-nums;
}

/* Vichwa viwe imara, visiwe hafifu */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: var(--primary-dark, #022b52);
    line-height: 1.25;
    letter-spacing: 0.2px;
    overflow-wrap: break-word;
}
b, strong { font-weight: 800; }

/* Maandishi yasitokeze nje ya block zao */
h1, h2, h3, h4, h5, h6, p, b, strong, label, li, td, th, small, em {
    overflow-wrap: break-word;
}
/* Flex/grid watoto wasiuvunje mpangilio kwa maandishi marefu */
.feed-card-box, .cat-box, .menu-item, .sp-kpi-card, .sp-widget-card,
.nav-tab, .mode-tab-btn, .subcat-chip, .filter-chip, .list-item {
    min-width: 0;
    max-width: 100%;
}

/* ============================================================
   2. VITUFE (Buttons) — nafasi nzuri, maandishi yasisimame wima
   ============================================================ */
button {
    font-family: inherit;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.2px;
    overflow-wrap: break-word;
}
/* Vitufe vya chips/tabs: vibaki kwenye mstari mmoja (usibanwe wima) */
.mode-tab-btn, .subcat-chip, .filter-chip, .pos-quick-btn,
.ct-pos-btn, .p-sub-tab, .time-tab, .ch-tab, .dc88-tab, .skh-de-feed-tab,
.skh-de-chip, .skh-k-chip, .ch-head-menu button, .nav-tab span, #gsgTabs button {
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    flex-shrink: 0;
    max-width: 100%;
}
.mode-tab-btn, .subcat-chip {
    padding: 9px 16px;
    border-radius: 999px;
}
.filter-chip { padding: 9px 15px; border-radius: 12px; font-weight: 800; }

/* Vitufe vya mfumo wa ndani: kimo cha kutosha kugusa + kitufe kimoja */
.ct-sidebar-menu-btn, .menu-item-new {
    white-space: nowrap;
    line-height: 1.25;
}
.ct-sidebar-menu-btn, .menu-item-new span { min-width: 20px; }

/* ============================================================
   3. KADI (Cards) — za kupendeza, zenye mpangilio mmoja
   ============================================================ */
/* 3a. Kadi za bidhaa kwenye feed (Home/Bidhaa/Huduma/Usafiri) */
.feed-card-box {
    border-radius: 16px;
    border: 1px solid #e9eef4;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 20px rgba(15,23,42,0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #ffffff;
}
.feed-card-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(15,23,42,0.15);
}
.feed-info-box { padding: 12px; }
.feed-info-box b {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.feed-info-box .price { font-size: 16px; font-weight: 900; }
.feed-info-box .stats-row { font-size: 13px; color: #64748b; margin-top: 6px; }

/* 3b. Sanduku za kategoria (modal ya kategoria) */
.cat-box {
    background: #ffffff;
    border: 1px solid #e8eef4;
    border-radius: 16px;
    padding: 16px 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15,23,42,0.10);
    border-color: #bfdbfe;
}
.cat-box .cat-name {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    max-width: 100%;
}

/* 3c. Menyu kuu (+) — blocks nadhifu na sawa */
.menu-item {
    border-radius: 16px;
    border: 1px solid #eef2f6;
    border-left-width: 6px;
    padding: 18px 18px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.menu-item:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,23,42,0.10); }
.menu-item b { line-height: 1.3; font-size: 15px; }
.menu-item span { line-height: 1.45; }

/* 3d. Kadi za KPI na widgets za dashboards */
.sp-kpi-card, .sp-kpi-card-premium, .sp-widget-card {
    border-radius: 16px;
    border: 1px solid #e8eef4;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 16px rgba(15,23,42,0.06);
}
.sp-kpi-value { font-weight: 900; }
.sp-kpi-sub { color: #64748b; font-weight: 700; }

/* 3e. Kadi za uchaguzi wa setup (setup-option-card) */
.setup-option-card { border-radius: 16px; }

/* ============================================================
   4. FOMU (Forms) — pembejeo nadhifu, maandishi yasomeka
   ============================================================ */
.form-box input, .form-box select, .form-box textarea {
    font-size: 15px;
    color: #0f172a;
    background: #ffffff;
    border: 1.5px solid #d7e0ea;
    border-radius: 12px;
}
.form-box input:focus, .form-box select:focus, .form-box textarea:focus {
    border-color: var(--primary-blue, #03509d);
    box-shadow: 0 0 0 3px rgba(3, 80, 157, 0.12);
}
.form-box label {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}
.form-box button[type="submit"] { font-size: 15px; letter-spacing: 0.8px; }

/* Select/input ndani ya modals zisi-overflow */
.modal input, .modal select, .overlay input, .overlay select {
    max-width: 100%;
}

/* ============================================================
   5. SIDEBAR + DASHBOARD (maandishi yasisimame wima)
   ============================================================ */
.ct-sidebar-group-title { letter-spacing: 0.8px; font-weight: 900; }
.ct-sidebar-menu-btn b, .ct-sidebar-menu-btn span {
    overflow-wrap: break-word;
}

/* ============================================================
   6. KIOO CHA SIMU (≤480px): bora bado, lakini kompakt
   ============================================================ */
@media (max-width: 480px) {
    .feed-info-box b { font-size: 13px; }
    .feed-info-box .price { font-size: 15px; }
    .cat-box .cat-name { font-size: 13px; }
    .menu-item b { font-size: 14px; }
}

/* ============================================================
   [NOTIF v2 2026-09] Kadi za arifa — ikoni ya SVG, doa la
   "bado kusomwa", mpangilio safi wa jina/maelezo/tarehe.
   ============================================================ */
.skh-notif-item { position: relative; gap: 12px; padding: 13px 12px !important; border-radius: 14px; }
.skh-notif-item + .skh-notif-item { margin-top: 6px; }
.skh-notif-ico {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    background: #e0f2fe; color: #0369a1;
    display: flex; align-items: center; justify-content: center;
}
.skh-notif-ico svg { width: 20px; height: 20px; }
.skh-notif-dot {
    position: absolute; top: 12px; right: 12px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}
.skh-notif-item .list-info b { font-size: 13px; line-height: 1.35; display: block; padding-right: 14px; }
.skh-notif-item { background:#fff; border:1px solid #E5ECEC; box-shadow:0 2px 8px rgba(24,53,45,.05); }
.skh-notif-ico.type-order,
.skh-notif-ico.type-wallet { background:#EAF8F2; color:#178864; }
.skh-notif-ico.type-delivery,
.skh-notif-ico.type-ride_request { background:#F0F7FA; color:#39779B; }
.skh-notif-ico.type-negotiation { background:#FBF7E7; color:#8B6A1D; }
.skh-notif-ico.type-chat,
.skh-notif-ico.type-new_comment,
.skh-notif-ico.type-comment_reply,
.skh-notif-ico.type-comment_mention { background:#F1F8F5; color:#17604E; }