/* =============================================================
   EasyTrade — Global Theme
   ============================================================= */

/* ═══════════════════════════════════════════════════════════════════
   TEXT VISIBILITY ENFORCEMENT — kila content ionekane wazi
   Rules hizi zinatatua bugs za text invisible kwenye backgrounds tofauti
   ═══════════════════════════════════════════════════════════════════ */

/* Minimum text contrast: font weight na size ambazo hakuna text itakuwa vague */
body, p, span, div, td, th, label, a, li {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Text size minimum kwa readability */
[style*="font-size:.6rem"], [style*="font-size: .6rem"],
[style*="font-size:.62rem"], [style*="font-size: .62rem"],
[style*="font-size:.65rem"], [style*="font-size: .65rem"] {
    font-size: .75rem !important;
    font-weight: 600 !important;
}

/* Rangi za muted zisizo na contrast kwenye light backgrounds — force pandeni */
[style*="color:#94a3b8"], [style*="color: #94a3b8"],
[style*="color:#cbd5e1"], [style*="color: #cbd5e1"],
[style*="color:#d1d5db"], [style*="color: #d1d5db"],
[style*="color:#e5e7eb"], [style*="color: #e5e7eb"] {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* var(--text-muted) kwenye light bg iwe darker (#475569 slate-600) */
[style*="background:#fff"] [style*="color:var(--text-muted)"],
[style*="background: #fff"] [style*="color:var(--text-muted)"],
[style*="background:#ffffff"] [style*="color:var(--text-muted)"],
[style*="background: #ffffff"] [style*="color:var(--text-muted)"],
[style*="background:#fafafa"] [style*="color:var(--text-muted)"],
[style*="background:#f8fafc"] [style*="color:var(--text-muted)"],
[style*="background:#f1f5f9"] [style*="color:var(--text-muted)"],
.card [style*="color:var(--text-muted)"] {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Text kwenye dark backgrounds — hakikisha nyeupe/light */
[style*="background:#0f172a"] *:not(strong):not(b):not([style*="color:"]),
[style*="background:#1e293b"] *:not(strong):not(b):not([style*="color:"]),
[style*="background:#1a3c5e"] *:not(strong):not(b):not([style*="color:"]),
[style*="background:#0d2235"] *:not(strong):not(b):not([style*="color:"]),
[style*="background:#4c1d95"] *:not(strong):not(b):not([style*="color:"]),
[style*="background:#6d28d9"] *:not(strong):not(b):not([style*="color:"]),
[style*="linear-gradient(135deg,#0d2235"] *:not(strong):not([style*="color:"]),
[style*="linear-gradient(135deg,#0f172a"] *:not(strong):not([style*="color:"]),
[style*="linear-gradient(135deg,#4c1d95"] *:not(strong):not([style*="color:"]),
[style*="linear-gradient(135deg,#7f1d1d"] *:not(strong):not([style*="color:"]) {
    color: #e2e8f0 !important;
}

/* Section labels ambazo ni zichrome/faint */
.section-label, [class*="section-label"] {
    color: #fff !important;
    font-weight: 800 !important;
    background: var(--primary, #1a3c5e);
}

/* Table row text — daima iwe wazi */
table tr td, table tr th {
    color: #1e293b;
}
body[data-theme="dark"] table tr td:not([style*="color"]),
body[data-theme="dark"] table tr th:not([style*="color"]) {
    color: #e2e8f0;
}

/* Card content default text */
.card > * {
    color: inherit;
}

/* Chart axis labels — zisiwe faint */
svg text, svg tspan {
    fill: currentColor;
    font-weight: 600;
}

/* Legend/caption text kwenye charts */
[class*="legend"], [class*="caption"], [class*="label-text"] {
    font-weight: 600 !important;
}

/* Placeholder text (form inputs) — visible enough */
::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-weight: 500;
}
body[data-theme="dark"] ::placeholder {
    color: #64748b !important;
}

/* Small text kwenye alerts/badges — never light gray */
.alert *, .badge, [class*="alert-"] * {
    font-weight: 600;
}

/* Empty-state / no-data messages — visible */
[class*="empty-state"], .no-data, .no-results {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
}

/* CRITICAL: strong/b text daima ni bold na visible */
strong, b {
    font-weight: 800 !important;
    color: inherit;
}

/* Kill any inline opacity < 0.7 that's making text invisible */
*[style*="opacity:.4"], *[style*="opacity: .4"],
*[style*="opacity:.5"], *[style*="opacity: .5"],
*[style*="opacity:.6"], *[style*="opacity: .6"],
*[style*="opacity:.65"], *[style*="opacity: .65"] {
    opacity: .85 !important;
}

/* Long numbers must not break or overflow */
.kpi-value, [class*="value"], [class*="amount"], [class*="total"] {
    word-break: keep-all;
    overflow-wrap: normal;
    text-overflow: ellipsis;
}

/* ══════ End of Text Visibility Enforcement ══════ */

/* Global Search Bar responsive */
@media (max-width: 992px) {
    .global-search-wrap { max-width: 240px !important; }
    .global-search-wrap input { font-size: .82rem !important; }
}
@media (max-width: 768px) {
    .global-search-wrap { max-width: 100% !important; margin-right: 6px !important; }
    .global-search-wrap input { font-size: 16px !important; /* iOS no-zoom */ }
    .global-search-wrap input::placeholder { font-size: .8rem; }
    #globalSearchResults { position: fixed !important; top: 60px !important; left: 8px !important; right: 8px !important; max-height: 70vh !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   TABLE ROWS — hakikisha text daima visible kwenye light backgrounds
   ═══════════════════════════════════════════════════════════════════ */
/* Nguvu ya dark theme kutoa color yake ya body ya light — na kufanya rows zenye
   light backgrounds zibaki na text dark visible */
.data-table tbody tr,
table tbody tr {
    color: #1e293b;
}
/* Kwenye dark theme, body background ni giza kwa hivyo inherit color = light.
   Lakini rows zenye light backgrounds zinahitaji text dark. Force it. */
body[data-theme="dark"] .data-table tbody tr td,
body[data-theme="dark"] table tbody tr td {
    color: #1e293b;
}
/* TDs zenye explicit color inline zibaki kama zilivyo — inline > CSS */

/* Dark theme ya search results */
body[data-theme="dark"] #globalSearchResults {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0;
}
body[data-theme="dark"] #globalSearchResults a { color: #e2e8f0 !important; }
body[data-theme="dark"] #globalSearchResults a > div { color: #e2e8f0 !important; }
body[data-theme="dark"] #globalSearchResults a:hover { background: #334155 !important; }


@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

/* Tell browsers we handle dark/light modes ourselves — prevents Chrome Android auto-inversion */
:root {
    color-scheme: light dark;
}

:root {
    --primary:        #1a3c5e;
    --primary-dark:   #0d2234;
    --primary-light:  #2d5a87;
    --accent:         #f0a500;
    --accent-light:   #ffd166;
    --accent-dark:    #c98700;
    --success:        #2ecc71;
    --danger:         #e74c3c;
    --warning:        #f39c12;
    --info:           #3498db;
    --bg-main:        #eef2f7;
    --bg-card:        #ffffff;
    --text-dark:      #1e2a3a;
    --text-muted:     #6c7a89;
    --border:         #e0e6ed;
    --sidebar-bg:     #1a3c5e;
    --sidebar-text:   #e8f0f8;
    --sidebar-active: #f0a500;
    --shadow:         0 2px 15px rgba(0,0,0,0.08);
    --shadow-lg:      0 8px 30px rgba(0,0,0,0.12);
    --radius:         10px;
    --radius-sm:      6px;
    --transition:     all 0.25s ease;
    /* Surface alias */
    --surface:        #ffffff;
    --topbar-bg:      #ffffff;
    --input-bg:       #ffffff;
    --table-row-even: #f0f5fb;
    --table-row-hover:#ddeeff;
    --heading-color:  #0d2234;
    /* card-bg alias — used by inline styles across pages */
    --card-bg:        #ffffff;
    --table-header:   #e8eef6;
    --text-color:     #1e2a3a;
}

/* ══════════════════════════════════════════
   SCROLLBARS — Branded, visible, contrast both modes
   ══════════════════════════════════════════ */
::-webkit-scrollbar              { width: 12px; height: 12px; }
::-webkit-scrollbar-track        {
    background: #e2e8f0;
    border-radius: 10px;
    box-shadow: inset 0 0 4px rgba(15,23,42,.08);
}
::-webkit-scrollbar-thumb        {
    background: linear-gradient(180deg, #1a3c5e 0%, #2a5a8a 100%);
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    min-height: 40px;
    transition: background .15s ease;
}
::-webkit-scrollbar-thumb:hover  {
    background: linear-gradient(180deg, #f0a500 0%, #d97706 100%);
    border-color: #fef3c7;
}
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
}
::-webkit-scrollbar-corner       { background: #e2e8f0; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #1a3c5e #e2e8f0; }

/* ══════════════════════════════════════════
   DARK MODE — applied when html has data-theme="dark"
   ══════════════════════════════════════════ */
html[data-theme="dark"] {
    --bg-main:        #0f172a;
    --bg-card:        #1e293b;
    --card-bg:        #1e293b;
    --surface:        #1e293b;
    --topbar-bg:      #1e293b;
    --input-bg:       #0f172a;
    --text-dark:      #e2e8f0;
    --text-color:     #e2e8f0;
    --text-muted:     #94a3b8;
    --border:         #334155;
    --sidebar-bg:     #0f172a;
    --sidebar-text:   #94a3b8;
    --sidebar-active: #f0a500;
    --primary-dark:   #93c5fd;
    --heading-color:  #e2e8f0;
    --shadow:         0 2px 15px rgba(0,0,0,0.35);
    --shadow-lg:      0 8px 30px rgba(0,0,0,0.5);
    --table-row-even: #162032;
    --table-row-hover:#1d3451;
    --table-header:   #162032;
    color-scheme: dark;
}

/* ── Dark mode scrollbars ── */
html[data-theme="dark"] ::-webkit-scrollbar-track   {
    background: #1e293b;
    box-shadow: inset 0 0 4px rgba(0,0,0,.5);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb   {
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
    border: 2px solid #1e293b;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover  {
    background: linear-gradient(180deg, #f0a500 0%, #d97706 100%);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #fbbf24 0%, #f0a500 100%);
}
html[data-theme="dark"] ::-webkit-scrollbar-corner  { background: #1e293b; }
html[data-theme="dark"] *                            {
    scrollbar-color: #64748b #1e293b;
}

/* ── Dark mode overrides for hardcoded colours ── */
html[data-theme="dark"] body               { background: var(--bg-main); color: var(--text-dark); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5                 { color: var(--heading-color); }
html[data-theme="dark"] .card              { background: var(--bg-card); border: 1px solid var(--border); }
html[data-theme="dark"] .card:hover        { box-shadow: var(--shadow-lg); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea           { background: var(--input-bg); color: var(--text-dark); border-color: var(--border); }
html[data-theme="dark"] .form-control[readonly] { background: #162032; }
html[data-theme="dark"] .form-label        { color: var(--text-dark); }
html[data-theme="dark"] .btn-light         { background: #334155; color: var(--text-dark); border-color: var(--border); }
html[data-theme="dark"] .btn-outline       { border-color: var(--border); color: var(--text-dark); background: transparent; }
html[data-theme="dark"] .btn-outline:hover { background: #334155; }
html[data-theme="dark"] .kpi-card          { background: var(--bg-card); border: 1px solid var(--border); }
html[data-theme="dark"] .kpi-value         { color: var(--text-dark); }
html[data-theme="dark"] .kpi-label         { color: var(--text-muted); }

/* Tables */
html[data-theme="dark"] table.data-table          { background: var(--bg-card); }
html[data-theme="dark"] table.data-table tbody tr:nth-child(even) { background: var(--table-row-even); }
html[data-theme="dark"] table.data-table tbody tr:hover           { background: var(--table-row-hover); }
html[data-theme="dark"] table.data-table td       { color: var(--text-dark); border-color: var(--border); }
html[data-theme="dark"] .table-wrap {
    background:
        linear-gradient(#1e293b 30%, transparent) center top    /100% 24px no-repeat,
        linear-gradient(transparent, #1e293b 70%) center bottom /100% 24px no-repeat,
        radial-gradient(farthest-side at 50% 0,    rgba(0,0,0,.25), transparent) center top    /100% 8px no-repeat,
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.25), transparent) center bottom /100% 8px no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* Topbar */
html[data-theme="dark"] .topbar            { background: var(--topbar-bg); border-bottom: 1px solid var(--border); box-shadow: none; }
html[data-theme="dark"] .page-title-bar   { color: var(--text-dark); }
html[data-theme="dark"] .breadcrumb       { color: var(--text-muted); }

/* Modals */
html[data-theme="dark"] .modal            { background: var(--bg-card); border: 1px solid var(--border); }
html[data-theme="dark"] .modal-header     { border-color: var(--border); }
html[data-theme="dark"] .modal-footer     { border-color: var(--border); }
html[data-theme="dark"] .modal-backdrop   { background: rgba(0,0,0,0.7); }

/* Badges / misc */
html[data-theme="dark"] .badge            { opacity: .9; }
html[data-theme="dark"] select option     { background: var(--bg-card); color: var(--text-dark); }
html[data-theme="dark"] .drop-zone        { background: #162032; border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .w-file-row       { border-color: var(--border); background: var(--bg-card); }
html[data-theme="dark"] .page-header h1   { color: var(--heading-color); }
html[data-theme="dark"] hr                { border-color: var(--border); }
html[data-theme="dark"] .text-muted       { color: var(--text-muted) !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg-main);
    color: var(--text-dark);
    line-height: 1.55;
    min-height: 100vh;
}

h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--primary-dark); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: none; border-radius: var(--radius-sm);
    font-family: inherit; font-weight: 600; font-size: 0.95rem;
    cursor: pointer; transition: var(--transition);
    text-decoration: none;
    min-height: 44px; /* WCAG touch target minimum */
    box-sizing: border-box;
}
.btn-primary  { background: var(--primary);  color: #fff; }
.btn-primary:hover  { background: var(--primary-dark); }
.btn-accent   { background: var(--accent);   color: var(--primary-dark); }
.btn-accent:hover   { background: var(--accent-dark); color: #fff; }
.btn-success  { background: var(--success);  color: #fff; }
.btn-danger   { background: var(--danger);   color: #fff; }
.btn-warning  { background: var(--warning);  color: #fff; }
.btn-info     { background: var(--info);     color: #fff; }
.btn-light    { background: #fff; color: var(--text-dark); border: 1px solid var(--border); }
.btn-light:hover { background: var(--bg-main); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Form Controls ---------- */
.form-group { margin-bottom: 15px; }
.form-label {
    display: block; margin-bottom: 6px;
    font-weight: 600; color: var(--primary-dark); font-size: 0.9rem;
}
.form-control, .form-select {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: #fff; font-family: inherit; font-size: 1rem; /* 16px min prevents iOS zoom */
    transition: var(--transition);
    min-height: 44px; /* touch target */
    box-sizing: border-box;
}
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(240,165,0,0.15);
}
.form-control[readonly] { background: #f8f9fa; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 15px; }

/* ---------- Cards ---------- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 22px;
    transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--primary);
    color: #fff;
    padding: 11px 18px;
    margin: -20px -20px 18px -20px;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
}
.card-title { font-size: 1rem; font-weight: 700; color: #fff; }
.card-title i { color: var(--accent); margin-right: 6px; }
.card-subtitle { color: rgba(255,255,255,.7); font-size: 0.85rem; }

/* ---------- KPI Cards ---------- */
.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px; margin-bottom: 25px;
}
.kpi-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow); border-left: 4px solid var(--accent);
    transition: var(--transition);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-card.kpi-success { border-left-color: var(--success); }
.kpi-card.kpi-danger  { border-left-color: var(--danger); }
.kpi-card.kpi-info    { border-left-color: var(--info); }
.kpi-card.kpi-warning { border-left-color: var(--warning); }
.kpi-icon {
    font-size: 1.4rem; color: var(--accent); margin-bottom: 10px;
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(240,165,0,.15);
    flex-shrink: 0;
}
.kpi-label { color: var(--text-dark); font-size: 0.84rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; opacity: .85; }
.kpi-value { font-family: 'Poppins',sans-serif; font-size: 1.65rem; font-weight: 700; color: var(--text-dark); margin: 6px 0; }
.kpi-trend { font-size: 0.85rem; color: var(--text-dark); opacity: .7; }
.kpi-trend.up   { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* ---------- Tables ---------- */
.table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    max-height: 520px;
    background:
        linear-gradient(var(--bg-card) 30%, transparent) center top    /100% 24px no-repeat,
        linear-gradient(transparent, var(--bg-card) 70%) center bottom /100% 24px no-repeat,
        radial-gradient(farthest-side at 50% 0,    rgba(0,0,0,.06), transparent) center top    /100% 8px no-repeat,
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.06), transparent) center bottom /100% 8px no-repeat;
    background-attachment: local, local, scroll, scroll;
}
table.data-table {
    width: 100%; border-collapse: collapse; background: var(--bg-card);
    border-radius: var(--radius); overflow: hidden;
    font-size: 0.80rem;
}
table.data-table thead { background: var(--primary); color: #fff; }
table.data-table thead th {
    position: sticky; top: 0; z-index: 5;
    background: var(--primary) !important;
    color: #ffffff !important;
    /* Ensure visibility hata kwa theme yoyote */
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
/* Force ndani ya dark theme too — daima nyeupe (bold) */
body[data-theme="dark"] table.data-table thead th,
html[data-theme="dark"] table.data-table thead th {
    background: #0f172a !important;
    color: #ffffff !important;
}
table.data-table th, table.data-table td {
    padding: 6px 9px; text-align: left;
    border-bottom: 1px solid var(--border);
}
table.data-table th {
    font-weight: 800; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: .6px;
    white-space: nowrap;
    color: #ffffff !important;
}
table.data-table tbody tr:nth-child(even) { background: var(--table-row-even); }
table.data-table tbody tr:hover { background: var(--table-row-hover); }
table.data-table tbody tr:last-child td { border-bottom: none; }
/* ── Tfoot / JUMLA row ── */
table.data-table tfoot tr {
    background: var(--primary-dark) !important;
    color: #fff !important;
}
table.data-table tfoot td {
    padding: 8px 9px;
    font-weight: 700;
    font-size: 0.83rem;
    letter-spacing: .3px;
    border-top: 2px solid var(--accent);
    border-bottom: none;
    color: #fff !important;
}
/* Safu ya pili ya tfoot — FAIDA YA AWALI (accent) */
table.data-table tfoot tr.tfoot-highlight {
    background: var(--accent) !important;
}
table.data-table tfoot tr.tfoot-highlight td {
    color: var(--primary-dark) !important;
    font-size: 1rem;
    border-top: 2px solid var(--accent-dark);
}
/* Action buttons in table — icon-only compact */
table.data-table .btn-sm { padding: 3px 7px; font-size: 0.74rem; gap: 3px; }
/* Truncate long text in table cells */
.td-clip  { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-clip-sm { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Monospace-feel for numbers */
.td-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Actions column — never wraps */
.td-actions { white-space: nowrap; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block; padding: 4px 10px;
    border-radius: 50px; font-size: 0.78rem; font-weight: 600;
    background: var(--bg-main); color: var(--primary-dark);
}
.badge-success { background: rgba(46,204,113,.15); color: #1d8a4f; }
.badge-danger  { background: rgba(231,76,60,.15);  color: #b03729; }
.badge-warning { background: rgba(243,156,18,.18); color: #a36408; }
.badge-info    { background: rgba(52,152,219,.15); color: #1f6ca8; }
.badge-pending { background: #ecf0f1; color: #4a5b6a; }

/* ---------- Alerts ---------- */
.alert {
    padding: 12px 16px; border-radius: var(--radius-sm);
    border-left: 4px solid; margin-bottom: 15px;
}
.alert-success { background: #eafaf1; border-color: var(--success); color: #1d8a4f; }
.alert-danger  { background: #fdecea; border-color: var(--danger);  color: #b03729; }
.alert-warning { background: #fef5e7; border-color: var(--warning); color: #a36408; }
.alert-info    { background: #eaf4fb; border-color: var(--info);    color: #1f6ca8; }

/* ---------- Toast ---------- */
.toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
}
.toast {
    background: #fff; border-left: 4px solid var(--success);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    padding: 12px 18px; min-width: 280px; max-width: 380px;
    display: flex; align-items: center; gap: 10px;
    animation: slideInRight .25s ease;
}
.toast.toast-error { border-left-color: var(--danger); }
.toast.toast-warn  { border-left-color: var(--warning); }
.toast.toast-info  { border-left-color: var(--info); }
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(13,34,52,0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-backdrop.active { display: flex; }
.modal {
    background: #fff; border-radius: var(--radius);
    width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg); animation: zoomIn .2s ease;
}
.modal-lg { max-width: 850px; }
@keyframes zoomIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.modal-title { font-family: 'Poppins',sans-serif; font-weight: 700; color: var(--primary-dark); }
.modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); }
.modal-body  { padding: 22px; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--border); background: #f9fafc;
}

/* ---------- Login Page (compact + adaptive + scrollable) ---------- */
html, body { overflow-x: hidden; }
html { height: auto !important; }
body.login-page {
    min-height: 100vh;
    height: auto !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: clamp(20px, 4vh, 50px) 16px clamp(40px, 6vh, 80px);
    box-sizing: border-box;
    position: relative;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* NO flex/grid centering — block flow allows natural scrolling */
}
.login-page { /* legacy alias if anyone uses .login-page on a wrapper div */
    min-height: 100vh; padding: 30px 16px; box-sizing: border-box;
}
.login-page::before {
    content: ''; position: fixed; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(240,165,0,.10) 0, transparent 40%),
        radial-gradient(circle at 75% 80%, rgba(240,165,0,.08) 0, transparent 40%);
    z-index: 0;
}
.login-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.28);
    width: 100%;
    max-width: 380px;
    padding: clamp(18px, 3.5vh, 28px) clamp(20px, 5vw, 28px);
    text-align: center;
    margin: auto;
}
.login-logo {
    width: clamp(48px, 9vh, 60px);
    height: clamp(48px, 9vh, 60px);
    margin: 0 auto clamp(8px, 1.5vh, 12px);
    background: var(--accent); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.4rem, 4vh, 1.8rem); color: #fff;
    box-shadow: 0 6px 16px rgba(240,165,0,.40);
}
.login-title {
    font-family: 'Poppins',sans-serif;
    font-size: clamp(1.25rem, 3vh, 1.5rem);
    color: var(--primary-dark);
    margin-bottom: 2px;
}
.login-tagline {
    color: var(--text-muted);
    font-size: clamp(0.78rem, 1.6vh, 0.88rem);
    margin-bottom: clamp(12px, 2.5vh, 20px);
    font-style: italic;
    line-height: 1.4;
}
.login-form .form-group { margin-bottom: clamp(8px, 1.5vh, 12px); }
.login-form .form-label { font-size: 0.85rem; margin-bottom: 4px; }
.login-form .form-control { padding: clamp(8px, 1.4vh, 11px) 12px; font-size: 0.95rem; }
.login-form .btn { padding: clamp(9px, 1.6vh, 12px) 18px; font-size: 0.95rem; margin-top: 4px; }
.login-footer {
    margin-top: clamp(12px, 2vh, 18px);
    color: var(--text-muted);
    font-size: 0.76rem;
}
.login-form .alert {
    padding: 8px 12px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

/* ---------- Language Toggle (shared) ---------- */
.lang-toggle {
    display: flex; align-items: center;
    background: var(--bg-main); border-radius: 20px;
    border: 1px solid var(--border); overflow: hidden;
    font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
.lang-btn {
    padding: 5px 11px; cursor: pointer; border: none;
    background: transparent; font-weight: 700; font-size: 0.78rem;
    color: var(--text-muted); transition: var(--transition);
    font-family: inherit; line-height: 1;
}
.lang-btn.active { background: var(--primary); color: #fff; border-radius: 20px; }

/* ---------- Utilities ---------- */
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted   { color: var(--text-muted); }
.text-bold    { font-weight: 700; }
.mt-1 { margin-top: 8px; }   .mt-2 { margin-top: 16px; }   .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    h1 { font-size: 1.4rem; }
    .card { padding: 16px; }
}

/* =============================================================
   Upload Widget & Document Manager
   ============================================================= */

/* Drop zone */
.drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-main);
}
.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--accent);
    background: var(--accent-light);
}
.drop-zone p { margin: 6px 0 0; font-size: 0.9rem; color: var(--text-muted); }

/* Preview rows inside upload modal */
.w-preview-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    background: var(--bg-main); margin-bottom: 4px;
    font-size: 0.85rem;
}

/* Existing file rows in widget */
.upload-widget .card-header { background: var(--bg-main); padding: 12px 16px; }

.w-file-list { padding: 8px 0; }
.w-file-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.w-file-row:last-child { border-bottom: none; }
.w-file-row:hover { background: var(--bg-main); }
.w-file-icon { font-size: 1.6rem; flex-shrink: 0; width: 32px; text-align: center; }
.w-file-info { flex: 1; min-width: 0; }
.w-file-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-file-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.w-desc { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.w-file-actions { display: flex; gap: 5px; flex-shrink: 0; }
.w-empty { text-align: center; padding: 28px 20px; color: var(--text-muted); font-size: 0.88rem; }
.w-empty p { margin: 8px 0 0; }

/* Category badge */
.badge-cat {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: .3px;
    background: var(--accent-light); color: var(--primary-dark);
    margin-right: 4px;
}
.badge-ent {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
    background: #e0e7ef; color: var(--primary);
    margin-right: 4px;
}

/* Document manager grid */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.doc-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
    transition: var(--transition);
}
.doc-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.doc-thumb {
    height: 130px; background: var(--bg-main);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-size: 3rem;
}
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }

.doc-info { padding: 10px 12px; flex: 1; }
.doc-name {
    font-weight: 700; font-size: 0.84rem; color: var(--primary-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 5px;
}
.doc-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.doc-size { font-size: 0.75rem; color: var(--text-muted); }
.doc-desc { font-size: 0.77rem; color: var(--text-muted); font-style: italic; margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-date { font-size: 0.74rem; color: var(--text-muted); }

.doc-actions {
    padding: 8px 12px; border-top: 1px solid var(--border);
    display: flex; gap: 6px; background: var(--bg-main);
}

/* Active KPI card filter */
.kpi-active { border: 2px solid var(--accent) !important; }

/* text color helpers */
.text-info    { color: #0ea5e9; }
.text-warning { color: #f59e0b; }
.text-success { color: #22c55e; }
.text-danger  { color: #ef4444; }
.text-primary { color: var(--primary); }
.text-muted   { color: var(--text-muted); }

@media (max-width: 768px) {
    .doc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .doc-thumb { height: 100px; }
    .w-file-actions .btn-sm span { display: none; }
}

/* ── body[data-theme] fallback (in case html attribute doesn't propagate) ── */
body[data-theme="dark"] {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    --bg-main:   #0f172a;
    --bg-card:   #1e293b;
    --card-bg:   #1e293b;
    --text-dark: #e2e8f0;
    --text-muted:#94a3b8;
    --border:    #334155;
    --input-bg:  #0f172a;
    --topbar-bg: #1e293b;
    --surface:   #1e293b;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE & ADAPTIVE — kazi kwenye device yoyote / screen yoyote
   ════════════════════════════════════════════════════════════════════ */

/* Global box sizing & overflow safety */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; height: auto; }

/* Tables — daima zinaweza ku-scroll horizontally kwa devices nyembamba */
.table-wrap, .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
table { max-width: 100%; }

/* Modals — zifuate screen ndogo */
.modal-backdrop, .modal-backdrop.show, .cc-modal-overlay {
    overflow-y: auto;
    padding: 10px;
}
.modal, .modal-box, .cc-modal {
    max-width: min(95vw, 720px);
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Long numbers/text — usivunje layout */
.kpi-value, td, th {
    overflow-wrap: break-word;
}

/* ─── Tablet (≤ 992px) ─── */
@media (max-width: 992px) {
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-actions { flex-wrap: wrap; }
    .page-actions .btn { flex: 1 1 auto; min-width: 120px; }
    .chart-grid { grid-template-columns: 1fr; }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
    /* Sidebar collapse to off-canvas */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 20px rgba(0,0,0,.25);
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }

    /* Overlay backdrop wakati sidebar iko wazi */
    #sidebarOverlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.55);
        z-index: 1040;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    #sidebarOverlay.active { display: block; }

    .main-content { margin-left: 0 !important; padding: 12px !important; }

    /* Vitendo vya Haraka juu ya screen kwenye mobile — imefanywa priority */
    .quick-actions {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }
    .quick-action {
        padding: 10px 6px !important;
        text-align: center;
        border-radius: 10px;
        border: 1.5px solid;
        min-height: 76px;
    }
    .quick-action-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: .9rem !important;
        margin: 0 auto 6px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    .quick-action-label {
        font-size: .68rem !important;
        line-height: 1.2;
        display: block;
    }

    /* KPI cards — 2 columns */
    .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .kpi-card { padding: 10px !important; }
    .kpi-value { font-size: .95rem !important; }
    .kpi-label { font-size: .68rem !important; }
    .kpi-icon { width: 32px !important; height: 32px !important; font-size: .82rem !important; }
    .kpi-trend { font-size: .65rem !important; }

    /* Forms — full width */
    .form-row { grid-template-columns: 1fr; }
    .fg2 { grid-template-columns: 1fr !important; }

    /* Cards — punguza padding */
    .card { padding: 12px !important; margin-bottom: 14px !important; }
    .card-header { padding: 10px 12px !important; }
    .card-title { font-size: .92rem !important; }

    /* Buttons — touch-friendly */
    .btn { min-height: 38px; padding: 8px 14px; font-size: .88rem; }
    .btn-sm { min-height: 32px; padding: 5px 10px; font-size: .78rem; }

    /* Tables — punguza font on mobile + horizontal scroll */
    .data-table { font-size: .78rem; min-width: 100%; }
    .data-table th, .data-table td { padding: 8px 6px; white-space: nowrap; }

    /* Wrap ambayo scroll-x kwenye mobile */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-radius: 8px;
        position: relative;
    }
    .table-wrap::after {
        /* Hint kuwa unaweza scroll upande */
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; width: 20px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, rgba(0,0,0,.08));
        opacity: 0;
        transition: opacity .2s;
    }
    .table-wrap.has-overflow::after { opacity: 1; }

    /* Sticky first column — product name daima visible unapo-scroll */
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--card-bg, #fff);
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0,0,0,.05);
        max-width: 140px;
        min-width: 100px;
        white-space: normal;
        word-break: break-word;
    }
    body[data-theme="dark"] .data-table th:first-child,
    body[data-theme="dark"] .data-table td:first-child {
        background: var(--card-bg, #0f172a);
    }

    /* Group headers na total rows daima wapane full width */
    .date-group-header td,
    .date-group-total td {
        position: static !important;
        box-shadow: none !important;
        white-space: normal !important;
    }

    /* Totals row highlight kwenye mobile */
    .date-group-total {
        background: rgba(240,165,0,.08) !important;
        font-weight: 700;
    }
    .date-group-total td {
        border-top: 2px solid var(--accent, #f0a500) !important;
        padding: 10px 6px !important;
    }

    .hide-on-mobile { display: none !important; }

    /* Section labels */
    .section-label { font-size: .68rem !important; padding: 6px 10px !important; }

    /* Modal-friendly */
    .modal-box, .cc-modal, .modal { width: 100% !important; max-width: 95vw !important; }
    .modal-footer, .cc-modal-footer { flex-wrap: wrap; }
    .modal-footer .btn, .cc-modal-footer .btn { flex: 1 1 auto; }
}

/* ─── Phone ndogo (≤ 480px) ─── */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr !important; }
    .kpi-value { font-size: 1rem !important; }
    h1, .page-header h1 { font-size: 1.15rem !important; }
    h2 { font-size: 1.05rem !important; }
    h3 { font-size: .95rem !important; }

    .hide-on-small { display: none !important; }

    .modal-backdrop, .modal-backdrop.show, .cc-modal-overlay { padding: 5px; }
    .modal-box, .cc-modal { max-width: 98vw !important; border-radius: 8px !important; }

    .data-table .btn { padding: 4px 8px; font-size: .72rem; min-height: 28px; }
}

/* ─── Touch device — hover effects ziondolewa, tap targets kubwa ─── */
@media (hover: none) {
    .btn:hover, .card:hover, .kpi-card:hover {
        transform: none !important;
    }
    a, button, .clickable { min-height: 36px; }
}

/* ─── Print friendly ─── */
@media print {
    .sidebar, .topbar, .page-actions, .modal-backdrop { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc; }
    body { background: #fff !important; color: #000 !important; }
}

/* ─── Helper classes ─── */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 14px;
}
.responsive-flex { display: flex; flex-wrap: wrap; gap: 10px; }
.no-break { white-space: nowrap; }
.allow-break { word-break: break-word; overflow-wrap: anywhere; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* iOS zoom-lock: inputs ziwe 16px kwenye mobile (kuzuia auto-zoom) */
@media (max-width: 768px) {
    input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
    input[type="date"], input[type="month"], input[type="password"],
    select, textarea, .form-control, .form-select, .fi {
        font-size: 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   TEXT VISIBILITY — hakikisha maneno yanaonekana kwa theme yoyote
   ════════════════════════════════════════════════════════════════════ */

/* Widget sections zenye background za light gradient — text ziwe na contrast nzuri */
[style*="background:linear-gradient(135deg,#f8fafc"],
[style*="background:linear-gradient(135deg,#eff6ff"],
[style*="background:linear-gradient(135deg,#ecfdf5"],
[style*="background:linear-gradient(135deg,#f0fdf4"],
[style*="background:linear-gradient(135deg,#fef3c7"],
[style*="background:linear-gradient(135deg,#fff7ed"],
[style*="background:linear-gradient(135deg,#fffbeb"] {
    color: #1e293b !important;
}

/* Force-readable text colors kwenye light backgrounds */
[style*="background:linear-gradient(135deg,#f8fafc"] *:not(svg):not(svg *):not(i),
[style*="background:linear-gradient(135deg,#eff6ff"] *:not(svg):not(svg *):not(i),
[style*="background:linear-gradient(135deg,#ecfdf5"] *:not(svg):not(svg *):not(i),
[style*="background:linear-gradient(135deg,#f0fdf4"] *:not(svg):not(svg *):not(i) {
    /* Ikiwa color haijawekwa explicitly kwa value sahihi, tumia hii kama fallback */
}

/* var(--text-muted) lazima iwe na contrast bora kwenye background za rangi */
.card[style*="background"] [style*="color:var(--text-muted)"],
div[style*="background:#fff"] [style*="color:var(--text-muted)"],
div[style*="background:#ffffff"] [style*="color:var(--text-muted)"] {
    color: #475569 !important;
}

/* Hakikisha card-bg yenye light bg ina text giza */
div[style*="background:#fff;"] { color: #1e293b; }

/* Section labels — daima ziwe na background imara */
.section-label {
    background: var(--primary, #1a3c5e) !important;
    color: #fff !important;
}

/* Dark theme — boresha contrast ya text kwenye white card backgrounds */
body[data-theme="dark"] div[style*="background:#fff"],
body[data-theme="dark"] div[style*="background:#ffffff"] {
    color: #1e293b !important;
}
body[data-theme="dark"] div[style*="background:#fff"] *,
body[data-theme="dark"] div[style*="background:#ffffff"] * {
    color: inherit;
}

/* Hakikisha .card-header text ni visible */
.card-header, .card-title { color: var(--text-dark, #1e293b) !important; }
body[data-theme="dark"] .card-header, body[data-theme="dark"] .card-title {
    color: var(--text-dark, #e2e8f0) !important;
}

/* Bar/progress indicators — text labels juu yake daima ziwe na contrast nzuri */
.bar-label, [class*="legend"] { font-weight: 700 !important; }

/* Footer notes/captions zenye importance ya kati — boresha contrast */
.caption, .note, .hint, [style*="font-size:.65rem"], [style*="font-size:.68rem"], [style*="font-size:.7rem"] {
    font-weight: 500;
}