/* ============================================================
   BMB Buzelengule Shop POS - App Stylesheet (Advanced/Gradient Edition)
   ============================================================ */

/* ---------- Ubuntu Font (self-hosted, kama SMA - bado inatumika sehemu za zamani) ---------- */
@font-face {
    font-family: 'Ubuntu';
    src: url('../vendor/fonts/ubuntu/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../vendor/fonts/ubuntu/Ubuntu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* ---------- Inter / Poppins (self-hosted, sawa na reference) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/inter/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/poppins/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/poppins/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../vendor/poppins/poppins-latin-800-normal.woff2') format('woff2'); }

/* ---------- THEME: Bluu (Default - sasa "Indigo Admin" design system) ---------- */
body, body.theme-bluu {
    --sidebar-bg: #312e81;
    --sidebar-bg-2: #4f46e5;
    --sidebar-text: #dfe1fb;
    --accent: #4f46e5;
    --accent-light: #6366f1;
    --accent-dark: #4338ca;
    --success: #16a34a;
    --success-dark: #15803d;
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --amber: #f59e0b;
    --amber-dark: #b45309;
    --gray: #64748b;
}

/* ---------- THEME: Bahari (Teal) ---------- */
body.theme-bahari {
    --sidebar-bg: #052e2b;
    --sidebar-bg-2: #0a4d47;
    --sidebar-text: #b9e4df;
    --accent: #17A398;
    --accent-light: #35c2b6;
    --accent-dark: #0d6e65;
    --success: #639922;
    --success-dark: #3f6614;
    --danger: #E24B4A;
    --danger-dark: #a52f2e;
    --amber: #BA7517;
    --amber-dark: #8a570f;
    --gray: #888780;
}

/* ---------- THEME: Zambarau (Indigo) ---------- */
body.theme-zambarau {
    --sidebar-bg: #221046;
    --sidebar-bg-2: #33176b;
    --sidebar-text: #d6cdf0;
    --accent: #6C5CE7;
    --accent-light: #8b7cf0;
    --accent-dark: #4a3bb0;
    --success: #639922;
    --success-dark: #3f6614;
    --danger: #E24B4A;
    --danger-dark: #a52f2e;
    --amber: #BA7517;
    --amber-dark: #8a570f;
    --gray: #888780;
}

/* ---------- THEME: Giza (Charcoal) ---------- */
body.theme-giza {
    --sidebar-bg: #1a1a1a;
    --sidebar-bg-2: #2b2b2b;
    --sidebar-text: #bdbdbd;
    --accent: #5b6270;
    --accent-light: #7a818f;
    --accent-dark: #3a3f47;
    --success: #639922;
    --success-dark: #3f6614;
    --danger: #E24B4A;
    --danger-dark: #a52f2e;
    --amber: #BA7517;
    --amber-dark: #8a570f;
    --gray: #888780;
}

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 14px; line-height: 1.42857143; background: #f4f5fb; margin: 0; color: #1e293b; }
h1, h2, h3, h4 { font-family: 'Poppins', 'Inter', 'Segoe UI', Arial, sans-serif; font-weight: 700; }

/* ---------- Login page ---------- */
.login-page {
    background: linear-gradient(135deg, #2f7bc4 0%, #1a4d8f 100%);
    height: 100vh; display: flex; align-items: center; justify-content: center;
}
.login-wrapper { max-width: 420px; width: 100%; text-align: center; padding: 20px; }
.login-brand { margin-bottom: 20px; }
.login-logo {
    display: inline-block;
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    color: #fff; font-size: 26px; font-weight: bold; padding: 10px 26px;
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.login-shop-name { color: #fff; font-weight: 600; margin-top: 8px; letter-spacing: 1px; }
.login-card {
    background: #fff; border-radius: 12px; padding: 26px; text-align: left;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-title { color: var(--accent); font-size: 15px; margin-bottom: 16px; }
.login-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.login-footer { margin-top: 16px; font-size: 13px; }

/* ---------- Topbar ---------- */
.topbar {
    background: linear-gradient(90deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: #fff; display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.topbar-brand { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.topbar-pos-btn { text-decoration: none; }
.topbar-logout { color: #fff; }

html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { flex-shrink: 0; }

/* ---------- Layout ---------- */
.app-body { display: flex; flex: 1; min-height: 0; }
.sidebar {
    width: 220px; flex-shrink: 0; padding: 16px 0; overflow-y: auto;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
}
.sidebar-item, .sidebar-subitem { display: block; color: var(--sidebar-text); text-decoration: none; padding: 13px 16px; font-size: 14px; margin: 3px 12px; border-radius: 10px; transition: background-color .15s; }
.sidebar-item i, .sidebar-group-toggle i { width: 18px; margin-right: 10px; text-align: center; }
.sidebar-item.active {
    background: rgba(255,255,255,.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.sidebar-group-toggle { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.sidebar-caret { font-size: 15px; color: var(--sidebar-text); opacity: .8; width: 14px; text-align: center; }
.sidebar-submenu { display: none; }
.sidebar-submenu.open { display: block; }
.sidebar-subitem { padding-left: 34px; font-size: 13px; }
.main-content { flex: 1; display: flex; flex-direction: column; padding: 22px; min-width: 0; overflow-y: auto; }
.main-content-full { padding: 14px 20px 20px; background: #f7f8fa; }

/* ---------- Common components ---------- */
.page-header { margin-bottom: 18px; }
.section-title { font-weight: 600; margin: 22px 0 10px; font-size: 14px; color: #333; }

.stat-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.debt-overdue-row { background: #fef2f2 !important; }
.debt-overdue-row td { color: #991b1b; }
.stat-card {
    background: linear-gradient(145deg, #ffffff 0%, #f4f7fb 100%);
    border-radius: 12px; padding: 16px 20px; min-width: 190px;
    box-shadow: 0 6px 18px rgba(20,30,60,.08), 0 1px 3px rgba(0,0,0,.04);
    border-top: 3px solid var(--accent);
}
.stat-label { font-size: 12px; color: #777; margin-bottom: 6px; }
.stat-value { font-size: 22px; font-weight: 700; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

.quick-links { display: flex; gap: 14px; flex-wrap: wrap; }
.quick-link {
    width: 104px; height: 94px; border-radius: 10px; color: #fff; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; font-size: 12px; font-weight: 600;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.quick-link i { font-size: 22px; }
.quick-link-blue   { background: #3B6FE0; }
.quick-link-green  { background: #16A375; }
.quick-link-amber  { background: #E0435A; }
.quick-link-gray   { background: #6C5CE7; }

.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #b91c1c; }
.badge-gray    { background: #f1f5f9; color: #64748b; }

table.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
table.table th, table.table td { padding: 10px 12px; border: 1px solid #cbd5e1; font-size: 13px; text-align: left; }
table.table th { background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; border-color: var(--accent-dark); }
table.table tbody tr:nth-child(even) td { background: #f8fafc; }
table.table tr:hover td { background: #eef2ff; }
.clickable-row { cursor: pointer; }

/* ---------- Receipt (thermal print) ---------- */
.receipt { width: 100%; max-width: 480px; margin: 0 auto; font-family: 'Ubuntu', 'Segoe UI', Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #000; }
/* ---- Risiti kwa mtindo wa SMA (sales/_receipt_body.php) ---- */
.receipt .text-center { text-align: center; }
.receipt p { margin: 0 0 10px; }
.receipt h3 { margin: 5px 0; font-size: 24px; font-weight: 400; text-transform: uppercase; line-height: 1.1; }
.receipt h4 { margin: 5px 0 10px; font-size: 18px; font-weight: 400; text-transform: uppercase; }
.receipt img.rc-logo { max-width: 100%; max-height: 90px; height: auto; display: block; margin: 0 auto 4px; }
.receipt h3.rc-shop { font-weight: 800; text-transform: uppercase; margin: 2px 0 0; }
.receipt .rc-cust { font-size: 16px; font-weight: 700; }
.receipt table.rc { width: 100%; border-collapse: collapse; margin-bottom: 10px; box-shadow: none; border-radius: 0; }
.receipt table.rc th, .receipt table.rc td { padding: 4px 2px; border: 0; vertical-align: top; font-size: 14px; text-align: left; }
.receipt table.rc .r { text-align: right; }
.receipt table.rc tr.rc-th th { font-size: 10px; font-weight: 700; background: #f9f9f9; border-bottom: 2px solid #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.receipt table.rc tr.rc-item td { font-size: 15px; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.receipt table.rc tr.rc-debt td { font-size: 14px; }
.receipt table.rc tr.rc-item-mix .rc-mix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; font-size: 15px; }
.receipt table.rc tr.rc-item-mix .rc-mix-head .rc-mix-name { flex: 1; }
.receipt table.rc tr.rc-item-mix .rc-mix-head .rc-mix-qtyprice,
.receipt table.rc tr.rc-item-mix .rc-mix-head .rc-mix-amount { white-space: nowrap; }
.receipt table.rc tr.rc-item-mix .rc-mix-head .rc-mix-amount { text-align: right; }
.receipt table.rc div.rc-mix-inline { font-size: 12px; font-weight: 600; line-height: 1.5; color: #000; white-space: normal; word-break: break-word; margin-top: 4px; padding-top: 4px; border-top: 2px dashed #555; width: 100%; }
.receipt table.rc-pay td { background: #f9f9f9; border-top: 1px solid #ddd; }
.receipt .rc-qr { text-align: center; margin: 6px 0 4px; }
/* ---- Alert na vitufe vya risiti (kama SMA/Bootstrap 3) ---- */
.rc-alert { padding: 15px; margin-bottom: 20px; border: 1px solid #d6e9c6; border-radius: 4px; background: #dff0d8; color: #3c763d; font-size: 14px; }
.rc-close { float: right; padding: 0; font-size: 21px; font-weight: 700; line-height: 1; color: #000; opacity: .2; cursor: pointer; }
.rc-btn { display: block; width: 100%; box-sizing: border-box; padding: 6px 12px; margin-bottom: 5px; border: 1px solid transparent; border-radius: 0; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; font: 400 14px/1.42857143 'Ubuntu', 'Segoe UI', Arial, sans-serif; cursor: pointer; }
.rc-primary { background: #428bca; border-color: #357ebd; } .rc-primary:hover { background: #3071a9; }
.rc-warn { background: #f0ad4e; border-color: #eea236; } .rc-warn:hover { background: #ec971f; }
.rc-alert .rc-btn { text-transform: none; }
#buttons hr { border: 0; border-top: 1px solid #eee; margin: 20px 0; }
.rc-default { background: #fff; border-color: #ccc; color: #333; text-transform: none; } .rc-default:hover { background: #e6e6e6; }
.rc-group { display: flex; margin-top: 14px; } .rc-group .rc-btn { flex: 1; margin-bottom: 0; text-transform: none; }
.receipt-kv td:first-child { width: 90px; vertical-align: top; }

/* Kuprint - ijae karatasi/printer YOYOTE (thermal 80mm/58mm AU A4/Letter).
   HATUNA tena @page{size:80mm} fasta - Chrome/printer dialog ndiyo
   huamua ukubwa halisi wa karatasi kutoka "Paper size" uliyochagua
   wewe mwenyewe. .receipt sasa inajaza 100% ya hicho ukubwa daima. */
/* Pembezoni ya print: kama SMA (nimesoma posNEW.zip/print.css - HAKUNA
   @page{margin} popote kwenye SMA; inazima tu margin/padding ya vyombo
   vikuu wakati wa print na kuachia print dialog ya browser iamue margin
   halisi - Default inatoa margin ya kawaida "kama daftari" kwenye A4,
   None inatoa pembezoni ndogo kwenye thermal. Hatuongezi @page hapa). */
@media print {
    .receipt { width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 0 !important; box-sizing: border-box; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; }
    /* Risiti inajaza upana wote wa karatasi: herufi na nafasi za mistari zinakua kulingana na upana (cqw = upana wa risiti).
       80mm: ~14px kama kawaida; A4: kubwa zaidi na nafasi zaidi ili ijae ukurasa. Scale ya print dialog inaipunguza/kuikuza yote pamoja. */
    *:has(> .receipt) { container-type: inline-size; }
    .receipt { font-size: calc(10px + 1.1cqw) !important; line-height: 1.45 !important; }
    .receipt p { margin: 0 0 .7em !important; }
    .receipt h3, .receipt h3.rc-shop { font-size: 1.7em !important; }
    .receipt h4 { font-size: 1.25em !important; margin: .3em 0 .6em !important; }
    .receipt .rc-cust { font-size: 1.15em !important; }
    .receipt img.rc-logo { max-height: calc(40px + 8cqw) !important; }
    .receipt table.rc { margin-bottom: .7em !important; }
    .receipt table.rc th, .receipt table.rc td { font-size: 1em !important; padding: .32em .15em !important; }
    .receipt table.rc tr.rc-item td { font-size: 1.05em !important; }
    .receipt table.rc tr.rc-th th { font-size: .72em !important; }
    .receipt table.rc tr.rc-item-mix .rc-mix-head { font-size: 1.05em !important; }
    .receipt table.rc div.rc-mix-inline { font-size: .85em !important; }
    .receipt .rc-qr .receipt-qr-box svg, .receipt .rc-qr .receipt-qr-box img, .receipt .rc-qr .receipt-qr-box canvas { width: calc(12mm + 1.5cqw) !important; height: calc(12mm + 1.5cqw) !important; }

    /* Kuprint risiti ndani ya List Sales Modal - tunatumia body class
       (imewekwa na printSaleModal() JS) badala ya visibility:hidden
       + position:fixed, kwa sababu hiyo ilisababisha risiti "kujirudia"
       kwenye kurasa nyingi (fixed elements zinachapishwa kwenye kila
       ukurasa wa karatasi kama maudhui yaliyofichwa bado yana urefu). */
    body.printing-modal-receipt > *:not(#saleModal) { display: none !important; }
    body.printing-modal-receipt #saleModal {
        position: static !important; background: none !important;
        padding: 0 !important; display: block !important; overflow: visible !important;
    }
    /* Print ya modal kama SMA (modal ya Bootstrap): nafasi ya ndani 25px kila upande (dialog margin 10px + modal-body padding 15px),
       risiti inajaza upana wote (bila kikomo cha 480px), bila fremu wala kivuli; ukurasa 1. A4 Default: kushoto/kulia ~16.6mm, upana ~177mm. */
    body.printing-modal-receipt #saleModal .modal-dialog { width: auto !important; max-width: none !important; margin: 10px !important; }
    body.printing-modal-receipt #saleModal .modal-content { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 15px !important; }
    body.printing-modal-receipt #saleModal .receipt { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
    /* Modal ikichapishwa: risiti ianze juu kabisa ya karatasi (bila mandharinyuma, nafasi ya juu, wala mpangilio wa simu
       ambao huweka modal chini ya skrini kwenye karatasi nyembamba ya 80mm) */
    html body.printing-modal-receipt { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; padding: 0 !important; margin: 0 !important; }
    html body.printing-modal-receipt > *:not(#saleModal) { display: none !important; }
    html body.printing-modal-receipt #saleModal { position: static !important; inset: auto !important; display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; transform: none !important; animation: none !important; }
    html body.printing-modal-receipt #saleModal .modal-dialog { position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; animation: none !important; top: auto !important; bottom: auto !important; }
    html body.printing-modal-receipt #saleModal .modal-content { position: static !important; padding: 0 !important; margin: 0 !important; max-height: none !important; overflow: visible !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; transform: none !important; animation: none !important; }
    body.printing-modal-receipt .modal-close-btn,
    body.printing-modal-receipt .modal-x,
    body.printing-modal-receipt .receipt-actions { display: none !important; }

}

/* ---------- Utility layout ---------- */
.d-flex { display: flex; }
.justify-between { justify-content: space-between; align-items: center; }
.text-center { text-align: center; }
.text-muted { color: #888; }
.small { font-size: 12px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #333; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.form-row .form-group { flex: 1; min-width: 200px; }
.form-row .col-6 { flex-basis: calc(50% - 7px); }
.form-row .col-4 { flex-basis: calc(33.333% - 10px); }
.form-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; }

input[type="text"], input[type="password"], input[type="date"], input[type="file"],
select, textarea {
    width: 100%; box-sizing: border-box; padding: 9px 16px; border: 1px solid #d7dbe0;
    border-radius: 10px; font-size: 14px; background: #f8fafc; border-color: #e2e8f0; transition: .15s;
}
textarea { border-radius: 16px; }
textarea { min-height: 70px; resize: vertical; }
.form-control { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 14px; background: #f8fafc; transition: .15s; }
.form-control:focus, input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent, #6366f1); box-shadow: 0 0 0 4px var(--mw-hover, #eef2ff); background: #fff;
}
.sidebar-subitem:hover {
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.sidebar-group-toggle:hover {
    background: rgba(255,255,255,.08);
}
textarea.form-control { border-radius: 16px; }
table .form-control, table input[type="text"], table input[type="number"] { border-radius: 6px; padding: 6px 8px; }

/* ---------- Buttons (gradient, no hover animation) ---------- */
.btn {
    display: inline-block; padding: 9px 18px; border-radius: 10px; border: none; cursor: pointer;
    font-size: 14px; text-decoration: none; color: #333; background: #e9e9e9; font-weight: 600;
}
.btn-primary   { background: linear-gradient(135deg, #4a9de8 0%, var(--accent) 55%, var(--accent-dark) 100%); color: #fff; box-shadow: 0 4px 12px rgba(55,138,221,.35); }
.btn-secondary { background: linear-gradient(135deg, #e2e2e2 0%, #c7c7c7 100%); color: #333; }
.btn-success   { background: linear-gradient(135deg, #7fb33a 0%, var(--success) 55%, var(--success-dark) 100%); color: #fff; box-shadow: 0 4px 12px rgba(99,153,34,.35); }
.btn-danger    { background: linear-gradient(135deg, #ef6b6a 0%, var(--danger) 55%, var(--danger-dark) 100%); color: #fff; box-shadow: 0 4px 12px rgba(226,75,74,.35); }
.btn-amber     { background: linear-gradient(135deg, #e0a13a 0%, var(--amber) 55%, var(--amber-dark) 100%); color: #fff; box-shadow: 0 4px 12px rgba(186,117,23,.35); }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 8px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-xs { padding: 4px 9px; font-size: 11px; }
.btn-lg { padding: 13px 22px; font-size: 16px; }

/* ---------- Alerts ---------- */
.alert { padding: 11px 15px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 500; }
.alert-success { background: linear-gradient(90deg, #eaf3de, #dcecc9); color: #3b6d11; }
.alert-danger  { background: linear-gradient(90deg, #fcebeb, #f8d7d7); color: #a32d2d; }
.alert-warning { background: linear-gradient(90deg, #faeeda, #f5deb9); color: #854f0b; }
.alert-info    { background: linear-gradient(90deg, #e6f1fb, #cfe6f9); color: #185fa5; }

/* ---------- Dropdown menu (Actions, search results) ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    display: none;
    position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #e2e5e9;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 50; min-width: 180px;
    max-height: 260px; overflow-y: auto;
}
.dropdown-menu.show { display: block; }
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-menu a, .dropdown-row { display: block; padding: 9px 14px; text-decoration: none; color: #333; font-size: 13px; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-row:hover { background: #f2f5f9; }

/* ---------- Modal ---------- */
.modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,15,25,.55);
    display: flex; align-items: flex-start; justify-content: center; z-index: 100;
    overflow-y: auto; padding: 30px 0;
}
.modal-dialog { width: 90%; max-width: 520px; position: relative; }
.modal-content {
    background: #fff; border-radius: 12px; padding: 30px 22px 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35); position: relative;
    /* HAKUNA max-height/overflow-y hapa - kadi inakua kadiri ya maudhui,
       scroll inafanyika kwenye .modal (overlay) nzima, kama SMA. */
}
.modal-content h4 { margin-top: 0; }

/* Kitufe cha X - "kinaelea" nje ya pembe ya juu-kulia ya kadi, kama SMA */
.modal-close-btn {
    position: absolute; top: -14px; right: -14px;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px; color: #555; z-index: 2; transition: color .15s;
}
.modal-close-btn:hover { color: #dc2626; }

/* ---------- POS screen ---------- */
.pos-wrapper { }
.pos-totals { display: flex; gap: 20px; align-items: center; margin: 14px 0; font-size: 14px; flex-wrap: wrap; }
.pos-totals .total-payable {
    background: linear-gradient(135deg, #1c1c1c 0%, #333 100%);
    color: #fff; padding: 9px 18px; border-radius: 8px; font-weight: 700;
}
.payment-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }

/* ---------- POS Action Buttons (Create Bill / Cancel / Payment) ---------- */
.pos-action-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; margin-top: 10px; height: 76px; border-radius: 10px; overflow: hidden; }
.pos-action-grid .btn { border-radius: 0; margin: 0; height: 100%; box-shadow: none; }
.pos-action-grid .btn-amber { grid-column: 1; grid-row: 1; background: linear-gradient(135deg,#fbbf24,#b45309); color:#fff; }
.pos-action-grid .btn-danger { grid-column: 1; grid-row: 2; background: linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; }
.pos-action-grid .pos-payment-btn { grid-column: 2; grid-row: 1 / 3; font-size: 16px; background: linear-gradient(135deg,#22c55e,#15803d); color:#fff; }

/* ---------- Theme dropdown dots ---------- */
.theme-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }

/* ---------- Login page (v2 - shield icon, input icons, eye toggle) ---------- */
.login-logo-img { max-height: 70px; margin-bottom: 8px; }
.login-subtitle { font-size: 12px; color: #888; margin: -10px 0 16px; }
.login-input-group { position: relative; }
.login-input-icon { position: absolute; left: 12px; top: 12px; color: #999; }
.login-input { padding-left: 36px !important; }
.login-eye-toggle { position: absolute; right: 12px; top: 12px; color: #999; cursor: pointer; }
.login-badges { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.login-badge {
    background: linear-gradient(135deg, #eef2ff, #dbe4ff); color: #4a4a8f;
    font-size: 11px; padding: 4px 12px; border-radius: 20px; font-weight: 600;
}

/* ---------- Breadcrumb & Section Header (SMA-style) ---------- */
.breadcrumb-bar { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#888; margin-bottom:10px; }
.breadcrumb-bar a { color: var(--accent); text-decoration:none; }
.section-header { display:flex; align-items:center; gap:8px; background:var(--surface-1,#fff); padding:10px 14px; border-radius:8px 8px 0 0; border:1px solid #e5e5e5; border-bottom:none; }
.section-header i { color: var(--accent); }
.section-header h4 { margin:0; font-size:14px; font-weight:700; color:#1f5f9e; }
.section-desc { font-size:12px; color:#888; padding:8px 14px; border:1px solid #e5e5e5; border-top:none; border-bottom:none; background:#fff; }
.list-toolbar { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border:1px solid #e5e5e5; border-top:none; background:#fff; flex-wrap:wrap; gap:10px; }
.list-toolbar select, .list-toolbar input { width:auto; display:inline-block; }
.list-toolbar .table { border:none; box-shadow:none; border-radius:0; margin-top:0; }

/* ---------- Toolbar ya kadi (Add/Import/Export/Print) + Filters (SMA-style) ---------- */
.pt-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; border:1px solid #e5e5e5; border-top:none; background:#fff; }
.pt-toolbar-btns { display:flex; gap:8px; flex-wrap:wrap; }
.pt-toolbar-btns .btn { display:inline-flex; align-items:center; gap:6px; }
.pt-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#listForm.live-form.list-toolbar .pt-filters select,
#listForm.live-form.list-toolbar .pt-filters input { width:180px; flex:0 0 auto; }
#listForm.live-form.list-toolbar .pt-filters .select2-container { width:170px !important; flex:0 0 auto; }

/* ---------- Status badge (Stock) ---------- */
.stock-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.stock-badge.in { background:#e7f7ef; color:#0f9d58; }
.stock-badge.low { background:#fdf1e3; color:#c77c11; }
.stock-badge.out { background:#fdecec; color:#d93025; }

/* ---------- Icon buttons kwenye mstari wa jedwali (view/edit/delete) ---------- */
.row-icon-btns { display:flex; gap:4px; align-items:center; }
.icon-btn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid #e1e1e1; background:#fafafa; color:#555; text-decoration:none; cursor:pointer; }
.icon-btn:hover { background:#eee; }
.icon-btn.danger { color:#d93025; }
.icon-btn.danger:hover { background:#fdecec; border-color:#fbcaca; }

/* ---------- Dashboard Tabs (Latest Five) ---------- */
.dash-tabs { display:flex; gap:4px; border-bottom:2px solid #eee; margin-bottom:0; }
.dash-tab-btn { padding:8px 16px; background:none; border:none; cursor:pointer; font-size:13px; font-weight:600; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px; }
.dash-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Actions dropdown with icons (SMA-style) ---------- */
.dropdown-menu a i { width:16px; display:inline-block; text-align:center; margin-right:4px; }

/* ---------- POS: Customer field icons, row icons, summary table ---------- */
.btn-icon { width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; background:#e9e9e9; color:#555; flex-shrink:0; }
.btn-icon-blue { background: linear-gradient(135deg, #4a9de8, var(--accent-dark)); color:#fff; }
.btn-icon[disabled] { opacity:.5; cursor:not-allowed; }
.pos-row-icon { color:#888; cursor:pointer; margin-left:6px; font-size:11px; }
.pos-row-icon:hover { color: var(--accent); }
.pos-summary-table td { font-size:13px; }
.pos-summary-table td:nth-child(odd) { font-weight:600; width:15%; }

/* ---------- Bill cards (View Bills modal) ---------- */
.bill-card {
    background: linear-gradient(135deg, #5ad0e0, #3ba8c7);
    color:#fff; border-radius:8px; padding:12px 16px; width:200px; cursor:pointer; font-size:12px;
}
.bill-card-name { font-size:14px; font-weight:700; margin-bottom:4px; }

/* ---------- Receipt Fragment (Sale Details Modal) ---------- */
.fragment-table { width:100%; font-size:12px; }
.fragment-table td { padding:2px 0; }
.fragment-row { display:flex; justify-content:space-between; font-size:13px; padding:2px 0; }

/* ================================================================
   PROFESSIONAL DESIGN SYSTEM (Dashboard/Products/Sales/Forms)
   Sidebar inabaki nyeusi; content area inakuwa light na cards
   za rangi mchanganyiko.
   ================================================================ */
.main-content { background: #f7f8fa; }
.stat-card { border-top: none !important; }
.stat-card.stat-dark { background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; }
.stat-card.stat-dark .stat-label { color: rgba(255,255,255,.85); }
.stat-card.stat-mint { background: linear-gradient(135deg,#059669,#047857); }
.stat-card.stat-mint .stat-label, .stat-card.stat-mint .stat-value { color: #fff; }
.stat-card.stat-pink { background: linear-gradient(135deg,#dc2626,#b91c1c); }
.stat-card.stat-pink .stat-label, .stat-card.stat-pink .stat-value { color: #fff; }
.stat-card.stat-white { background: linear-gradient(135deg,#7c3aed,#5b21b6); }
.stat-card.stat-white .stat-label, .stat-card.stat-white .stat-value { color: #fff; }

/* ---------- POS: Full-height sticky-footer layout ---------- */
.pos-wrapper {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    background: #fff; border-radius: 10px; padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.pos-top { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.pos-cart-scroll { flex: 1; overflow-y: auto; border: 1px solid #e5e5e5; border-radius: 6px; min-height: 200px; }
.pos-cart-table { margin: 0; box-shadow: none; }
.pos-cart-row td { padding: 4px 8px !important; font-size: 12px; }
.pos-debt-row { background: transparent !important; }
.pos-debt-row td { padding: 12px 8px !important; font-size: 13px; font-weight: 400; color: inherit; letter-spacing: .03em; }
.pos-wallet-row { background: #f0fdf4 !important; }
.pos-wallet-row td { padding: 6px 8px !important; font-size: 12px; font-weight: 600; color: #166534; }
.pos-qty-input { width: 100%; padding: 3px 6px; font-size: 12px; box-sizing: border-box; border-radius: 6px; }
.pos-row-icon { color: #888; cursor: pointer; margin-left: 4px; font-size: 10px; }
.pos-row-icon:hover { color: var(--accent); }
.pos-bottom { flex-shrink: 0; margin-top: 8px; }

/* ---------- POS: summary bar imegawanywa 50/50 kuambatana na buttons ---------- */
.pos-summary-row-v2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 3px;
}
.pos-summary-half {
    background: #312e81; color: #fff; padding: 12px 18px; font-size: 14px;
    display: flex; justify-content: space-between; align-items: center;
}
.pos-summary-half:first-child { border-radius: 10px 0 0 10px; }
.pos-summary-half-right { border-radius: 0 10px 10px 0; }
.pos-discount-group { display: flex; align-items: center; gap: 8px; }
.pos-discount-group input {
    width: 110px; font-size: 14px; font-weight: 600; padding: 8px 12px; color: #1e293b;
    border-radius: 8px; border: 1.5px solid rgba(255,255,255,.4); background: #fff; text-align: right;
    font-family: 'Segoe UI', sans-serif; transition: .15s;
}
.pos-discount-group input:focus { outline: none; border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.pos-summary-total-amount { font-size: 17px; font-weight: 700; }

.btn-icon { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; background: #e9e9e9; color: #555; flex-shrink: 0; }
.btn-icon-blue { background: linear-gradient(135deg, #4a9de8, var(--accent-dark)); color: #fff; }

.bill-card {
    background: linear-gradient(135deg, #5ad0e0, #3ba8c7);
    color: #fff; border-radius: 8px; padding: 12px 16px; width: 200px; cursor: pointer; font-size: 12px;
}
.bill-card-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }

/* ---------- Select2 - kuendana na Design System yetu ---------- */
/* (mtindo wa zamani wa select2 umeondolewa: sasa uko mwishoni mwa faili, kama input za kawaida) */

/* ================================================================
   LOGIN PAGE V2 (WU Stock style) - logo ikijitokeza juu ya card
   ================================================================ */
.login-page-v2 {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 55%, var(--accent-light) 100%);
    padding: 20px;
}
.login-v2-wrapper { display: flex; flex-direction: column; align-items: center; }
.login-v2-brand { text-align: center; margin-bottom: 76px; }
.login-v2-brand-word { font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -0.5px; color: rgba(255,255,255,0.92); }
.login-v2-brand-word span { color: rgba(255,255,255,0.65); }
.login-v2-brand-tag { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.login-v2-card {
    background: #f8f9fc; border-radius: 20px; padding: 46px 36px 32px; width: 100%; max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35); text-align: center; position: relative; margin-top: 40px;
}
.login-v2-logo-badge {
    width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
    position: absolute; top: -42px; left: 50%; transform: translateX(-50%);
    box-shadow: 0 10px 24px rgba(0,0,0,.3); background: #eef2ff;
    display: flex; align-items: center; justify-content: center;
}
.login-v2-logo-badge i { font-size: 38px; color: #4f46e5; }
.login-v2-title { font-family: 'Segoe UI', Arial, sans-serif; font-size: 20px; font-weight: 800; margin: 10px 0 4px; color: #1e293b; }
.login-v2-subtitle { font-size: 13px; color: #888; margin-bottom: 24px; }
.login-v2-input-group { position: relative; margin-bottom: 14px; text-align: left; }
.login-v2-input-group i:first-child { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; color: #999; font-size: 15px; pointer-events: none; z-index: 2; }
input.login-v2-input {
    width: 100%; box-sizing: border-box; padding: 13px 16px 13px 48px !important; border: 1.5px solid #e2e8f0;
    border-radius: 12px; font-size: 14px; background: #fff; text-align: left;
}
.login-v2-eye { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #999; cursor: pointer; }
.login-v2-remember { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; margin: 8px 0 18px; text-align: left; }
.login-v2-remember input { width: auto; }
.login-v2-btn {
    width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.login-v2-copyright { color: rgba(255,255,255,.85); font-size: 12px; margin-top: 22px; }

/* ---------- Installation Wizard (v1.0) ---------- */
.install-card { max-width: 560px; padding: 46px 32px 32px; text-align: left; }
.install-card .login-v2-title, .install-card .login-v2-subtitle { text-align: center; }
.install-alert { margin-bottom: 18px; }
.install-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #e8eaf1; }
.install-section:last-of-type { border-bottom: none; }
.install-section-title { font-size: 14px; font-weight: 700; color: #334155; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.install-req-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; color: #475569; }
.install-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.install-badge-ok { background: #dcfce7; color: #15803d; }
.install-badge-fail { background: #fee2e2; color: #b91c1c; }
.install-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.install-divider { border: none; border-top: 1px dashed #e2e8f0; margin: 16px 0; }
.install-btn-secondary {
    width: 100%; padding: 11px; border: 1.5px solid var(--accent); border-radius: 12px; background: #fff;
    color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.install-btn-secondary:disabled { opacity: .6; cursor: default; }
.install-test-result { font-size: 12px; margin-top: 8px; min-height: 16px; }
.install-test-ok { color: #15803d; font-weight: 600; }
.install-test-fail { color: #b91c1c; font-weight: 600; }
@media (max-width: 480px) {
    .install-card { padding: 42px 18px 24px; max-width: 100%; }
    .install-field-grid { grid-template-columns: 1fr; }
}

/* ---------- Settings Tabs ---------- */
.settings-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e2e8f0; margin-bottom: 18px; flex-wrap: wrap; }
.settings-tab-btn {
    padding: 10px 18px; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600;
    color: #64748b; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.settings-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Settings - Save bar (daima inaonekana) na Feature toggles */
.settings-save-bar {
    position: sticky; bottom: 0; background: #fff; padding: 14px 0;
    margin-top: 22px; border-top: 1.5px solid #e2e8f0; text-align: right;
}
.feature-toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
.feature-toggle {
    display: flex !important; align-items: center; gap: 8px;
    padding: 10px 16px; border: 1.5px solid #e2e8f0; border-radius: 10px;
    background: #f8fafc; cursor: pointer; font-weight: 500 !important; font-size: 13px;
    transition: .15s;
}
.feature-toggle:has(input:checked) { border-color: var(--accent); background: #eef2ff; color: var(--accent); }
.feature-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Order View (View Sale Details richer layout) ---------- */
.order-view { font-family: 'Segoe UI', Arial, sans-serif; }
.ov-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.ov-card { display: flex; gap: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; }
.ov-card i { color: #94a3b8; flex-shrink: 0; }
.ov-card h4 { margin: 0 0 4px; font-size: 14px; }
.ov-card div { font-size: 12px; color: #555; }
.ov-qr-row { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.ov-qr-box { width: 110px; height: 110px; }
@media (max-width: 700px) { .ov-cards { grid-template-columns: 1fr; } }

/* ---------- Receipt QR Code - hakikisha iko katikati kabisa ---------- */
.receipt-qr-box { display: inline-block; margin: 0 auto; }
.receipt .center .receipt-qr-box { text-align: center; }

/* List Products - familia/product moja moja: tenganisho wazi */
table.products-family-table tbody tr.fam-a td { background: #ffffff; }
table.products-family-table tbody tr.fam-b td { background: #f1f2fb; }
table.products-family-table tbody tr.fam-row td { border-top: 1px solid #e3e5f1; border-bottom: 0; }
table.products-family-table tbody tr.prod-first td { border-top: 1.5px dashed #b9bddb; }
table.products-family-table tbody tr.fam-first td { border-top: 3px solid var(--accent-dark, #4338ca); }
table.products-family-table tbody tr.fam-row:hover td { background: #e6e8ff; }

/* Gawa Ngazi */
.family-card { background: #fff; border: 1.5px solid #dfe2f3; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.family-title { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 8px; }
.family-table { margin-top: 6px; }
.family-after { margin-top: 8px; padding: 10px 14px; border-radius: 10px; background: #ecfdf5; color: #14532d; }
.family-after.neg { background: #fef2f2; color: #991b1b; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.pager a, .pager span { padding: 6px 12px; border: 1px solid #d5d8ee; border-radius: 8px; text-decoration: none; color: var(--accent, #4f46e5); background: #fff; }
.pager span.cur { background: var(--accent, #4f46e5); color: #fff; border-color: var(--accent, #4f46e5); }
.pager span.dis { color: #aaa; }

/* Madeni */
.pos-hastahili-row td { background: #fff7ed; color: #9a3412; font-size: 13px; }
.badge-daftari { background: #475569; color: #fff; }
.badge-hastahili { background: #f97316; color: #fff; }
.debt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.debt-card { background: #fff; border: 1.5px solid #e2e5f3; border-radius: 12px; padding: 12px 14px; text-decoration: none; color: inherit; display: block; }
.debt-card .n { font-size: 22px; font-weight: 700; margin-top: 2px; }
.debt-card.warn { border-color: #fdba74; background: #fff7ed; }
.debt-card.link:hover { border-color: var(--accent, #4f46e5); }
.debt-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.debt-tabs a { padding: 6px 14px; border: 1px solid #d5d8ee; border-radius: 20px; text-decoration: none; color: #334155; background: #fff; }
.debt-tabs a.on { background: var(--accent, #4f46e5); color: #fff; border-color: var(--accent, #4f46e5); }
.cust-similar { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 13px; }

/* Mpangilio mmoja wa jedwali (kama SMA) */
table.table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.table th.sortable::after { content: " \25B4\25BE"; font-size: 10px; opacity: .55; margin-left: 4px; }
table.table th.sortable.asc::after { content: " \25B4"; opacity: 1; }
table.table th.sortable.desc::after { content: " \25BE"; opacity: 1; }
table.table td.num, table.table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.table td { vertical-align: middle; }
table.table tbody tr:hover td { background: #eef3ff; }
table.table tfoot tr.smart-filters td { background: #f8fafc; padding: 6px 4px; }
table.table tfoot tr.totals-row td { background: #eef2ff; font-weight: 600; }
input.smart-filter { width: 100%; min-width: 70px; padding: 4px 6px; font-size: 12px; border: 1px solid #cbd5e1; border-radius: 4px; }
.smart-info { color: #64748b; font-size: 13px; margin: 8px 2px 14px; }

/* Search za haraka */
.dropdown-menu a.kb-active, .dropdown-menu .dropdown-row.kb-active { background: #e0e7ff; }
#liveArea.loading { opacity: .55; transition: opacity .12s; }
.live-count { color: #475569; margin: 6px 2px 10px; font-size: 14px; }

/* Kidonge cha unit (badala ya [UNIT] ya kiotomatiki kwenye jina) */
.group-badge { display: inline-block; background: #fef3c7; color: #92400e; border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; margin-left: 6px; text-decoration: none; }
.formula-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ================= DASHBOARD (kadi na vitufe, bila graph) ================= */
.dash-greet h2 { margin: 6px 0 0; font-size: 26px; color: #1f2547; font-weight: 700; }
.dash-greet p { margin: 4px 0 0; color: #6b7390; font-size: 14px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.dash-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500; text-decoration: none; background: #fff; color: #1f2547; border: 1px solid #e6e9f4; box-shadow: 0 2px 6px rgba(31,37,71,.08); transition: transform .12s, box-shadow .12s; }
.dash-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(31,37,71,.14); }
.dash-btn i { color: #4f46e5; }
.dash-btn.primary { background: #4f46e5; color: #fff; border-color: #4f46e5; } .dash-btn.primary i { color: #fff; }
.dash-btn.green { background: #16a34a; color: #fff; border-color: #16a34a; } .dash-btn.green i { color: #fff; }
.dash-sec { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; }
.dash-sec h3 { margin: 0; font-size: 17px; color: #1f2547; padding-left: 12px; border-left: 6px solid var(--c, #4f46e5); line-height: 22px; }
.dash-sec a, .dash-sub { font-size: 13px; color: #4f46e5; text-decoration: none; } .dash-sub { color: #6b7390; }
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dash-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
@media (max-width: 1280px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 14px rgba(31,37,71,.08); padding: 18px; }
.dash-stat { border-left: 4px solid var(--c); display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
.dash-stat-row { display: flex; gap: 14px; align-items: center; }
.dash-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; background: var(--c); }
.dash-stat-text { min-width: 0; }
.dash-label { font-size: 13px; color: #6b7390; }
.dash-value { font-size: 23px; font-weight: 700; color: #1f2547; margin-top: 2px; overflow-wrap: anywhere; } .dash-value.neg { color: #dc2626; }
.dash-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; background: #eef0f8; color: #6b7390; }
.chip-g { background: #dcfce7; color: #15803d; } .chip-r { background: #fee2e2; color: #b91c1c; } .chip-a { background: #fef3c7; color: #b45309; } .chip-b { background: #dbeafe; color: #1d4ed8; } .chip-n { background: #eef0f8; color: #6b7390; }
.dash-attn { display: flex; flex-direction: column; gap: 8px; min-height: 230px; }
.dash-attn-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; } .dash-attn-head .dash-ico { width: 40px; height: 40px; flex-basis: 40px; background: var(--c); }
.dash-attn-title { font-weight: 700; color: #1f2547; font-size: 14.5px; } .dash-attn-big { font-size: 21px; font-weight: 700; color: var(--c); }
.dash-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef0f8; font-size: 13px; color: #1f2547; }
.dash-days { color: #7c3aed; font-weight: 600; font-size: 12px; }
.dash-muted { font-size: 13px; color: #6b7390; } .dash-empty { color: #8b93ad; font-size: 13px; padding: 8px 0; text-align: center; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-note { font-size: 12.5px; color: #1f2547; padding: 6px 0 6px 12px; border-left: 3px solid #2563eb; margin: 2px 0; } .dash-note small { display: block; color: #6b7390; }
.dash-link { margin-top: auto; font-size: 13px; font-weight: 500; color: #4f46e5; text-decoration: none; }
.dash-btn-block { margin-top: auto; display: block; text-align: center; padding: 9px; border-radius: 10px; background: #4f46e5; color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 500; }
.dash-btn-block.alt { background: #eef0ff; color: #4f46e5; border: 1px solid #c7cbff; }
.dash-mini .dash-value { font-size: 19px; }
.dash-recent { padding: 0 0 8px; }
.dash-tabs { display: flex; gap: 6px; padding: 12px 16px 0; border-bottom: 1px solid #e6e9f4; flex-wrap: wrap; }
.dash-tab { background: none; border: 0; padding: 10px 14px; font-size: 14px; color: #6b7390; cursor: pointer; border-bottom: 3px solid transparent; font-family: inherit; }
.dash-tab.active { color: #4f46e5; font-weight: 700; border-bottom-color: #4f46e5; }
.dash-tbl-wrap { overflow-x: auto; padding: 4px 12px 0; }
.dash-tbl { width: 100%; border-collapse: collapse; font-size: 13px; box-shadow: none; border-radius: 0; }
.dash-tbl th { background: #f3f4fd; color: #6b7390; font-weight: 700; font-size: 12.5px; text-align: left; padding: 10px 12px; }
.dash-tbl td { padding: 10px 12px; border-bottom: 1px solid #eef0f8; color: #1f2547; }
.dash-tbl .r { text-align: right; } .dash-tbl .neg { color: #dc2626; } .dash-tbl .zero { color: #8b93ad; }
.dash-tbl a { color: #1f2547; text-decoration: none; }
.dash-more { margin-top: 24px; } .dash-more summary { cursor: pointer; font-weight: 700; color: #4f46e5; font-size: 14px; padding: 6px 0; }
.dash-more-title { font-weight: 700; color: #1f2547; margin-bottom: 8px; }


/* ==========================================================================
   UTOAJI 1: MTINDO WA SMA (fonti 14px, jedwali, lebo, vitufe, fomu, upau, POS)
   ========================================================================== */
.breadcrumb-bar { font-size: 14px; }

/* ---------- Jedwali: 14px, nafasi 8px, vichwa vya kawaida ---------- */
table.table th, table.table td { padding: 8px; font-size: 14px; vertical-align: middle; }
table.table th { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; }
table.table .badge, .dash-tbl .badge, .dash-tbl .dash-chip { font-size: 14px; padding: 2px 10px; line-height: 1.45; white-space: nowrap; }
table.table .btn, table.table .btn-sm, table.table .btn-xs, .dash-tbl .btn { font-size: 14px; padding: 3px 12px; line-height: 1.45; }
table.table input[type="checkbox"], .dash-tbl input[type="checkbox"], .family-table input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; accent-color: var(--accent);
}
.sidebar .badge { font-size: 11px; padding: 1px 8px; }

/* ---------- Vitufe: sura moja, rangi tambarare, kona 3px ---------- */
.btn { border-radius: 3px; padding: 6px 12px; font-size: 14px; font-weight: 700; line-height: 1.43; border: 1px solid transparent; box-shadow: none; }
.btn-primary   { background: var(--accent); border-color: var(--accent-dark); color: #fff; box-shadow: none; }
.btn-secondary { background: #e6e6e6; border-color: #adadad; color: #333; }
.btn-success   { background: var(--success); border-color: var(--success-dark); color: #fff; box-shadow: none; }
.btn-danger    { background: var(--danger); border-color: var(--danger-dark); color: #fff; box-shadow: none; }
.btn-amber     { background: var(--amber); border-color: var(--amber-dark); color: #fff; box-shadow: none; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 12px; }
.btn-lg { padding: 10px 16px; font-size: 16px; }
.btn:hover { filter: brightness(.94); }
.alert { border-radius: 3px; font-size: 14px; }

/* ---------- Fomu: input 38px, kona ya kisasa (10px), mpaka laini ---------- */
.form-group label { font-size: 14px; font-weight: 700; margin-bottom: 5px; color: #333; }
.form-row .form-group > label { font-weight: 700; }
label.lbl-inline { font-weight: 400 !important; display: flex; align-items: center; gap: 6px; }
.form-group:has(> .form-control[required]) > label::after,
.form-group:has(> input[required]) > label::after,
.form-group:has(> select[required]) > label::after { content: " *"; color: #d9534f; }
input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="email"], input[type="file"], select, .form-control {
    height: 38px; padding: 7px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 14px; background: #f8fafc;
    box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea, textarea.form-control { height: auto; min-height: 70px; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 14px; font-size: 14px; background: #f8fafc; box-shadow: none; }
input:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--mw-hover, rgba(249,115,22,.12)); background: #fff; outline: none; }
table .form-control, table input[type="text"], table input[type="number"] { height: 32px; padding: 5px 10px; border-radius: 8px; font-size: 14px; }
input.smart-filter { height: 28px; padding: 2px 6px; font-size: 13px; border-radius: 8px; box-shadow: none; }
.modal-content { border-radius: 14px; }
.modal-content h4:first-child { text-transform: uppercase; font-weight: 700; font-size: 14px; }

/* ---------- Sanduku la fomu (kichwa 40px chenye icon, maelezo, maudhui) ---------- */
.section-header { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 !important; background: #f7f7fb; border: 1px solid #dbdee0 !important; border-radius: 0 !important; }
.section-header h4 { display: flex; align-items: center; height: 40px; margin: 0; font-size: 16px; font-weight: 400; color: var(--accent-dark); }
.section-header h4 i { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-right: 1px solid #dbdee0; margin-right: 14px; color: var(--accent); font-size: 16px; }
.section-desc { font-size: 14px !important; color: #333 !important; padding: 20px !important; border: 1px solid #dbdee0 !important; border-top: none !important; border-radius: 0 !important; background: #fff; }
.section-desc > p.text-muted.small:first-child { background: #f9f9fc; margin: -20px -20px 20px -20px; padding: 10px 20px; border-bottom: 1px solid #dbdee0; color: #333; font-size: 14px; }

/* ---------- Menyu ya kushoto ---------- */
.sidebar-subitem { font-size: 14px; }
.sidebar-subitem.active { background: rgba(255,255,255,.16); font-weight: 700; }
.sidebar-divider { font-size: 11px; font-weight: 700; color: #b9b4ff; padding: 8px 34px 2px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Upau wa juu: vitufe vya sura moja (mraba 3px, urefu 34px) ---------- */
.topbar { padding: 8px 16px; min-height: 50px; }
.topbar-right { gap: 10px; font-size: 14px; }
.topbar-datetime { font-size: 14px; opacity: .92; }
.tb-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 3px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: none; box-sizing: border-box; }
.tb-btn:hover { background: rgba(255,255,255,.26); color: #fff; filter: none; }
.tb-btn i { font-size: 15px; }
.tb-btn.active { background: rgba(255,255,255,.28); }
.tb-pos { background: #16a34a; border-color: #22c55e; }
.tb-pos:hover { background: #15803d; }
.tb-account { padding: 0 12px 0 6px; gap: 10px; min-width: 170px; text-align: left; }
.tb-avatar { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 24px; }
.tb-user { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.tb-hello { font-size: 11px; font-weight: 400; opacity: .85; }
.tb-name { font-size: 13.5px; font-weight: 700; }
.tb-role { font-size: 11px; font-weight: 500; opacity: .78; }
.tb-theme-label { font-size: 13px; }
@media (max-width: 1250px) { .tb-theme-label { display: none; } }

/* ---------- Search-pill ya juu (deep search: wateja/bidhaa/mauzo/madeni) ---------- */
.tb-search { position: relative; flex: 1 1 auto; max-width: 460px; margin: 0 18px; min-width: 0; }
.tb-search > i.fa-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; }
.tb-search input { width: 100%; height: 38px; border-radius: 999px; border: none; padding: 0 16px 0 40px; font-family: inherit; font-size: 13.5px; box-sizing: border-box; outline: none; }
.tb-search-panel { display: none; position: absolute; top: 46px; left: 0; right: 0; max-height: 440px; overflow-y: auto; border-radius: 14px; z-index: 50; }
.tb-search-panel.open { display: block; }
.tb-search-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 10px 16px 4px; }
.tb-search-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; cursor: pointer; text-decoration: none; }
.tb-search-item .ti-title { font-size: 13.5px; font-weight: 600; }
.tb-search-item .ti-sub { font-size: 11.5px; }
.tb-search-empty { padding: 16px; font-size: 12.5px; text-align: center; }
@media (max-width: 1150px) { .tb-search { display: none; } }

/* ---------- List Products (kama SMA): makundi yanafuatana, safu pana ---------- */
table.products-family-table th, table.products-family-table td { white-space: nowrap; }
table.products-family-table td:nth-child(3), table.products-family-table th:nth-child(3) { white-space: normal; min-width: 240px; }
table.products-family-table th:nth-child(1) { width: 44px; }
table.products-family-table td.num, table.products-family-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.products-family-table tbody tr.fam-a td { background: #ffffff; }
table.products-family-table tbody tr.fam-b td { background: #f4f5fb; }
table.products-family-table tbody tr.fam-row td { border-top: 1px solid #e3e5f1; border-bottom: 0; }
table.products-family-table tbody tr.prod-first td { border-top: 1px solid #e3e5f1; }
table.products-family-table tbody tr.fam-first td { border-top: 2px solid #c9cdd8; }
table.products-family-table tbody tr.fam-a td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
table.products-family-table tbody tr.fam-b td:first-child { box-shadow: inset 4px 0 0 #8b83f2; }

/* ---------- POS: mistari ya kikapu kama SMA (14px, nafasi 5px, input 30px) ---------- */
.pos-cart-table th { width: auto; }
.pos-cart-row td { padding: 5px !important; font-size: 14px !important; vertical-align: middle; }
.pos-qty-input { height: 30px; padding: 4px 8px; font-size: 14px; border-radius: 3px; text-align: right; }
.pos-row-icon { font-size: 14px; margin-left: 8px; }
.pos-cart-row td:nth-child(3), .pos-cart-row td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }
.pos-cart-row td:nth-child(4) { font-weight: 700; }
.dash-tbl th, .dash-tbl td { font-size: 14px; padding: 8px 12px; }

/* ---------- select2: sura sawa na input (34px, kona 3px) ---------- */
body .select2-container .select2-selection--single { height: 34px; border: 1px solid #c9cdd8; border-radius: 3px; background: #fff; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; padding-left: 12px; padding-right: 30px; font-size: 14px; color: #333; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; right: 6px; }
body .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--accent); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 3px rgba(79,70,229,.15); }
body .select2-dropdown { border: 1px solid #c9cdd8; border-radius: 3px; font-size: 14px; }
body .select2-search--dropdown .select2-search__field { height: 30px; border: 1px solid #c9cdd8; border-radius: 3px; font-size: 14px; }
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); }
body table .select2-container .select2-selection--single { height: 30px; }
body table .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; }

/* ---------- Lists za SMA zenye table-condensed (Products, Customers, Suppliers): seli 5px ---------- */
table.table.tbl-condensed th, table.table.tbl-condensed td { padding: 5px; }
table.table.tbl-condensed .btn, table.table.tbl-condensed .btn-sm, table.table.tbl-condensed .btn-xs { padding: 1px 12px; line-height: 1.4; }

/* ---------- Kadi za Madeni: sanduku kama la dashboard (maudhui hayabadiliki) ---------- */
.debt-cards { gap: 16px; }
.debt-card { position: relative; background: #fff; border: 0; border-radius: 14px; padding: 18px 18px 18px 22px; box-shadow: 0 4px 14px rgba(31,37,71,.08); transition: transform .15s, box-shadow .15s; }
.debt-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--c, #4f46e5); }
.debt-card .text-muted { font-size: 13px; color: #6b7390; }
.debt-card .n { font-size: 22px; font-weight: 700; color: #1f2547; margin-top: 6px; }
.debt-card.warn { background: #fff; border: 0; --c: #dc2626; }
.debt-card.link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31,37,71,.14); border-color: transparent; }
.debt-card:nth-child(1) { --c: #2563eb; } .debt-card:nth-child(2) { --c: #f59e0b; } .debt-card:nth-child(3) { --c: #16a34a; }
.debt-card:nth-child(5) { --c: #7c3aed; } .debt-card:nth-child(6) { --c: #0891b2; }

/* ---------- QR smart: fremu ya mviringo, maelezo chini ---------- */
.receipt-qr-box svg, #viewQrCode svg, .ov-qr-box svg { display: block; margin: 0 auto; }

/* ---------- List Products: isibanwe (safu ~43px: kubwa kuliko Sales list). Upana wa chini ni wa YALIYOMO (content-box, bila kutegemea box-sizing):
   jumla ya chini ~960px, kwa hiyo inatosha laptop ya kawaida bila kusogeza; Name na Category zinaweza kuvunja mstari jedwali likibana. ---------- */
.products-scroll { overflow-x: auto; }
table.products-family-table { min-width: 900px; }
table.products-family-table th { padding: 10px 10px; }
table.products-family-table td { padding: 11px 10px; }
table.products-family-table th:nth-child(1), table.products-family-table td:nth-child(1) { width: 44px; min-width: 44px; padding-left: 14px; padding-right: 8px; }
table.products-family-table th:nth-child(2) { min-width: 95px; }
table.products-family-table th:nth-child(3) { min-width: 150px; }
table.products-family-table th:nth-child(4) { min-width: 45px; }
table.products-family-table th:nth-child(5) { min-width: 90px; }
table.products-family-table td:nth-child(5), table.products-family-table th:nth-child(5) { white-space: normal; }
table.products-family-table th:nth-child(6), table.products-family-table th:nth-child(7), table.products-family-table th:nth-child(8) { min-width: 65px; }
table.products-family-table th:nth-child(9) { min-width: 55px; }
table.products-family-table th:nth-child(10) { min-width: 75px; }

/* ---------- Alama ya kufunga modal (x) kama SMA: ndani ya karatasi, herufi nyembamba kubwa, nyeusi 20% (70% kipanya juu) ---------- */
.modal-x { position: absolute; top: 4px; right: 12px; z-index: 2; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: #000; opacity: .2; line-height: 1; font-size: 21px; font-weight: 700; }
.modal-x i { display: block; font-style: normal; font-weight: 400; font-size: 2em; line-height: 34px; font-family: Arial, Helvetica, sans-serif; }
.modal-x:hover, .modal-x:focus { opacity: .7; outline: none; }

/* ---------- Product Details (popup na ukurasa) ---------- */
.pd { font-size: 14px; }
.pd-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; padding-right: 36px; }
.pd table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pd td, .pd th { padding: 8px 10px; border: 1px solid #e5e7eb; font-size: 14px; text-align: left; vertical-align: middle; }
.pd .r { text-align: right; font-variant-numeric: tabular-nums; }
.pd .pd-lbl { width: 34%; background: #f9f9f9; font-weight: 700; }
.pd .pd-total { font-size: 16px; }
.pd .pd-sec { margin: 6px 0 8px; font-weight: 700; font-size: 15px; }
.pd table.pd-var thead th, .pd table.pd-var tfoot th { background: #f9f9f9; color: #333; font-weight: 700; text-transform: none; letter-spacing: 0; }
.pd .pd-actions { margin-top: 16px; }

/* ---------- List Products: Actions ibaki ikionekana hata jedwali likisogezwa kwa kando ---------- */
table.products-family-table th:last-child, table.products-family-table td:last-child { position: sticky; right: 0; z-index: 1; white-space: nowrap; }
table.products-family-table td:last-child { box-shadow: -6px 0 6px -6px rgba(0,0,0,.2); }

/* ---------- Menyu ya Actions isifichwe na seli za Actions za sticky (seli yenye menyu wazi inainuliwa) ---------- */
.menu-open { z-index: 60 !important; }

/* ---------- List Products: mpaka wa chini mwishoni mwa jedwali ---------- */
table.products-family-table tbody tr:last-child td { border-bottom: 1px solid #c9cdd8; }

/* ---------- Lists zenye nafasi (Customers, Suppliers, Reports): safu ~41px, angalau kama List Products ---------- */
table.table.tbl-list th { padding: 10px 12px; }
table.table.tbl-list td { padding: 11px 12px; }

/* ---------- Kubadili lugha: bendera kwenye upau wa juu na skrini ya kuingia ---------- */
.tb-flag svg, .dropdown-menu .lang-item svg, .login-lang svg { width: 24px; height: 16px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.28); }
.dropdown-menu form { margin: 0; }
.dropdown-menu .lang-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: none; border: 0; text-align: left; color: #333; font-family: inherit; font-size: 13px; cursor: pointer; }
.dropdown-menu .lang-item:hover { background: #f2f5f9; }
.dropdown-menu .lang-item.active { font-weight: 700; }
.login-lang { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; margin: 0; z-index: 5; }
.login-lang button { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); border-radius: 4px; color: #fff; font: 700 12px Ubuntu, sans-serif; cursor: pointer; }
.login-lang button:hover { background: rgba(255,255,255,.3); }
.login-lang button.active { background: rgba(255,255,255,.36); border-color: #fff; }
.tb-btn.tb-flag { padding: 0 10px; }

/* ---------- Utoaji 1.9: Balance ya ziada, jumla za risiti, nafasi nyeupe chini ---------- */
/* Ziada ya malipo baada ya Edit Sale: Balance hasi, rangi ya kijani-bahari na "(ziada)" */
.bal-over { color: #0e7490; font-weight: 700; white-space: nowrap; }
/* Jumla za risiti (sasa ni <tbody class="rc-sum">, si <tfoot>): zisigawanywe kati ya kurasa */
.receipt table.rc tbody.rc-sum tr { break-inside: avoid; page-break-inside: avoid; }
.receipt table.rc tbody.rc-sum { break-inside: avoid; page-break-inside: avoid; }
/* select2 huficha <select> halisi kwa position:absolute; bila mzazi wa "relative" Chrome iliiweka kulingana na
   <html> na kurefusha ukurasa mzima (nafasi nyeupe na scroll baada ya mwisho). Sasa inabaki ndani ya .main-content. */
.main-content { position: relative; }
/* Skrini ya kuingia: min-height 100vh + padding 20px ilizidi skrini kwa 40px */
.login-page-v2 { box-sizing: border-box; }
.receipt table.rc-pay { break-before: avoid; page-break-before: avoid; }

/* ---------- Utoaji 1.10: upau wa juu mdogo kama SMA (urefu ~40px, vitufe 30px) ---------- */
.topbar { padding: 5px 12px; min-height: 40px; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.topbar-brand { font-size: 15px; }
.topbar-right { gap: 6px; font-size: 12px; }
.topbar-datetime { font-size: 12px; margin-right: 4px; }
.tb-btn { height: 30px; padding: 0 10px; gap: 6px; font-size: 12px; }
.tb-btn i { font-size: 13px; }
.tb-btn.tb-flag { padding: 0 8px; }
.tb-flag svg { width: 20px; height: 13px; }
.tb-account { min-width: 0; padding: 0 10px 0 4px; gap: 6px; }
.tb-avatar { width: 20px; height: 20px; flex: 0 0 20px; font-size: 11px; }
.tb-hello { font-size: 9.5px; }
.tb-name { font-size: 11.5px; }

/* ---------- Utoaji 1.10: lebo za hali kama SMA (Bootstrap .label: rangi kamili, maandishi meupe, kona .25em) ---------- */
.badge, table.table .badge, .dash-tbl .badge {
    display: inline-block; padding: .25em .6em .3em; border-radius: .25em; font-size: 12px; font-weight: 700;
    line-height: 1.2; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline;
}
.badge-success { background: #5cb85c; color: #fff; }
.badge-info    { background: #5bc0de; color: #fff; }
.badge-warning { background: #f0ad4e; color: #fff; }
.badge-danger  { background: #d9534f; color: #fff; }
.badge-gray    { background: #777; color: #fff; }
.badge-daftari { background: #475569; color: #fff; }
.badge-hastahili { background: #f0ad4e; color: #fff; }
/* Hali kwenye jedwali la Mauzo ya Karibuni (dashboard) */
.dash-tbl .dash-chip { padding: .25em .6em .3em; border-radius: .25em; font-size: 12px; font-weight: 700; line-height: 1.2; color: #fff; }
.dash-tbl .chip-g { background: #5cb85c; } .dash-tbl .chip-b { background: #5bc0de; } .dash-tbl .chip-r { background: #d9534f; }
.dash-tbl .chip-a { background: #f0ad4e; } .dash-tbl .chip-n { background: #777; }
/* Namba ndogo kwenye menyu (Notifications, Pending Sales) zibaki kama zilivyo */
.sidebar .badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; line-height: 1.45; }

/* ---------- Utoaji 1.10: POS - cart kubwa kama SMA (nafasi ndogo kuzunguka, safu za 36px) ---------- */
.main-content-full { padding: 6px 8px 8px; }
.pos-wrapper { padding: 8px; border-radius: 4px; }
.pos-top > .form-group { margin-bottom: 5px !important; }
.pos-top > .form-group:nth-of-type(2) { margin-bottom: 6px !important; }
.pos-cart-scroll { border-radius: 3px; min-height: 120px; }
.pos-cart-table thead th { padding-top: 7px; padding-bottom: 7px; }
.pos-cart-row td { padding: 3px 5px !important; }
.pos-bottom { margin-top: 6px; }
.pos-summary-half { padding: 5px 14px; }
.pos-summary-half:first-child { border-radius: 4px 0 0 4px; }
.pos-summary-half-right { border-radius: 0 4px 4px 0; }
.pos-discount-group input { padding: 4px 10px; height: 30px; box-sizing: border-box; border-radius: 3px; }
.pos-action-grid { height: 60px; margin-top: 3px; border-radius: 4px; }
.pos-action-grid { height: 64px; }
.pos-action-grid .btn { padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.1; }
/* 1.10: Hastahili Mkopo (imezidi siku) = "due" ya SMA (nyekundu); Bado/Outstanding = "pending" ya SMA (njano) */
.badge-hastahili { background: #d9534f; color: #fff; }

/* ---------- Utoaji 1.10: Settings kama SMA (fieldset.scheduler-border + legend, sehemu 3 kwa mstari) ---------- */
.set-perm-link { margin-right: 8px; }
.set-page .settings-tabs { margin-bottom: 16px; }
.settings-tab-btn i { margin-right: 4px; }
fieldset.set-fs { border: 1px solid #dbdee0; padding: 1.4em; margin: 0 0 1.5em; min-width: 0; }
fieldset.set-fs > legend { font-size: 1.1em; font-weight: 700; color: #428bca; padding: 5px 15px; border: 1px solid #dbdee0; width: auto; margin: 0; background: #fff; }
.set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.set-grid .form-group { margin-bottom: 15px; min-width: 0; }
.set-grid .form-group > label { display: block; font-weight: 700; margin-bottom: 5px; }
.set-grid .set-span2 { grid-column: span 2; }
.set-grid .set-row2 { grid-row: span 2; }
.set-grid .set-row2 textarea { height: calc(100% - 26px); min-height: 110px; resize: vertical; }
.set-logo { height: 40px; display: flex; align-items: center; margin-bottom: 6px; }
.set-logo img { max-height: 40px; max-width: 100%; }
.set-page .help-block { display: block; margin: 5px 0 0; color: #737373; font-size: 12px; }
.set-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.set-inline .form-control { flex: 1; min-width: 180px; max-width: 420px; }
.set-table { margin-bottom: 0; }
.set-table td .form-control { height: 30px; }
.settings-save-bar { position: static; background: transparent; padding: 0; margin: 0 0 4px; border-top: 0; text-align: left; }
@media (max-width: 900px) { .set-grid { grid-template-columns: 1fr; } .set-grid .set-span2 { grid-column: auto; } .set-grid .set-row2 { grid-row: auto; } }

/* Jedwali (orodha) upande kushoto, fomu ya "ongeza mpya" kadi ndogo upande wa kulia - badala ya kila kitu kubaki pembeni (kushoto) na nafasi tupu kubaki kulia. */
.set-fs-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.set-fs-row > .set-fs-table { flex: 1 1 320px; min-width: 240px; }
.set-fs-row > .set-fs-add { flex: 0 0 260px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; }
.set-fs-add h5 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .3px; }
.set-fs-add .set-inline { flex-direction: column; align-items: stretch; margin-top: 0; }
.set-fs-add .set-inline .form-control { max-width: none; }
.set-fs-add .set-inline .btn { align-self: flex-start; }
@media (max-width: 760px) { .set-fs-row { flex-direction: column; } .set-fs-row > .set-fs-add { flex: 1 1 auto; } }

/* Backup & Restore: kadi mbili (Download / Restore) badala ya vitufe viwili vikiwa peke yake upande wa kushoto. */
.set-backup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.set-backup-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px; text-align: center; background: #f8fafc; }
.set-backup-card i { font-size: 26px; color: var(--accent); margin-bottom: 8px; display: block; }
.set-backup-card h5 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.set-backup-card p { margin: 0 0 12px; font-size: 12px; color: #737373; }

/* ---------- Utoaji 1.12: nafasi nzuri mwisho wa pages (Edit Sale n.k.) ---------- */
.edit-sale-actions { display: flex; gap: 10px; margin: 20px 0 16px; flex-wrap: wrap; }
.page-end-spacer { height: 16px; }

/* ---------- Utoaji 1.12: kitufe cha "Generate" (Product Code) kiwe sawa na urefu wa box - kisigawanyike mistari miwili ---------- */
.code-gen-row { display: flex; gap: 6px; align-items: stretch; }
.code-gen-row .form-control { flex: 1; min-width: 0; }
.code-gen-row .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; flex-shrink: 0; height: 34px; padding: 0 12px; }

/* ---------- Utoaji 1.12/1.14: Finalize Sale - mpangilio wa safu-mbili kama SMA (Quick Cash kulia) ---------- */
/* 1.14: dirisha kubwa zaidi (kama SMA modal-lg) ili kila kitu kionekane vizuri */
.finalize-modal-dialog { width: 95%; max-width: 1100px; }
.finalize-grid { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: start; }
.finalize-quickcash { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid #e2e8f0; padding-left: 18px; }
.qc-title { font-size: 12px; font-weight: 700; color: #737373; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.qc-btn { width: 100%; text-align: center; position: relative; padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
/* 1.14: "badge" ya mara ngapi kitufe cha Quick Cash kimebofywa (kama SMA) */
.qc-badge {
    position: absolute; top: -7px; right: -7px; background: #dc2626; color: #fff;
    border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
    line-height: 18px; text-align: center; padding: 0 4px; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
@media (max-width: 640px) {
    .finalize-grid { grid-template-columns: 1fr; }
    .finalize-quickcash { flex-direction: row; flex-wrap: wrap; border-left: none; border-top: 1px solid #e2e8f0; padding-left: 0; padding-top: 12px; }
    .qc-btn { width: auto; flex: 1 1 30%; }
}

/* ================================================================
   1.17: Mobile-friendly (POS kwanza) - simu nyembamba (<=600px).
   Kabla ya hii, .topbar haikuwa na flex-wrap wala kufichwa kwa maneno,
   hivyo ukurasa ulikuwa mpana kuliko skrini (horizontal overflow) na
   "Total Payable" kwenye POS ilikatwa. Hapa hatubadilishi muonekano wa
   desktop/tablet - sheria zote ni ndani ya media query hii pekee.
   ================================================================ */
html, body { overflow-x: hidden; }

@media (max-width: 600px) {
    /* --- Topbar: icons pekee, saa na jina-la-mtumiaji vinafichwa --- */
    .topbar { padding: 6px 10px; }
    .topbar-brand { font-size: 13px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-right { gap: 4px; font-size: 11px; }
    .topbar-datetime { display: none; }
    .tb-btn { height: 28px; padding: 0 8px; gap: 4px; }
    .tb-btn i { font-size: 14px; }
    .tb-btn-label { display: none; }
    .tb-btn.tb-flag { padding: 0 7px; }
    .tb-user { display: none; }
    .tb-account { padding: 0 6px; }
}

@media (max-width: 480px) {
    /* --- POS: muhtasari (Items/Discount/Total Payable) usafishwe safu moja --- */
    .pos-summary-row-v2 { grid-template-columns: 1fr; gap: 3px; }
    .pos-summary-half:first-child { border-radius: 8px 8px 0 0; }
    .pos-summary-half-right { border-radius: 0 0 8px 8px; }
    .pos-summary-half { padding: 6px 12px; font-size: 12px; }
    .pos-discount-group { gap: 6px; }
    .pos-discount-group input { width: 72px; padding: 4px 8px; font-size: 13px; height: 26px; }
    .pos-summary-total-amount { font-size: 15px; }

    /* --- Vitufe vya hatua (Weka Bill/Ghairi/Malipo) viweze kusoma vizuri --- */
    .pos-action-grid { height: 66px; }
    .pos-action-grid .btn { font-size: 12px; padding: 0 4px; }
    .pos-action-grid .pos-payment-btn { font-size: 13px; }
}

/* ================================================================
   MOBILE PREVIEW (Hatua 1 + 3): Bottom Nav + "Zaidi" sheet + Debts dcards
   Kila kitu hapa chini kinafanya kazi TU kwenye skrini <=900px -
   desktop (sidebar/jedwali/modal) haibadiliki kabisa.
   ================================================================ */
.mnav, .msheet, .msheet-bk, .tsw, .dcards, .mtopbar { display: none; }

@media (max-width: 900px) {
    html, body { overflow-x: hidden; }
    .sidebar { display: none !important; }
    .main-content { margin-left: 0 !important; width: 100% !important; padding: 14px 14px calc(78px + env(safe-area-inset-bottom)) !important; }

    /* ---- Topbar: badilika kuwa search pill + bell + avatar (kama reference) ---- */
    .topbar { flex-wrap: wrap; padding: 8px 12px 0; }
    .topbar-left { display: none !important; }
    .topbar-right { display: none !important; }
    .mtopbar {
        display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px 0 8px;
    }
    .mtb-search {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
        border-radius: 999px; background: var(--card, #fff); border: 1px solid rgba(0,0,0,.08); color: #94a3b8;
    }
    .mtb-search i { font-size: 14px; flex: 0 0 auto; }
    .mtb-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: #1e293b; }
    .mtb-chip {
        flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: var(--card, #fff); border: 1px solid rgba(0,0,0,.08); color: #475569; font-size: 16px; text-decoration: none;
    }
    .mtb-avatar { background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; border: 0; }

    /* ---- Bottom Nav (nafasi ya theme, lakini lafudhi (active/FAB) ni chungwa la jumla kama reference) ---- */
    .mnav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: var(--sidebar-bg); border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -8px 24px -12px rgba(0,0,0,.4); align-items: stretch; justify-content: space-around;
    }
    .mn {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: var(--sidebar-text); font-size: 10.5px; font-weight: 500; text-decoration: none; background: none; border: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .mn i { font-size: 18px; }
    .mn.on { color: #ff8a1f; font-weight: 700; }
    .mn-plus .mn-fab {
        width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,#ff8a1f,#e8710a); color: #fff;
        display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 14px rgba(232,113,10,.45);
    }

    /* ---- "Zaidi" bottom sheet ---- */
    .msheet-bk { display: block; position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .msheet-bk.open { opacity: 1; pointer-events: auto; }
    .msheet {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; background: #fff; color: #1e293b;
        border-radius: 22px 22px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 82dvh; overflow-y: auto;
        transform: translateY(105%); transition: transform .25s ease-out; box-shadow: 0 -16px 46px -10px rgba(0,0,0,.5);
    }
    .msheet.open { transform: none; }
    body.ms-lock { overflow: hidden; }
    .ms-handle { width: 42px; height: 5px; border-radius: 5px; background: #e2e8f0; margin: 2px auto 14px; }
    .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .ms-tile {
        display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 14px 4px;
        border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b; font-size: 11.5px; font-weight: 600;
        text-decoration: none;
    }
    .ms-tile i { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; }
    .ms-title { margin: 18px 4px 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; font-weight: 700; }
    .ms-themes { display: flex; justify-content: space-between; gap: 8px; }
    .ms-th { flex: 1; background: none; border: 0; color: #1e293b; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .tsw { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e2e8f0; }
    .tsw-bluu { background: linear-gradient(135deg,#4a9de8,#312e81); }
    .tsw-bahari { background: linear-gradient(135deg,#35c2b6,#052e2b); }
    .tsw-zambarau { background: linear-gradient(135deg,#8b7cf0,#221046); }
    .tsw-giza { background: linear-gradient(135deg,#7a818f,#1a1a1a); }

    /* ---- Debts: jedwali -> kadi (dcards) ---- */
    .debts-table-wrap { display: none; }
    .dcards { display: block; }
    .dcard {
        background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 13px 14px; margin-bottom: 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05); cursor: pointer;
    }
    .dc-top { display: flex; align-items: center; gap: 10px; }
    .dc-av { flex: 0 0 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; background: var(--accent); color: #fff; }
    .dc-who { flex: 1; min-width: 0; }
    .dc-who b { display: block; font-size: 14.5px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dc-who small { display: block; font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dc-bal { flex: 0 0 auto; text-align: right; }
    .dc-bal b { display: block; font-size: 15px; font-weight: 700; color: #1e293b; white-space: nowrap; }
    .dc-bal b.due { color: #dc2626; }
    .dc-bal b.clear { color: #15803d; }
    .dc-bal small { display: block; font-size: 10.5px; color: #888; margin-top: 1px; }
    .dc-car { flex: 0 0 auto; color: #888; font-size: 18px; margin-left: 4px; transition: transform .2s; }
    .dcard.open .dc-car { transform: rotate(180deg); }
    .dc-body { display: none; border-top: 1px dashed #e5e7eb; margin-top: 10px; padding-top: 10px; }
    .dcard.open .dc-body { display: block; }
    .dc-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: #475569; }
    .dc-row b { color: #1e293b; font-weight: 600; }
    .dc-act { display: flex; gap: 8px; margin-top: 10px; }
    .dc-act .btn { flex: 1; min-height: 40px; font-size: 13px; }

    /* ---- Modal -> bottom sheet (jumla kwa modal zote) ---- */
    .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; margin: 0 !important; width: 100% !important; max-width: none !important; transform: none !important; }
    .modal-content { border-radius: 22px 22px 0 0 !important; max-height: 90dvh; overflow-y: auto; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

    /* ---- Dashboard/Debts: kadi tambarare (bila mstari wa rangi kushoto) kama reference ---- */
    .dash-stat { border-left: 0; }
    .debt-card::before { display: none; }
    .debt-card { padding-left: 18px; }

    /* ---- Dashboard: vitufe vya haraka = duara ya rangi + jina chini (kama reference .shortcuts .sc) ---- */
    .dash-actions { justify-content: space-between; gap: 6px; }
    .dash-btn {
        flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; padding: 4px 2px 2px; border: 0; background: none;
        box-shadow: none; border-radius: 0; font-size: 10.5px; font-weight: 600; color: #475569; text-align: center;
    }
    .dash-btn:hover { transform: none; box-shadow: none; }
    .dash-btn i {
        width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 18px; color: #fff; background: linear-gradient(135deg,#6366f1,#4338ca); box-shadow: 0 8px 16px -8px rgba(0,0,0,.35);
    }
    .dash-btn.primary i { background: linear-gradient(135deg,#6366f1,#4338ca); }
    .dash-btn.green i { background: linear-gradient(135deg,#34d399,#059669); }
    .dash-btn.primary, .dash-btn.green { background: none; color: #475569; }
}

.login-v2-greet { font-size: 13px; color: var(--accent); font-weight: 600; margin: 2px 0 10px; }

/* ================================================================
   LOGIN - MOBILE (≤900px): kadi mbili zilizorundikwa (brand + fomu)
   kama reference, badala ya badge ya duara ikielea juu ya kadi moja.
   Desktop haijabadilika kabisa - sheria zote ni ndani ya media query.
   ================================================================ */
@media (max-width: 900px) {
    .login-page-v2 { padding: 16px; justify-content: flex-start; padding-top: calc(56px + env(safe-area-inset-top)); }
    .login-v2-wrapper { width: 100%; max-width: 420px; }
    .login-lang { top: calc(14px + env(safe-area-inset-top)); }

    .login-v2-brand {
        background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border-radius: 20px;
        padding: 16px 20px 40px; margin-bottom: 0; box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }
    .login-v2-brand-word { font-size: 22px; }
    .login-v2-brand-tag { margin-top: 4px; }

    .login-v2-card {
        margin-top: -14px; border-radius: 0 0 20px 20px; padding: 40px 24px 26px; max-width: none;
        box-shadow: 0 16px 40px rgba(0,0,0,.25);
    }
    .login-v2-logo-badge { width: 64px; height: 64px; top: -32px; }
    .login-v2-logo-badge i { font-size: 28px; }
    .login-v2-title { font-size: 18px; }
    input.login-v2-input { padding-top: 14px; padding-bottom: 14px; font-size: 16px; }
    .login-v2-btn { padding: 15px; font-size: 15px; }
}
/* QR ndogo kwenye risiti (kama risiti za TRA) */
.receipt .rc-qr .receipt-qr-box svg, .receipt .rc-qr .receipt-qr-box img, .receipt .rc-qr .receipt-qr-box canvas { width: 28mm !important; height: 28mm !important; } /* kama QR ya risiti ya TRA - rahisi kuscan */
.receipt .rc-qr .receipt-qr-box { padding: 0 !important; border: 0 !important; }
.receipt .rc-bc { text-align: center; margin: 8px 0 4px; }
.receipt .rc-bc .rc-bc-svg { display: block; width: 46mm; max-width: 100%; height: auto; margin: 0 auto; }