@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Mobile-first form/modal layer — must load BEFORE rules below so specificity
 * cascades correctly. See apps/web/mobile-first.css header for the contract. */
@import url('/mobile-first.css');

/*
 * Nzura App Shell — Dashboard CSS
 * Shared stylesheet for tenant dashboard, portals, settings, and admin.
 */

/* Hide page until auth.js confirms session — prevents flash of content */
html { visibility: hidden; }

/* ─────────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand — Nzura palette (4 flat colors) */
  --brand-red: #f7525a;
  --brand-red-deep: #d9434a;
  --brand-amber: #dc9d28;
  --brand-amber-deep: #b8831f;
  --brand-navy: #1B2E5A;
  --brand-navy-deep: #0e1c3a;
  --brand-emerald: #22b378;
  --brand-emerald-deep: #1a9660;

  /* Primary action color — overridden by tenant brand via nzura-brand.js */
  --brand-primary: #22b378;
  --brand-primary-deep: #1a9660;
  --brand-primary-soft: rgba(34,179,120,0.08);
  --brand-primary-text: #fff;
  --brand-primary-rgb: 34,179,120;

  /* Legacy aliases — mapped to brand-primary */
  --brand-orange: var(--brand-primary);
  --brand-orange-deep: var(--brand-primary-deep);
  --brand-gold: #dc9d28;

  /* Accent — tenant-overridable */
  --tab-active-color: var(--brand-primary);
  --toggle-active-bg: var(--brand-primary);
  --link-color: var(--brand-primary);
  --accent: var(--brand-primary);
  --accent-soft: var(--brand-primary-soft);

  /* Sidebar — matches content area */
  --sidebar-bg: var(--panel-bg, rgba(255,255,255,0.96));
  --sidebar-border: var(--panel-border, rgba(27,46,90,0.1));
  --sidebar-text: var(--text-muted, #6b7a99);
  --sidebar-text-hover: var(--text-primary, #1B2E5A);
  --sidebar-active-bg: rgba(var(--brand-primary-rgb, 34,179,120), 0.10);
  --sidebar-active-border: var(--brand-primary, #22b378);
  --sidebar-active-text: var(--brand-primary, #22b378);
  --sidebar-width: 83px;
  --sidebar-collapsed-width: 64px;

  /* Content area */
  --content-bg: #f4f5f8;
  --panel-bg: rgba(255,255,255,0.96);
  --panel-border: rgba(27,46,90,0.1);
  --panel-shadow: 0 2px 16px rgba(27,46,90,0.07);
  --panel-shadow-lg: 0 8px 40px rgba(27,46,90,0.1);
  --card-bg: var(--panel-bg);
  --surface-raised: rgba(255,255,255,0.82);
  --surface-muted: rgba(27,46,90,0.04);
  --surface-soft: rgba(27,46,90,0.06);
  --surface-hover: rgba(27,46,90,0.08);
  --surface-selected: rgba(64,141,251,0.08);
  --overlay-bg: rgba(255,255,255,0.98);
  --input-bg: rgba(255,255,255,0.82);
  --input-bg-focus: #fff;
  --accent-soft: rgba(212,39,59,0.08);
  --success-soft: rgba(34,179,120,0.12);
  --warning-soft: rgba(220,157,40,0.12);
  --danger-soft: rgba(247,82,90,0.12);
  --info-soft: rgba(64,141,251,0.1);

  /* Text */
  --text-primary: #1B2E5A;
  --text-secondary: #3a4d72;
  --text-muted: #5a6f8f;
  --text-placeholder: #8a9bba;

  /* Semantic colors — 4 flat status colors */
  --green: #22b378;
  --green-bg: rgba(34,179,120,0.1);
  --green-border: rgba(34,179,120,0.2);
  --red: #f7525a;
  --red-bg: rgba(247,82,90,0.1);
  --red-border: rgba(247,82,90,0.2);
  --amber: #dc9d28;
  --amber-bg: rgba(220,157,40,0.1);
  --amber-border: rgba(220,157,40,0.2);
  --blue: #408dfb;
  --blue-bg: rgba(64,141,251,0.08);

  /* Line/border */
  --border: rgba(27,46,90,0.1);
  --border-strong: rgba(27,46,90,0.18);

  /* Radius */
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 6px;

  /* Transition */
  --t: 0.18s ease;

  /* Shared redesign typography + appearance */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,monospace;
  --accent-h: 18;
  --pad: 28px;
  --gap: 22px;
  --radius: 18px;
  --card-pad-y: 20px;
  --card-pad-x: 22px;
  --control-height: 44px;
  --table-cell-pad-y: 16px;
  --table-cell-pad-x: 18px;
  --tab-pad-y: 13px;
  --tab-pad-x: 14px;
  --kpi-min-height: 132px;
  --kpi-value-size: clamp(1.72rem, 1.1rem + 2vw, 2.6rem);
  color-scheme: light;
}

[data-density="compact"] {
  --pad: 14px;
  --gap: 12px;
  --radius: 10px;
  --card-pad-y: 12px;
  --card-pad-x: 14px;
  --control-height: 38px;
  --table-cell-pad-y: 10px;
  --table-cell-pad-x: 12px;
  --tab-pad-y: 9px;
  --tab-pad-x: 10px;
  --kpi-min-height: 104px;
  --kpi-value-size: clamp(1.28rem, 0.95rem + 1.35vw, 1.95rem);
}

[data-density="cozy"] {
  --pad: 20px;
  --gap: 16px;
  --radius: 14px;
  --card-pad-y: 16px;
  --card-pad-x: 18px;
  --control-height: 41px;
  --table-cell-pad-y: 13px;
  --table-cell-pad-x: 15px;
  --tab-pad-y: 11px;
  --tab-pad-x: 12px;
  --kpi-min-height: 118px;
  --kpi-value-size: clamp(1.48rem, 1rem + 1.65vw, 2.2rem);
}

[data-density="roomy"] {
  --pad: 28px;
  --gap: 22px;
  --radius: 18px;
  --card-pad-y: 20px;
  --card-pad-x: 22px;
  --control-height: 44px;
  --table-cell-pad-y: 16px;
  --table-cell-pad-x: 18px;
  --tab-pad-y: 13px;
  --tab-pad-x: 14px;
  --kpi-min-height: 132px;
  --kpi-value-size: clamp(1.72rem, 1.1rem + 2vw, 2.6rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body.app-body {
  margin: 0;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--content-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. APP SHELL LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 250;
  overflow-y: auto;
  transition: width var(--t), transform var(--t);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  flex-shrink: 0;
}
.sidebar-logo img { filter: none; }
.sidebar-logo .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}
.sidebar-logo .logo-text {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.sidebar-logo .logo-text span { color: var(--brand-gold); }

/* Sidebar module search */
.sidebar-search {
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-search-input {
  width: 100%;
  padding: 0.3rem 0.35rem;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--r-sm);
  background: var(--surface-muted, rgba(0,0,0,0.04));
  color: var(--text-primary);
  font-size: 0.6rem;
  outline: none;
  transition: all var(--t);
  text-align: center;
}
.sidebar-search-input::placeholder {
  color: var(--text-placeholder);
  font-size: 0.55rem;
}
.sidebar-search-input:focus {
  border-color: var(--brand-primary);
  background: var(--input-bg-focus, #fff);
  box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb),0.15);
}

/* Sidebar — locked apps & "More Apps" section */
.nav-item.locked {
  opacity: 0.45;
  pointer-events: auto;
  position: relative;
}
.nav-item.locked:hover { opacity: 0.6; }
.nav-lock {
  margin-left: auto;
  font-size: 0.55rem;
  flex-shrink: 0;
}
.sidebar-more-apps {
  border-top: 1px solid var(--sidebar-border);
  margin-top: 0.25rem;
  padding-top: 0.15rem;
}
.sidebar-more-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.35rem 0.65rem;
  background: none;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t);
}
.sidebar-more-btn:hover { color: var(--text-primary); }
.more-count {
  background: rgba(255,255,255,0.1);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.55rem;
}
.sidebar-locked-list {
  display: none;
  padding: 0.15rem 0;
}
.sidebar-more-apps.expanded .sidebar-locked-list { display: block; }
.sidebar-more-apps.expanded .sidebar-more-btn { color: var(--text-primary); }
.sidebar-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.35rem 0.5rem 0.25rem;
  padding: 0.4rem 0.5rem;
  background: var(--brand-primary, #408dfb);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--t);
}
.sidebar-upgrade-btn:hover { background: var(--brand-primary-dk, #2d6fd4); filter: brightness(1.1); }

/* Quick Setup pill — sits just above the SMS balance card. Slightly more
   prominent than the card since it's the primary call-to-action
   for newly-onboarded tenants who haven't finished configuring. */
.sidebar-quick-setup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.6rem 0.55rem 0;
  padding: 0.55rem 0.6rem;
  background: linear-gradient(135deg, rgba(212, 39, 59, .08), rgba(244, 166, 33, .08));
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t), color var(--t), border-color var(--t);
  flex-shrink: 0;
}
.sidebar-quick-setup-btn:hover {
  background: linear-gradient(135deg, rgba(212, 39, 59, .14), rgba(244, 166, 33, .14));
  border-color: var(--border-strong);
}
.sidebar-quick-setup-btn svg { flex-shrink: 0; opacity: 0.9; color: var(--brand-red, #D4273B); }
.sidebar-quick-setup-btn .quick-setup-pct {
  font-size: 0.62rem;
  font-weight: 800;
  background: var(--brand-red, #D4273B);
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  line-height: 1;
  margin-left: auto;
}
.sidebar-quick-setup-btn .quick-setup-pct:empty { display: none; }
.sidebar.collapsed .sidebar-quick-setup-btn span,
.sidebar[data-collapsed="true"] .sidebar-quick-setup-btn span {
  display: none;
}
.sidebar.collapsed .sidebar-quick-setup-btn,
.sidebar[data-collapsed="true"] .sidebar-quick-setup-btn {
  padding: 0.5rem 0.4rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

/* Backup pill — mirrors Quick Setup but uses a blue/cloud accent. The
   green check inside .sidebar-backup-check is hidden by default and only
   shown once the tenant's Google Drive is connected (sidebar-backup-btn
   gains the `.is-connected` class). */
.sidebar-backup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.45rem 0.55rem 0;
  padding: 0.55rem 0.6rem;
  background: linear-gradient(135deg, rgba(64, 141, 251, .08), rgba(34, 179, 120, .08));
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t), color var(--t), border-color var(--t);
  flex-shrink: 0;
}
.sidebar-backup-btn:hover {
  background: linear-gradient(135deg, rgba(64, 141, 251, .15), rgba(34, 179, 120, .15));
  border-color: var(--border-strong);
}
.sidebar-backup-btn svg { flex-shrink: 0; opacity: 0.95; }
/* Full-colour Google Drive logo — overrides the generic blue tint above. */
.sidebar-backup-btn .sidebar-backup-gdrive { opacity: 1; }
.sidebar-backup-btn .sidebar-backup-check {
  margin-left: auto;
  width: 16px; height: 16px;
  background: #22b378;
  color: #fff;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-backup-btn .sidebar-backup-check svg { color: #fff; opacity: 1; }
.sidebar-backup-btn.is-connected .sidebar-backup-check { display: inline-flex; }
.sidebar-backup-btn.is-connected {
  border-color: rgba(34, 179, 120, .35);
  background: linear-gradient(135deg, rgba(34, 179, 120, .10), rgba(64, 141, 251, .10));
}
.sidebar.collapsed .sidebar-backup-btn span:not(.sidebar-backup-check),
.sidebar[data-collapsed="true"] .sidebar-backup-btn span:not(.sidebar-backup-check) {
  display: none;
}
.sidebar.collapsed .sidebar-backup-btn,
.sidebar[data-collapsed="true"] .sidebar-backup-btn {
  padding: 0.5rem 0.4rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}
.sidebar.collapsed .sidebar-backup-btn .sidebar-backup-check,
.sidebar[data-collapsed="true"] .sidebar-backup-btn .sidebar-backup-check {
  margin-left: 0.25rem;
}

/* Billing pill — always-on shortcut into /billing/, sits just above the
   Pay/Switch Plan pill. Uses an amber accent so it stays distinct from
   Backup (blue/green) and the Pay/Switch Plan pill (red gradient). */
.sidebar-billing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.45rem 0.55rem 0;
  padding: 0.55rem 0.6rem;
  background: linear-gradient(135deg, rgba(244, 166, 33, .10), rgba(212, 39, 59, .08));
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t), color var(--t), border-color var(--t);
  flex-shrink: 0;
}
.sidebar-billing-btn:hover {
  background: linear-gradient(135deg, rgba(244, 166, 33, .18), rgba(212, 39, 59, .15));
  border-color: var(--border-strong);
}
.sidebar-billing-btn svg { flex-shrink: 0; opacity: 0.9; color: #f4a621; }
.sidebar.collapsed .sidebar-billing-btn span,
.sidebar[data-collapsed="true"] .sidebar-billing-btn span {
  display: none;
}
.sidebar.collapsed .sidebar-billing-btn,
.sidebar[data-collapsed="true"] .sidebar-billing-btn {
  padding: 0.5rem 0.4rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

/* SMS balance card — minified KPI pinned at the bottom of the sidebar,
   mirroring the Bulk SMS / CRM credit card (balance + Buy CTA). */
.sidebar-sms-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.45rem 0.55rem 0;
  padding: 0.5rem 0.6rem;
  background: rgba(212, 39, 59, .07);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--t), border-color var(--t);
}
.sidebar-sms-card:hover {
  background: rgba(212, 39, 59, .15);
  border-color: var(--border-strong);
}
.sidebar-sms-card .sidebar-sms-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212, 39, 59, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sidebar-sms-card .sidebar-sms-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
  flex: 1;
}
.sidebar-sms-card .sidebar-sms-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.sidebar-sms-card .sidebar-sms-value {
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-sms-card .sidebar-sms-cta {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(212, 39, 59, .18);
  color: var(--brand-red, #D4273B);
  flex-shrink: 0;
}
.sidebar-sms-card.is-waived .sidebar-sms-icon { background: rgba(34, 179, 120, .2); }
.sidebar-sms-card.is-waived .sidebar-sms-value { color: var(--green, #22b378); }
.sidebar-sms-card.is-waived .sidebar-sms-cta { display: none; }
/* Collapsed sidebar (desktop) — show just the icon */
.sidebar.collapsed .sidebar-sms-card .sidebar-sms-copy,
.sidebar.collapsed .sidebar-sms-card .sidebar-sms-cta,
.sidebar[data-collapsed="true"] .sidebar-sms-card .sidebar-sms-copy,
.sidebar[data-collapsed="true"] .sidebar-sms-card .sidebar-sms-cta {
  display: none;
}
.sidebar.collapsed .sidebar-sms-card,
.sidebar[data-collapsed="true"] .sidebar-sms-card {
  justify-content: center;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

/* Focused Backup modal — single-button WhatsApp-style sheet. */
.nzura-backup-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: nzura-backup-fade .15s ease-out;
}
@keyframes nzura-backup-fade { from { opacity: 0; } to { opacity: 1; } }
.nzura-backup-modal-card {
  background: var(--panel-bg, #fff);
  color: var(--text-primary);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  width: 100%;
  max-width: 420px;
  padding: 1.5rem 1.5rem 1.25rem;
  position: relative;
  animation: nzura-backup-pop .18s ease-out;
}
@keyframes nzura-backup-pop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.nzura-backup-modal-close {
  position: absolute;
  top: 0.5rem; right: 0.7rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}
.nzura-backup-modal-close:hover { color: var(--text-primary); }
.nzura-backup-modal-hero {
  text-align: center;
  padding: 0.25rem 0 0.75rem;
}
.nzura-backup-modal-hero > svg {
  color: #408dfb;
  display: block;
  margin: 0 auto 0.5rem;
}
.nzura-backup-modal-hero h2 {
  margin: 0 0 .4rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.nzura-backup-modal-hero p {
  margin: 0;
  color: var(--text-muted);
  font-size: .87rem;
  line-height: 1.4;
}
.nzura-backup-modal-status {
  background: var(--surface-hover, rgba(64, 141, 251, .06));
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin: 0.75rem 0 1rem;
}
.nzura-backup-modal-status.connected { background: rgba(34, 179, 120, .08); }
.nzura-backup-modal-status-row {
  font-size: .9rem;
  margin-bottom: .25rem;
}
.nzura-backup-modal-tick {
  display: inline-flex;
  width: 18px; height: 18px;
  background: #22b378;
  color: #fff;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .7rem;
  margin-right: .35rem;
  vertical-align: middle;
}
.nzura-backup-modal-meta {
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.5;
}
.nzura-backup-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.nzura-backup-modal-actions .btn { min-height: 38px; }
.nzura-backup-modal-actions .btn-google {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Expanded full-settings variant of the modal — used by the sidebar pill so
   tenants can browse stats / change preferences / restore from a backup
   without leaving the page they were on. */
.nzura-backup-modal-card.wide { max-width: 720px; }
.nzura-backup-body { max-height: 75vh; overflow-y: auto; }
.nzura-backup-section {
  border-top: 1px solid var(--border);
  padding: 0.85rem 0;
}
.nzura-backup-section:first-child { border-top: none; padding-top: 0.5rem; }
.nzura-backup-h3 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.nzura-backup-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0.1rem 0;
}
.nzura-backup-status { display: flex; flex-direction: column; gap: 0.15rem; }
.nzura-backup-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}
.nzura-backup-stat {
  background: var(--surface-hover, rgba(64, 141, 251, .06));
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nzura-backup-stat .num { font-size: 1.1rem; font-weight: 700; }
.nzura-backup-stat .lbl { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 560px) {
  .nzura-backup-stats { grid-template-columns: repeat(2, 1fr); }
}
.nzura-backup-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.85rem;
  align-items: center;
}
.nzura-backup-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.nzura-backup-form select {
  font-size: 0.88rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-bg, #fff);
  color: var(--text-primary);
}
.nzura-backup-toggle {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}
.nzura-backup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.nzura-backup-table thead th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.nzura-backup-table tbody td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.nzura-backup-table tbody tr:hover { background: var(--surface-hover, rgba(64, 141, 251, .04)); }

/* Pause / resume — deliberately a tight, icon-led button so the clickable
   target is small and unambiguous (the previous full-row checkbox label was
   easy to fat-finger). The button-style states make the current state
   obvious at a glance, and the colour change reinforces that paused = bad. */
.bk-pause-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-bg, #fff);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.bk-pause-btn:hover {
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .35);
  color: #dc2626;
}
.bk-pause-btn.is-paused {
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .45);
  color: #dc2626;
}
.bk-pause-btn.is-paused:hover {
  background: rgba(34, 179, 120, .14);
  border-color: rgba(34, 179, 120, .45);
  color: #16a34a;
}

/* ─── Restore manager ────────────────────────────────────────────────────────
   Mobile-first card list. The toolbar (search + select-all + mode toggle)
   and footer (bulk action) are sticky so the user can always trigger the
   restore from anywhere in a long list of 60+ tables. Each card carries
   its own "Restore" button so a single table can be restored without
   touching the bulk flow at all. */
.bk-restore-screen { display: flex; flex-direction: column; gap: 0.6rem; }
.bk-restore-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bk-restore-head-title { display: flex; flex-direction: column; line-height: 1.15; }
.bk-restore-head-title strong { font-size: 1rem; }
.bk-restore-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 0.5rem 0;
  position: sticky;
  top: 0;
  background: var(--panel-bg, #fff);
  z-index: 3;
  border-bottom: 1px solid var(--border);
}
.bk-restore-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
}
.bk-restore-search {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg, transparent);
  color: inherit;
  font-size: 0.88rem;
  -webkit-appearance: none;
  appearance: none;
}
.bk-restore-search:focus {
  outline: 2px solid rgba(64, 141, 251, .35);
  outline-offset: 1px;
  border-color: rgba(64, 141, 251, .6);
}
.bk-restore-selectall {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.bk-restore-mode {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-left: auto;
}
.bk-restore-mode button {
  background: transparent;
  border: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.bk-restore-mode button.is-active {
  background: var(--brand-500, #408dfb);
  color: #fff;
}
.bk-restore-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.25rem 0 0.4rem;
}
.bk-restore-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, var(--panel-bg, #fff));
  align-items: center;
  transition: border-color var(--t), background var(--t);
}
.bk-restore-card.is-selected {
  border-color: rgba(64, 141, 251, .55);
  background: rgba(64, 141, 251, .05);
}
.bk-restore-card .bk-restore-body { min-width: 0; }
.bk-restore-card .bk-restore-lbl {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-restore-card .bk-restore-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.bk-restore-card .bk-module-pill {
  background: rgba(64, 141, 251, .12);
  color: var(--brand-700, #2c66c4);
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bk-restore-card .bk-row-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  white-space: nowrap;
  min-width: 76px;
  text-align: center;
}
.bk-restore-card.is-done   { border-color: rgba(34, 179, 120, .45); background: rgba(34, 179, 120, .07); }
.bk-restore-card.is-failed { border-color: rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .06); }
.bk-restore-empty {
  padding: 1.2rem 0.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.bk-restore-footer {
  position: sticky;
  bottom: 0;
  background: var(--panel-bg, #fff);
  border-top: 1px solid var(--border);
  padding: 0.55rem 0;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  z-index: 3;
}
.bk-restore-footer .bk-restore-footer-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bk-restore-footer .btn { min-height: 38px; }

/* ≥ 640px (tablet / desktop): toolbar collapses to a single horizontal row,
   cards get a touch more padding. */
@media (min-width: 640px) {
  .bk-restore-toolbar {
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
    align-items: center;
    gap: 0.6rem;
  }
  .bk-restore-search { width: auto; min-width: 220px; }
  .bk-restore-card { padding: 0.8rem 0.95rem; gap: 0.85rem; }
  .bk-restore-card .bk-restore-lbl { font-size: 0.98rem; }
  .bk-restore-card .bk-restore-meta { font-size: 0.78rem; }
}

/* Tenant switcher — compact: logo + gear only */
.tenant-switcher {
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--sidebar-border);
  position: relative;
}
.tenant-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.4rem;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.06);
  cursor: default;
  transition: background var(--t);
  position: relative;
}
.tenant-selector:hover { background: rgba(255,255,255,0.1); }
.tenant-avatar {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--brand-emerald, #22b378);
  flex-shrink: 0;
  overflow: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.tenant-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tenant-name { color: #fff; font-weight: 600; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-plan { color: rgba(255,255,255,0.55); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.tenant-chevron { color: rgba(255,255,255,0.45); font-size: 0.65rem; }

/* Sidebar gear settings button + dropdown */
.sidebar-gear-btn { background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.25); border-radius:6px; font-size:.9rem; cursor:pointer; padding:4px 7px; color:#fff; opacity:0.85; transition:all .2s; filter:brightness(1.5); }
.sidebar-gear-btn:hover { opacity:1; background:rgba(255,255,255,0.3); }
.sidebar-gear-menu { position:absolute; top:calc(100% + 4px); left:4px; right:4px; background:var(--sidebar-bg); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:4px 0; box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:100; }
.gear-menu-item { display:flex; align-items:center; gap:6px; padding:7px 10px; color:rgba(255,255,255,0.78); text-decoration:none; font-size:0.76rem; transition:background .15s; white-space:nowrap; }
.gear-menu-item:hover { background:rgba(255,255,255,0.1); color:#fff; }

/* Navigation */
.sidebar-nav {
  flex: 1;
  padding: 0.15rem 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
/* Hide hardcoded nav groups until nzura-sidebar.js replaces them */
.sidebar-nav > .nav-group { display: none; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

.nav-group { margin-bottom: 0; padding-top: 0.1rem; border-top: 1px solid rgba(255,255,255,0.12); }
.nav-group:first-child { border-top: none; padding-top: 0; }
.nav-group-label {
  display: none;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.4rem 0.2rem;
  margin: 0;
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.55rem;
  border: none;
  border-radius: 0;
  transition: all var(--t);
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: center;
  line-height: 1.15;
}
.nav-item:hover {
  color: var(--sidebar-text-hover);
  background: var(--surface-muted, rgba(0,0,0,0.04));
}
.nav-item.active {
  color: var(--sidebar-active-text);
  background: var(--sidebar-active-bg);
}
.nav-item .nav-icon { font-size: 1.66rem; flex-shrink: 0; width: auto; text-align: center; filter: saturate(1.2) brightness(1.1); line-height: 1; }
.nav-item .nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--brand-orange);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0.05rem 0.25rem;
  border-radius: 999px;
  min-width: 14px;
  text-align: center;
}

/* ── "Make default module" star ───────────────────────────────────────
   Hover-revealed pin on each sidebar module (mirrors the accounting
   subnav "+" affordance: dim until you hover the row, lit when active).
   Click pins that module as the post-login landing page; clicking the
   pinned one clears it. Dashboard + external apps don't get a star.
   Vertically centred and inset from the edge so it's easy to see and
   click in the full-width rows (not jammed into the clipped corner). */
.nav-item { position: relative; }
.nav-default-star {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #9aa3b2);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.8);
  transition: opacity 0.15s, transform 0.15s, color 0.15s, background 0.15s;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.nav-default-star svg { display: block; width: 15px; height: 15px; }
/* Reveal clearly when the row is hovered (note the centred transform must be
   preserved on every state or the star jumps). */
.nav-item:hover .nav-default-star {
  opacity: 0.65;
  transform: translateY(-50%) scale(1);
  background: rgba(127, 127, 127, 0.12);
}
.nav-default-star:hover,
.nav-default-star:focus-visible {
  opacity: 1 !important;
  color: #f5b50a;
  background: rgba(245, 181, 10, 0.2);
  transform: translateY(-50%) scale(1.08);
  outline: none;
}
/* Pinned default — always lit, filled gold star */
.nav-item.is-default .nav-default-star,
.nav-default-star.is-default {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  color: #f5b50a;
}
.nav-default-star.is-default svg polygon { fill: #f5b50a; }
/* Shift left so it never sits under a right-aligned badge / "CURRENT" pill. */
.nav-item.nz2-current .nav-default-star,
.nav-item:has(.nav-badge) .nav-default-star { right: 90px; }
/* Collapsed icon-rail: no room for a star, hide it. */
html.sidebar-collapsed .nav-default-star,
.sidebar.collapsed .nav-default-star,
.sidebar[data-collapsed="true"] .nav-default-star { display: none; }

/* Body-level caption tooltip for the default-module star (escapes the
   sidebar's overflow clipping). */
.nzura-default-tip {
  position: fixed;
  z-index: 100000;
  max-width: 240px;
  padding: 7px 11px;
  border-radius: 8px;
  background: #1b2233;
  color: #f4f6fb;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s, transform 0.12s;
}
.nzura-default-tip.show { opacity: 1; transform: translateY(0); }

/* Sidebar footer — compact: logo + logout */
.sidebar-footer {
  padding: 0.4rem 0.65rem 0.5rem;
  border-top: 1px solid var(--sidebar-border);
}
.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.4rem;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--t);
}
.sidebar-user:hover { background: rgba(255,255,255,0.06); }
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--brand-orange, #408dfb);
  flex-shrink: 0;
  overflow: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.user-info { display: none; } /* Hidden — compact mode */
.user-name { color: #fff; font-weight: 600; font-size: 0.73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: rgba(255,255,255,0.55); font-size: 0.62rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. MAIN CONTENT
   ───────────────────────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  min-width: 0;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244,245,248,0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  height: 42px;
  flex-shrink: 0;
}
.topbar-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.topbar-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  min-width: 160px;
  transition: all var(--t);
}
.topbar-search:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.topbar-actions { display: flex; align-items: center; gap: 0.15rem; }
.topbar-actions .topbar-divider { width: 1px; height: 20px; background: var(--border); margin: 0 0.35rem; }
.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--t);
  position: relative;
  color: var(--text-secondary, #6b7280);
}
.icon-btn:hover { background: var(--surface-hover, rgba(0,0,0,0.06)); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.icon-btn.icon-btn-accent { background: var(--brand-primary, #2ca01c); color: #fff; width: 32px; height: 32px; }
.icon-btn.icon-btn-accent:hover { opacity: 0.85; }
.icon-btn.icon-btn-accent svg { stroke: #fff; width: 18px; height: 18px; }
.icon-btn .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange, #f59e0b);
  border: 1.5px solid var(--content-bg);
}
.topbar-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 500; color: var(--text-secondary, #6b7280); text-decoration: none; padding: 0.3rem 0.5rem; border-radius: var(--r-xs); cursor: pointer; transition: all var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; min-width: 0; background: none; border: none; }
.topbar-link:hover { color: var(--text-primary); background: var(--surface-hover, rgba(0,0,0,0.04)); }
.topbar-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Page content */
.page-content {
  flex: 1;
  padding: 0.85rem 1rem;
  max-width: 1400px;
  width: 100%;
  overflow-x: hidden;
  min-width: 0;
  box-sizing: border-box;
}
/* Prevent any child from breaking out of the content area */
.page-content > *, .page-content > * > * { max-width: 100%; box-sizing: border-box; }
.page-content img, .page-content canvas, .page-content svg, .page-content video { max-width: 100%; height: auto; }
/* Allow the Operational Insights SVG to fill its container */
#ops-canvas-container > svg { height: 100% !important; }
.page-content pre, .page-content code { overflow-x: auto; word-break: break-word; }

/* Page header */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.page-header-left .page-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.1rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}
.page-header-left .page-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0;
}
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-xs);
  font-weight: 600;
  font-size: 0.78rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t);
  white-space: nowrap;
}
.btn-solid {
  background: var(--brand-orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34,179,120,0.25);
}
.btn-solid:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(34,179,120,0.35); }
.btn-outline { border-color: var(--border); background: var(--surface-raised); color: var(--text-primary); }
.btn-outline:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn-ghost-sm { background: none; border-color: transparent; color: var(--text-secondary); }
.btn-ghost-sm:hover { background: var(--surface-raised); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #e0444c; }
.btn-sm { padding: 0.28rem 0.6rem; font-size: 0.73rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. CARDS & PANELS
   ───────────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 0.4rem;
}
.card-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.card-body { padding: 0.6rem 0.75rem; }
.card-footer {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. METRIC CARDS (KPI)
   ───────────────────────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.kpi-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm);
  padding: 0.65rem 0.75rem;
  box-shadow: var(--panel-shadow);
  position: relative;
  overflow: hidden;
}
/* Top color stripes removed — clean professional look */

.kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.2rem;
}
.kpi-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  margin: 0 0 0.15rem;
  line-height: 1;
}
.kpi-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-weight: 700;
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
}
.kpi-delta.up { color: var(--green); background: var(--green-bg); }
.kpi-delta.down { color: var(--red); background: var(--red-bg); }
.kpi-icon {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  background: var(--surface-soft);
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. SVG CHARTS (mini bar chart, sparkline)
   ───────────────────────────────────────────────────────────────────────────── */
.chart-wrap { width: 100%; overflow: hidden; }
.chart-wrap svg { display: block; width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   10. DATA TABLES
   ───────────────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
thead th {
  background: var(--surface-muted);
  border-bottom: 2px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}
tbody td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-soft); }
.td-muted { color: var(--text-muted) !important; font-size: 0.8rem; }
.td-mono { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 0.82rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. BADGES & STATUS PILLS
   ───────────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: #b06200; }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-neutral { background: var(--surface-soft); color: var(--text-secondary); }
.badge-orange { background: rgba(220,157,40,0.12); color: #dc9d28; }

/* ─────────────────────────────────────────────────────────────────────────────
   12. TABS
   ───────────────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 0.45rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--tab-active-color); border-bottom-color: var(--tab-active-color); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─────────────────────────────────────────────────────────────────────────────
   13. FORM CONTROLS
   ───────────────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 0.85rem; }
.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.form-label .required { color: var(--red); margin-left: 0.2rem; }
.form-control {
  width: 100%;
  padding: 0.4rem 0.7rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 0.78rem;
  color: var(--text-primary);
  transition: all var(--t);
  font-family: inherit;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(181,84,40,0.12);
  background: var(--input-bg-focus);
}
.form-control::placeholder { color: var(--text-placeholder); }
select.form-control { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a7468' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.5rem; }
textarea.form-control { resize: vertical; min-height: 90px; }
.form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }
.form-error { font-size: 0.78rem; color: var(--red); margin-top: 0.3rem; }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: 0.75rem; }
.toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surface-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t);
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform var(--t);
}
.toggle input:checked + .toggle-track { background: var(--toggle-active-bg); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle-label { font-size: 0.87rem; color: var(--text-primary); font-weight: 600; cursor: pointer; }
.toggle-desc { font-size: 0.8rem; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   14. SETTINGS SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */
.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-meta { flex: 1 1 240px; min-width: 0; max-width: 420px; overflow-wrap: anywhere; word-break: break-word; }
.settings-row-meta h4 { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.settings-row-meta p { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.settings-row-control { flex: 1 1 280px; min-width: 0; }
@media (max-width: 720px) {
  .settings-row { flex-direction: column; gap: 0.75rem; }
  .settings-row-meta { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. EMPTY STATES
   ───────────────────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.empty-icon { font-size: 2.8rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.4rem; }
.empty-desc { font-size: 0.87rem; color: var(--text-muted); max-width: 30ch; margin: 0 auto 1.25rem; line-height: 1.6; }

/* ─────────────────────────────────────────────────────────────────────────────
   16. LAYOUT GRIDS
   ───────────────────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.mb-1 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 1rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.ml-auto { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   17. BREADCRUMB
   ───────────────────────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--link-color); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--border-strong); }

/* ─────────────────────────────────────────────────────────────────────────────
   18. ACTIVITY FEED / TIMELINE
   ───────────────────────────────────────────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; gap: 0; }
.activity-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.activity-item:hover { background: var(--surface-soft); }
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  background: var(--border-strong);
}
.activity-dot.green { background: var(--green); }
.activity-dot.orange { background: var(--brand-orange); }
.activity-dot.red { background: var(--red); }
.activity-dot.amber { background: var(--amber); }
.activity-body { flex: 1; }
.activity-text { font-size: 0.76rem; color: var(--text-primary); line-height: 1.4; margin: 0 0 0.1rem; }
.activity-meta { font-size: 0.68rem; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   19. PROGRESS BAR
   ───────────────────────────────────────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--surface-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.4rem;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-orange);
  transition: width 0.5s ease;
}
.progress-fill.green { background: var(--green); }
.progress-fill.blue { background: var(--blue); }

/* ─────────────────────────────────────────────────────────────────────────────
   20. COLOR PICKER (branding)
   ───────────────────────────────────────────────────────────────────────────── */
.color-swatch-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t);
  position: relative;
}
.color-swatch.selected { border-color: var(--text-primary); transform: scale(1.15); }
.color-swatch:hover { transform: scale(1.1); }

/* ─────────────────────────────────────────────────────────────────────────────
   21. NOTIFICATION PANEL
   ───────────────────────────────────────────────────────────────────────────── */
.notif-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t);
}
.notif-item:hover { background: var(--surface-soft); }
.notif-item.unread { background: var(--accent-soft); }
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.notif-body { flex: 1; }
.notif-title { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.2rem; }
.notif-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.45; }
.notif-time { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; margin-top: 0.1rem; }

/* Mobile sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
/* Mobile sidebar close button */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all var(--t);
  line-height: 1;
}
.sidebar-close-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Desktop sidebar collapse toggle — follows .btn-solid design tokens
   (--ink background, --paper foreground) so it inverts cleanly across
   light and dark themes. Sized ~25% smaller than the previous tab. */
.sidebar-collapse-btn,
.sidebar-show-btn {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 48px;
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--ink, #1B2E5A);
  border-left: none;
  background: var(--ink, #1B2E5A);
  color: var(--paper, #fff);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 2px 0 6px rgba(0,0,0,0.14);
  transition: width var(--t), background var(--t), color var(--t);
}
.sidebar-collapse-btn { left: calc(var(--sidebar-width) - 6px); z-index: 251; }
.sidebar-show-btn { left: 0; z-index: 260; }
.sidebar-collapse-btn:hover,
.sidebar-show-btn:hover {
  width: 20px;
  background: var(--ink-2, var(--ink, #1B2E5A));
}
.sidebar-collapse-btn svg,
.sidebar-show-btn svg { width: 10px; height: 10px; }

/* Show toggles + collapse behaviour on desktop only */
@media (min-width: 861px) {
  .sidebar-collapse-btn { display: flex; }
  html.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    pointer-events: none;
  }
  html.sidebar-collapsed .main-content { margin-left: 0; }
  html.sidebar-collapsed .sidebar-show-btn { display: flex; }
}

/* Suppress transitions on first paint when restoring collapsed state */
html.sidebar-no-transition .sidebar,
html.sidebar-no-transition .main-content,
html.sidebar-no-transition .sidebar-show-btn {
  transition: none !important;
}

/* Hamburger button for topbar */
.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. PLAN-LOCKED NAV ITEMS
   ───────────────────────────────────────────────────────────────────────────── */
.nav-item-locked {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.nav-item-locked::after {
  content: '🔒';
  font-size: .65rem;
  margin-left: auto;
}
.nav-item-locked:hover { color: var(--sidebar-text); }

/* ─────────────────────────────────────────────────────────────────────────────
   22. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .settings-row { flex-direction: column; gap: 0.75rem; }
  .settings-row-meta { max-width: none; }
  /* Sidebar overlay on mobile */
  .sidebar-overlay { display: block; }
  .sidebar.open ~ .sidebar-overlay,
  .sidebar-overlay.active { opacity: 1; pointer-events: all; }
  /* Show close button on mobile */
  .sidebar-close-btn { display: flex; }
  /* Tables scroll horizontally. Only force min-width on tables that are
     already inside a scrollable wrapper (.table-wrap, explicit overflow)
     so bare <table> tags don't burst out of their parent card.
     Use min(100%, 600px) so narrow-column tables (e.g. Income Statement
     2-col, Account Balances 3-col) fit the phone viewport instead of
     overflowing 600px and cropping the last column. Wide tables with
     more columns whose natural content exceeds 600px still scroll. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap > table,
  .table-wrap table { min-width: min(100%, 600px); }
  /* Tables that explicitly opt into horizontal scroll on mobile */
  .table-wrap > table.scroll-wide,
  .table-wrap table.scroll-wide { min-width: 600px; }
  /* Topbar */
  .topbar-menu-btn { display: flex !important; }
  /* Chat layouts (AI CPA, Social Media inbox) */
  .chat-shell, .chat-layout { grid-template-columns: 1fr; height: auto; }
  .chat-sidebar, .chat-history { display: none; }
  /* Module-specific grids */
  .sm-kpi, .tw-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: auto; }
  .projects-grid { grid-template-columns: 1fr; }
  /* CRM pipeline — scroll on mobile */
  .pipeline-board { grid-template-columns: 1fr; overflow-x: visible; }
  /* HR calendar, filing-pro calendar — wrap on mobile */
  .leave-calendar, .compliance-cal { grid-template-columns: repeat(4, 1fr); overflow-x: auto; }
  /* Reporting grid */
  .report-grid { grid-template-columns: 1fr; }
  /* Social media layouts */
  .composer-shell { grid-template-columns: 1fr; }
  .composer-preview { display: none; }
  .inbox-layout { grid-template-columns: 1fr; }
  .inbox-sidebar { display: none; }
  /* Settings sidebar */
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidenav { display: none; }
  /* Billing grids */
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-grid { grid-template-columns: 1fr; }
  /* Microfinance grids */
  .mfi-kpi, .mf-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mfi-stats { grid-template-columns: 1fr; }
  .mfi-form-grid { grid-template-columns: 1fr; }
  /* Accounting chart row */
  .chart-row { grid-template-columns: 1fr; }
  /* HR Payroll */
  .payroll-summary { grid-template-columns: repeat(2, 1fr); }
  /* TRA VFD device cards */
  .vfd-devices { flex-wrap: wrap; }
  /* Procurement vendor cards */
  .vendor-card { flex-wrap: wrap; }
  /* Workflow sections */
  .workflow-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .page-content { padding: 0.75rem; }
  .page-header { flex-direction: column; }
  .topbar-search { display: none; }
  .sm-kpi, .tw-kpi { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .topbar-right { gap: .5rem; }
  .topbar-right .topbar-search { display: none; }
  /* Billing */
  .module-grid { grid-template-columns: 1fr; }
  /* Microfinance */
  .mfi-kpi, .mf-kpi { grid-template-columns: 1fr; }
  /* HR */
  .payroll-summary { grid-template-columns: 1fr; }
  .leave-calendar, .compliance-cal { grid-template-columns: repeat(2, 1fr); }
  /* Pipeline */
  .pipeline-board { grid-template-columns: 1fr; }
  /* Reports */
  .report-grid { grid-template-columns: 1fr; }
  /* Workflow */
  .workflow-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LANGUAGE TOGGLE (EN ↔ SW)
   ───────────────────────────────────────────────────────────────────────────── */
.sw-show  { display: none; }
.en-show  { display: inline; }
.sw-block { display: none; }
.en-block { display: block; }
html.lang-sw .sw-show  { display: inline; }
html.lang-sw .en-show  { display: none; }
html.lang-sw .sw-block { display: block; }
html.lang-sw .en-block { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: var(--r-xs);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg); color: var(--text-secondary);
  font-size: .73rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.lang-toggle:hover { background: var(--brand-navy); color: #fff; }
.lang-toggle .lang-flag { font-size: .9rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   DARK THEME
   ───────────────────────────────────────────────────────────────────────────── */
html.dark {
  /* Sidebar — deep base, flush with the page background (#010919) */
  --sidebar-bg: #010919;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-text: rgba(255,255,255,0.55);
  --sidebar-text-hover: rgba(255,255,255,0.9);
  --sidebar-active-text: var(--brand-primary, #22b378);
  --sidebar-active-bg: rgba(var(--brand-primary-rgb, 34,179,120), 0.12);

  /* Content area — page background #010919, cards/panels #091222 */
  --content-bg: #010919;
  --panel-bg: #091222;
  --panel-border: rgba(255,255,255,0.08);
  --panel-shadow: 0 2px 16px rgba(0,0,0,0.3);
  --panel-shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --card-bg: var(--panel-bg);
  --surface-raised: rgba(255,255,255,0.09);
  --surface-muted: rgba(255,255,255,0.05);
  --surface-soft: rgba(255,255,255,0.065);
  --surface-hover: rgba(255,255,255,0.12);
  --surface-selected: rgba(91,154,255,0.16);
  --overlay-bg: #091222;
  --input-bg: rgba(255,255,255,0.07);
  --input-bg-focus: rgba(255,255,255,0.1);
  --accent-soft: rgba(239,79,95,0.14);
  --success-soft: rgba(46,232,154,0.15);
  --warning-soft: rgba(240,181,66,0.15);
  --danger-soft: rgba(255,107,114,0.15);
  --info-soft: rgba(94,163,255,0.14);

  /* Text */
  --text-primary: #e8ecf1;
  --text-secondary: #b8c5d8;
  --text-muted: #8d9db6;
  --text-placeholder: #566a88;

  /* Semantic colors — brighter variants for dark bg */
  --green: #2ee89a;
  --green-bg: rgba(46,232,154,0.12);
  --green-border: rgba(46,232,154,0.2);
  --red: #ff6b72;
  --red-bg: rgba(255,107,114,0.12);
  --red-border: rgba(255,107,114,0.2);
  --amber: #f0b542;
  --amber-bg: rgba(240,181,66,0.12);
  --amber-border: rgba(240,181,66,0.2);
  --blue: #5ea3ff;
  --blue-bg: rgba(94,163,255,0.1);

  /* Border */
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  /* Status colors — brighter for dark mode readability */
  --brand-red: #ff6b72;
  --brand-red-deep: #e0555c;
  --brand-amber: #f5c23a;
  --brand-navy: #2D7A5F;
  --brand-emerald: #3ddc84;
  --brand-gold: #f5c23a;

  /* Brand-primary in dark mode — nzura-brand.js auto-adjusts brightness */
  /* Only set fallback; JS overrides with contrast-safe variant */
  --brand-primary: #3ddc84;
  --brand-primary-deep: #2bc470;
  --brand-primary-soft: rgba(61,220,132,0.12);
  --brand-primary-text: #1a1a1a;
  --brand-primary-rgb: 61,220,132;
}

/* Dark body */
html.dark body.app-body,
html.dark body {
  background: var(--content-bg);
  color: var(--text-primary);
}

/* Dark topbar */
html.dark .topbar {
  background: rgba(1,9,25,0.92);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(255,255,255,0.06);
}
html.dark .topbar-title { color: var(--text-primary); }
html.dark .topbar-search {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-secondary);
}
html.dark .topbar-search:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Dark panels/cards */
html.dark .panel,
html.dark .card,
html.dark .kpi-card,
html.dark .module-card {
  background: var(--panel-bg);
  border-color: var(--panel-border);
  color: var(--text-primary);
}
html.dark .card-footer { background: var(--surface-muted); }

/* Dark tables */
html.dark table th {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-bottom-color: var(--border);
}
html.dark table td {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}
html.dark table tr:hover td {
  background: var(--surface-soft);
}

/* Dark inputs/forms */
html.dark input,
html.dark select,
html.dark textarea {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text-primary);
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--text-placeholder);
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--brand-red);
  background: var(--input-bg-focus);
}

/* Dark buttons */
html.dark .btn-outline,
html.dark .btn-secondary {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-secondary);
}
html.dark .btn-outline:hover,
html.dark .btn-secondary:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
html.dark .icon-btn {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-muted);
}
html.dark .icon-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Dark badges — use dark-mode semantic vars */
html.dark .badge-green { background: var(--green-bg); color: var(--green); }
html.dark .badge-red { background: var(--red-bg); color: var(--red); }
html.dark .badge-amber,
html.dark .badge-orange { background: var(--amber-bg); color: var(--amber); }
html.dark .badge-blue { background: var(--blue-bg); color: var(--blue); }
html.dark .badge-purple { background: rgba(167,139,250,0.15); color: #a78bfa; }
html.dark .badge-gray { background: rgba(255,255,255,0.1); color: var(--text-secondary); }
html.dark .badge-neutral { background: var(--surface-soft); color: var(--text-secondary); }

/* Dark KPI cards */
html.dark .kpi-card .kpi-value,
html.dark .kpi-value { color: var(--text-primary); }
html.dark .kpi-card .kpi-label,
html.dark .kpi-label { color: var(--text-muted); }

/* Dark sidebar overrides */
html.dark .sidebar-logo { border-bottom-color: rgba(255,255,255,0.06); }
html.dark .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
html.dark .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
html.dark .nav-item:hover { background: rgba(255,255,255,0.06); }
html.dark .nav-group { border-top-color: rgba(255,255,255,0.06); }

/* Dark tabs */
html.dark .tab {
  color: var(--text-muted);
  border-bottom-color: transparent;
}
html.dark .tab.active,
html.dark .tab:hover {
  color: var(--text-primary);
}

/* Dark modal */
html.dark .modal-overlay { background: rgba(0,0,0,0.7); }
html.dark .modal {
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
html.dark .modal-header {
  background: var(--overlay-bg);
  border-bottom-color: var(--border);
}
html.dark .modal-footer { border-top-color: var(--border); }

/* Dark alerts */
html.dark .alert-info { background: rgba(91,154,255,0.1); border-color: rgba(91,154,255,0.2); color: #5b9aff; }
html.dark .alert-warn { background: rgba(245,183,49,0.1); border-color: rgba(245,183,49,0.2); color: #f5c23a; }

/* Dark settings navigation */
html.dark .settings-nav {
  background: var(--panel-bg);
  border-color: var(--panel-border);
}
html.dark .settings-nav-item {
  color: var(--text-secondary);
}
html.dark .settings-nav-item:hover,
html.dark .settings-nav-item.active {
  background: var(--surface-raised);
  color: var(--text-primary);
}

/* Dark lang/theme toggle */
html.dark .lang-toggle {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-secondary);
}
html.dark .lang-toggle:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Dark breadcrumb */
html.dark .breadcrumb a { color: var(--link-color); }
html.dark .breadcrumb span { color: var(--text-muted); }

/* Dark scrollbar */
html.dark ::-webkit-scrollbar-track { background: #010919; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

/* Dark chart backgrounds */
html.dark .chart-wrap,
html.dark .chart-area { background: var(--panel-bg); }

/* Dark select dropdown */
html.dark option { background: #091222; color: var(--text-primary); }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: var(--r-xs);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg); color: var(--text-secondary);
  font-size: .73rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.theme-toggle:hover { background: var(--brand-navy); color: #fff; }
html.dark .theme-toggle {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-secondary);
}
html.dark .theme-toggle:hover {
  background: var(--surface-hover);
  color: #fff;
}
html.dark .topbar-menu-btn {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-primary);
}
html.dark .topbar-menu-btn:hover,
html.dark .btn-ghost-sm:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
html.dark .toggle-track { background: var(--surface-soft); }
html.dark .kpi-icon,
html.dark .notif-icon,
html.dark .progress-bar { background: var(--surface-soft); }
html.dark .notif-item:hover,
html.dark .activity-item:hover { background: var(--surface-soft); }
html.dark .notif-item.unread { background: var(--accent-soft); }

/* Dark-mode rescue for generated overlays/dropdowns that still inject light inline styles */
html.dark .modal-overlay > div,
html.dark [id*="overlay" i] > div,
html.dark [id$="modal" i] > div,
html.dark .inv-modal,
html.dark .new-cust-modal,
html.dark .unsaved-dialog-box,
html.dark .item-picker-results,
html.dark .tax-picker-dropdown,
html.dark .combo-results {
  background: var(--overlay-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html.dark .modal-overlay h1,
html.dark .modal-overlay h2,
html.dark .modal-overlay h3,
html.dark .modal-overlay h4,
html.dark .modal-overlay strong,
html.dark .modal-overlay b,
html.dark [id*="overlay" i] h1,
html.dark [id*="overlay" i] h2,
html.dark [id*="overlay" i] h3,
html.dark [id*="overlay" i] h4,
html.dark [id*="overlay" i] strong,
html.dark [id*="overlay" i] b,
html.dark [id$="modal" i] h1,
html.dark [id$="modal" i] h2,
html.dark [id$="modal" i] h3,
html.dark [id$="modal" i] h4,
html.dark [id$="modal" i] strong,
html.dark [id$="modal" i] b {
  color: var(--text-primary) !important;
}
html.dark .modal-overlay label,
html.dark .modal-overlay p,
html.dark .modal-overlay span,
html.dark .modal-overlay div,
html.dark [id*="overlay" i] label,
html.dark [id*="overlay" i] p,
html.dark [id*="overlay" i] span,
html.dark [id*="overlay" i] div,
html.dark [id$="modal" i] label,
html.dark [id$="modal" i] p,
html.dark [id$="modal" i] span,
html.dark [id$="modal" i] div {
  border-color: inherit;
}
html.dark .modal-overlay input,
html.dark .modal-overlay select,
html.dark .modal-overlay textarea,
html.dark [id*="overlay" i] input,
html.dark [id*="overlay" i] select,
html.dark [id*="overlay" i] textarea,
html.dark [id$="modal" i] input,
html.dark [id$="modal" i] select,
html.dark [id$="modal" i] textarea {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html.dark .modal-overlay [style*="background:#fff"],
html.dark .modal-overlay [style*="background: #fff"],
html.dark .modal-overlay [style*="background:#f5f5f5"],
html.dark .modal-overlay [style*="background: #f5f5f5"],
html.dark .modal-overlay [style*="background:#f7f7f7"],
html.dark .modal-overlay [style*="background: #f7f7f7"],
html.dark .modal-overlay [style*="background:#f9f9f9"],
html.dark .modal-overlay [style*="background: #f9f9f9"],
html.dark .modal-overlay [style*="background:#fafafa"],
html.dark .modal-overlay [style*="background: #fafafa"],
html.dark [id*="overlay" i] [style*="background:#fff"],
html.dark [id*="overlay" i] [style*="background: #fff"],
html.dark [id*="overlay" i] [style*="background:#f5f5f5"],
html.dark [id*="overlay" i] [style*="background: #f5f5f5"],
html.dark [id*="overlay" i] [style*="background:#f7f7f7"],
html.dark [id*="overlay" i] [style*="background: #f7f7f7"],
html.dark [id*="overlay" i] [style*="background:#f9f9f9"],
html.dark [id*="overlay" i] [style*="background: #f9f9f9"],
html.dark [id*="overlay" i] [style*="background:#fafafa"],
html.dark [id*="overlay" i] [style*="background: #fafafa"],
html.dark [id$="modal" i] [style*="background:#fff"],
html.dark [id$="modal" i] [style*="background: #fff"],
html.dark [id$="modal" i] [style*="background:#f5f5f5"],
html.dark [id$="modal" i] [style*="background: #f5f5f5"],
html.dark [id$="modal" i] [style*="background:#f7f7f7"],
html.dark [id$="modal" i] [style*="background: #f7f7f7"],
html.dark [id$="modal" i] [style*="background:#f9f9f9"],
html.dark [id$="modal" i] [style*="background: #f9f9f9"],
html.dark [id$="modal" i] [style*="background:#fafafa"],
html.dark [id$="modal" i] [style*="background: #fafafa"] {
  background: var(--surface-raised) !important;
}
html.dark .modal-overlay [style*="#fff0ed"],
html.dark .modal-overlay [style*="#fde8e8"],
html.dark .modal-overlay [style*="#fef9e7"],
html.dark .modal-overlay [style*="#e8f5e9"],
html.dark [id*="overlay" i] [style*="#fff0ed"],
html.dark [id*="overlay" i] [style*="#fde8e8"],
html.dark [id*="overlay" i] [style*="#fef9e7"],
html.dark [id*="overlay" i] [style*="#e8f5e9"],
html.dark [id$="modal" i] [style*="#fff0ed"],
html.dark [id$="modal" i] [style*="#fde8e8"],
html.dark [id$="modal" i] [style*="#fef9e7"],
html.dark [id$="modal" i] [style*="#e8f5e9"] {
  background: var(--surface-soft) !important;
}
html.dark .modal-overlay [style*="color:#333"],
html.dark .modal-overlay [style*="color: #333"],
html.dark .modal-overlay [style*="color:#222"],
html.dark .modal-overlay [style*="color: #222"],
html.dark .modal-overlay [style*="color:#555"],
html.dark .modal-overlay [style*="color: #555"],
html.dark .modal-overlay [style*="color:#666"],
html.dark .modal-overlay [style*="color: #666"],
html.dark .modal-overlay [style*="color:#888"],
html.dark .modal-overlay [style*="color: #888"],
html.dark .modal-overlay [style*="color:#999"],
html.dark .modal-overlay [style*="color: #999"],
html.dark .modal-overlay [style*="color:#aaa"],
html.dark .modal-overlay [style*="color: #aaa"],
html.dark [id*="overlay" i] [style*="color:#333"],
html.dark [id*="overlay" i] [style*="color: #333"],
html.dark [id*="overlay" i] [style*="color:#222"],
html.dark [id*="overlay" i] [style*="color: #222"],
html.dark [id*="overlay" i] [style*="color:#555"],
html.dark [id*="overlay" i] [style*="color: #555"],
html.dark [id*="overlay" i] [style*="color:#666"],
html.dark [id*="overlay" i] [style*="color: #666"],
html.dark [id*="overlay" i] [style*="color:#888"],
html.dark [id*="overlay" i] [style*="color: #888"],
html.dark [id*="overlay" i] [style*="color:#999"],
html.dark [id*="overlay" i] [style*="color: #999"],
html.dark [id*="overlay" i] [style*="color:#aaa"],
html.dark [id*="overlay" i] [style*="color: #aaa"],
html.dark [id$="modal" i] [style*="color:#333"],
html.dark [id$="modal" i] [style*="color: #333"],
html.dark [id$="modal" i] [style*="color:#222"],
html.dark [id$="modal" i] [style*="color: #222"],
html.dark [id$="modal" i] [style*="color:#555"],
html.dark [id$="modal" i] [style*="color: #555"],
html.dark [id$="modal" i] [style*="color:#666"],
html.dark [id$="modal" i] [style*="color: #666"],
html.dark [id$="modal" i] [style*="color:#888"],
html.dark [id$="modal" i] [style*="color: #888"],
html.dark [id$="modal" i] [style*="color:#999"],
html.dark [id$="modal" i] [style*="color: #999"],
html.dark [id$="modal" i] [style*="color:#aaa"],
html.dark [id$="modal" i] [style*="color: #aaa"] {
  color: var(--text-secondary) !important;
}
html.dark .modal-overlay [style*="border:1px solid #ccc"],
html.dark .modal-overlay [style*="border: 1px solid #ccc"],
html.dark .modal-overlay [style*="border:1px solid #ddd"],
html.dark .modal-overlay [style*="border: 1px solid #ddd"],
html.dark .modal-overlay [style*="border:1px solid #eee"],
html.dark .modal-overlay [style*="border: 1px solid #eee"],
html.dark .modal-overlay [style*="border:1px solid #e0e0e0"],
html.dark .modal-overlay [style*="border: 1px solid #e0e0e0"],
html.dark [id*="overlay" i] [style*="border:1px solid #ccc"],
html.dark [id*="overlay" i] [style*="border: 1px solid #ccc"],
html.dark [id*="overlay" i] [style*="border:1px solid #ddd"],
html.dark [id*="overlay" i] [style*="border: 1px solid #ddd"],
html.dark [id*="overlay" i] [style*="border:1px solid #eee"],
html.dark [id*="overlay" i] [style*="border: 1px solid #eee"],
html.dark [id*="overlay" i] [style*="border:1px solid #e0e0e0"],
html.dark [id*="overlay" i] [style*="border: 1px solid #e0e0e0"],
html.dark [id$="modal" i] [style*="border:1px solid #ccc"],
html.dark [id$="modal" i] [style*="border: 1px solid #ccc"],
html.dark [id$="modal" i] [style*="border:1px solid #ddd"],
html.dark [id$="modal" i] [style*="border: 1px solid #ddd"],
html.dark [id$="modal" i] [style*="border:1px solid #eee"],
html.dark [id$="modal" i] [style*="border: 1px solid #eee"],
html.dark [id$="modal" i] [style*="border:1px solid #e0e0e0"],
html.dark [id$="modal" i] [style*="border: 1px solid #e0e0e0"] {
  border-color: var(--border) !important;
}
html.dark .crm-pick-row,
html.dark .item-pick,
html.dark .tax-pick-item,
html.dark .combo-opt,
html.dark [id$="Menu"] > div {
  border-bottom-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html.dark .crm-pick-row:hover,
html.dark .item-pick:hover,
html.dark .tax-pick-item:hover,
html.dark .combo-opt:hover,
html.dark [id$="Menu"] > div:hover {
  background: var(--surface-soft) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE — Global inline-style color overrides
   Catches hardcoded colors in innerHTML / JS-generated markup app-wide
   ───────────────────────────────────────────────────────────────────────────── */

/* Dark text on dark bg — make readable */
html.dark [style*="color:#333"],
html.dark [style*="color: #333"],
html.dark [style*="color:#222"],
html.dark [style*="color: #222"],
html.dark [style*="color:#1B2E5A"],
html.dark [style*="color: #1B2E5A"],
html.dark [style*="color:#1b2e5a"],
html.dark [style*="color: #1b2e5a"] {
  color: var(--text-primary) !important;
}
html.dark [style*="color:#555"],
html.dark [style*="color: #555"],
html.dark [style*="color:#444"],
html.dark [style*="color: #444"],
html.dark [style*="color:#666"],
html.dark [style*="color: #666"] {
  color: var(--text-secondary) !important;
}
html.dark [style*="color:#888"],
html.dark [style*="color: #888"],
html.dark [style*="color:#999"],
html.dark [style*="color: #999"],
html.dark [style*="color:#aaa"],
html.dark [style*="color: #aaa"],
html.dark [style*="color:#777"],
html.dark [style*="color: #777"],
html.dark [style*="color:#bbb"],
html.dark [style*="color: #bbb"] {
  color: var(--text-muted) !important;
}

/* Light backgrounds on dark mode — swap to dark surfaces */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background:white"],
html.dark [style*="background: white"],
html.dark [style*="background-color:white"],
html.dark [style*="background-color: white"] {
  background: var(--panel-bg) !important;
  color: var(--text-primary) !important;
}
html.dark [style*="background:#f5f5f5"],
html.dark [style*="background: #f5f5f5"],
html.dark [style*="background:#f7f7f7"],
html.dark [style*="background: #f7f7f7"],
html.dark [style*="background:#f9f9f9"],
html.dark [style*="background: #f9f9f9"],
html.dark [style*="background:#fafafa"],
html.dark [style*="background: #fafafa"],
html.dark [style*="background:#f0f0f0"],
html.dark [style*="background: #f0f0f0"],
html.dark [style*="background:#eee"],
html.dark [style*="background: #eee"],
html.dark [style*="background:#f4f5f8"],
html.dark [style*="background: #f4f5f8"],
html.dark [style*="background-color:#f5f5f5"],
html.dark [style*="background-color: #f5f5f5"],
html.dark [style*="background-color:#f7f7f7"],
html.dark [style*="background-color: #f7f7f7"],
html.dark [style*="background-color:#fafafa"],
html.dark [style*="background-color: #fafafa"],
html.dark [style*="background-color:#f0f0f0"],
html.dark [style*="background-color: #f0f0f0"],
html.dark [style*="background-color:#eee"],
html.dark [style*="background-color: #eee"] {
  background: var(--surface-raised) !important;
}

/* Cool neutral light surfaces (slate/gray section + card tints) on dark mode */
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background: #f1f5f9"],
html.dark [style*="background-color:#f1f5f9"],
html.dark [style*="background-color: #f1f5f9"],
html.dark [style*="background:#f8fafc"],
html.dark [style*="background: #f8fafc"],
html.dark [style*="background-color:#f8fafc"],
html.dark [style*="background-color: #f8fafc"],
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background: #f3f4f6"],
html.dark [style*="background-color:#f3f4f6"],
html.dark [style*="background-color: #f3f4f6"],
html.dark [style*="background:#fafbfc"],
html.dark [style*="background: #fafbfc"],
html.dark [style*="background:#f4f6f9"],
html.dark [style*="background: #f4f6f9"],
html.dark [style*="background:#f8f9fb"],
html.dark [style*="background: #f8f9fb"],
html.dark [style*="background:#f8f9fc"],
html.dark [style*="background: #f8f9fc"],
html.dark [style*="background:#f8f8f8"],
html.dark [style*="background: #f8f8f8"],
html.dark [style*="background:#eef1f5"],
html.dark [style*="background: #eef1f5"],
html.dark [style*="background:#eef2f7"],
html.dark [style*="background: #eef2f7"],
html.dark [style*="background:#f0f2f5"],
html.dark [style*="background: #f0f2f5"],
html.dark [style*="background:#f5f6f8"],
html.dark [style*="background: #f5f6f8"],
html.dark [style*="background:#f5f2ed"],
html.dark [style*="background: #f5f2ed"],
html.dark [style*="background:#f9f8f6"],
html.dark [style*="background: #f9f8f6"],
html.dark [style*="background:#f6fbf8"],
html.dark [style*="background: #f6fbf8"],
html.dark [style*="background:#fafbff"],
html.dark [style*="background: #fafbff"] {
  background: var(--panel-bg) !important;
}

/* Light borders on dark mode */
html.dark [style*="border-color:#ccc"],
html.dark [style*="border-color: #ccc"],
html.dark [style*="border-color:#ddd"],
html.dark [style*="border-color: #ddd"],
html.dark [style*="border-color:#eee"],
html.dark [style*="border-color: #eee"],
html.dark [style*="border-color:#e0e0e0"],
html.dark [style*="border-color: #e0e0e0"],
html.dark [style*="border:1px solid #ccc"],
html.dark [style*="border: 1px solid #ccc"],
html.dark [style*="border:1px solid #ddd"],
html.dark [style*="border: 1px solid #ddd"],
html.dark [style*="border:1px solid #eee"],
html.dark [style*="border: 1px solid #eee"],
html.dark [style*="border:1px solid #e0e0e0"],
html.dark [style*="border: 1px solid #e0e0e0"],
html.dark [style*="border-bottom:1px solid #ccc"],
html.dark [style*="border-bottom: 1px solid #ccc"],
html.dark [style*="border-bottom:1px solid #ddd"],
html.dark [style*="border-bottom: 1px solid #ddd"],
html.dark [style*="border-bottom:1px solid #eee"],
html.dark [style*="border-bottom: 1px solid #eee"],
html.dark [style*="border-color:#e5e7eb"],
html.dark [style*="border-color: #e5e7eb"],
html.dark [style*="border-color:#e2e8f0"],
html.dark [style*="border-color: #e2e8f0"],
html.dark [style*="border-color:#eef1f5"],
html.dark [style*="border-color: #eef1f5"],
html.dark [style*="border:1px solid #e5e7eb"],
html.dark [style*="border: 1px solid #e5e7eb"],
html.dark [style*="border:1px solid #e2e8f0"],
html.dark [style*="border: 1px solid #e2e8f0"],
html.dark [style*="border:1px solid #eef1f5"],
html.dark [style*="border: 1px solid #eef1f5"],
html.dark [style*="border:1px solid #f1f5f9"],
html.dark [style*="border: 1px solid #f1f5f9"],
html.dark [style*="border-bottom:1px solid #e5e7eb"],
html.dark [style*="border-bottom: 1px solid #e5e7eb"],
html.dark [style*="border-bottom:1px solid #e2e8f0"],
html.dark [style*="border-bottom: 1px solid #e2e8f0"],
html.dark [style*="border-top:1px solid #e5e7eb"],
html.dark [style*="border-top: 1px solid #e5e7eb"] {
  border-color: var(--border) !important;
}

/* Alternating row backgrounds */
html.dark [style*="background:#fff0ed"],
html.dark [style*="background: #fff0ed"],
html.dark [style*="background:#fde8e8"],
html.dark [style*="background: #fde8e8"],
html.dark [style*="background:#fef2f2"],
html.dark [style*="background: #fef2f2"],
html.dark [style*="background:#fef2f3"],
html.dark [style*="background: #fef2f3"] {
  background: var(--danger-soft) !important;
}
html.dark [style*="background:#fef9e7"],
html.dark [style*="background: #fef9e7"],
html.dark [style*="background:#fffde7"],
html.dark [style*="background: #fffde7"] {
  background: var(--warning-soft) !important;
}
html.dark [style*="background:#e8f5e9"],
html.dark [style*="background: #e8f5e9"],
html.dark [style*="background:#e8f8f0"],
html.dark [style*="background: #e8f8f0"] {
  background: var(--success-soft) !important;
}
html.dark [style*="background:#e3f2fd"],
html.dark [style*="background: #e3f2fd"],
html.dark [style*="background:#ebf5ff"],
html.dark [style*="background: #ebf5ff"] {
  background: var(--info-soft) !important;
}

/* Warm/beige pastels — common in forms, toggles, calendars */
html.dark [style*="background:#f8f6f3"],
html.dark [style*="background: #f8f6f3"],
html.dark [style*="background:#f8f5f0"],
html.dark [style*="background: #f8f5f0"],
html.dark [style*="background:#f5f0eb"],
html.dark [style*="background: #f5f0eb"],
html.dark [style*="background:#f0ece6"],
html.dark [style*="background: #f0ece6"],
html.dark [style*="background:#faf8f5"],
html.dark [style*="background: #faf8f5"],
html.dark [style*="background:#faf6f1"],
html.dark [style*="background: #faf6f1"],
html.dark [style*="background:#faf5ef"],
html.dark [style*="background: #faf5ef"],
html.dark [style*="background:#f0ebe5"],
html.dark [style*="background: #f0ebe5"],
html.dark [style*="background:#fcfbf9"],
html.dark [style*="background: #fcfbf9"],
html.dark [style*="background:#f3efe9"],
html.dark [style*="background: #f3efe9"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background: #f9fafb"],
html.dark [style*="background:#f8f9fa"],
html.dark [style*="background: #f8f9fa"],
html.dark [style*="background:#fcfcfc"],
html.dark [style*="background: #fcfcfc"] {
  background: var(--surface-raised) !important;
}

/* Light orange/amber pastels */
html.dark [style*="background:#fff7ed"],
html.dark [style*="background: #fff7ed"],
html.dark [style*="background:#fff8e1"],
html.dark [style*="background: #fff8e1"],
html.dark [style*="background:#fffcf0"],
html.dark [style*="background: #fffcf0"],
html.dark [style*="background:#fff5e6"],
html.dark [style*="background: #fff5e6"],
html.dark [style*="background:#fef9e7"],
html.dark [style*="background: #fef9e7"] {
  background: var(--warning-soft) !important;
}

/* Light green pastels used in hover states */
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background: #f0fdf4"],
html.dark [style*="background:#f0f7f4"],
html.dark [style*="background: #f0f7f4"] {
  background: var(--success-soft) !important;
}

/* Warm gray text colors used in social media & forms */
html.dark [style*="color:#8a7e6b"],
html.dark [style*="color: #8a7e6b"],
html.dark [style*="color:#8a7e74"],
html.dark [style*="color: #8a7e74"],
html.dark [style*="color:#9e9590"],
html.dark [style*="color: #9e9590"],
html.dark [style*="color:#5a4e44"],
html.dark [style*="color: #5a4e44"],
html.dark [style*="color:#8d6e00"],
html.dark [style*="color: #8d6e00"] {
  color: var(--text-muted) !important;
}

/* Dark near-black text */
html.dark [style*="color:#1a1a1a"],
html.dark [style*="color: #1a1a1a"],
html.dark [style*="color:#111"],
html.dark [style*="color: #111"],
html.dark [style*="color:black"],
html.dark [style*="color: black"] {
  color: var(--text-primary) !important;
}

/* Warm-tone borders */
html.dark [style*="border:1px solid #e8e4df"],
html.dark [style*="border: 1px solid #e8e4df"],
html.dark [style*="border:1px solid #f0ebe4"],
html.dark [style*="border: 1px solid #f0ebe4"],
html.dark [style*="border:1px solid #ede8e3"],
html.dark [style*="border: 1px solid #ede8e3"],
html.dark [style*="border:1px solid #f3efe9"],
html.dark [style*="border: 1px solid #f3efe9"],
html.dark [style*="border:1px solid #e0d5c9"],
html.dark [style*="border: 1px solid #e0d5c9"],
html.dark [style*="border-bottom:1px solid #f0ebe4"],
html.dark [style*="border-bottom: 1px solid #f0ebe4"],
html.dark [style*="border-color:#e8e4df"],
html.dark [style*="border-color: #e8e4df"],
html.dark [style*="border:1px solid #ffe082"],
html.dark [style*="border: 1px solid #ffe082"],
html.dark [style*="border-right:1px solid #f3efe9"],
html.dark [style*="border-bottom:1px solid #f3efe9"] {
  border-color: var(--border) !important;
}

/* Warm-tone light backgrounds in inline border-bottom that include background */
html.dark [style*="border-bottom:1px solid #f5f5f5"],
html.dark [style*="border-bottom: 1px solid #f5f5f5"] {
  border-color: var(--border) !important;
}

/* Catch ccc/bbb colored text used as close buttons and icons */
html.dark [style*="color:#ccc"],
html.dark [style*="color: #ccc"],
html.dark [style*="color:#ddd"],
html.dark [style*="color: #ddd"] {
  color: var(--text-placeholder) !important;
}

/* Dark mode — module-specific embedded <style> overrides */
/* Social media calendar */
html.dark .calendar-main,
html.dark .content-cal-outer,
html.dark .content-cal,
html.dark .cal-nav-btn,
html.dark .inbox-conv-header { background: var(--panel-bg) !important; }
html.dark .cal-head { background: var(--surface-muted) !important; color: var(--text-muted) !important; border-bottom-color: var(--border) !important; }
html.dark .cal-day { background: var(--panel-bg) !important; border-color: var(--border) !important; }
html.dark .cal-day:hover { background: var(--surface-hover) !important; }
html.dark .cal-day.other-month { background: var(--surface-muted) !important; }
html.dark .cal-day.other-month .cal-day-num > span:first-child { color: var(--text-placeholder) !important; }
html.dark .cal-day:hover .cal-day-num > span:first-child { background: var(--surface-hover) !important; }
html.dark .cal-day.today-cell { background: rgba(246,158,30,.1) !important; }
html.dark .cal-day-count { color: var(--text-muted) !important; }
html.dark .cal-nav-btn { border-color: var(--border) !important; color: var(--text-secondary) !important; }
html.dark .cal-nav-btn:hover { background: var(--surface-hover) !important; }
html.dark .post-chip { background: var(--surface-soft) !important; color: var(--text-secondary) !important; }
html.dark .inbox-center { background: var(--content-bg) !important; }

/* TRA VFD notice */
html.dark .tra-notice { background: var(--warning-soft) !important; border-color: rgba(245,183,49,.2) !important; color: var(--amber) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   24. RESPONSIVE MODALS, TOASTS & TABLE FALLBACK
   ───────────────────────────────────────────────────────────────────────────── */
/* Real-mode banner wraps on mobile */
[style*="Real tenant mode"] {
  flex-wrap: wrap;
}

/* Generic table horizontal scroll for tables not wrapped in .table-wrap */
@media (max-width: 860px) {
  table:not(.table-wrap table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Responsive modals */
@media (max-width: 560px) {
  .modal-overlay > div,
  [id$="ModalOverlay"] > div {
    width: 98% !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    padding: 1rem !important;
    border-radius: .5rem !important;
  }
  .modal-overlay input,
  .modal-overlay select,
  .modal-overlay textarea,
  [id$="ModalOverlay"] input,
  [id$="ModalOverlay"] select,
  [id$="ModalOverlay"] textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* Responsive toast notifications */
@media (max-width: 560px) {
  .nzura-cs-toast {
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
    max-width: none !important;
    transform: translateY(20px) !important;
    white-space: normal !important;
  }
}

/* Form full-width inputs on mobile */
@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-group {
    width: 100%;
  }
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar select,
  .filter-bar input {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL SEARCH MODAL  (nzura-search.js)
   ───────────────────────────────────────────────────────────────────────────── */
.nzs-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;padding-top:10vh}
.nzs-box{background:var(--card-bg,#fff);border-radius:14px;width:95%;max-width:600px;box-shadow:0 20px 70px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.nzs-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border,#eee)}
.nzs-search-icon{font-size:1.1rem;color:var(--text-muted,#999)}
.nzs-input{flex:1;border:none;outline:none;font-size:1rem;background:transparent;color:var(--text-primary,#333);font-family:inherit}
.nzs-kbd{font-size:.7rem;padding:.15rem .4rem;background:var(--panel-bg,#f5f5f5);border:1px solid var(--border,#ddd);border-radius:4px;color:var(--text-muted,#999);font-family:inherit}
.nzs-results{flex:1;overflow-y:auto;padding:.5rem}
.nzs-footer{display:flex;gap:1.25rem;padding:.6rem 1.25rem;border-top:1px solid var(--border,#eee);font-size:.72rem;color:var(--text-muted,#999)}
.nzs-footer kbd{display:inline-block;padding:.1rem .3rem;background:var(--panel-bg,#f5f5f5);border:1px solid var(--border,#ddd);border-radius:3px;font-size:.68rem;margin:0 .15rem;font-family:inherit}
.nzs-group{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted,#999);padding:.6rem .75rem .25rem}
.nzs-result{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:8px;text-decoration:none;color:var(--text-primary,#333);cursor:pointer;transition:background .12s}
.nzs-result:hover,.nzs-result.active{background:var(--panel-bg,#f5f5f5)}
.nzs-icon{font-size:1.1rem;width:28px;text-align:center;flex-shrink:0}
.nzs-body{flex:1;min-width:0}
.nzs-title{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nzs-sub{font-size:.72rem;color:var(--text-muted,#999)}
.nzs-badge{font-size:.68rem;padding:.12rem .45rem;background:var(--panel-bg,#f5f5f5);border-radius:4px;color:var(--text-muted,#999);white-space:nowrap}
.nzs-empty{padding:1.5rem;text-align:center;color:var(--text-muted,#999);font-size:.9rem}

/* Dark mode */
html.dark .nzs-box{background:var(--card-bg,#1e1e2e)}
html.dark .nzs-input{color:var(--text-primary,#e0e0e0)}
html.dark .nzs-result:hover,html.dark .nzs-result.active{background:var(--panel-bg,#2a2a3e)}
html.dark .nzs-kbd,html.dark .nzs-footer kbd{background:var(--panel-bg,#2a2a3e);border-color:var(--border,#3a3a4e)}

/* ── Pagination ─────────────────────────────────────── */
.pagination-bar{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;font-size:.82rem;color:var(--text-muted);border-top:1px solid var(--border);flex-wrap:wrap;gap:.5rem}
.pagination-bar .pg-info{font-weight:600}
.pagination-bar .pg-controls{display:flex;align-items:center;gap:.35rem}
.pagination-bar .pg-btn{padding:.3rem .6rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--panel-bg);color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s}
.pagination-bar .pg-btn:hover:not(:disabled){background:var(--brand-red);color:#fff;border-color:var(--brand-red)}
.pagination-bar .pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pagination-bar .pg-btn.active{background:var(--brand-red);color:#fff;border-color:var(--brand-red)}
.pagination-bar .pg-per-page{display:flex;align-items:center;gap:.35rem}
.pagination-bar .pg-per-page select{font-size:.78rem;padding:.25rem .4rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--panel-bg);color:var(--text-primary);cursor:pointer}

/* ==========================================================================
   Nzura redesign overrides
   ========================================================================== */

:root,
html.light {
  --paper: oklch(98.8% 0.004 90);
  --paper-2: oklch(96.5% 0.006 90);
  --paper-3: oklch(93.5% 0.008 90);
  --ink: oklch(22% 0.012 260);
  --ink-2: oklch(38% 0.012 260);
  --ink-3: oklch(58% 0.010 260);
  --ink-4: oklch(75% 0.008 260);
  --line: oklch(89% 0.006 90);
  --line-2: oklch(83% 0.008 90);
  --accent-h: 18;
  --accent: oklch(64% 0.16 var(--accent-h));
  --accent-deep: oklch(52% 0.17 var(--accent-h));
  --accent-soft: oklch(94% 0.04 var(--accent-h));
  --accent-ink: oklch(38% 0.12 var(--accent-h));
  --pos: oklch(58% 0.12 155);
  --pos-soft: oklch(94% 0.05 155);
  --neg: oklch(58% 0.16 25);
  --neg-soft: oklch(94% 0.05 25);
  --warn: oklch(70% 0.13 75);
  --warn-soft: oklch(94% 0.05 75);
  --info: oklch(58% 0.12 240);
  --info-soft: oklch(94% 0.04 240);
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,monospace;

  --brand-primary: var(--ink);
  --brand-primary-deep: oklch(14% 0.012 260);
  --brand-primary-soft: var(--paper-3);
  --brand-primary-text: var(--paper);
  --brand-primary-rgb: 40, 40, 48;
  --brand-orange: var(--accent);
  --brand-orange-deep: var(--accent-deep);
  --brand-gold: var(--warn);
  --sidebar-bg: var(--paper);
  --sidebar-border: var(--line);
  --sidebar-text: var(--ink-3);
  --sidebar-text-hover: var(--ink);
  --sidebar-active-bg: var(--ink);
  --sidebar-active-border: var(--ink);
  --sidebar-active-text: var(--paper);
  --sidebar-width: 232px;
  --content-bg: var(--paper-2);
  --panel-bg: var(--paper);
  --panel-border: var(--line);
  --panel-shadow: none;
  --panel-shadow-lg: none;
  --card-bg: var(--paper);
  --surface-raised: var(--paper);
  --surface-muted: var(--paper-2);
  --surface-soft: var(--paper-2);
  --surface-hover: var(--paper-3);
  --surface-selected: var(--paper-3);
  --overlay-bg: var(--paper);
  --input-bg: var(--paper);
  --input-bg-focus: var(--paper);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-placeholder: var(--ink-4);
  --green: var(--pos);
  --green-bg: var(--pos-soft);
  --red: var(--neg);
  --red-bg: var(--neg-soft);
  --amber: var(--warn);
  --amber-bg: var(--warn-soft);
  --blue: var(--info);
  --blue-bg: var(--info-soft);
  --border: var(--line);
  --border-strong: var(--line-2);
  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-xs: 7px;
}

html.dark,
[data-theme="dark"] {
  /* Canonical platform dark surfaces — match Ads Manager exactly:
     cards/panels = #091222, with #13223c as the subtle raised/hover step.
     (Previously oklch(18/22/26%) which rendered as a grayer blue and
     clashed with the #091222 cards = the "mixed old/new" look.) */
  --paper: #091222;
  --paper-2: #091222;
  --paper-3: #13223c;
  --ink: oklch(96% 0.005 90);
  --ink-2: oklch(82% 0.008 90);
  --ink-3: oklch(64% 0.010 260);
  --ink-4: oklch(46% 0.012 260);
  --line: oklch(30% 0.012 260);
  --line-2: oklch(36% 0.012 260);
  --accent-soft: oklch(32% 0.08 var(--accent-h));
  --accent-ink: oklch(82% 0.12 var(--accent-h));
  --pos-soft: oklch(28% 0.06 155);
  --neg-soft: oklch(28% 0.08 25);
  --warn-soft: oklch(28% 0.08 75);
  --info-soft: oklch(28% 0.06 240);
  --brand-primary: var(--paper);
  --brand-primary-deep: oklch(92% 0.008 90);
  --brand-primary-text: var(--ink);
  --sidebar-active-bg: var(--paper);
  --sidebar-active-text: var(--ink);
  color-scheme: dark;
}

html,
body,
body.app-body,
.app-body,
.site-body,
body *:not(svg):not(path):not(rect):not(circle):not(line):not(polyline):not(g) {
  font-family: var(--font-sans) !important;
}

.mono,
.num,
code,
pre,
kbd,
[class*="amount"],
[class*="money"],
[class*="currency"],
.tabular-nums,
.table .num,
.data-table .mono {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

body.app-body {
  background: var(--content-bg) !important;
  color: var(--text-primary) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.dashboard-title,
.section-title {
  font-family: var(--font-sans) !important;
  color: var(--ink) !important;
}

h1,
.page-title,
.dashboard-title {
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}

.btn,
button.btn,
a.btn,
.button {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.btn-primary,
.btn.primary,
.btn-solid,
.btn-brand {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

.btn-outline,
.btn-ghost,
.btn-secondary {
  background: transparent !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-2) !important;
}

/* Bare `.kpi-card` intentionally omitted — each module (accounting, crm,
 * inventory, hr-payroll, microfinance, billing) ships its own compact
 * KPI styling inline. Forcing the airy "redesign" oklch theme with
 * !important here was making non-dashboard KPIs visually drift away from
 * the dashboard. Dashboard uses `.kpi-pro` markup (not `.kpi-card`), so
 * scoping to `.dash-kpi-grid .kpi-card` leaves dashboard unchanged.
 * Same principle applied to every sibling block below. */
.card,
.panel,
.widget,
.stat,
.kpi,
.metric,
.dash-kpi-grid .kpi-card,
.dash-sec-card,
.qa-btn,
.cash-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.card,
.panel,
.widget {
  border-radius: var(--radius) !important;
}

.stat,
.kpi,
.metric,
.dash-kpi-grid .kpi-card,
.dash-sec-card,
.qa-btn,
.cash-card {
  border-radius: calc(var(--radius) - 2px) !important;
}

.stat-value,
.metric-value,
.dash-kpi-grid .kpi-value,
.cash-card-amount,
.cash-total-amount {
  font-family: var(--font-sans) !important;
  font-size: var(--kpi-value-size) !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  line-height: 1.05 !important;
}

.stat-label,
.metric-label,
.dash-kpi-grid .kpi-label,
.eyebrow,
.page-eyebrow,
.nav-group-label {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  font-weight: 600 !important;
}

table th,
.table th {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
}

table td,
.table td {
  border-bottom: 1px solid var(--line) !important;
}

table tr:hover td,
.table tr:hover td {
  background: var(--paper-2) !important;
}

input,
select,
textarea,
.form-control,
.sidebar-search-input,
.topbar-search {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.sidebar-search-input:focus {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink) 8%, transparent) !important;
}

.sidebar {
  background: var(--paper) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.sidebar-logo,
.sidebar-search,
.sidebar-workspace,
.sidebar-footer {
  border-color: var(--line) !important;
}

.sidebar .nav-item,
.sidebar a.nav-item,
.sidebar-nav .nav-item {
  background: transparent !important;
  color: var(--ink-2) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  gap: 11px !important;
  min-height: 40px !important;
  justify-content: flex-start !important;
}

.sidebar .nav-item:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}

.sidebar .nav-item.active,
.sidebar .nav-item[aria-current="page"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

.sidebar .nav-icon {
  width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink-3) !important;
}

.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active svg {
  color: var(--paper) !important;
}

.topbar,
header.topbar {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.tabs,
.tab-bar {
  border-bottom: 1px solid var(--line) !important;
}

.tab,
.dash-atab {
  background: transparent !important;
  color: var(--ink-3) !important;
}

.tab.active,
.dash-atab.active,
.tab[aria-selected="true"] {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}

.page-head,
.page-header {
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line) !important;
}

/* Bare `.kpi-grid` / `.kpi-card` / `.kpi-label` / `.kpi-value` / `.kpi-sub`
 * intentionally dropped from these shared "layout-polish" blocks. Module
 * templates (accounting, crm, inventory, etc.) set their own min-height
 * and padding inline. Forcing the 132px oklch look here made those
 * modules feel oversized and inconsistent with the dashboard. The
 * dashboard-scoped `.dash-kpi-grid …` selectors still get the polish. */
.dash-kpi-grid,
.stats-grid,
.dash-sec-strip,
.quick-actions,
.cash-grid {
  align-items: stretch;
}

.stat,
.kpi,
.metric,
.dash-kpi-grid .kpi-card,
.dash-sec-card,
.cash-card,
.quick-action-card,
.report-card {
  min-width: 0 !important;
  overflow: hidden !important;
  min-height: var(--kpi-min-height) !important;
  padding: var(--card-pad-y) var(--card-pad-x) !important;
  gap: calc(var(--gap) * 0.45) !important;
}

.stat-label,
.metric-label,
.dash-kpi-grid .kpi-label,
.dash-sec-label,
.qa-label,
.cash-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-value,
.metric-value,
.dash-kpi-grid .kpi-value,
.dash-sec-value,
.cash-card-amount,
.cash-total-amount {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stat-sub,
.metric-sub,
.dash-kpi-grid .kpi-meta,
.dash-metric-row,
.legend-item,
.cash-card-code {
  font-size: clamp(10px, .82vw, 12px) !important;
}

table,
.table,
.data-table {
  table-layout: fixed;
  width: 100%;
}

table th,
table td,
.table th,
.table td,
.data-table th,
.data-table td {
  font-size: clamp(11px, .9vw, 13px) !important;
  overflow-wrap: anywhere;
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x) !important;
}

.table th,
.data-table th {
  white-space: nowrap;
}

.table td,
.data-table td {
  min-width: 0;
}

.tabs,
.tab-bar,
.pricing-toggle {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar,
.pricing-toggle::-webkit-scrollbar {
  display: none;
}

.tab,
.p-tab,
.dash-atab {
  flex: 0 0 auto;
  font-size: clamp(11px, .95vw, 13px) !important;
  white-space: nowrap;
  padding: var(--tab-pad-y) var(--tab-pad-x) !important;
}

.chart-axis text,
.axis text,
.chart-labels,
.chart-legend,
.legend-item,
.kpi-spark text,
svg text {
  font-family: var(--font-mono) !important;
}

.chart-grid line,
.grid line {
  stroke: var(--line);
  opacity: .72;
}

.chart-line,
.line-series,
.recharts-line path,
.recharts-cartesian-axis-tick-line {
  stroke: var(--ink);
}

.chart-area,
.chart,
.recharts-wrapper,
.chart-wrap {
  min-width: 0;
  border-radius: calc(var(--radius) - 2px) !important;
}

.modal,
.modal-overlay > div,
[id$="modal" i] > div,
[id*="overlay" i] > div,
#domain-auth-modal > div {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: var(--card-pad-y) var(--card-pad-x) !important;
}

.modal-header,
.modal-footer,
.modal-title,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal-overlay h1,
.modal-overlay h2,
.modal-overlay h3,
.modal-overlay h4,
[id$="modal" i] h1,
[id$="modal" i] h2,
[id$="modal" i] h3,
[id$="modal" i] h4 {
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
}

.modal-overlay,
[id*="overlay" i],
[id$="modal" i] {
  backdrop-filter: blur(6px);
}

.modal-overlay label,
.modal-overlay p,
.modal-overlay span,
[id$="modal" i] label,
[id$="modal" i] p,
[id$="modal" i] span,
[id$="modal" i] div {
  color: var(--ink-2) !important;
}

.form-group,
.field-group,
.settings-row,
.settings-row-control,
.settings-row-meta {
  min-width: 0;
}

.form-group label,
.field-group label,
.modal label,
.settings-row-meta h4,
.settings-sidenav-head,
.settings-nav-group {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
}

.settings-layout,
.settings-main,
.settings-card-grid,
.settings-grid {
  min-width: 0;
}

.settings-sidenav,
.settings-panel,
.settings-card,
.settings-main .card,
.settings-main .panel {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
}

.settings-nav-item {
  color: var(--ink-2) !important;
  border-left-color: transparent !important;
  border-bottom-color: var(--line) !important;
}

.card-body,
.panel-body,
.widget-body,
.settings-panel .card-body,
.settings-card,
.module-card-body,
.report-card-body {
  padding: var(--card-pad-y) var(--card-pad-x) !important;
}

input,
select,
textarea,
.form-control,
.sidebar-search-input,
.topbar-search,
.btn,
.theme-toggle,
.lang-toggle,
.tab,
.tab-btn,
.p-tab,
.dash-atab {
  min-height: var(--control-height);
}

.tab-bar,
.tabs,
.pricing-toggle,
.settings-tabs,
.settings-nav {
  gap: calc(var(--gap) * 0.4);
}

.page-head,
.page-header,
.section-head,
.dash-head {
  gap: calc(var(--gap) * 0.55);
}

.chart-area,
.chart-wrap,
.chart,
.recharts-wrapper,
[class*="chart-card"],
[class*="graph-card"] {
  padding: var(--card-pad-y) var(--card-pad-x) !important;
}

@media (max-width: 720px) {
  :root,
  [data-density="roomy"] {
    --kpi-value-size: clamp(1.32rem, 5vw, 1.9rem);
  }

  [data-density="cozy"] {
    --kpi-value-size: clamp(1.24rem, 4.8vw, 1.72rem);
  }

  [data-density="compact"] {
    --kpi-value-size: clamp(1.14rem, 4.4vw, 1.56rem);
  }

  .stat,
  .kpi,
  .metric,
  .kpi-card,
  .dash-kpi-grid .kpi-card,
  .dash-sec-card,
  .cash-card {
    min-height: auto !important;
  }

  table th,
  table td,
  .table th,
  .table td,
  .data-table th,
  .data-table td {
    padding: calc(var(--table-cell-pad-y) * 0.9) calc(var(--table-cell-pad-x) * 0.82) !important;
  }
}

.settings-nav-item:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}

.settings-nav-item.active {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-left-color: var(--ink) !important;
}

.settings-section-title,
#billing-plan-name,
#usage-api-calls,
#storage-used-label,
#usage-active-users,
#usage-ai-tokens {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
}

.brand-preview,
.tpl-card,
.tpl-doc-render,
.integration-card,
.team-row {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.rich-editor-wrap,
.rich-editor-toolbar,
.rich-editor-btn,
.rich-editor-color {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.nzura-mtabs {
  display: none;
  /* Default 5 columns (4 primary + Apps); JS sets the exact count inline so
     role-gated bars still fill evenly. */
  grid-template-columns: repeat(5, 1fr);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 7px 2px max(7px, env(safe-area-inset-bottom));
  z-index: 300;
}

.nzura-mtab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0 5px;
  color: var(--ink-3);
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.nzura-mtab:hover,
.nzura-mtab:focus,
.nzura-mtab:active,
.nzura-mtab:visited,
.nzura-mtab .lbl { text-decoration: none !important; }

.nzura-mtab .ic {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.nzura-mtab .ic svg {
  width: 27px;
  height: 27px;
  stroke-width: 1.6;
}

.nzura-mtab .lbl {
  font-size: 11px;
  line-height: 1;
}

.nzura-mtab.active {
  color: var(--ink);
}

.nzura-mtab.active .ic {
  background: color-mix(in oklch, var(--ink) 8%, transparent);
  border-radius: 8px;
}

.nzura-mtab-dot {
  position: absolute;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.nzura-launcher-backdrop,
.nzura-launcher-sheet {
  display: none;
}

.nzura-launcher-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.38);
  z-index: 1390;
  backdrop-filter: blur(2px);
}

.nzura-launcher-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1400;
  max-height: 82vh;
  overflow-y: auto;
  padding: 10px 20px max(24px, calc(env(safe-area-inset-bottom) + 16px));
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -16px 48px -8px oklch(0% 0 0 / 0.28);
}

.nzura-launcher-grip {
  width: 38px;
  height: 4px;
  margin: 4px auto 10px;
  background: var(--ink-4);
  border-radius: 3px;
  opacity: .5;
}

.nzura-launcher-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.nzura-launcher-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}

.nzura-launcher-title {
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ink);
}

.nzura-launcher-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: none;
  background: color-mix(in oklch, var(--ink) 6%, transparent);
  color: var(--ink-2);
}

/* Quick Setup row at the top of the mobile launcher sheet */
.nzura-launcher-quick-setup {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 4px 0 14px;
  padding: 14px;
  background: linear-gradient(135deg, color-mix(in oklch, var(--brand-red, #D4273B) 8%, transparent), color-mix(in oklch, #f4a621 8%, transparent));
  border: 1px solid color-mix(in oklch, var(--brand-red, #D4273B) 22%, transparent);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--ink, var(--text-primary));
}
.nzura-launcher-quick-setup:hover,
.nzura-launcher-quick-setup:active {
  background: linear-gradient(135deg, color-mix(in oklch, var(--brand-red, #D4273B) 14%, transparent), color-mix(in oklch, #f4a621 14%, transparent));
}
.nzura-launcher-qs-ic { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.nzura-launcher-qs-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nzura-launcher-qs-title { font-weight: 800; font-size: 0.9rem; }
.nzura-launcher-qs-sub { font-size: 0.74rem; color: var(--ink-2, var(--text-muted)); }
.nzura-launcher-quick-setup .quick-setup-pct {
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--brand-red, #D4273B);
  color: #fff;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  line-height: 1;
  flex-shrink: 0;
}
.nzura-launcher-quick-setup .quick-setup-pct:empty { display: none; }

.nzura-launcher-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nzura-launcher-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--ink) 3%, transparent);
  color: var(--ink);
  text-decoration: none !important;
}
.nzura-launcher-tile:hover,
.nzura-launcher-tile:focus,
.nzura-launcher-tile:active,
.nzura-launcher-tile:visited,
.nzura-launcher-lbl { text-decoration: none !important; }

.nzura-launcher-tile.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.nzura-launcher-ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.nzura-launcher-ic svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.nzura-launcher-tile.active .nzura-launcher-ic {
  background: color-mix(in oklch, var(--paper) 12%, transparent);
  color: var(--paper);
  border-color: transparent;
}

.nzura-launcher-lbl {
  font-size: 13px;
  font-weight: 500;
}

/* "Make default" star on mobile launcher tiles. No hover on touch, so the
   star sits dim-but-visible in the corner; the pinned one lights up gold.
   Bigger 28px tap target for fingers. */
.nzura-launcher-tile { position: relative; }
.nzura-launcher-tile .nav-default-star {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-3, #9aa3b2);
  border-radius: 7px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.nzura-launcher-tile .nav-default-star svg { display: block; width: 15px; height: 15px; }
.nzura-launcher-tile.active .nav-default-star { color: var(--paper); opacity: 0.7; }
.nzura-launcher-tile .nav-default-star:hover,
.nzura-launcher-tile .nav-default-star:active,
.nzura-launcher-tile .nav-default-star:focus-visible {
  opacity: 1;
  color: #f5b50a;
  background: rgba(245, 181, 10, 0.16);
  outline: none;
}
.nzura-launcher-tile.is-default .nav-default-star,
.nzura-launcher-tile .nav-default-star.is-default { opacity: 1; color: #f5b50a; }
.nzura-launcher-tile .nav-default-star.is-default svg polygon { fill: #f5b50a; }

.nzura-launcher-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 11px;
  color: var(--ink-3);
}
.nzura-launcher-foot svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke-width: 1.6;
  color: var(--accent, var(--ink-3));
}

body.nzura-launcher-open {
  overflow: hidden;
}

body.nzura-launcher-open .nzura-launcher-backdrop {
  display: block;
}

body.nzura-launcher-open .nzura-launcher-sheet {
  display: block;
}

@media (max-width: 900px) {
  .dash-kpi-grid,
  .dash-sec-strip,
  .kpi-grid,
  .dash-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: min(84vw, 304px) !important;
    min-width: min(84vw, 304px) !important;
    max-width: min(84vw, 304px) !important;
    /* Clear the fixed .nzura-mtabs bottom bar (z-index 300) so the pinned
       footer pills (Quick Setup / Backup / SMS Balance) aren't cropped. */
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }

  body.nzura-app-shell .nzura-mtabs {
    display: grid;
  }

  /* Keep the bottom mobile tab bar visible even when the sidebar is open
     — the sidebar auto-closes after the user picks an item so the footer
     never collides with its pinned pills in practice. */

  body.nzura-app-shell .content,
  body.nzura-app-shell .main-content,
  body.nzura-app-shell .page-content,
  body.nzura-app-shell main {
    padding-bottom: 88px !important;
  }

  .topbar-search {
    display: none !important;
  }
}

/* ==========================================================================
   Tweaks panel + AI Mode button + viewport preview frames
   Ported from ui-redisgn/project/styles.css (reference handoff).
   ========================================================================== */

.nzura-tweaks {
  position: fixed;
  bottom: 80px;
  right: 24px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 14px);
  padding: 18px;
  width: 280px;
  z-index: 400;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.18);
  display: none;
  font-family: var(--font-sans);
}
.nzura-tweaks.open { display: block; }
.nzura-tweaks h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 12px;
}
.nzura-tweak-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.nzura-tweak-row label {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.nzura-tweak-seg {
  display: flex;
  gap: 0;
  background: var(--paper-2);
  border-radius: 7px;
  padding: 2px;
}
.nzura-tweak-seg button {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 5px;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.nzura-tweak-seg button.active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.nzura-tweak-accent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.nzura-tweak-accent button {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.nzura-tweak-accent button.active { border-color: var(--ink); }

/* Legacy Tweaks floating pill suppressed — we never ship that pill */
.nzura-ai-mode { display: none !important; }

/* Hide the legacy square floating AI Mode fab on every viewport —
   we now use the unified PC-style pill (.nzura-pcfoot-ai) on both
   desktop and mobile so the button design is consistent. */
.ai-mode-fab { display: none !important; }

/* ── PC footer bar — sticky bottom bar for desktop + tablet ───────────── */
.nzura-pcfoot {
  position: fixed;
  bottom: 18px;
  right: 22px;
  z-index: 350;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.4);
  font-family: var(--font-sans);
}
body.nzura-app-shell .nzura-pcfoot { display: inline-flex; }

.nzura-pcfoot-ai {
  padding: 9px 16px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 180ms;
}
.nzura-pcfoot-ai:hover { transform: translateY(-1px); }
.nzura-pcfoot-ai .spark {
  width: 14px; height: 14px; display: grid; place-items: center;
  color: oklch(75% 0.15 var(--accent-h, 18));
}

.nzura-pcfoot-tweaks {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--ink-3);
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 180ms, background 180ms, transform 180ms;
}
.nzura-pcfoot-tweaks:hover { color: var(--ink); background: var(--ink-10, color-mix(in oklch, var(--ink) 6%, transparent)); transform: rotate(30deg); }

/* On mobile the PC footer pill stays, but we lift it above the bottom
   .nzura-mtabs tab bar and tighten spacing so it reads as a floating pill
   instead of a full-width bar. */
@media (max-width: 768px) {
  .nzura-pcfoot {
    /* Sit above the bottom mobile tab bar (~58px incl. safe-area). */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    padding: 5px;
    gap: 6px;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35);
  }
  .nzura-pcfoot-ai {
    padding: 8px 14px;
    font-size: 12px;
  }
  .nzura-pcfoot-tweaks {
    width: 32px;
    height: 32px;
  }
}

/* ── Viewport preview frames (Tweaks → View: Mobile / Tablet) ─────────── */
html[data-viewport="mobile"],
html[data-viewport="tablet"] {
  background: oklch(18% 0.01 260);
}
html[data-viewport="mobile"] body,
html[data-viewport="tablet"] body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: oklch(18% 0.01 260);
  overflow: auto;
}
html[data-viewport="mobile"] body > *:not(.nzura-ai-mode):not(.nzura-tweaks):not(.nzura-launcher-backdrop):not(.nzura-launcher-sheet) {
  /* fallback: keep floating chrome outside the frame */
}
html[data-viewport="mobile"] .app-shell,
html[data-viewport="mobile"] .app,
html[data-viewport="mobile"] body > .main-content,
html[data-viewport="mobile"] body > main,
html[data-viewport="tablet"] .app-shell,
html[data-viewport="tablet"] .app,
html[data-viewport="tablet"] body > .main-content,
html[data-viewport="tablet"] body > main {
  background: var(--paper);
  border-radius: 48px;
  box-shadow:
    0 0 0 12px oklch(10% 0.005 260),
    0 0 0 13px oklch(28% 0.01 260),
    0 40px 80px -20px rgba(0,0,0,0.6);
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
html[data-viewport="mobile"] .app-shell,
html[data-viewport="mobile"] .app,
html[data-viewport="mobile"] body > .main-content {
  width: 390px;
  height: min(760px, calc(100vh - 60px));
}
html[data-viewport="tablet"] .app-shell,
html[data-viewport="tablet"] .app,
html[data-viewport="tablet"] body > .main-content {
  width: min(820px, calc(100vw - 60px));
  height: min(1100px, calc(100vh - 60px));
  border-radius: 28px;
}
/* Force mobile-mode sidebar + bottom-tabs inside the frame */
html[data-viewport="mobile"] .sidebar {
  transform: translateX(-100%);
  position: absolute !important;
  /* Clear the bottom tab bar inside the preview frame too. */
  padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
}
html[data-viewport="mobile"] .sidebar.open { transform: translateX(0); }
html[data-viewport="mobile"] body.nzura-app-shell .nzura-mtabs { display: grid; position: absolute; }
/* Mobile tab bar stays visible even when the side drawer is open — the
   drawer auto-closes after item-click, so they never both linger. */
html[data-viewport="mobile"] .topbar-search { display: none !important; }
html[data-viewport="mobile"] .main-content,
html[data-viewport="mobile"] .content,
html[data-viewport="mobile"] main { margin-left: 0 !important; padding-bottom: 88px !important; }
html[data-viewport="tablet"] .topbar-search { width: 240px; }

/* Anchor the floating chrome *outside* the preview frame, relative to the viewport */
/* Anchor Tweaks panel relative to the viewport, not inside the frame */
html[data-viewport="mobile"] .nzura-tweaks,
html[data-viewport="tablet"] .nzura-tweaks {
  position: fixed;
  right: 24px;
  bottom: 80px;
  z-index: 10000;
}

/* ── Sidebar brand text / scrollbar fixes (old white-on-paper regression) ─ */
.sidebar-logo .logo-text,
.sidebar-logo .logo-text span {
  color: var(--ink) !important;
}
.sidebar-logo .logo-mark {
  color: var(--paper) !important;
}
.sidebar {
  scrollbar-color: var(--line-2) transparent !important;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--line-2) !important;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--ink-4) !important;
}

/* ── Global font enforcement: every module inherits Open Sans.
   Uses high specificity without touching icon fonts or <code>/<pre>. ───── */
html body,
html body .app-shell,
html body .main-content,
html body .sidebar,
html body .topbar,
html body .content,
html body .card,
html body .tab,
html body .tabs,
html body .btn,
html body .form-control,
html body .nav-item,
html body input,
html body select,
html body textarea,
html body button {
  font-family: var(--font-sans) !important;
}
html body code,
html body pre,
html body kbd,
html body .mono,
html body .num,
html body .nav-badge {
  font-family: var(--font-mono) !important;
}

/* ── KPI cards — Nzura Suite reference (verbatim from ui-redisgn/styles.css)
   Targets .kpi-pro (reference class) AND aliases .kpi-card (legacy class),
   except inside the social-media module which keeps its own feed-style cards.
   ═════════════════════════════════════════════════════════════════════════ */
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: var(--pad) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 140px !important;
  box-shadow: none !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-top,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 4px !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-icon,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: var(--paper-2) !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink-2) !important;
  position: static !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-icon.accent { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
body.nzura-app-shell:not([data-module="social-media"]) .kpi-icon.pos    { background: var(--pos-soft) !important;    color: var(--pos) !important; }
body.nzura-app-shell:not([data-module="social-media"]) .kpi-icon.neg    { background: var(--neg-soft) !important;    color: var(--neg) !important; }
body.nzura-app-shell:not([data-module="social-media"]) .kpi-icon.warn   { background: var(--warn-soft) !important;   color: var(--warn) !important; }
body.nzura-app-shell:not([data-module="social-media"]) .kpi-icon.info   { background: var(--info-soft) !important;   color: var(--info) !important; }
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-icon svg,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-label,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-label {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  font-family: var(--font-sans) !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-top .kpi-label,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-top .kpi-label {
  margin-top: 0 !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-value,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-value {
  /* Auto-scale with viewport so long numbers (e.g. "TSh 1,134,500") fit
     cramped 4-5 column KPI rows on tablet/narrow-desktop widths without
     wrapping mid-digit or truncating to "TSh ..." ellipsis. */
  font-size: clamp(16px, 0.85vw + 9px, 30px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
  font-feature-settings: 'tnum' !important;
  margin-top: 2px !important;
  font-family: var(--font-sans) !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-value .unit,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-value .unit {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  margin-right: 5px !important;
  font-weight: 400 !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-meta,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-spark,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-spark {
  margin: 6px -4px -4px !important;
  height: 36px !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-spark svg,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-spark svg {
  height: 36px !important;
  width: 100% !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-delta,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-delta,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-change,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-change {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: var(--pos-soft) !important;
  color: var(--pos) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-delta.neg,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-change.neg,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-change.down {
  background: var(--neg-soft) !important;
  color: var(--neg) !important;
}
body.nzura-app-shell:not([data-module="social-media"]) .kpi-delta.flat,
body.nzura-app-shell:not([data-module="social-media"]) .kpi-change.neutral {
  background: var(--paper-2) !important;
  color: var(--ink-3) !important;
}

/* Responsive: reference styles for mobile KPI grid */
@media (max-width: 768px) {
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card {
    min-height: 118px !important;
    padding: 14px 12px !important;
    gap: 0 !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-label,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-label {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    margin-top: 6px !important;
    line-height: 1.2 !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-value,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-value {
    font-size: 22px !important;
    margin-top: 4px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-value .unit,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-value .unit {
    font-size: 11px !important;
    margin-right: 3px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-icon,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-icon svg,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-meta,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-meta {
    font-size: 10px !important;
    gap: 6px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-delta,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-delta,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-change,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-change {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-meta > span:last-child,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-meta > span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-spark,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-spark {
    height: 28px !important;
    margin: 4px -2px -2px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Tight mobile KPI cards (≤640px): drop the aggressive min-height so
   cards with short content (teamwork: "0" / "attention needed" / &nbsp;)
   don't show a tall blank gap between value and sparkline. Also shrink
   the spark+meta top-gap so the card reads compact and balanced.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card {
    min-height: 96px !important;
    padding: 10px 11px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-meta,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-meta {
    margin-top: 4px !important;
    padding-top: 4px !important;
    min-height: 0 !important;
  }
  /* When meta is a spacer (&nbsp;) with no meaningful content, collapse it. */
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-meta:empty,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-meta:empty {
    display: none !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-spark,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-spark {
    height: 22px !important;
    margin: 2px -2px -2px !important;
  }
  /* Empty spark host (before data loads) stays tight — no phantom 28px. */
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-spark:empty,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-spark:empty {
    height: 0 !important;
    margin: 0 !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-value,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-value {
    font-size: 20px !important;
    margin-top: 3px !important;
    line-height: 1 !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-top,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-top {
    margin-bottom: 2px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-icon,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-pro .kpi-icon svg,
  body.nzura-app-shell:not([data-module="social-media"]) .kpi-card .kpi-icon svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Page header — verbatim from ui-redisgn reference */
body.nzura-app-shell .page-head,
body.nzura-app-shell .page-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 28px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
body.nzura-app-shell .page-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
body.nzura-app-shell .page-head .page-title,
body.nzura-app-shell .page-header .page-title {
  font-size: 38px !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  margin: 0 !important;
}
body.nzura-app-shell .page-head .page-title em,
body.nzura-app-shell .page-header .page-title em {
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--ink-3) !important;
}
body.nzura-app-shell .page-sub,
body.nzura-app-shell .page-subtitle {
  margin-top: 10px !important;
  font-size: 14px !important;
  color: var(--ink-3) !important;
  max-width: 60ch !important;
  font-family: var(--font-sans) !important;
}
body.nzura-app-shell .page-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
/* Left-hand eyebrow/title/sub wrapper (any of these wrapper class names work).
   Ensures the title/sub stack vertically even though the parent .page-head
   is flex. */
body.nzura-app-shell .page-head > .page-head-main,
body.nzura-app-shell .page-head > .page-head-left,
body.nzura-app-shell .page-header > .page-header-left {
  display: block !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

@media (max-width: 768px) {
  body.nzura-app-shell .page-head,
  body.nzura-app-shell .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
  }
  body.nzura-app-shell .page-head .page-title,
  body.nzura-app-shell .page-header .page-title {
    font-size: 26px !important;
  }
  body.nzura-app-shell .page-sub,
  body.nzura-app-shell .page-subtitle {
    font-size: 13px !important;
  }
  body.nzura-app-shell .page-eyebrow {
    font-size: 10px !important;
  }
  /* ── Mobile primary actions: single right-anchored scrolling row ──────────
     On phones the action toolbar stays ONE row in its natural left-to-right
     order. It scrolls horizontally and nzura-action-bar.js parks it at the
     RIGHT end on load / tab-change, so the important colour-emphasised CTAs
     (e.g. + Invoice, Publish Store) are always visible while the extra /
     secondary buttons scroll off to the LEFT (swipe left to reach them). */
  body.nzura-app-shell .page-head .page-actions,
  body.nzura-app-shell .page-header .page-actions {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    margin: 0 -16px !important;
    padding: 0 16px 4px !important;
    scrollbar-width: none !important;
    /* MUST be flex-start: with flex-end an overflowing row pushes its start off
       the LEFT edge into negative space that scrollLeft cannot reach, so the
       left buttons become unreachable. flex-start keeps the overflow on the
       right (scrollable); the first child's auto left-margin still right-aligns
       the group when it DOES fit. */
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.nzura-app-shell .page-head .page-actions::-webkit-scrollbar,
  body.nzura-app-shell .page-header .page-actions::-webkit-scrollbar { display: none !important; }
  body.nzura-app-shell .page-head .page-actions > *,
  body.nzura-app-shell .page-header .page-actions > * {
    flex-shrink: 0 !important;
  }
  body.nzura-app-shell .page-head .page-actions > :first-child,
  body.nzura-app-shell .page-header .page-actions > :first-child {
    margin-left: auto !important;
  }
}

/* ── Mobile primary actions for bespoke module toolbars ──────────────────────
   Modules that don't use .page-actions render their primary CTA inside an
   .action-row / .acc-action-row / .mf-quick-actions toolbar (accounting,
   manufacturing, contract-farming, hotel, microfinance, …). Same principle as
   .page-actions: a single horizontally-scrolling row in natural order, parked
   at the right end (by nzura-action-bar.js) so the emphasised CTA is always
   visible and the rest swipe in from the left. */
@media (max-width: 768px) {
  body.app-body :is(.action-row, .acc-action-row, .mf-quick-actions),
  body.nzura-app-shell :is(.action-row, .acc-action-row, .mf-quick-actions) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    /* flex-start so the overflow stays scrollable (see .page-actions note);
       these rows right-align via their own .spacer / primary margin-left:auto. */
    justify-content: flex-start !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.app-body :is(.action-row, .acc-action-row, .mf-quick-actions)::-webkit-scrollbar,
  body.nzura-app-shell :is(.action-row, .acc-action-row, .mf-quick-actions)::-webkit-scrollbar {
    display: none !important;
  }
  body.app-body :is(.action-row, .acc-action-row, .mf-quick-actions) > *,
  body.nzura-app-shell :is(.action-row, .acc-action-row, .mf-quick-actions) > * {
    flex-shrink: 0 !important;
  }
  /* Accounting: "More" (left-panel toggle) sticks LEFT · Letterhead + New sit
     on the RIGHT · the timeframe filter drops to its OWN centred row below. */
  body.app-body .acc-action-row,
  body.nzura-app-shell .acc-action-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 8px !important;
  }
  body.app-body .acc-action-row .acc-spacer,
  body.nzura-app-shell .acc-action-row .acc-spacer { display: none !important; }
  /* The "More" button opens the module's left panel — keep it pinned to the
     left; its auto right-margin pushes Letterhead + New to the right edge. */
  body.app-body .acc-action-row #accOffcanvasBtn,
  body.nzura-app-shell .acc-action-row #accOffcanvasBtn {
    order: -1 !important;
    margin-right: auto !important;
  }
  body.app-body .acc-action-row .acc-fy-wrap,
  body.nzura-app-shell .acc-action-row .acc-fy-wrap {
    order: 99 !important;
    flex: 1 0 100% !important;       /* own full-width row … */
    justify-content: center !important; /* … with the filter centred in it */
    margin: 2px 0 0 !important;
  }
  /* The filter control itself stays compact (auto width) so it sits centred,
     not stretched edge-to-edge. */
  body.app-body .acc-action-row .acc-fy-wrap > #accountingFySelect,
  body.nzura-app-shell .acc-action-row .acc-fy-wrap > #accountingFySelect {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 12rem !important;
  }
  /* Mode switches (manufacturing Factory/Restaurant · contract-farming
     Contract/Farm-Manage) are nav-like toggles: pin them to the LEFT edge of
     the scrolling row so they stay reachable while the action buttons park on
     the right. */
  body.app-body :is(.action-row) :is(.mf-mode-switch, .cf-mode-switch),
  body.nzura-app-shell :is(.action-row) :is(.mf-mode-switch, .cf-mode-switch) {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: var(--content-bg, #f4f5f8) !important;
    box-shadow: 14px 0 12px -8px var(--content-bg, #f4f5f8) !important;
  }
}

/* Sidebar icons: remove legacy saturate/brightness boost so the mono
   stroke icons render clean against paper. */
body.nzura-app-shell .sidebar .nav-icon {
  filter: none !important;
}

/* ── Sidebar: force reference layout (horizontal row, left aligned) ─────── */
body.nzura-app-shell .sidebar {
  width: 232px !important;
}
body.nzura-app-shell .sidebar .nav-item,
body.nzura-app-shell .sidebar a.nav-item,
body.nzura-app-shell .sidebar-nav .nav-item {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  gap: 11px !important;
  padding: 8px 12px !important;
  margin: 1px 8px !important;
  min-height: auto !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.nzura-app-shell .sidebar .nav-item .nav-icon {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  filter: none !important;
}
body.nzura-app-shell .sidebar .nav-item .nav-icon svg {
  width: 16px !important;
  height: 16px !important;
}
body.nzura-app-shell .sidebar .nav-item > span:not(.nav-icon):not(.nav-badge):not(.nav-lock) {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}
body.nzura-app-shell .sidebar .nav-item .nav-badge {
  position: static !important;
  margin-left: auto !important;
  background: transparent !important;
  color: var(--ink-4) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
}
body.nzura-app-shell .sidebar .nav-item.active .nav-badge {
  color: var(--paper) !important;
  opacity: 0.6 !important;
}
body.nzura-app-shell .sidebar .nav-item .nav-lock {
  margin-left: auto !important;
  font-size: 11px !important;
  opacity: 0.5 !important;
}

/* Sidebar brand: match reference (mark + name + subtitle) */
body.nzura-app-shell .sidebar-logo {
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 20px 18px 16px !important;
  border-bottom: 1px solid var(--line) !important;
}
body.nzura-app-shell .sidebar-logo img {
  height: 32px !important;
  width: auto !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
/* Brand subtitle removed — the wordmark logo already carries the brand. */
body.nzura-app-shell .sidebar-logo::after {
  content: none !important;
  display: none !important;
}

/* Sidebar search: match reference sizing */
body.nzura-app-shell .sidebar-search {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--line) !important;
}
body.nzura-app-shell .sidebar-search-input {
  padding: 8px 12px !important;
  font-size: 13px !important;
  text-align: left !important;
  /* Raised surface + visible hairline so the field always reads as a
     typeable input — distinct from the sidebar even when paper-2 == sidebar. */
  background: var(--paper-3) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
}
body.nzura-app-shell .sidebar-search-input::placeholder {
  font-size: 13px !important;
  color: var(--ink-3) !important;
}
body.nzura-app-shell .sidebar-search-input:focus {
  border-color: var(--brand-primary, #3ddc84) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-primary, #3ddc84) 18%, transparent) !important;
}

/* More Apps section polish */
body.nzura-app-shell .sidebar-more-btn {
  padding: 10px 14px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  font-weight: 600 !important;
}
body.nzura-app-shell .more-count {
  background: var(--paper-2) !important;
  color: var(--ink-3) !important;
  font-family: var(--font-mono) !important;
}
body.nzura-app-shell .sidebar-more-apps {
  border-top: 1px solid var(--line) !important;
  margin-top: 8px !important;
}
body.nzura-app-shell .sidebar-upgrade-btn {
  margin: 8px 10px !important;
  padding: 8px 10px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
body.nzura-app-shell .sidebar-upgrade-btn:hover {
  background: var(--ink-2) !important;
  filter: none !important;
}

/* ─── Quick actions — reference .quick-grid + .quick-tile ───
   Verbatim port from ui-redisgn styles.css lines 628-656. Single-pixel
   divider effect via gap:1px on .line background.                      */
body.nzura-app-shell .quick-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: var(--line) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius, 14px) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
body.nzura-app-shell .quick-tile {
  background: var(--paper) !important;
  padding: 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  text-align: left !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  transition: background 120ms !important;
  position: relative !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  min-height: 92px !important;
}
body.nzura-app-shell .quick-tile:hover {
  background: var(--paper-2) !important;
}
body.nzura-app-shell .quick-tile .qicon {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink-2) !important;
}
body.nzura-app-shell .quick-tile .qicon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.5 !important;
}
body.nzura-app-shell .quick-tile .qlabel {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
}
body.nzura-app-shell .quick-tile .qhint {
  font-size: 11px !important;
  color: var(--ink-3) !important;
}
@media (max-width: 900px) {
  body.nzura-app-shell .quick-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  body.nzura-app-shell .quick-tile {
    padding: 16px 14px !important;
    min-height: 86px !important;
  }
}

/* Legacy mobile-only fabs are suppressed — the unified PC-style
   .nzura-pcfoot pill (AI Mode + Tweaks gear) now handles both viewports. */
.nzura-mfoot-tweaks { display: none !important; }

/* ─── Card / Table / Badge / Bars / Tabs — verbatim port
   From ui-redisgn styles.css lines 319-516. Scoped to the app shell and
   excluded from social-media + microfinance modules which have their own
   bespoke cards.                                                          */
/* Only apply reference .card padding when the card uses the reference
   .card-head header. Legacy cards with .card-header + .card-body keep
   their zero-outer-padding behavior so the inner .card-body padding is
   not duplicated. */
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card:has(> .card-head) {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius, 14px) !important;
  padding: var(--pad, 22px) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card-meta {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  font-family: var(--font-mono) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card-link {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card-link:hover {
  color: var(--ink) !important;
}

/* Tables */
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table th {
  text-align: left !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table td {
  padding: 14px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  vertical-align: middle !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table tr:last-child td {
  border-bottom: none !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table tr:hover td {
  background: var(--paper-2) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table .num {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table .right {
  text-align: right !important;
}

/* Mobile: allow cards that host a .table (reference-port) to scroll the
   table horizontally instead of clipping it. Uses :has() to avoid
   affecting cards without tables, keeping padding/shadow on the card. */
@media (max-width: 860px) {
  body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card:has(> .table),
  body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card:has(> table.table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card > .table,
  body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .card > table.table {
    min-width: max-content !important;
  }
}

/* Badges
   Only apply reference .badge base styling to bare .badge elements that
   DON'T also carry a legacy "badge-*" modifier (badge-green, badge-red,
   badge-blue, badge-neutral, etc. used widely across existing modules).
   The tone classes .pos/.neg/.warn/.info/.accent stay specific to
   reference-style callsites. */
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .badge:not([class*="badge-"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  background: var(--paper-3) !important;
  color: var(--ink-2) !important;
  font-feature-settings: 'tnum' !important;
  border: 0 !important;
  line-height: 1.4 !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .badge.pos {
  background: var(--pos-soft) !important;
  color: var(--pos) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .badge.neg {
  background: var(--neg-soft) !important;
  color: var(--neg) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .badge.warn {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .badge.info {
  background: var(--info-soft) !important;
  color: var(--info) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .badge.accent {
  background: var(--accent-soft) !important;
  color: var(--accent-ink, var(--accent)) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .badge .dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

/* Tabs */
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .tabs {
  display: flex !important;
  gap: 2px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 24px !important;
  overflow-x: auto !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .tab {
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: var(--ink-3) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  font-weight: 500 !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .tab:hover {
  color: var(--ink-2) !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}

/* Bars (expense / category breakdown rows) */
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-row {
  display: grid !important;
  grid-template-columns: 190px 1fr 70px !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 9px 0 !important;
  font-size: 13px !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-row .lbl {
  color: var(--ink-2) !important;
  font-size: 12px !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-row .val {
  font-family: var(--font-mono) !important;
  color: var(--ink) !important;
  text-align: right !important;
  font-size: 12px !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-track {
  height: 6px !important;
  background: var(--paper-3) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-fill {
  height: 100% !important;
  background: var(--ink) !important;
  border-radius: 999px !important;
}
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-fill.accent { background: var(--accent) !important; }
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-fill.pos { background: var(--pos) !important; }
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-fill.neg { background: var(--neg) !important; }
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-fill.warn { background: var(--warn) !important; }
body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-fill.info { background: var(--info) !important; }

@media (max-width: 768px) {
  body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .bar-row {
    grid-template-columns: 130px 1fr 70px !important;
    gap: 10px !important;
  }
  body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table th,
  body.nzura-app-shell:not([data-module="social-media"]):not([data-module="microfinance"]) .table td {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   Mobile-first module rescue layer

   Many modules redefine their tabs, tables, and two-column shells inline
   inside each HTML page. Those later inline rules can bypass the earlier
   shared responsive system, which is why mobile still regresses in some
   module tabs. Keep this block at the end of app.css so it wins when the
   viewport is narrow.
   ========================================================================== */
@media (max-width: 900px) {
  body.app-body :is(.page-content, .acc-content, .overview-grid, .chart-row, .panel, .card) {
    min-width: 0 !important;
  }

  body.app-body .acc-layout {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  body.app-body .acc-subnav {
    display: none !important;
  }

  body.app-body :is(
    .acc-tabs,
    .bill-tabs,
    .inv-tabs,
    .rep-tabs,
    .crm-tabs,
    .pro-tabs,
    .pay-tabs,
    .msg-tabs,
    .vfd-tabs,
    .fp-tabs,
    .cpa-tabs,
    .hr-tabs,
    .emp-tabs,
    .sm-tabs,
    .inbox-tabs,
    .g360-tabs,
    .cf-subtabs,
    .tw-tabs,
    .tabs,
    .tab-bar
  ) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.75rem;
  }

  body.app-body :is(
    .acc-tabs,
    .bill-tabs,
    .inv-tabs,
    .rep-tabs,
    .crm-tabs,
    .pro-tabs,
    .pay-tabs,
    .msg-tabs,
    .vfd-tabs,
    .fp-tabs,
    .cpa-tabs,
    .hr-tabs,
    .emp-tabs,
    .sm-tabs,
    .inbox-tabs,
    .g360-tabs,
    .cf-subtabs,
    .tw-tabs,
    .tabs,
    .tab-bar
  )::-webkit-scrollbar {
    display: none !important;
  }

  body.app-body :is(
    .acc-tab,
    .bill-tab,
    .inv-tab,
    .rep-tab,
    .crm-tab,
    .pro-tab,
    .pay-tab,
    .msg-tab,
    .vfd-tab,
    .fp-tab,
    .cpa-tab,
    .hr-tab,
    .emp-tab,
    .sm-tab,
    .inbox-tab-btn,
    .cf-subtab,
    .cf-area-pill,
    .g360-tab,
    .tab,
    .tab-btn,
    .p-tab,
    .dash-atab,
    .tw-tab
  ) {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    scroll-snap-align: start;
  }

  body.app-body :is(.kpi-grid, .kpi-grid-metrics) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-body :is(.chart-row, .overview-grid, .cf-farmer-cards) {
    grid-template-columns: 1fr !important;
  }

  body.app-body :is(.panel-head, .action-row, .acc-action-row, .filter-bar, .menu-filter-bar) {
    min-width: 0 !important;
    gap: 0.55rem !important;
  }

  body.app-body :is(.panel-head, .action-row, .acc-action-row, .filter-bar, .menu-filter-bar) > * {
    min-width: 0 !important;
  }

  body.app-body :is(.table-wrap, .cf-table-wrap) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  body.app-body :is(.table-wrap, .cf-table-wrap) > :is(table, .data-table, .cf-table) {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }

  body.app-body :is(.table-wrap, .cf-table-wrap) > :is(table, .data-table, .cf-table) :is(th, td) {
    white-space: nowrap !important;
  }

  body.app-body .overview-grid .table-wrap > .data-table,
  body.app-body :is(.fs-table, .asset-table, #tab-statements .data-table) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-body .overview-grid .table-wrap > .data-table :is(th, td),
  body.app-body :is(.fs-table, .asset-table, #tab-statements .data-table) :is(th, td) {
    white-space: normal !important;
  }

  body.app-body .mtab-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.app-body {
    --pad: 12px;
    --gap: 12px;
  }

  body.app-body :is(.kpi-grid, .kpi-grid-metrics) {
    grid-template-columns: 1fr !important;
  }

  body.app-body :is(
    .acc-tab,
    .bill-tab,
    .inv-tab,
    .rep-tab,
    .crm-tab,
    .pro-tab,
    .pay-tab,
    .msg-tab,
    .vfd-tab,
    .fp-tab,
    .cpa-tab,
    .hr-tab,
    .emp-tab,
    .sm-tab,
    .inbox-tab-btn,
    .cf-subtab,
    .cf-area-pill,
    .g360-tab,
    .tab,
    .tab-btn,
    .p-tab,
    .dash-atab,
    .tw-tab
  ) {
    padding-inline: 0.85rem !important;
    font-size: 0.78rem !important;
  }

  body.app-body :is(.panel, .card, .cf-card, .n8n-canvas) {
    padding: 0.75rem !important;
  }

  body.app-body .mtab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   V2 SIDEBAR — design "View Apps" two-panel slide  (flag-gated, additive)
   Activated only when nzura-sidebar.js adds .nz2-sidebar to #sidebar (which it
   does only when the data-sidebar-v2 flag is on). STRUCTURAL ONLY — it reuses
   the existing .nav-item / token styling so the look stays consistent with
   every module's redesign theme. Pure append: deleting this block fully
   reverts to V1. No existing rule is modified.
   ========================================================================== */
/* The nav is flex:1 inside the fixed-height .sidebar → it has a definite
   height. Clip it and let the stack fill it; BOTH panels are absolute and
   scroll INTERNALLY (this is what lets the long section list scroll instead
   of being cropped behind the pinned pills). */
.nz2-sidebar .sidebar-nav { position: relative; overflow: hidden; min-height: 0; }
.nz2-side-stack { position: absolute; inset: 0; }
.nz2-side-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
/* panel-1 (module sections) reads as a raised side panel (#091222 in dark) on
   top of the deeper sidebar frame (#010919) — the per-module "left panel". */
.nz2-side-panel-main { background: var(--panel-bg, var(--paper, #fff)); }
/* panel-2 (launcher) overlays panel-1 and slides in from the right; it sits
   flush with the sidebar frame (#010919 in dark). */
.nz2-side-panel-apps {
  transform: translateX(100%); opacity: 0; pointer-events: none;
  background: var(--sidebar-bg, var(--paper, #fff));
}
.nz2-sidebar.nz2-apps-open .nz2-side-panel-main { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.nz2-sidebar.nz2-apps-open .nz2-side-panel-apps { transform: none; opacity: 1; pointer-events: auto; }

/* "View Apps" launcher button (top of panel-1) */
/* Layout only — colour comes from the shared `.btn.btn-solid` primary-button
   class (ink/paper) so View Apps matches the +New button exactly and inherits
   any future theme change. We only own geometry + the icon/chevron. */
.nz2-view-apps-row.btn {
  display: flex; align-items: center; gap: 10px; justify-content: flex-start;
  width: calc(100% - 16px); margin: 2px 8px 12px; padding: 10px 12px;
  border-radius: 10px; font: inherit; font-size: .84rem; font-weight: 700;
}
.nz2-view-apps-row .nav-icon { display: inline-flex; align-items: center; }
.nz2-view-apps-row .nav-icon svg { width: 18px; height: 18px; }
/* The icon must match the button's text colour (paper), not the muted
   `.sidebar .nav-icon{color:var(--ink-3)!important}` that targets nav items. */
/* Icon + chevron inherit the button's OWN text colour (white on the navy
   button in modules like microfinance, --paper on the light btn-solid in V2)
   — never pinned to --paper, which went invisible on dark buttons. */
.nz2-view-apps-row .nav-icon,
.nz2-view-apps-row .nav-icon svg,
.nz2-view-apps-row .nz2-chev svg { color: inherit !important; stroke: currentColor !important; }
.nz2-view-apps-row .nz2-chev { margin-left: auto; display: inline-flex; opacity: .85; }

/* Mobile section-tab "More"/menu button → styled as a PRIMARY action button
   (clearly visible in light + dark), matching each module's own +New CTA.
   manufacturing/hotel/contract-farming use .acc-tab.mtab-more-btn (brand
   primary); microfinance uses .mf-tab-offcanvas (its navy CTA #1B2E5A). */
.acc-tab.mtab-more-btn {
  background: var(--brand-primary, #22b378) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary, #22b378) !important;
  border-bottom-color: var(--brand-primary, #22b378) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: .5rem .9rem !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}
.acc-tab.mtab-more-btn:hover { opacity: .92 !important; color: #fff !important; }
body[data-module="microfinance"] .mf-section-tabs .mf-tab.mf-tab-offcanvas,
body[data-module="microfinance"] .mf-section-tabs .mf-tab.mf-tab-offcanvas.active {
  background: #1B2E5A !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
body[data-module="microfinance"] .mf-section-tabs .mf-tab.mf-tab-offcanvas svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* grouped nav labels (panel-1 + launcher) */
.nz2-nav-group { margin-bottom: 8px; }
.nz2-nav-label {
  margin: 6px 0 4px; padding: 0 16px;
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted, #8a93a5); opacity: .7;
}

/* launcher header + back / return controls */
.nz2-apps-head {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px;
  position: sticky; top: 0; z-index: 2; margin-bottom: 8px;
  background: var(--sidebar-bg, var(--paper, #fff));
  border-bottom: 1px solid var(--border, rgba(27,46,90,.08));
}
.nz2-apps-head b { font-size: .98rem; font-weight: 800; display: block; line-height: 1.15; color: var(--text-primary, #1B2E5A); }
.nz2-apps-sub { font-size: .7rem; color: var(--text-muted, #8a93a5); font-weight: 600; }
.nz2-apps-back, .nz2-apps-return {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border, rgba(27,46,90,.1)); cursor: pointer;
  background: var(--surface-muted, rgba(27,46,90,.04)); color: var(--text-muted, #5a6f8f);
  border-radius: 9px; font: inherit; transition: color .15s, border-color .15s;
}
.nz2-apps-back { width: 34px; height: 34px; flex: none; padding: 0; }
.nz2-apps-back svg { width: 16px; height: 16px; }
.nz2-apps-return { width: calc(100% - 16px); margin: 10px 8px 6px; padding: 10px; font-size: .82rem; font-weight: 700; }
.nz2-apps-return svg { width: 16px; height: 16px; }
.nz2-apps-back:hover, .nz2-apps-return:hover { color: var(--text-primary, #1B2E5A); border-color: var(--border-strong, rgba(27,46,90,.18)); }

/* "CURRENT" badge on the module we're in, inside the View-Apps launcher */
.nz2-launcher .nav-item.nz2-current { position: relative; }
.nz2-app-here {
  margin-left: auto; flex: none;
  font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  background: color-mix(in srgb, currentColor 20%, transparent); color: inherit;
}