/* ============================================================
   LAGOS STATE VDMS — Design System
   ============================================================ */

:root {
  --green-primary: #004B23;
  --green-deep: #003B1C;
  --green-active: #005C29;
  --green-emerald: #008744;
  --green-success: #059669;
  --green-soft: #ECFDF5;
  --green-text: #065F46;
  --blue-primary: #0047BA;
  --blue-dark: #024CAA;
  --blue-deep: #003882;
  --blue-info: #1976D2;
  --blue-info-light: #3B82F6;
  --gold: #F5A623;
  --gold-dark: #EAB308;
  --red: #D32F2F;
  --red-light: #EF4444;
  --purple: #7C3AED;
  --page-bg: #F3F4F6;
  --card-bg: #FFFFFF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text-primary: #1F2937;
  --text-dark: #111827;
  --text-navy: #0A192F;
  --text-muted: #6B7280;
  --text-subtle: #4B5563;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.06);
  --header-h: 72px;
  --sidebar-w: 260px;
}

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

html, body {
  font-family: 'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--page-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s ease;
  font-family: inherit; text-decoration: none;
}
.btn-primary { background: var(--blue-deep); color: #fff; }
.btn-primary:hover { background: var(--blue-primary); text-decoration: none; }
.btn-success { background: var(--green-emerald); color: #fff; }
.btn-success:hover { background: var(--green-active); text-decoration: none; }
.btn-outline { background: #fff; color: var(--text-subtle); border-color: var(--border-strong); }
.btn-outline:hover { background: #F9FAFB; text-decoration: none; }
.btn-danger-outline { background: #fff; color: var(--red); border-color: #FECACA; }
.btn-hold { background: #FEE2E2; color: #991B1B; }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 18px; font-size: 15px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ==================== PILLS ==================== */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pill-green { background: #D1FAE5; color: #065F46; }
.pill-blue { background: #DBEAFE; color: #1E40AF; }
.pill-yellow { background: #FEF3C7; color: #92400E; }
.pill-red { background: #FEE2E2; color: #991B1B; }
.pill-purple { background: #EDE9FE; color: #5B21B6; }
.pill-gray { background: #F3F4F6; color: #374151; }

/* ==================== CARDS ==================== */
.card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.card-head .link { font-size: 12px; font-weight: 600; color: var(--blue-dark); }
.card-body { padding: 18px 20px; }

/* ==================== INPUTS ==================== */
.input-group { position: relative; }
.input-group .icon-left {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #9CA3AF; pointer-events: none;
}
.input-group .icon-right {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: #9CA3AF; cursor: pointer; background: none; border: none; padding: 0;
}
.form-input {
  width: 100%; padding: 12px 14px 12px 42px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--text-dark);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { outline: none; border-color: var(--blue-primary); box-shadow: 0 0 0 3px rgba(0,71,186,0.1); }
.form-input::placeholder { color: #9CA3AF; }
.form-input.no-icon { padding-left: 14px; }

/* ============================================================
   LOGIN — 50/50 split layout
   Left hero at 1x, right card at ~1.5x visual scale.
   ============================================================ */

html, body { height: 100%; }

.login-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #E8F4FD;
}

/* Photo layer */
.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ---------- LEFT (hero) at natural 100% ---------- */
.login-hero-pane {
  position: relative;
  z-index: 2;
  padding: 48px 24px 40px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #0A192F;
  min-width: 0;
}

.login-hero-pane .brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-hero-pane .brand-lockup .line1 {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #0A192F;
}
.login-hero-pane .brand-lockup .line2 {
  font-size: 10.5px;
  letter-spacing: 1.8px;
  color: #4B5563;
  text-transform: uppercase;
  margin-top: 1px;
}

.login-hero-pane .login-hero {
  max-width: 500px;
  margin: auto 0;
}
.login-hero-pane .login-hero h1 {
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  color: #0A192F;
  margin: 0 0 12px 0;
  letter-spacing: -0.4px;
}
.login-hero-pane .login-hero .tagline {
  font-size: 17px;
  color: #374151;
  margin: 0 0 28px 0;
}
.login-hero-pane .feature-pills {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.login-hero-pane .feature-pill {
  width: 88px;
  text-align: center;
}
.login-hero-pane .feature-pill .badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
  color: #fff;
}
.login-hero-pane .feature-pill .label {
  font-size: 10.5px;
  color: #1F2937;
  line-height: 1.3;
  font-weight: 500;
}

.login-hero-pane .login-bottom-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #fff;
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.login-hero-pane .login-bottom-tagline .bar {
  width: 4px; height: 20px;
  background: #10B981;
  border-radius: 2px;
}

/* ---------- RIGHT (card) — everything below is at 1.5x ---------- */
.login-card-pane {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-width: 0;
  /* Give the right half some extra size headroom */
  transform-origin: center center;
}

/* The scale wrapper: everything inside is 1.5x */
.login-card-scale {
  /* 1.5x visual scale */
  transform: scale(1.5);
  transform-origin: center center;
  /* Reserve a compact box; the scale just magnifies it visually */
  width: 340px;
}

/* Card content itself — designed at ~340px wide and standard type sizes.
   The wrapper scales it up to ~510px visual width. */
.login-card {
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  padding: 26px 26px 20px;
  box-shadow:
    0 12px 40px rgba(10,25,47,0.16),
    0 2px 10px rgba(10,25,47,0.06);
  text-align: center;
}

.login-card .crest-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.login-card .brand-title {
  font-size: 13px;
  font-weight: 800;
  color: #005C29;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.login-card .brand-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: #005C29;
  letter-spacing: 1.6px;
  margin-top: 1px;
}
.login-card .brand-sys {
  font-size: 10.5px;
  color: #6B7280;
  margin-top: 3px;
  margin-bottom: 16px;
}

.login-card h2 {
  font-size: 19px;
  font-weight: 700;
  color: #0A192F;
  margin: 0 0 3px 0;
}
.login-card .sub {
  font-size: 11.5px;
  color: #6B7280;
  margin: 0 0 16px 0;
}

.login-card .form-row { margin-bottom: 10px; }
.login-card .form-input {
  padding: 11px 14px 11px 40px;
  font-size: 13px;
  border-radius: 8px;
}
.login-card .input-group .icon-left { left: 12px; }
.login-card .input-group .icon-right { right: 12px; }

.login-card .form-utils {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  margin: 4px 0 14px;
  text-align: left;
}
.login-card .form-utils label { display: inline-flex; align-items: center; gap: 6px; color: #4B5563; cursor: pointer; }
.login-card .form-utils input[type=checkbox] { accent-color: #003882; }
.login-card .form-utils a { color: #024CAA; font-weight: 500; }

.login-card .btn { font-size: 13.5px; }
.login-card .btn-lg { padding: 11px 16px; gap: 8px; }
.login-card .btn-primary { background: #0A192F; }
.login-card .btn-primary:hover { background: #003882; }

.login-card .divider {
  position: relative;
  text-align: center;
  margin: 12px 0;
  font-size: 10px;
  color: #9CA3AF;
}
.login-card .divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #E5E7EB;
}
.login-card .divider span {
  position: relative;
  background: #fff;
  padding: 0 10px;
}

.login-card .btn-outline {
  padding: 10px 16px;
  font-size: 12.5px;
  border: 1px solid #D1D5DB;
  background: #fff;
  color: #374151;
  border-radius: 8px;
}
.login-card .btn-outline:hover { background: #F9FAFB; }

.login-card .security-notice {
  display: flex;
  gap: 9px;
  padding: 9px 11px;
  margin-top: 13px;
  background: #ECFDF5;
  border-radius: 8px;
  text-align: left;
}
.login-card .security-notice .head {
  font-weight: 700;
  font-size: 10.5px;
  color: #065F46;
  margin-bottom: 2px;
}
.login-card .security-notice .body {
  font-size: 9.5px;
  color: #047857;
  line-height: 1.4;
}

.login-card .login-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #6B7280;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #F3F4F6;
}
.login-card .login-foot .links { display: flex; gap: 8px; }
.login-card .login-foot a { color: #6B7280; }

/* ---------- Responsive — shrink the scale, never break ---------- */

@media (max-width: 1400px) {
  .login-card-scale { transform: scale(1.35); }
}
@media (max-width: 1200px) {
  .login-card-scale { transform: scale(1.20); width: 320px; }
}
@media (max-width: 1000px) {
  .login-card-scale { transform: scale(1.10); width: 320px; }
}

@media (max-height: 900px) and (min-width: 901px) {
  .login-card-scale { transform: scale(1.25); }
}
@media (max-height: 780px) and (min-width: 901px) {
  .login-card-scale { transform: scale(1.10); }
}
@media (max-height: 700px) and (min-width: 901px) {
  .login-card-scale { transform: scale(1.00); }
}

/* ---------- Mobile: single column, card centered over photo ---------- */
@media (max-width: 900px) {
  .login-shell { display: block; }
  .login-hero-pane {
    position: absolute;
    inset: 0;
    padding: 20px;
    justify-content: space-between;
    pointer-events: none;
  }
  .login-hero-pane .login-hero,
  .login-hero-pane .feature-pills { display: none; }
  .login-hero-pane .brand-lockup { justify-content: center; }
  .login-hero-pane .login-bottom-tagline { justify-content: center; }

  .login-card-pane {
    position: absolute;
    inset: 0;
    padding: 20px;
    align-items: center;
    justify-content: center;
  }
  .login-card-scale {
    transform: none;
    width: 100%;
    max-width: 400px;
  }
}

/* ==================== APP LAYOUT (unchanged) ==================== */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 20px; z-index: 100;
}
.app-header .brand { display: flex; align-items: center; gap: 12px; min-width: calc(var(--sidebar-w) - 24px); }
.app-header .brand .title { font-weight: 800; font-size: 15px; color: var(--green-primary); letter-spacing: .3px; }
.app-header .brand .sub { font-size: 11px; color: var(--text-muted); }
.header-search { flex: 1; max-width: 460px; margin: 0 auto; position: relative; }
.header-search input { width: 100%; padding: 9px 40px 9px 16px; border-radius: var(--radius-pill); background: var(--page-bg); border: 1px solid transparent; font-size: 13px; font-family: inherit; }
.header-search input:focus { outline: none; background: #fff; border-color: var(--border-strong); }
.header-search .icon-right { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--text-subtle); display: flex; align-items: center; justify-content: center; }
.icon-btn .dot { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--green-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.user-chip .name { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.user-chip .role { font-size: 11px; color: var(--text-muted); }
.tricolor { position: fixed; top: var(--header-h); left: 0; right: 0; height: 3px; z-index: 99; display: flex; }
.tricolor .g { flex: 2; background: var(--green-active); }
.tricolor .y { flex: 1; background: var(--gold); }
.tricolor .b { flex: 1; background: var(--blue-primary); }

.app-sidebar { position: fixed; top: calc(var(--header-h) + 3px); left: 0; bottom: 0; width: var(--sidebar-w); background: var(--green-deep); color: #D1D5DB; padding: 16px 0; overflow-y: auto; z-index: 90; display: flex; flex-direction: column; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 13.5px; color: #D1D5DB; border-left: 3px solid transparent; cursor: pointer; transition: background .12s; text-decoration: none; width: 100%; background: transparent; border-top: none; border-right: none; border-bottom: none; font-family: inherit; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,0.04); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--green-active); color: #fff; border-left-color: #10B981; font-weight: 600; }
.nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.nav-item .chev { margin-left: auto; opacity: .6; transition: transform .18s ease; }
.nav-sub { background: var(--green-emerald); padding: 6px 0; }
.nav-sub a { display: block; padding: 8px 20px 8px 50px; font-size: 12.5px; color: #ECFDF5; border-left: 3px solid transparent; }
.nav-sub a:hover, .nav-sub a.active { background: rgba(0,0,0,0.15); color: #fff; text-decoration: none; border-left-color: #10B981; }
.sidebar-footer { margin-top: auto; padding: 20px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px; color: #86EFAC; font-style: italic; line-height: 1.4; }
.app-main { margin-left: var(--sidebar-w); padding-top: calc(var(--header-h) + 3px); min-height: 100vh; }
.app-content { padding: 24px 28px 40px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 700; color: var(--text-navy); }
.page-head .sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.breadcrumb { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.breadcrumb a { color: var(--text-muted); }

.metric-grid { display: grid; gap: 14px; margin-bottom: 20px; }
.metric-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.metric-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.metric-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.metric-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 10px; }
.metric-card .badge { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.metric-card .value { font-size: 22px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.metric-card .label { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.metric-card .delta { font-size: 10.5px; color: var(--text-muted); }
.metric-card .delta.up { color: var(--green-success); }
.metric-card .delta.down { color: var(--red); }
.badge-blue { background: var(--blue-info-light); }
.badge-orange { background: #F59E0B; }
.badge-yellow { background: var(--gold-dark); }
.badge-green { background: var(--green-success); }
.badge-red { background: var(--red-light); }
.badge-purple { background: var(--purple); }
.badge-navy { background: var(--blue-deep); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-70-30 { display: grid; grid-template-columns: 1.9fr 1fr; gap: 16px; }
.grid-60-40 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); background: #F9FAFB; white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid #F3F4F6; color: var(--text-primary); vertical-align: middle; }
.table tr:hover td { background: #FAFAFA; }
.table .voucher-link { font-weight: 600; color: var(--blue-dark); }

.pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 12px; color: var(--text-muted); }
.pagination .pages { display: flex; gap: 4px; }
.pagination .pages a, .pagination .pages span { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text-subtle); background: #fff; }
.pagination .pages .active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.toolbar select, .toolbar .filter-input { padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 12px; font-family: inherit; color: var(--text-subtle); background: #fff; }

.timeline { padding: 4px 0; position: relative; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: -10px; width: 2px; background: var(--border); }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.timeline-dot.green { background: var(--green-success); }
.timeline-dot.blue { background: var(--blue-info); }
.timeline-dot.red { background: var(--red-light); }
.timeline-dot.gray { background: #9CA3AF; }
.timeline-item .title { font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
.timeline-item .meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.tracker { list-style: none; }
.tracker li { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.tracker .dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; margin-top: 1px; }
.tracker .dot.done { background: var(--green-success); }
.tracker .dot.current { background: var(--blue-info-light); box-shadow: 0 0 0 4px rgba(59,130,246,0.15); }
.tracker .dot.pending { background: #fff; border: 2px solid #D1D5DB; }
.tracker .label { font-size: 12px; color: var(--text-subtle); }
.tracker li.current .label { color: var(--blue-dark); font-weight: 600; }
.tracker li.done .label { color: var(--green-text); font-weight: 600; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 20px; overflow-x: auto; }
.tab { padding: 12px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--blue-dark); border-bottom-color: var(--blue-primary); }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 12.5px; }
.kv dt { color: var(--text-muted); font-weight: 500; }
.kv dd { color: var(--text-dark); font-weight: 600; }

.action-box { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.action-box .title { font-size: 11px; font-weight: 700; color: #92400E; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }

.empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }

.donut-wrap { display: flex; align-items: center; gap: 20px; }
.legend { flex: 1; font-size: 12px; }
.legend-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #F3F4F6; }
.legend-row .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.chart-box { height: 220px; position: relative; }
.chart-box svg { width: 100%; height: 100%; }

@media (max-width: 1200px) {
  .metric-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
  .grid-70-30, .grid-60-40 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .metric-grid.cols-5, .metric-grid.cols-6 { grid-template-columns: 1fr 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .app-main { margin-left: 0; }
}

/* ============================================================
   LOGIN — Centered, floating card-in-shell
   - Background photo at viewport level
   - Everything else inside a bounded, max-width shell
   - Inner split uses flex fractions, not viewport %
   - Survives zoom, resize, and small viewports cleanly
   ============================================================ */

html, body { height: 100%; margin: 0; padding: 0; }

/* Viewport: photo + centered shell */
.login-shell {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  font-family: 'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
  background: #E8F4FD;
}

/* Photo layer — spans the entire viewport */
.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.login-shell:not(.has-photo) {
  background:
    linear-gradient(180deg, #DBEAFE 0%, #BAE6FD 45%, #005C29 100%);
}

/* The unified floating box */
.login-box {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  max-width: 1140px;
  min-height: 620px;
  max-height: calc(100vh - 64px);
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(10, 25, 47, 0.28),
    0 12px 32px rgba(10, 25, 47, 0.16);
}

/* ==================== LEFT (hero) ==================== */
.login-hero-pane {
  flex: 1.15;
  min-width: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 40px 44px 36px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #0A192F;
  overflow: hidden;
}
/* Keep the hero image in sync with the outer photo for a seamless look */
.login-hero-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center center;
  z-index: 0;
  /* Slight left-shift so the visible crop centers on the bridge */
  background-position-x: 30%;
}
/* Soft scrim on the left half so brand + hero read cleanly */
.login-hero-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.login-hero-pane > * { position: relative; z-index: 2; }

/* Brand lockup */
.login-hero-pane .brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-hero-pane .brand-lockup .line1 {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #0A192F;
}
.login-hero-pane .brand-lockup .line2 {
  font-size: 10.5px;
  letter-spacing: 1.8px;
  color: #4B5563;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Hero block */
.login-hero-pane .login-hero {
  max-width: 420px;
}
.login-hero-pane .login-hero h1 {
  font-size: clamp(26px, 2.2vw, 38px);
  line-height: 1.12;
  font-weight: 800;
  color: #0A192F;
  margin: 0 0 12px 0;
  letter-spacing: -0.4px;
}
.login-hero-pane .login-hero .tagline {
  font-size: clamp(13px, 1vw, 16px);
  color: #374151;
  margin: 0 0 26px 0;
}

/* Feature pills */
.login-hero-pane .feature-pills {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.login-hero-pane .feature-pill {
  width: 84px;
  text-align: center;
}
.login-hero-pane .feature-pill .badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.20);
}
.login-hero-pane .feature-pill .label {
  font-size: 10.5px;
  color: #1F2937;
  line-height: 1.28;
  font-weight: 500;
}

/* Bottom tagline */
.login-hero-pane .login-bottom-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #FFFFFF;
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
.login-hero-pane .login-bottom-tagline .bar {
  width: 4px;
  height: 22px;
  background: #10B981;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* ==================== RIGHT (auth card) ==================== */
.login-card-pane {
  flex: 0.85;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 40px 32px;
  box-sizing: border-box;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 22px 24px 18px;
  background: #ffffff;
  border-radius: 12px;
  text-align: center;
}

/* Card crest */
.login-card .crest-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

/* Card headings */
.login-card .brand-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #005C29;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.login-card .brand-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: #005C29;
  letter-spacing: 1.7px;
  margin-top: 1px;
}
.login-card .brand-sys {
  font-size: 11px;
  color: #6B7280;
  margin-top: 4px;
  margin-bottom: 18px;
}

.login-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0A192F;
  margin: 0 0 3px 0;
}
.login-card .sub {
  font-size: 12px;
  color: #6B7280;
  margin: 0 0 18px 0;
}

/* Inputs */
.login-card .form-row { margin-bottom: 10px; }
.login-card .input-group { position: relative; }
.login-card .input-group .icon-left {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #9CA3AF; pointer-events: none;
}
.login-card .input-group .icon-right {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #9CA3AF; cursor: pointer; background: none; border: none; padding: 0;
}
.login-card .form-input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.login-card .form-input::placeholder { color: #9CA3AF; }
.login-card .form-input:focus {
  outline: none;
  border-color: #003882;
  box-shadow: 0 0 0 3px rgba(0,56,130,0.10);
}

/* Remember / Forgot */
.login-card .form-utils {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin: 4px 0 14px;
}
.login-card .form-utils label {
  display: inline-flex; align-items: center; gap: 6px;
  color: #4B5563; cursor: pointer;
}
.login-card .form-utils input[type=checkbox] { accent-color: #003882; }
.login-card .form-utils a { color: #024CAA; font-weight: 500; }
.login-card .form-utils a:hover { text-decoration: underline; }

/* Buttons */
.login-card .btn-lg { padding: 12px 16px; font-size: 14px; gap: 8px; }
.login-card .btn-primary { background: #0A192F; }
.login-card .btn-primary:hover { background: #003882; }

/* Divider */
.login-card .divider {
  position: relative;
  text-align: center;
  margin: 14px 0;
  font-size: 10.5px;
  color: #9CA3AF;
}
.login-card .divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #E5E7EB;
}
.login-card .divider span {
  position: relative;
  background: #fff;
  padding: 0 10px;
}

/* OTP button */
.login-card .btn-outline {
  padding: 11px 16px;
  font-size: 13px;
  border: 1px solid #D1D5DB;
  background: #fff;
  color: #374151;
  border-radius: 8px;
}
.login-card .btn-outline:hover { background: #F9FAFB; }

/* Security notice */
.login-card .security-notice {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  margin-top: 14px;
  background: #ECFDF5;
  border-radius: 8px;
  text-align: left;
}
.login-card .security-notice .head {
  font-weight: 700;
  font-size: 11px;
  color: #065F46;
  margin-bottom: 2px;
}
.login-card .security-notice .body {
  font-size: 10px;
  color: #047857;
  line-height: 1.4;
}

/* Card footer */
.login-card .login-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: #6B7280;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}
.login-card .login-foot .links { display: flex; gap: 8px; }
.login-card .login-foot a { color: #6B7280; }
.login-card .login-foot a:hover { color: #024CAA; }

/* ==================== RESPONSIVE ==================== */

/* Tablet: reduce outer padding, keep the split */
@media (max-width: 1080px) {
  .login-shell { padding: 24px; }
  .login-box { max-width: 100%; min-height: 560px; }
  .login-hero-pane { padding: 32px 32px 28px; }
  .login-card-pane { padding: 32px 24px; }
}

/* Narrow: keep the split but tighten type */
@media (max-width: 900px) {
  .login-shell { padding: 20px; }
  .login-box {
    flex-direction: column;
    min-height: 0;
    max-height: none;
  }
  .login-hero-pane {
    flex: 0 0 auto;
    padding: 28px 24px 24px;
    min-height: 220px;
  }
  .login-hero-pane .login-hero { max-width: none; }
  .login-hero-pane .login-hero h1 { font-size: 24px; }
  .login-hero-pane .feature-pills { display: none; }
  .login-hero-pane .login-bottom-tagline { font-size: 11px; }
  .login-card-pane {
    flex: 1;
    padding: 24px 20px 28px;
  }
  .login-card { max-width: 420px; }
}

/* Mobile: shell becomes a full-height column of content on the photo */
@media (max-width: 600px) {
  .login-shell {
    padding: 16px;
    align-items: flex-start;
    min-height: 100vh;
  }
  .login-box {
    border-radius: 16px;
    overflow: hidden;
  }
  .login-hero-pane {
    padding: 24px 20px 20px;
    min-height: 0;
  }
  .login-hero-pane .brand-lockup { margin-bottom: 8px; }
  .login-hero-pane .login-hero h1 { font-size: 20px; margin-bottom: 6px; }
  .login-hero-pane .login-hero .tagline { font-size: 12.5px; margin-bottom: 12px; }
  .login-card-pane { padding: 20px 16px 22px; }
}

/* ============================================================
   LOGIN — Shadowless + mobile refinement
   Overrides any earlier shadow declarations.
   ============================================================ */

/* Remove the box shadow entirely; use a hairline border instead */
.login-box {
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.55);
}

/* Remove shadows on the floating card's inner surfaces too */
.login-card {
  box-shadow: none !important;
}

/* Remove shadows from pills, chips, buttons inside the login */
.login-hero-pane .feature-pill .badge {
  box-shadow: none !important;
}
.login-hero-pane .login-bottom-tagline .bar {
  box-shadow: none !important;
}
.login-card .btn,
.login-card .form-input {
  box-shadow: none !important;
}
.login-card .form-input:focus {
  /* Keep the focus ring — it's an a11y affordance, not decorative */
  box-shadow: 0 0 0 3px rgba(0,56,130,0.10) !important;
}

/* ============================================================
   MOBILE — clean stacked layout, no overflow
   ============================================================ */

@media (max-width: 900px) {
  /* Shell: less padding, top-align so the box hugs the top */
  .login-shell {
    padding: 16px;
    align-items: flex-start;
    min-height: 100vh;
  }

  .login-box {
    flex-direction: column;
    border-radius: 16px;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  /* Hero becomes a compact banner */
  .login-hero-pane {
    flex: 0 0 auto;
    padding: 22px 20px 20px;
    min-height: 0;
    background-position: center 30%;
  }

  .login-hero-pane .brand-lockup {
    gap: 10px;
    margin-bottom: 14px;
  }
  .login-hero-pane .brand-lockup img {
    width: 40px !important;
    height: 40px !important;
  }
  .login-hero-pane .brand-lockup .line1 { font-size: 12.5px; }
  .login-hero-pane .brand-lockup .line2 { font-size: 9.5px; letter-spacing: 1.4px; }

  .login-hero-pane .login-hero {
    max-width: none;
    padding: 0;
  }
  .login-hero-pane .login-hero h1 {
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 6px;
  }
  .login-hero-pane .login-hero .tagline {
    font-size: 13px;
    margin-bottom: 0;
  }
  .login-hero-pane .feature-pills { display: none; }
  .login-hero-pane .login-bottom-tagline {
    font-size: 10.5px;
    margin-top: 14px;
    padding: 0;
  }
  .login-hero-pane .login-bottom-tagline .bar {
    height: 16px;
  }

  /* Card pane fills the rest */
  .login-card-pane {
    flex: 1 1 auto;
    padding: 22px 20px 24px;
    background: #ffffff;
  }
  .login-card {
    max-width: 100%;
    padding: 0;
    background: transparent;
  }

  /* Slightly larger touch targets on mobile */
  .login-card .form-input {
    padding: 13px 14px 13px 42px;
    font-size: 14px;
  }
  .login-card .btn-lg {
    padding: 14px 16px;
    font-size: 14.5px;
  }
  .login-card .btn-outline {
    padding: 13px 16px;
    font-size: 13.5px;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .login-shell { padding: 10px; }
  .login-box { border-radius: 14px; }

  .login-hero-pane { padding: 18px 16px 16px; }
  .login-hero-pane .login-hero h1 { font-size: 19px; }
  .login-hero-pane .login-hero .tagline { font-size: 12px; }

  .login-card-pane { padding: 18px 16px 20px; }

  .login-card .brand-title { font-size: 12.5px; }
  .login-card .brand-sub   { font-size: 9px; }
  .login-card .brand-sys   { font-size: 10.5px; margin-bottom: 14px; }
  .login-card h2           { font-size: 18px; }
  .login-card .sub         { font-size: 11.5px; margin-bottom: 14px; }

  .login-card .security-notice { padding: 8px 10px; margin-top: 12px; }
  .login-card .security-notice .body { font-size: 9.5px; }
  .login-card .login-foot { font-size: 10px; margin-top: 12px; padding-top: 10px; }
}

/* ============================================================
   LOGIN — Final: solid background + subtle box shadow
   ============================================================ */

/* 1. Kill the viewport-level photo layer */
.login-bg { display: none !important; }

/* 2. Solid background on the shell that blends with Lagos greens/blues */
.login-shell {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 92, 41, 0.08), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(0, 71, 186, 0.06), transparent 45%),
    linear-gradient(180deg, #F1F6F3 0%, #E6EEE9 100%) !important;
}

/* 3. Restore a subtle shadow on the floating box only */
.login-box {
  box-shadow:
    0 20px 48px rgba(10, 25, 47, 0.10),
    0 6px 16px rgba(10, 25, 47, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  background: #ffffff;
}

/* 4. The hero pane still carries the photo — it's the *inside* of the box
      that shows Lagos imagery, not the page behind it. Keep it. */
.login-hero-pane {
  background-color: #0A192F; /* fallback if the image fails to load */
}
.login-hero-pane::before {
  /* The photo shows through this layer inside the box only */
  opacity: 1;
}
/* Keep a soft scrim inside the hero pane so the text reads over the photo */
.login-hero-pane::after {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.15) 55%,
      rgba(255,255,255,0.00) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.00) 35%);
}

/* 5. Card pane stays solid white (no image behind the form) */
.login-card-pane {
  background: #ffffff;
}
.login-card {
  box-shadow: none !important; /* no shadow on the internal card */
  background: #ffffff;
}

/* 6. Mobile — no change to structure, just inherit the solid bg */
@media (max-width: 900px) {
  .login-shell {
    background:
      radial-gradient(circle at 50% 15%, rgba(0, 92, 41, 0.08), transparent 55%),
      linear-gradient(180deg, #F1F6F3 0%, #E6EEE9 100%) !important;
  }
  .login-box {
    box-shadow:
      0 12px 32px rgba(10, 25, 47, 0.10),
      0 3px 10px rgba(10, 25, 47, 0.05) !important;
  }
}

/* ============================================================
   SIDEBAR — Brand blue base, green active state
   Overrides earlier green-based sidebar rules.
   ============================================================ */

/* Base: brand blue gradient */
.app-sidebar {
  background: linear-gradient(180deg, #0A192F 0%, #003882 100%) !important;
  color: #C7D2E0;
}

/* Default nav item */
.app-sidebar .nav-item {
  color: #C7D2E0;
  border-left: 3px solid transparent;
  background: transparent;
}
.app-sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.app-sidebar .nav-item svg { color: currentColor; }
.app-sidebar .nav-item .chev { color: currentColor; opacity: 0.55; }

/* Active (current route or expanded section header) — Lagos green highlight */
.app-sidebar .nav-item.active,
.app-sidebar .nav-item.is-open {
  background: #008744 !important;
  color: #ffffff !important;
  border-left-color: #10B981 !important;
  font-weight: 600;
}
.app-sidebar .nav-item.active svg,
.app-sidebar .nav-item.is-open svg { color: #ffffff; }

/* Sub-menu: slightly deeper blue so it reads as nested */
.app-sidebar .nav-sub {
  background: rgba(0, 0, 0, 0.18);
  padding: 6px 0;
}
.app-sidebar .nav-sub a {
  color: #B8C7DB;
  border-left: 3px solid transparent;
  padding: 8px 20px 8px 50px;
  display: block;
  font-size: 12.5px;
  text-decoration: none;
}
.app-sidebar .nav-sub a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
/* Active sub-item — green accent */
.app-sidebar .nav-sub a.active {
  background: rgba(0, 135, 68, 0.35);
  color: #ffffff;
  border-left-color: #10B981;
  font-weight: 600;
}

/* Sidebar footer — subtle blue-toned text on the gradient */
.sidebar-footer {
  color: #86EFAC !important;
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

/* ---------- Metric grid: add cols-4 (was missing) ---------- */
.metric-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Make every metric grid degrade gracefully on narrower screens */
@media (max-width: 1200px) {
  .metric-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .metric-grid.cols-4,
  .metric-grid.cols-5,
  .metric-grid.cols-6,
  .metric-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .metric-grid.cols-4,
  .metric-grid.cols-5,
  .metric-grid.cols-6,
  .metric-grid.cols-3 { grid-template-columns: 1fr; }
}