/* =====================================================================
   SIMU (<= 900px / <= 700px) - muonekano wa simu tu. Kompyuta (desktop) haiguswi.
   Inapakiwa BAADA ya ui.css na app.css ili sheria hizi zishinde.
   ===================================================================== */
.ux-m-only { display: none; }

@media (max-width: 900px) {
    body.ux .ux-m-only { display: block; }

    /* ---------- TOP BAR: ☰ | jina la duka | kengele | mtumiaji ---------- */
    body.ux .ux-top { height: 58px; padding: 0 10px; gap: 8px; }
    body.ux .ux-brand { padding: 0; gap: 10px; flex: 1; min-width: 0; }
    body.ux .ux-burger { order: -1; margin: 0; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(180deg, var(--ga), var(--gb)); color: #fff; border: 0; display: grid; place-items: center; flex-shrink: 0; }
    body.ux .ux-burger .ic { width: 20px; height: 20px; }
    body.ux .ux-brand-link { min-width: 0; gap: 8px; }
    body.ux:not(.ux-pos) .ux-brand .ux-logo { display: none; }
    body.ux .ux-brand-txt { display: block; min-width: 0; }
    body.ux .ux-brand-txt b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.ux .ux-brand-txt small { display: none; }
    body.ux .ux-top-right { gap: 8px; margin-left: 0; flex-shrink: 0; }
    body.ux .ux-top-right > .ux-pos-pill, body.ux .ux-top-right > .ux-clock, body.ux .ux-top-right > .dropdown:not(.ux-acct-wrap), body.ux .ux-top-right > .ux-sync, body.ux .ux-top-right > .ux-online-ic { display: none !important; }
    body.ux .ux-top-right > .ux-bell { display: grid !important; width: 40px; height: 40px; margin: 0; border-radius: 11px; }
    body.ux .ux-acct { padding: 0; border: 0; background: none; }
    body.ux .ux-acct .ux-avatar { width: 40px; height: 40px; }
    /* POS: nembo ni kitufe cha kurudi Dashibodi, Bili ni icon */
    body.ux.ux-pos .ux-brand-txt { display: none; }
    body.ux.ux-pos .ux-brand { flex: 0 0 auto; }
    body.ux.ux-pos .ux-top-pos { flex: 1; gap: 8px; }
    body.ux.ux-pos .ux-top-pos .ux-chip-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
    /* lugha + rangi ndani ya menyu ya mtumiaji */
    body.ux .ux-m-acct .ux-m-lang, body.ux .ux-m-acct .ux-m-themes { display: flex; align-items: center; gap: 6px; padding: 8px 14px; }
    body.ux .ux-m-acct span { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; }
    body.ux .ux-m-acct span .ic { width: 17px; height: 17px; }
    body.ux .ux-m-lang button { border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; padding: 5px 10px; font-weight: 700; font-size: 12.5px; color: #475569; }
    body.ux .ux-m-lang button.on { background: var(--g); border-color: var(--g); color: #fff; }
    body.ux .ux-m-themes button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; padding: 0; }

    /* ---------- MENYU YA CHINI: nafasi 5 sawa, POS katikati ---------- */
    body.ux .mnav2 { display: grid !important; grid-template-columns: repeat(5, 1fr); align-items: end; height: auto; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -6px 18px rgba(15, 23, 42, .06); }
    body.ux .mnav2 .mn { color: #64748b; font-size: 11px; font-weight: 600; gap: 3px; justify-content: flex-end; min-width: 0; }
    body.ux .mnav2 .mn > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    body.ux .mnav2 .mn-p { width: 52px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: background .15s; }
    body.ux .mnav2 .mn-p .ic { width: 22px; height: 22px; }
    body.ux .mnav2 .mn.on { color: var(--gc, var(--g)); }
    body.ux .mnav2 .mn.on .mn-p { background: rgba(var(--g-rgb), .14); }
    body.ux .mnav2 .mn-fab { width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, var(--ga), var(--gb)); border: 4px solid #fff; box-shadow: 0 6px 14px rgba(var(--g-rgb), .4); }
    body.ux .mnav2 .mn-fab .ic { width: 24px; height: 24px; }
    body.ux .mnav2 .mn-pos { color: var(--gc, var(--g)); }
    body.ux.ux-pos .main-content-full { padding-bottom: 8px !important; }

    /* ---------- "ZAIDI": makundi Biashara / Fedha / Mfumo ---------- */
    body.ux .msheet2 { padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); }
    body.ux .msheet2 .ms-h { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: #94a3b8; font-weight: 800; margin: 12px 4px 8px; }
    body.ux .msheet2 .ms-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    body.ux .msheet2 .ms-t { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; text-align: center; color: #1e293b; font-size: 11.5px; font-weight: 600; text-decoration: none; line-height: 1.2; }
    body.ux .msheet2 .ms-t > span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; }
    body.ux .msheet2 .ms-t .ic { width: 22px; height: 22px; }

    /* ---------- KICHWA CHA UKURASA: kifupi, vitufe kama icon ---------- */
    body.ux .ux-page-head { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
    body.ux .ux-page-head h1 { font-size: 22px !important; line-height: 1.2; }
    body.ux .ux-page-head > div:first-child > p { font-size: 12.5px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

    /* vitufe vya kichwa: icon tu */
    body.ux .ux-head-actions { gap: 8px; flex-wrap: nowrap; }
    body.ux .ux-head-actions > .ux-btn, body.ux .ux-head-actions > a.ux-btn, body.ux .ux-page-head .ux-actions > .ux-btn { font-size: 0 !important; width: 42px; height: 42px !important; padding: 0 !important; justify-content: center; gap: 0 !important; flex-shrink: 0; }
    body.ux .ux-head-actions > .ux-btn .ic, body.ux .ux-page-head .ux-actions > .ux-btn .ic { width: 20px; height: 20px; margin: 0; }
    body.ux .ux-page-head > div:first-child { min-width: 0; flex: 1; }

    /* ---------- KADI ZA TAKWIMU: kiasi kizima bila kukatika ---------- */
    body.ux .ux-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    body.ux .ux-stat { flex-direction: column; align-items: flex-start !important; gap: 8px !important; padding: 12px !important; min-width: 0; }
    body.ux .ux-stat-ic { width: 32px !important; height: 32px !important; border-radius: 9px !important; position: absolute; }
    body.ux .ux-stat-ic .ic { width: 17px; height: 17px; }
    body.ux .ux-stat { position: relative; }
    body.ux .ux-stat-body { width: 100%; min-width: 0; }
    body.ux .ux-stat-lbl { font-size: 12px !important; min-height: 32px; display: flex; align-items: center; padding-left: 40px; line-height: 1.2; }
    body.ux .ux-stat-val { font-size: 17px !important; white-space: nowrap; overflow: visible !important; text-overflow: clip !important; margin-top: 6px; letter-spacing: -.2px; }
    body.ux .ux-stat-sub { font-size: 11.5px !important; }

    /* ---------- DASHIBODI ---------- */
    body.ux .ux-dash-head .ux-dash-chips { width: 100%; justify-content: space-between; }
    body.ux .ux-m-qa { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
    body.ux .ux-m-qa a { background: #fff; border-radius: 12px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #334155; text-decoration: none; text-align: center; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
    body.ux .ux-m-qa a > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
    body.ux .ux-m-qa .ic { width: 19px; height: 19px; }
}

@media (max-width: 700px) {
    /* ---------- VICHUJIO: utafutaji + "Chuja" ---------- */
    body.ux .ux-filters.m-fl > .ux-field:not(.m-keep), body.ux .ux-filters.m-fl > .ux-btn:not(.m-fbtn), body.ux .ux-filters.m-fl > button:not(.m-fbtn), body.ux .ux-filters.m-fl > .ux-filter-label { display: none !important; }
    body.ux .ux-filters.m-fl.m-open > .ux-field:not(.m-keep) { display: flex !important; flex: 1 1 100% !important; }
    body.ux .ux-filters.m-fl.m-open > .ux-btn, body.ux .ux-filters.m-fl.m-open > button { display: inline-flex !important; }
    body.ux .ux-filters.m-fl { padding: 10px !important; gap: 10px !important; }
    body.ux .m-frow { display: flex; gap: 8px; width: 100%; align-items: flex-end; flex: 1 1 100%; }
    body.ux .m-frow > .ux-field { flex: 1 1 auto !important; min-width: 0; width: auto !important; }
    body.ux .ux-filters.m-fl > .ux-field, body.ux .ux-filters.m-fl > .m-frow { max-width: 100%; }
    body.ux .m-frow > .ux-field > label { display: none; }
    body.ux .m-fbtn { height: 46px; padding: 0 14px; gap: 6px; flex-shrink: 0; position: relative; }
    body.ux .m-fbtn i { position: absolute; top: -6px; right: -6px; background: var(--g); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; border-radius: 9px; padding: 1px 6px; }
    body.ux .ux-filters.m-open .m-fbtn { background: rgba(var(--g-rgb), .1); border-color: var(--g); color: var(--gc, var(--g)); }

    /* ---------- ORODHA (Mauzo, Madeni): kila kipengele mstari mmoja ---------- */
    body.ux table.m-rows, body.ux table.m-rows > tbody { display: block; width: 100%; }
    body.ux table.m-rows > thead, body.ux table.m-rows td.m-hide, body.ux table.m-rows td.m-user, body.ux table.m-rows td.m-days { display: none !important; }
    body.ux .ux-tablecard:has(table.m-rows) { background: transparent; box-shadow: none; border: 0; padding: 0; overflow: visible; }
    body.ux .ux-tablecard:has(table.m-rows) .ux-tc-head { background: #fff; border-radius: 12px; margin-bottom: 8px; }
    body.ux table.m-rows > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name amt act" "meta st act"; column-gap: 10px; row-gap: 3px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 6px 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); border: 0; }
    body.ux table.m-rows > tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; text-align: left; background: transparent !important; min-width: 0; height: auto !important; min-height: 0 !important; max-width: none !important; width: auto !important; line-height: 1.3; box-shadow: none !important; }
    body.ux table.m-rows > tbody > tr > td::before, body.ux table.m-rows > tbody > tr > td::after { display: none !important; }
    body.ux table.m-rows td.m-name { grid-area: name; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.ux table.m-rows td.m-name .ux-csub { display: none; }
    body.ux table.m-rows td.m-name .ux-cname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.ux table.m-rows td.m-meta1, body.ux table.m-rows td.m-meta2 { display: none !important; }
    body.ux table.m-rows td.m-meta { display: block !important; grid-area: meta; font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.ux table.m-rows td.m-amt { grid-area: amt; text-align: right !important; font-weight: 800; font-size: 14.5px; white-space: nowrap; }
    body.ux table.m-rows td.m-st { grid-area: st; text-align: right !important; }
    body.ux table.m-rows td.m-st .ux-badge { font-size: 10.5px; padding: 2px 7px; }
    body.ux table.m-rows td.m-act { grid-area: act; display: flex !important; align-items: center; gap: 4px; }
    body.ux table.m-rows td.m-act .ux-btn-xs { height: 34px; padding: 0 10px; }
    body.ux table.m-rows td.m-act .ux-btn-xs span, body.ux table.m-rows td.m-act .ux-btn-xs { font-size: 0; gap: 0; }
    body.ux table.m-rows td.m-act .ux-btn-xs .ic { width: 17px; height: 17px; }
    body.ux table.m-rows > tbody > tr:has(> td[colspan]) { display: block; }
    body.ux table.m-rows > tbody > tr > td[colspan] { display: block; text-align: center; }

    /* ---------- KADI ZA KAWAIDA (Bidhaa, Wateja, Manunuzi...): mbili kwa mstari ---------- */
    body.ux table.mc-on tr:not([style*="display: none"]):not([style*="display:none"]) { display: grid !important; }
    body.ux table.mc-on tr { grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 4px 12px 8px; border-radius: 12px; }
    body.ux table.mc-on td { flex-direction: column; align-items: flex-start !important; justify-content: flex-start; gap: 1px; padding: 6px 0 !important; border-bottom: 0 !important; text-align: left !important; font-size: 13.5px; }
    body.ux table.mc-on td::before { max-width: 100%; font-size: 10.5px; }
    body.ux table.mc-on td > .mc-v { font-weight: 600; }
    body.ux table.mc-on td.mc-title { grid-column: 1 / -1; font-size: 14.5px; font-weight: 700; padding: 8px 34px 6px 0 !important; border-bottom: 1px solid #eef1f5 !important; }
    body.ux table.mc-on td.mc-act, body.ux table.mc-on td.mc-span { grid-column: 1 / -1; align-items: flex-end !important; }
    body.ux table.mc-on td.mc-chk { top: 10px; }
    body.ux table.mc-on tr.pos-cart-row { display: grid !important; }
}

/* ---------- POS YA SIMU ---------- */
.m-qb, .m-x, td.m-cell, th.m-cell { display: none; }
@media (max-width: 900px) {
    body.ux.ux-pos .main-content-full { padding: 8px 8px 8px !important; overflow: hidden; height: calc(100dvh - 58px); }
    body.ux .ux-pos-card { padding: 10px; border-radius: 12px; }
    body.ux .ux-pos-line { gap: 8px; margin-bottom: 8px; }
    body.ux .ux-pos-line .ux-pos-input { height: 46px !important; font-size: 15px !important; }
    body.ux .ux-pos-plus { width: 46px; min-width: 46px; height: 46px; border-radius: 11px; }
    body.ux .ux-pos-card .pos-top { min-height: 0; }
    body.ux .pos-cart-scroll { flex: 1; min-height: 0; overflow-y: auto; }
    body.ux table.ux-cart-table, body.ux table.ux-cart-table > tbody { display: block; width: 100%; }
    body.ux table.ux-cart-table colgroup, body.ux table.ux-cart-table > thead { display: none; }
    body.ux table.ux-cart-table tr.pos-cart-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "name name del" "price qty sub"; align-items: center; column-gap: 6px; row-gap: 6px; padding: 10px 4px 10px 10px; border-bottom: 1px solid #eef1f5; background: #fff; }
    body.ux table.ux-cart-table tr.pos-cart-row > td { display: block; padding: 0 !important; border: 0 !important; background: none !important; font-size: 14px !important; height: auto !important; }
    body.ux table.ux-cart-table tr.pos-cart-row > td.pos-row-num { display: none !important; }
    body.ux .ux-pos-sum-l #discountChipLabel, body.ux .ux-pos-sum-l #transportChipLabel { display: inline !important; }
    body.ux table.ux-cart-table td.ux-cart-name { grid-area: name; font-size: 15px !important; font-weight: 700; text-align: left; line-height: 1.25; }
    body.ux table.ux-cart-table td.ux-cart-name .ux-cart-edit { width: 26px; height: 26px; vertical-align: middle; }
    body.ux table.ux-cart-table td.ux-cart-price { grid-area: price; color: #64748b; white-space: nowrap; text-align: left; }
    body.ux .m-x { display: inline; }
    body.ux table.ux-cart-table td.ux-cart-qty { grid-area: qty; display: flex !important; align-items: center; border: 1px solid #cbd5e1 !important; border-radius: 10px; overflow: hidden; width: max-content; }
    body.ux .m-qb { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: #f8fafc; color: #0f172a; padding: 0; }
    body.ux .m-qb .ic { width: 18px; height: 18px; }
    body.ux table.ux-cart-table td.ux-cart-qty .ux-qty { width: 46px !important; height: 38px !important; border: 0 !important; border-radius: 0 !important; text-align: center; font-weight: 800; font-size: 16px !important; padding: 0 !important; background: #fff; box-shadow: none !important; }
    body.ux table.ux-cart-table td.ux-cart-sub { grid-area: sub; text-align: right !important; font-weight: 800; font-size: 15.5px !important; padding-right: 6px !important; }
    body.ux table.ux-cart-table td.pos-row-remove { grid-area: del; text-align: right; }
    body.ux table.ux-cart-table td.pos-row-remove .ux-cart-del { width: 32px; height: 32px; border: 0; background: none; color: #ef4444; }
    body.ux table.ux-cart-table tr.pos-debt-row, body.ux table.ux-cart-table tr.pos-wallet-row, body.ux table.ux-cart-table tr.pos-hastahili-row { display: block; }
    body.ux table.ux-cart-table tr.pos-debt-row > td, body.ux table.ux-cart-table tr.pos-wallet-row > td, body.ux table.ux-cart-table tr.pos-hastahili-row > td { display: inline-block; padding: 6px !important; }

    /* paneli ya chini: chips -> jumla -> vitufe */
    body.ux .ux-pos-bottom { display: grid !important; grid-template-columns: 52px 52px minmax(0, 1fr) !important; grid-template-rows: auto auto 54px !important; gap: 8px !important; padding-top: 10px; border-top: 1px solid #e2e8f0; margin-top: 4px; }
    body.ux .ux-pos-sum-l { grid-column: 1 / -1 !important; grid-row: 1 !important; background: none !important; padding: 0 !important; height: auto !important; display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
    body.ux .ux-pos-sum-l .ux-pos-sep { display: none; }
    body.ux .ux-pos-items { order: 9; margin-left: auto; font-size: 12.5px !important; color: #64748b; white-space: nowrap; }
    body.ux .ux-pos-items b { font-size: 13px !important; color: #334155; }
    body.ux .ux-disc-chip { height: 34px !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 999px !important; white-space: nowrap; }
    body.ux .ux-disc-chip .ic { width: 16px; height: 16px; }
    body.ux .ux-disc-input { height: 34px !important; width: 96px !important; border-radius: 999px !important; }
    body.ux .ux-pos-sum-r { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; align-items: baseline; justify-content: space-between; padding: 0 2px !important; background: none !important; height: auto !important; }
    body.ux .ux-pos-sum-r > span:first-child { font-size: 14px !important; color: #475569; font-weight: 600; }
    body.ux .ux-pos-sum-r .pos-summary-total-amount { font-size: 25px !important; white-space: nowrap; }
    body.ux .ux-pos-btn { grid-row: 3 !important; height: 54px !important; border-radius: 12px !important; font-size: 0 !important; gap: 0 !important; padding: 0 !important; }
    body.ux .ux-pos-btn .ic { width: 22px !important; height: 22px !important; }
    body.ux .ux-pos-bill { grid-column: 1 !important; }
    body.ux .ux-pos-cancel { grid-column: 2 !important; background: #fee2e2 !important; color: #dc2626 !important; box-shadow: none !important; }
    body.ux .ux-pos-pay { grid-column: 3 !important; font-size: 19px !important; gap: 10px !important; }
}

/* Manunuzi / Matumizi: kadi 2 za takwimu; kitufe cha kufuta matumizi ni chekundu */
body.ux .pu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
body.ux .ex-del { color: #dc2626; }
@media (max-width: 700px) { body.ux .ux-filters:not(.m-fl) > .ux-field > label { display: none; } body.ux .ux-filters:not(.m-fl) { padding: 10px !important; } }