/* ============================================================
   SMA ERP v2 - assets/css/style.css
   ============================================================ */
:root {
  --primary: #1a5276;
  --primary-dark: #124063;
  --accent: #2e86c1;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #2c3e50;
  --muted: #7f8c8d;
  --border: #dfe4e8;
  --error-bg: #fdecea; --error-fg: #b03a2e;
  --info-bg: #eaf2f8;  --info-fg: #1a5276;
  --ok-bg: #eafaf1;    --ok-fg: #1e8449;
  --card-alt: #f8fafb;   /* rows/stripes */
  --shadow: rgba(0,0,0,.06);
}

/* ============================================================
   DARK MODE - inabadilisha variables tu; vyote vinavyotumia
   var() vinabadilika moja kwa moja. Overrides chache hapa chini
   kwa sehemu zenye rangi hardcoded.
   ============================================================ */
[data-theme="dark"] {
  --primary: #2e6da3;
  --primary-dark: #21507a;
  --accent: #5aa9e6;
  --bg: #0f141a;
  --card: #1a222c;
  --text: #e4e8ec;
  --muted: #9aa4af;
  --border: #2c3742;
  --error-bg: #3a1d1a; --error-fg: #f5a99e;
  --info-bg: #16283a;  --info-fg: #9cc7ea;
  --ok-bg: #16301f;    --ok-fg: #86e0a6;
  --card-alt: #212b36;
  --shadow: rgba(0,0,0,.4);
}
[data-theme="dark"] { color-scheme: dark; }
/* Sehemu zenye rangi hardcoded (#fff, #f8fafb, n.k.) */
[data-theme="dark"] table.data tr:nth-child(even) { background: var(--card-alt); }
[data-theme="dark"] .main-nav .submenu { background: var(--card); }
[data-theme="dark"] .badge { background: #2c3742; color: var(--text); }
[data-theme="dark"] .badge-d { background: #3a2e16; color: #e0b968; }
[data-theme="dark"] table.data tfoot .total-row td { background: #212b36; }
[data-theme="dark"] .rpt-summary-row td { background: #182234; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
  border-color: var(--accent) !important; }
[data-theme="dark"] input[disabled], [data-theme="dark"] select[disabled],
[data-theme="dark"] input:disabled, [data-theme="dark"] select:disabled {
  background: #161d25 !important; color: #7a8592 !important; opacity: 1 !important; }
[data-theme="dark"] option { background: #1a222c; color: #e4e8ec; }
[data-theme="dark"] select option:checked,
[data-theme="dark"] select option:hover { background: #2c3742; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6b7480; }
/* Form labels + text ndani ya SPA (checkbox labels, field labels) - dark */
[data-theme="dark"] label { color: var(--text); }
[data-theme="dark"] .spa-box, [data-theme="dark"] .spa-form,
[data-theme="dark"] .spa-box label, [data-theme="dark"] .spa-form label { color: var(--text); }
[data-theme="dark"] .spa-box { background: var(--card); }
[data-theme="dark"] fieldset { border-color: var(--border); }
[data-theme="dark"] legend { color: var(--text); }
/* SPA company selector + filter-bar selects (dark) */
[data-theme="dark"] .spa-company select,
[data-theme="dark"] .filter-bar select,
[data-theme="dark"] .filter-bar input {
  background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .spa-company select option,
[data-theme="dark"] .filter-bar select option { background: #1a222c; color: #e4e8ec; }
[data-theme="dark"] .auth-card button, [data-theme="dark"] .btn { color: #fff; }

/* ---- Dark overrides kwa SPA components (dashboards, cards, tabs, accordion) ---- */
[data-theme="dark"] .spa-tabs { border-bottom-color: var(--border); }
[data-theme="dark"] .spa-tab { color: var(--muted); }
[data-theme="dark"] .spa-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .spa-tab[data-theme] { background: var(--card-alt); }
[data-theme="dark"] .dash-card { background: var(--card) !important; color: var(--text); }
[data-theme="dark"] .dash-card .dc-value { color: var(--text) !important; }
[data-theme="dark"] .dash-card .dc-label { color: var(--muted) !important; }
[data-theme="dark"] .dash-cards[data-kpi="b"] .dash-card { background: var(--card-alt) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dash-acc .acc-item { background: var(--card) !important; }
[data-theme="dark"] .acc-head { background: var(--card) !important; }
[data-theme="dark"] .acc-head:hover { background: var(--card-alt) !important; }
[data-theme="dark"] .acc-lbl, [data-theme="dark"] .dlb-title { color: var(--text) !important; }
[data-theme="dark"] .acc-body table.mini th { background: var(--card-alt) !important; color: var(--muted) !important; }
[data-theme="dark"] .acc-body table.mini td { color: var(--text); border-top-color: var(--border) !important; }
[data-theme="dark"] .acc-body table.mini tbody tr:hover td { background: var(--card-alt) !important; }
[data-theme="dark"] .acc-body table.mini tfoot td { background: var(--card-alt) !important; color: var(--text); }
[data-theme="dark"] .dash-chart-wrap { background: var(--card) !important; }
[data-theme="dark"] .dash-chart-title { color: var(--text) !important; }
[data-theme="dark"] .dash-list-box { background: var(--card) !important; }
[data-theme="dark"] .kpi-toggle button { background: var(--card); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .kpi-toggle button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="dark"] .home-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .home-card .hc-name { color: var(--text); }
[data-theme="dark"] .spa-hint, [data-theme="dark"] .rpt-hint { color: var(--muted); }
[data-theme="dark"] .filter-bar { background: var(--card); border-color: var(--border); }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}
a { color: var(--accent); text-decoration: none; }

/* ---------- Alerts ---------- */
.alert { padding: 10px 14px; border-radius: 6px; margin: 10px 0; font-size: 14px; }
.alert-error { background: var(--error-bg); color: var(--error-fg); }
.alert-info  { background: var(--info-bg);  color: var(--info-fg); }
.alert-ok    { background: var(--ok-bg);    color: var(--ok-fg); }

/* ---------- Auth pages (login, otp, change password) ---------- */
.auth-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}
.auth-card {
  background: var(--card); border-radius: 12px;
  padding: 32px 28px; width: 100%; max-width: 400px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.auth-card h1 { margin: 0 0 4px; color: var(--primary); font-size: 24px; text-align: center; }
.auth-card h2 { margin: 0 0 18px; font-size: 15px; font-weight: 400; color: var(--muted); text-align: center; }
.auth-card label { display: block; margin: 14px 0 4px; font-size: 13px; font-weight: 600; }
.auth-card input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 15px;
}
.auth-card input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.auth-card button {
  width: 100%; margin-top: 20px; padding: 11px;
  background: var(--primary); color: #fff; border: 0; border-radius: 6px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.auth-card button:hover { background: var(--primary-dark); }
.auth-card .muted { text-align: center; font-size: 13px; color: var(--muted); }
.policy-hints { font-size: 12.5px; color: var(--muted); padding-left: 18px; margin: 8px 0; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 52px;
}
.topbar .brand { color: #fff; font-weight: 700; font-size: 17px; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13.5px; }
.lang-switch a { color: #cfe3f0; font-weight: 600; }
.lang-switch a.active { color: #fff; text-decoration: underline; }
.user-chip { background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 20px; }
.btn-logout { color: #fff; background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 6px; }
.btn-logout:hover { background: rgba(255,255,255,.3); }

/* ---------- Main nav (recursive dropdown, unlimited levels) ---------- */
.main-nav { background: var(--primary-dark); position: relative; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav ul.root { display: flex; flex-wrap: wrap; }
.main-nav li { position: relative; }
.main-nav a {
  display: block; color: #e8f0f6; padding: 12px 16px; font-size: 14px; white-space: nowrap;
}
.main-nav a:hover { background: var(--primary); color: #fff; }
.main-nav .caret { font-size: 10px; }

.main-nav .submenu {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; min-width: 210px; z-index: 100;
  box-shadow: 0 6px 18px rgba(0,0,0,.15); border-radius: 0 0 6px 6px;
}
.main-nav .submenu a { color: var(--text); padding: 10px 16px; }
.main-nav .submenu a:hover { background: var(--bg); color: var(--primary); }
.main-nav li:hover > .submenu { display: block; }
/* level 3+ inafunguka pembeni */
.main-nav .submenu .submenu { top: 0; left: 100%; border-radius: 6px; }
.nav-toggle { display: none; }

/* ---------- Content ---------- */
.content { padding: 22px; max-width: 1280px; margin: 0 auto; }
.content h1 { font-size: 22px; color: var(--primary); margin-top: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px;
}
.card h3 { margin: 0 0 8px; color: var(--primary); font-size: 16px; }

/* ---------- Tables (za module pages zijazo) ---------- */
table.data { width: 100%; border-collapse: collapse; background: var(--card); }
table.data th, table.data td { padding: 9px 12px; border: 1px solid var(--border); font-size: 14px; text-align: left; }
table.data th { background: var(--primary); color: #fff; }
table.data tr:nth-child(even) { background: #f8fafb; }

/* ---------- Forms za ndani (module pages) ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.form-grid label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.btn {
  display: inline-block; padding: 9px 18px; border-radius: 6px; border: 0;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--muted); }
.btn-danger { background: var(--error-fg); }

/* ---------- Footer ---------- */
.footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 20px; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .nav-toggle {
    display: block; background: none; border: 0; color: #fff;
    font-size: 22px; padding: 10px 16px; cursor: pointer;
  }
  .main-nav ul.root { display: none; flex-direction: column; }
  .main-nav ul.root.open { display: flex; }
  .main-nav .submenu { position: static; box-shadow: none; background: rgba(255,255,255,.06); }
  .main-nav .submenu a { color: #cfe3f0; padding-left: 32px; }
  .main-nav .submenu .submenu a { padding-left: 48px; }
  .topbar-right .user-chip { display: none; }
}

/* ---------- Module extras ---------- */
.filter-bar { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.link-danger { background: none; border: 0; color: var(--error-fg); cursor: pointer; font-size: 14px; padding: 0; margin-left: 8px; text-decoration: underline; }

/* ---------- Stats bar, badges, pagination ---------- */
.stats-bar { background: var(--info-bg); color: var(--info-fg); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.stats-bar .muted-sep { color: var(--muted); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; background: #eef2f5; color: var(--text); }
.badge-p { background: var(--ok-bg); color: var(--ok-fg); }
.badge-d { background: #fff3e0; color: #b9770e; }
.badge-a { background: var(--ok-bg); color: var(--ok-fg); }
.pagination { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 16px 0; font-size: 14px; }
.pagination a { padding: 6px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
.pagination a:hover { background: var(--primary); color: #fff; }
.pagination .page-info { color: var(--muted); }

/* ---------- Table footer totals ---------- */
table.data tfoot .total-row td { background: #eef2f5; border-top: 2px solid var(--primary); }
table.data tfoot .grand-row td { background: var(--info-bg); color: var(--info-fg); }
.link-post { background: none; border: 0; color: var(--ok-fg); cursor: pointer; font-size: 14px; padding: 0; margin-left: 8px; text-decoration: underline; font-weight: 600; }
.record-info { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 14px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.danger-zone { display: flex; gap: 10px; padding: 6px 0 20px; }
.is-posted { color: var(--ok-fg); font-size: 12.5px; font-weight: 600; }
.btn-sm { padding: 4px 12px; font-size: 12.5px; }
a.sort-th { color: #fff; text-decoration: none; }
a.sort-th:hover { text-decoration: underline; }
.action-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.action-left, .action-right { display: flex; gap: 10px; }

/* ---------- Table wrapper: table pana inascroll ndani, page haipanuki ---------- */
.table-wrap { overflow-x: auto; width: 100%; }
.table-wrap table.data { min-width: 700px; }
.table-wrap table.data th, .table-wrap table.data td { white-space: nowrap; }
.icon-view { font-size: 17px; text-decoration: none; vertical-align: middle; }
.actions-cell { white-space: nowrap; }

/* ---------- Reports ---------- */
.rpt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.rpt-wrapper { max-width: 960px; }
.rpt-hint { color: var(--muted); text-align: center; margin-top: 40px; }
.rpt-comp-header { background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 6px 6px 0 0; margin: 22px 0 0; font-size: 16px; }
.rpt-table th.num, .rpt-table td.num { text-align: right; }
.rpt-empty { text-align: center; color: var(--muted); font-style: italic; padding: 16px; }

.prior-box { background: #fff; border: 2px solid #003366; border-radius: 6px; margin-bottom: 18px; overflow: hidden; }
.prior-box-title { background: #003366; color: #fff; padding: 7px 14px; font-weight: bold; font-size: 13px; }
.prior-box-body { display: flex; flex-wrap: wrap; }
.prior-item { flex: 1; min-width: 150px; padding: 12px 16px; border-right: 1px solid #e0e0e0; text-align: center; }
.prior-item:last-child { border-right: none; }
.prior-item .p-label { font-size: 11px; color: #888; margin-bottom: 4px; }
.prior-item .p-value { font-size: 16px; font-weight: bold; color: #003366; }
.prior-balance { background: #f0f7ff; }

.date-header { text-align: center; color: #c62828; font-size: 15px; font-weight: bold; margin-bottom: 16px; padding: 8px; border: 2px dashed #c62828; border-radius: 6px; background: #fff; }

.rpt-section { margin-bottom: 22px; }
.rpt-section-title { color: #fff; padding: 7px 14px; font-weight: bold; font-size: 14px; border-radius: 4px 4px 0 0; }
.rpt-red { background: #c62828; }

.summary-block { background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px solid #eee; font-size: 13px; }
.summary-row:last-child { border-bottom: none; }
.summary-row .label { font-weight: bold; flex: 1; }
.summary-row .value { font-weight: bold; min-width: 160px; text-align: right; }
.summary-row .value.neg { color: #c62828; }
.s-sales { background: #e8f5e9; }
.s-costs { background: #fdecea; } .s-costs .value { color: #c62828; }
.s-salio { background: #e3f2fd; } .s-salio .label, .s-salio .value { color: #1565c0; font-size: 14px; }
.s-navy  { background: #003366; } .s-navy .label, .s-navy .value { color: #ffd700; font-size: 14px; }
.s-dark  { background: #1a1a2e; } .s-dark .label, .s-dark .value { color: #ff6b6b; font-size: 14px; }
.s-gold  { background: #ffd700; border-top: 3px solid #003366; } .s-gold .label { color: #003366; font-size: 15px; }
.s-bv    { background: #e8eaf6; border-left: 4px solid #3949ab; } .s-bv .label, .s-bv .value { color: #1a237e; }
.s-faida-pos { background: #e8f5e9; border-top: 3px solid #28a745; border-left: 6px solid #28a745; } .s-faida-pos .label, .s-faida-pos .value { color: #1b5e20; font-size: 15px; }
.s-faida-neg { background: #fdecea; border-top: 3px solid #dc3545; border-left: 6px solid #dc3545; } .s-faida-neg .label, .s-faida-neg .value { color: #b71c1c; font-size: 15px; }

.rpt-summary-row td { background: #f0f4ff; font-weight: bold; }
.busvalue-row td { background: #e8eaf6 !important; color: #1a237e !important; font-weight: bold; border-top: 2px solid #3949ab; }
.faida-row.pos td { background: #e8f5e9 !important; color: #1b5e20 !important; font-weight: bold; border-top: 3px solid #28a745; }
.faida-row.neg td { background: #fdecea !important; color: #b71c1c !important; font-weight: bold; border-top: 3px solid #dc3545; }

/* ---------- Print: ficha nav/filters, acha ripoti safi ---------- */
@media print {
  header, nav, footer,
  .topbar, .main-nav, .footer, .filter-bar, .no-print, .pagination, .action-bar { display: none !important; }
  body { background: #fff; margin: 0; padding: 0; }
  .content, .rpt-wrapper { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

  /* MUHIMU: table-wrap isikate chochote kwenye karatasi (hakuna scroll printing) */
  .table-wrap { overflow: visible !important; width: 100% !important; }
  .table-wrap table.data,
  table.data { min-width: 0 !important; width: 100% !important; table-layout: auto; font-size: 10.5px; }
  table.data th, table.data td { white-space: normal !important; padding: 4px 6px !important; word-break: break-word; }

  /* Rangi zibaki kwenye print */
  table.data th { background: #003366 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .summary-row, .prior-box, .prior-item, .rpt-section-title, .date-header,
  .rpt-comp-header, .rpt-summary-row td, .busvalue-row td, .faida-row td,
  .badge, .total-row td, .grand-row td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Ukurasa wa print */
  @page { size: A4; margin: 10mm; }

  /* MUHIMU: sections ndefu (tables, summary) ZIRUHUSIWE kuvuka pages -
     'break-inside: avoid' kwa block ndefu kuliko page moja husababisha
     browser kukata kila kinachozidi (ndiyo ile 'screenshot' ya page moja).
     Tunazuia kukatika kwa ROW moja moja tu na prior-box ndogo. */
  .rpt-section, .summary-block { break-inside: auto; page-break-inside: auto; }
  tr, .summary-row, .prior-box { break-inside: avoid; page-break-inside: avoid; }

  /* Headers za table zijirudie kwenye kila page mpya */
  table.data thead { display: table-header-group; }
  table.data tfoot { display: table-footer-group; }

  .summary-row .value { min-width: 120px; }
}

/* ---------- Roles checkboxes (customers) ---------- */
.roles-title { margin: 18px 0 8px; font-size: 15px; color: var(--primary); }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.role-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.role-check input { width: auto; }
.roles-cell { max-width: 220px; white-space: normal !important; font-size: 12px; }