/* ================================================================
   VICCS Enterprise — Master Stylesheet
   Mobile-first, CSS custom properties, dark mode, responsive grid
   ================================================================ */

/* ── 1. CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Brand */
  --brand-primary:   #0f7a3c;
  --brand-secondary: #0d5c2d;
  --brand-accent:    #f5a623;
  --brand-dark:      #0a2416;

  /* Sidebar */
  --sidebar-width:        260px;
  --sidebar-collapsed:     72px;
  --sidebar-bg:           #0a1f14;
  --sidebar-border:       #1a3a22;
  --sidebar-text:         #b8d4c0;
  --sidebar-text-active:  #ffffff;
  --sidebar-hover:        #12301a;
  --sidebar-active-bg:    #0f7a3c;
  --sidebar-active-glow:  rgba(15,122,60,0.25);

  /* Topbar */
  --topbar-h:     60px;
  --topbar-bg:    #ffffff;
  --topbar-shadow: 0 1px 0 #e5e7eb;

  /* Surface */
  --bg-page:      #f0f4f2;
  --bg-card:      #ffffff;
  --bg-card-alt:  #f8faf9;
  --border-color: #e2e8e5;
  --shadow-xs:    0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.08);
  --shadow-md:    0 4px 20px rgba(0,0,0,.10);

  /* Text */
  --text-primary:   #0d1f15;
  --text-secondary: #4b6358;
  --text-muted:     #8aA69a;
  --text-inverse:   #ffffff;

  /* Status colors */
  --color-win:       #22c55e;
  --color-reinforce: #3b82f6;
  --color-swing:     #f59e0b;
  --color-defense:   #f97316;
  --color-lost:      #ef4444;
  --color-success:   #16a34a;
  --color-warning:   #d97706;
  --color-danger:    #dc2626;
  --color-info:      #2563eb;

  /* KPI card accent */
  --kpi-1: #0f7a3c;
  --kpi-2: #1d4ed8;
  --kpi-3: #7c3aed;
  --kpi-4: #b45309;
  --kpi-5: #0891b2;
  --kpi-6: #be123c;

  /* Typography */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* Transitions */
  --transition: 200ms ease;
  --transition-slow: 350ms ease;
}

/* ── Dark mode ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --topbar-bg:    #111b14;
  --topbar-shadow: 0 1px 0 #1e3424;
  --bg-page:      #0c1610;
  --bg-card:      #111b14;
  --bg-card-alt:  #162019;
  --border-color: #1e3424;
  --shadow-xs:    0 1px 3px rgba(0,0,0,.3);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.4);
  --shadow-md:    0 4px 20px rgba(0,0,0,.5);
  --text-primary:   #e6f0ea;
  --text-secondary: #8ab49a;
  --text-muted:     #4d7560;
  --sidebar-bg:     #080f0a;
  --sidebar-border: #162019;
}

/* ── 2. Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ── 3. Layout Shell ──────────────────────────────────────────── */
.layout-app {
  display: flex;
  min-height: 100vh;
}

/* ── 4. Sidebar ───────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: 300;
  transition: width var(--transition-slow), transform var(--transition-slow);
  overflow: hidden;
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 64px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.brand-icon {
  font-size: 22px;
  color: var(--brand-primary);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(15,122,60,.15);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -1px;
}
.brand-icon-img {
  object-fit: cover;
  background: #fff;
  padding: 2px;
}
.btn-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.btn-icon:hover { background: #f1f5f9; }
.btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.brand-text { overflow: hidden; }
.brand-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .5px;
}
.brand-text small {
  font-size: 10px;
  color: var(--sidebar-text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sidebar-toggle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sidebar-text);
  padding: 6px;
  border-radius: var(--r-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--sidebar-hover); color: #fff; }

/* User card */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { overflow: hidden; }
.user-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  font-size: 10px;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 500;
}

/* Sync status */
.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 11px;
  color: var(--sidebar-text);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sync-dot.online  { background: var(--color-win); box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.sync-dot.offline { background: var(--color-danger); animation: pulse-danger 1s infinite; }

@keyframes pulse-danger {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); }

.nav-section-title {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.nav-link:hover {
  background: var(--sidebar-hover);
  color: #fff;
  text-decoration: none;
}
.nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  box-shadow: 0 0 0 1px var(--sidebar-active-glow);
}
.nav-link.active .nav-icon { color: #fff; }
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--sidebar-text);
}
.nav-link.active .nav-icon { color: #fff; }
.nav-link:hover .nav-icon   { color: #fff; }

.nav-badge {
  margin-left: auto;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-full);
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Submenu */
.nav-submenu {
  padding-left: 28px;
  display: none;
}
.nav-submenu.open { display: block; }
.nav-submenu .nav-link {
  font-size: 12.5px;
  padding: 7px 10px;
}

/* Collapsed sidebar behaviour */
.sidebar.collapsed .brand-text,
.sidebar.collapsed .user-info,
.sidebar.collapsed .sync-status span:last-child,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .nav-badge {
  display: none;
}
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 14px 0; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 11px; }
.sidebar.collapsed .sidebar-toggle { display: none; }

/* Footer */
.sidebar-footer {
  padding: 8px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.nav-logout { color: #f87171 !important; }
.nav-logout:hover { background: rgba(248,113,113,.1) !important; }

/* ── 5. Main Wrapper ──────────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition-slow);
}
.sidebar.collapsed ~ .main-wrapper { margin-left: var(--sidebar-collapsed); }

/* ── 6. Topbar ────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--topbar-shadow);
  /* overflow must be visible so the avatar dropdown can spill below the topbar */
  width: 100%;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}
.topbar-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 6px;
  border-radius: var(--r-sm);
  display: none;
}
.topbar-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden; /* clamp breadcrumb width; keeps topbar overflow:visible for the dropdown */
  min-width: 0;
}
.topbar-breadcrumb strong { color: var(--text-primary); }
.breadcrumb-sep { color: var(--text-muted); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.topbar-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  font-size: 12px;
  font-weight: 600;
  position: relative;
}
.topbar-btn:hover { background: var(--bg-card-alt); color: var(--text-primary); }

.notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: var(--color-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: var(--r-full);
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}

/* Avatar dropdown */
.avatar-wrapper {
  position: relative;
}
.avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-full);
  background: var(--bg-card-alt);
  cursor: pointer;
  transition: all var(--transition);
}
.avatar-btn:hover { border-color: var(--brand-primary); }
.avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.avatar-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-caret {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.avatar-btn[aria-expanded="true"] .avatar-caret { transform: rotate(180deg); }

.avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  display: none;
  z-index: 600; /* above topbar z-index:200 and sidebar */
  overflow: hidden;
}
.avatar-dropdown.open { display: block; }
.dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}
.dropdown-header strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
}
.dropdown-header small {
  font-size: 11px;
  color: var(--text-muted);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.dropdown-item:hover { background: var(--bg-card-alt); text-decoration: none; }
.dropdown-item.danger { color: var(--color-danger); }
.dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }

/* ── 7. Page Content ──────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 8. Dashboard Header (Campaign Brand Bar) ─────────────────── */
.campaign-header {
  background: transparent;
  padding: 4px 0 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.campaign-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: #fff;
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
  font-size: 18px;
  color: var(--brand-primary);
  letter-spacing: -1px;
}
.campaign-logo-img {
  object-fit: contain;
  background: #fff;
  padding: 6px;
}
.campaign-photo {
  width: 92px;
  height: 126px;
  border-radius: 10px;
  object-fit: cover;
  object-position: top center;  /* keep faces/caps framed, crop from the bottom if needed */
  flex-shrink: 0;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.campaign-info { flex: 1; text-align: center; }
.campaign-title {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 800;
  color: #16305c;
  letter-spacing: -.5px;
  line-height: 1.1;
}
.campaign-title span { color: var(--brand-primary); }
.campaign-subtitle {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--brand-primary);
  padding: 4px 14px;
  border-radius: var(--r-full);
  margin-top: 6px;
}
.campaign-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.campaign-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--brand-primary);
  border-radius: var(--r-full);
  color: var(--brand-primary);
  letter-spacing: .5px;
  text-transform: uppercase;
  background: #fff;
}
.campaign-tag:nth-child(3n+2) { border-color: var(--color-info); color: var(--color-info); }
.campaign-tag:nth-child(3n)   { border-color: var(--kpi-3);      color: var(--kpi-3); }
.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  color: var(--color-danger);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-full);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.live-dot {
  width: 7px;
  height: 7px;
  background: #f87171;
  border-radius: 50%;
  animation: blink 1s ease infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}

/* ── 9. KPI Cards Row ─────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.kpi-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 16px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: default;
}
.kpi-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.kpi-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon-wrap svg { width: 20px; height: 20px; }

.kpi-card:nth-child(1) .kpi-icon-wrap { background: rgba(15,122,60,.12); color: #0f7a3c; }
.kpi-card:nth-child(2) .kpi-icon-wrap { background: rgba(29,78,216,.12); color: #1d4ed8; }
.kpi-card:nth-child(3) .kpi-icon-wrap { background: rgba(124,58,237,.12); color: #7c3aed; }
.kpi-card:nth-child(4) .kpi-icon-wrap { background: rgba(180,83,9,.12); color: #b45309; }
.kpi-card:nth-child(5) .kpi-icon-wrap { background: rgba(8,145,178,.12); color: #0891b2; }
.kpi-card:nth-child(6) .kpi-icon-wrap { background: rgba(190,18,60,.12); color: #be123c; }

.kpi-body { flex: 1; min-width: 0; }
.kpi-value {
  /* Fixed (non-vw) size, deliberately small enough that even the widest
     realistic value — a currency amount like "₦ 15,000,000" — fits on a
     single line inside a 6-up card. A vw-based clamp() used to size this
     differently depending on viewport width, so cards looked inconsistent
     next to each other and long values would wrap while short ones
     didn't, throwing card heights out of alignment. overflow-wrap stays
     on only as a last-resort safety net for values wider than any real
     data we expect — it should never actually trigger in practice, so
     nothing is ever silently clipped/hidden the way the old
     nowrap+ellipsis version did.
     KPI_VALUE_SIZE tokens below are kept in sync at each breakpoint. */
  font-size: 17px;                 /* KPI_VALUE_SIZE: desktop / base */
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
}
.kpi-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.3;
}
.kpi-trend {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
}
.kpi-trend.up   { color: var(--color-win); }
.kpi-trend.down { color: var(--color-danger); }

/* ── 10. Dashboard Grid ───────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.dash-grid .span-2 { grid-column: span 2; }
.dash-grid .span-3 { grid-column: span 3; }

.dash-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

/* ── 11. Card ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
}
.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.1px;
}
.card-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.card-action {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(15,122,60,.08);
  transition: background var(--transition);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.card-action:hover { background: rgba(15,122,60,.16); text-decoration: none; }
.card-body { padding: 16px 18px; }

/* ── 11b. Settings Page (multi-column cards + quick-jump nav) ──── */
.settings-page { max-width: 1400px; }
.settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-page);
  padding: 10px 0;
}
.settings-nav a {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.settings-nav a:hover,
.settings-nav a:focus-visible {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(15,122,60,.08);
  text-decoration: none;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.settings-grid .span-full { grid-column: 1 / -1; }
.settings-section { scroll-margin-top: 76px; }
@media (max-width: 640px) {
  .settings-nav { position: static; }
}

/* ── 12. Coordination Panel ───────────────────────────────────── */
.coord-panel {
  display: flex;
  flex-direction: column;
}
.coord-panel .card-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 0;
}
.coord-col {
  padding: 14px 16px;
  border-right: 1px solid var(--border-color);
}
.coord-col:last-child { border-right: none; }
.coord-col-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--brand-primary);
  display: inline-block;
}
.coord-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 200px;
  overflow-y: auto;
}
.coord-list li {
  font-size: 11.5px;
  color: var(--text-primary);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.coord-list li:hover { background: var(--bg-card-alt); }
.coord-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coord-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--border-color);
}
.coord-stat {
  padding: 10px 14px;
  text-align: center;
  border-right: 1px solid var(--border-color);
}
.coord-stat:last-child { border-right: none; }
.coord-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-primary);
}
.coord-stat-lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}
.coord-stat.pending .coord-stat-val { color: var(--color-warning); }
.coord-stat.inactive .coord-stat-val { color: var(--color-danger); }

/* ── 13. GIS Map ──────────────────────────────────────────────── */
.map-container {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
#dashMap, #mainMap {
  height: 320px;
  width: 100%;
  z-index: 1;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Map coverage stats */
.map-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border-left: 1px solid var(--border-color);
}
.map-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.map-stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.map-stat-label { font-size: 12px; color: var(--text-secondary); flex: 1; }
.map-stat-value { font-size: 13px; font-weight: 700; color: var(--text-primary); }

/* ── 14. PU Summary / Classification ─────────────────────────── */
.pu-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.pu-sum-col {
  padding: 14px 16px;
  border-right: 1px solid var(--border-color);
}
.pu-sum-col:last-child { border-right: none; }

.pu-big-number {
  font-size: 36px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.pu-big-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .8px;
  margin-top: 2px;
}
.pu-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.pu-status-item {
  background: var(--bg-card-alt);
  border-radius: var(--r-sm);
  padding: 8px;
  text-align: center;
}
.pu-status-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}
.pu-status-lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}
.pu-status-item.received .pu-status-val { color: var(--color-win); }
.pu-status-item.pending  .pu-status-val { color: var(--color-warning); }
.pu-status-item.started  .pu-status-val { color: var(--color-danger); }

/* ── 15. Results Summary / Party Bars ────────────────────────── */
.party-result-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.party-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.party-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.party-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.party-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.party-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.party-bar-bg {
  height: 8px;
  background: var(--bg-card-alt);
  border-radius: var(--r-full);
  overflow: hidden;
}
.party-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 1s ease;
}

/* ── 16. Transmission Progress ────────────────────────────────── */
.transmission-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.donut-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.donut-svg { transform: rotate(-90deg); }
.donut-bg { fill: none; stroke: var(--bg-card-alt); stroke-width: 14; }
.donut-received { fill: none; stroke: var(--color-win);     stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; }
.donut-pending  { fill: none; stroke: var(--color-warning); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; }
.donut-none     { fill: none; stroke: var(--color-danger);  stroke-width: 14; stroke-linecap: round; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.donut-center small {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .5px;
  margin-top: 2px;
}
.transmission-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.tx-legend-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.tx-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tx-legend-val { font-weight: 700; color: var(--text-primary); }
.progress-bar-sm {
  height: 6px;
  background: var(--bg-card-alt);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 8px;
}
.progress-fill {
  height: 100%;
  background: var(--color-win);
  border-radius: var(--r-full);
  transition: width 1.5s ease;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 3px;
  color: var(--text-muted);
}

/* ── 17. Transmission Chart ───────────────────────────────────── */
.chart-wrapper {
  position: relative;
  height: 180px;
}
canvas { max-width: 100%; }

/* ── 18. Recent Activity Feed ─────────────────────────────────── */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 260px;
  overflow-y: auto;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.activity-dot.green  { background: var(--color-win); }
.activity-dot.blue   { background: var(--color-info); }
.activity-dot.orange { background: var(--color-warning); }
.activity-dot.red    { background: var(--color-danger); }
.activity-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.45;
}
.activity-text strong { font-weight: 600; }
.activity-time {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 19. Alerts / Flash ───────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0;
  border-left: 4px solid transparent;
}
.alert-success {
  background: rgba(22,163,74,.08);
  border-color: var(--color-success);
  color: var(--color-success);
}
.alert-error {
  background: rgba(220,38,38,.08);
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.alert-warning {
  background: rgba(245,158,11,.10);
  border-color: #f59e0b;
  color: #b45309;
}

/* ── 20. Offline Banner ───────────────────────────────────────── */
.offline-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e293b;
  color: #e2e8f0;
  text-align: center;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,.2);
}

/* ── 21. Notification Drawer ──────────────────────────────────── */
.notif-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  z-index: 600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}
.notif-drawer:not([hidden]) { transform: translateX(0); }
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.notif-header h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.notif-header button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
}
.notif-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.notif-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 30px; }

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 599;
}

/* ── 22. Section heading ──────────────────────────────────────── */
.section-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: -6px;
}

/* ── 23. Status pill ─────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pill-green   { background: rgba(34,197,94,.15);  color: #16a34a; }
.pill-amber   { background: rgba(245,158,11,.15); color: #b45309; }
.pill-red     { background: rgba(239,68,68,.15);  color: #dc2626; }
.pill-blue    { background: rgba(59,130,246,.15); color: #1d4ed8; }
.pill-purple  { background: rgba(124,58,237,.15); color: #6d28d9; }
.pill-gray    { background: var(--bg-card-alt); color: var(--text-muted); }

/* ── 24. Utility ──────────────────────────────────────────────── */
.text-muted  { color: var(--text-muted); }
.text-small  { font-size: 12px; }
.fw-bold     { font-weight: 700; }
.mt-0 { margin-top: 0; }

/* ── 25. Auth pages ───────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a1f14 0%, #0f7a3c 100%);
  padding: 20px;
}
.auth-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-md);
}
.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo .logo-mark {
  width: 60px;
  height: 60px;
  background: var(--brand-primary);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
}
.auth-logo h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.auth-logo p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  font-family: var(--font-sans);
}
.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(15,122,60,.15);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.btn-primary:hover { background: var(--brand-secondary); text-decoration: none; color: #fff; }
.btn-block { width: 100%; }

/* ── 25b. Pagination (shared across every paginated list) ───────── */
.viccs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
}
.viccs-pager-summary {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.viccs-pager-summary strong { color: var(--text-primary); font-weight: 600; }
.viccs-pager-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
  flex-wrap: wrap;
}
.viccs-pager-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card-alt);
  border: 1px solid var(--border-color);
  text-decoration: none;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.viccs-pager-link:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  text-decoration: none;
}
.viccs-pager-link.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  cursor: default;
}
.viccs-pager-link.is-active:hover { background: var(--brand-primary); }
.viccs-pager-link.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.viccs-pager-nav { font-weight: 700; }
.viccs-pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  color: var(--text-muted);
  font-size: 13px;
}
@media (max-width: 560px) {
  .viccs-pager { justify-content: center; text-align: center; }
  .viccs-pager-list { margin-left: 0; justify-content: center; }
}

/* ── 26. Responsive Breakpoints ───────────────────────────────── */

/* ─── 1280px — large desktop ──── */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid .span-2 { grid-column: span 2; }
  .dash-grid .span-3 { grid-column: span 2; }
  .dash-grid-bottom { grid-template-columns: 1fr 1fr; }
}

/* ─── 1024px — tablet landscape ── */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .coord-panel .card-body { grid-template-columns: 1fr; }
  .coord-col { border-right: none; border-bottom: 1px solid var(--border-color); }
  .pu-summary-grid { grid-template-columns: 1fr; }
  .pu-sum-col { border-right: none; border-bottom: 1px solid var(--border-color); }

  /* Meeting show layout — stack on tablet */
  .meeting-layout { grid-template-columns: 1fr !important; }
  #jaas-container { height: 420px !important; }
}

/* ─── 768px — tablet portrait / mobile ── */
@media (max-width: 768px) {
  :root { --sidebar-width: 280px; }

  /* Sidebar slides off-canvas */
  .sidebar {
    transform: translateX(-100%);
    z-index: 400;
    box-shadow: none;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  .sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-width); }
  .sidebar.mobile-open .brand-text,
  .sidebar.mobile-open .user-info,
  .sidebar.mobile-open .nav-section-title,
  .sidebar.mobile-open .nav-link span { display: revert; }
  .sidebar.mobile-open .sidebar-user { justify-content: flex-start; padding: 14px 16px; }
  .sidebar.mobile-open .sidebar-brand { justify-content: flex-start; padding: 0 16px; }
  .sidebar.mobile-open .nav-link { justify-content: flex-start; padding: 9px 10px; }

  .main-wrapper { margin-left: 0 !important; }
  .topbar-menu-btn { display: flex; }

  /* Page padding */
  .page-content { padding: 12px; gap: 12px; }

  /* KPI grid — 2 cols on mobile */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card { padding: 12px; gap: 10px; }
  .kpi-value { font-size: 20px; }

  /* Dash grids — single column */
  .dash-grid { grid-template-columns: 1fr; gap: 12px; }
  .dash-grid .span-2,
  .dash-grid .span-3 { grid-column: span 1; }
  .dash-grid-bottom { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Campaign header */
  .campaign-header { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  .campaign-photo { width: 44px; height: 64px; align-self: auto; }
  .campaign-photo:last-of-type { order: 3; }
  .campaign-logo { width: 48px; height: 48px; font-size: 16px; }
  .campaign-tags { display: none; }

  /* Topbar */
  .avatar-name { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }

  /* Card headers — stack on narrow screens */
  .card-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }
  .card-header > div:first-child { flex: 1 1 auto; min-width: 0; }
  .card-header > a,
  .card-header > button,
  .card-header > form,
  .card-header > div:last-child:not(:first-child) {
    flex-shrink: 0;
  }

  /* Tables — horizontal scroll wrapper (already exists via overflow-x:auto
     on parent div; this ensures the table itself never breaks the layout) */
  table { min-width: 520px; }

  /* Inline grid forms (e.g. date + duration side by side) — stack */
  .form-row-2col {
    grid-template-columns: 1fr !important;
  }

  /* Network / Team Members tab bar — already scrolls; ensure no overflow */
  .tm-tabs { flex-wrap: nowrap !important; }

  /* Meeting room */
  #jaas-container { height: 360px !important; }
  .meeting-layout { grid-template-columns: 1fr !important; }

  /* Modal */
  .modal-box { width: calc(100vw - 24px) !important; max-width: 100% !important; margin: 12px; }
}

/* ─── 480px — small phones ── */
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { padding: 10px; gap: 8px; }
  .kpi-icon-wrap { width: 34px; height: 34px; }
  .kpi-icon-wrap svg { width: 16px; height: 16px; }
  .kpi-value { font-size: 17px; }
  .kpi-label { font-size: 9px; }
  .kpi-trend { display: none; }

  .dash-grid-bottom { grid-template-columns: 1fr; }
  .pu-status-grid { grid-template-columns: 1fr 1fr 1fr; }
  .coord-stats { grid-template-columns: 1fr 1fr 1fr; }
  .campaign-tags { display: none; }
  .campaign-photo { display: none; }
  .page-content { padding: 8px; gap: 8px; }

  /* Card */
  .card-header { padding: 10px 12px; }
  .card-title { font-size: 12px; }
  .card-body { padding: 12px; }

  /* Meeting room embed height */
  #jaas-container { height: 280px !important; }

  /* Users / members table — fewer visible columns; handled via .hide-xs */
  .hide-xs { display: none !important; }

  /* Form controls full-width */
  .form-control, select.form-control { font-size: 16px; } /* prevent iOS zoom */

  /* Buttons */
  .btn { padding: 8px 14px; font-size: 12px; }
}

/* ─── Utility: Sidebar overlay (click-away to close) ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 399;
}
.sidebar-overlay.visible { display: block; }

/* ─── Utility: Responsive table wrapper ─── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 540px; }

/* ─── Utility: Mobile-only / Desktop-only ─── */
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: revert; }
  .desktop-only { display: none !important; }
}

/* ─── Team Members specific responsive fixes ─── */
/* Tab bar: scrollable, never wraps (avoids layout break on narrow screens) */
.tm-tab-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 2px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border-color);
}
.tm-tab-bar::-webkit-scrollbar { display: none; }
.tm-tab {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: -1px;
}
.tm-tab.active {
  border-color: var(--border-color);
  background: var(--bg-card);
  color: var(--brand-primary);
}
.tm-tab:not(.active) {
  color: var(--text-secondary);
  background: transparent;
}
.tm-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 4px;
}
.tm-divider {
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0 8px;
  flex-shrink: 0;
}

/* ─── Team Members card on mobile — hide lower-priority columns ─── */
@media (max-width: 768px) {
  .tm-col-email   { display: none; }
  .tm-col-lga     { display: none; }
}
@media (max-width: 480px) {
  .tm-col-ward    { display: none; }
  .tm-col-status  { display: none; }
}

/* ─── Coordination Network tabs (dashboard) — mobile scroll ─── */
.coord-net-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 2px 16px 0;
}
.coord-net-tabs::-webkit-scrollbar { display: none; }

/* ─── Members table — card layout on very small screens ─── */
@media (max-width: 480px) {
  .members-table thead { display: none; }
  .members-table, .members-table tbody, .members-table tr, .members-table td { display: block; width: 100%; }
  .members-table tr {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 14px;
    position: relative;
  }
  .members-table td { padding: 2px 0; border: none; font-size: 12px; }
  .members-table td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
    margin-bottom: 2px;
  }
  .members-table td.tbl-num { position: absolute; top: 10px; right: 14px; font-size: 11px; color: var(--text-muted); }
  .members-table td.tbl-num::before { display: none; }
  .member-name-cell { flex-wrap: nowrap; }
}

/* ─── Card header flex on small screens — ensure button never gets clipped ─── */
@media (max-width: 600px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .card-header > *:last-child:not(:first-child) {
    align-self: flex-start;
  }
}

/* ─── Form grids — already inline in views using display:grid; override ─── */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 340px"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── 27. Scrollbar global ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE OVERFLOW FIX — appended patch
   Prevents horizontal scrolling on any viewport size.
   Targets inline grid/flex styles that bypass breakpoints.
═══════════════════════════════════════════════════════════════ */

/* ── Global overflow guard ─────────────────────────────────── */
.main-wrapper,
.page-content {
  min-width: 0;
  max-width: 100%;
}

/* Topbar must never be pushed off-screen */
.topbar {
  min-width: 0;
  max-width: 100%;
  /* NOT overflow:hidden — that clips .avatar-dropdown, which is positioned
     absolute and spills below the topbar's bounds. Horizontal overflow is
     already contained by min/max-width above and .topbar-breadcrumb's own
     overflow:hidden below. */
}
.topbar-breadcrumb {
  min-width: 0;
  overflow: hidden;
}
.topbar-breadcrumb strong,
.topbar-breadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-actions {
  flex-shrink: 0;
}

/* ── Inline repeat(6,1fr) grids — classification pages ────── */
/* Super admin classification, LGA classification, state classification */
@media (max-width: 1280px) {
  .kpi-grid[style*="repeat(6"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .kpi-grid[style*="repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .kpi-grid[style*="repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Inline repeat(4,1fr) grids — state dashboard, heatmap bottom stats ── */
@media (max-width: 1024px) {
  .kpi-grid[style*="repeat(4"],
  .dash-grid[style*="repeat(4"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .kpi-grid[style*="repeat(4"],
  .dash-grid[style*="repeat(4"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Inline repeat(3,1fr) grids — reports, roles, daily_report ── */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Sentiment / priority inline 5-col grid (interview form, create_incident) ── */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 400px) {
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── create_incident 4-col priority grid ── */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── map-tx-row — super admin dashboard ── */
@media (max-width: 1200px) {
  .map-tx-row {
    grid-template-columns: 1fr !important;
  }
  .bottom-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  .bottom-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Dash grid 2-col state dashboard ── */
@media (max-width: 768px) {
  .dash-grid[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Summary tiles (4-col in super admin coord panel) ── */
@media (max-width: 900px) {
  .summary-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .summary-tiles {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── KPI grid with inline override (pu/dashboard 3-col, state 4-col) ── */
@media (max-width: 768px) {
  .kpi-grid[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* State dashboard 4-col kpi already handled above */
}

/* ── Tables — always in a scroll wrapper, never break layout ── */
table {
  max-width: 100%;
}
.table-scroll,
[style*="overflow-x:auto"],
[style*="overflow-x: auto"] {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Card max-width should be bounded by viewport ── */
.card[style*="max-width"] {
  max-width: min(100%, var(--card-max, 760px)) !important;
  width: 100%;
}

/* ── Topbar actions — hide less-critical items on very small screens ── */
@media (max-width: 360px) {
  #langToggle {
    display: none !important;
  }
}

/* ── Meetings layout ── */
@media (max-width: 768px) {
  .meeting-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ── Auth card ── */
@media (max-width: 480px) {
  .auth-card {
    padding: 24px 20px;
  }
}