/* ===== GLOBAL RESET & VARIABLES ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #732269;
  --primary-dark: #5a1b52;
  --primary-light: #9b3d8e;
  --bg: #f4f6f9;
  --white: #ffffff;
  --text: #333333;
  --text-light: #666666;
  --border: #e0e0e0;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --radius: 8px;
}
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== LOGIN PAGE ===== */
.login-page { min-height: 100vh; display: flex; }
.login-container { display: flex; width: 100%; min-height: 100vh; }
.login-left { flex: 1; background: linear-gradient(135deg, #732269 0%, #4a1544 50%, #2d0d28 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.login-left::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); animation: pulse 8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.login-hero { text-align: center; z-index: 1; padding: 40px; }
.hero-overlay h1 { color: white; font-size: 2.5rem; line-height: 1.3; margin-bottom: 15px; }
.hero-overlay p { color: rgba(255,255,255,0.8); font-size: 1.2rem; }
.login-right { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--white); }
.login-form-container { width: 100%; max-width: 420px; padding: 40px; }
.login-logo { text-align: center; margin-bottom: 30px; }
.logo-img { height: 60px; }
.login-form-container h2 { text-align: center; color: var(--primary); margin-bottom: 5px; font-size: 1.3rem; }
.login-subtitle { text-align: center; color: var(--text-light); margin-bottom: 25px; }
.login-error { background: #fee; border: 1px solid #e74c3c; color: #e74c3c; padding: 10px 15px; border-radius: var(--radius); margin-bottom: 15px; font-size: 13px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text); font-size: 13px; }
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon i:first-child { position: absolute; left: 12px; color: var(--text-light); z-index: 1; }
.input-with-icon input { padding-left: 38px; }
/* Eye-icon (password visibility toggle) — reset browser button defaults +
   vertically centre inside the input. Padding-right on the input itself is
   added in the rule below so the icon never overlaps the typed text. */
.input-with-icon input[type="password"],
.input-with-icon input.has-toggle { padding-right: 40px; }
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1;
}
.toggle-password:hover { color: var(--primary); }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; transition: border-color 0.2s; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(115,34,105,0.1); }
textarea { resize: vertical; min-height: 80px; }
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: white; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: #f8f0f7; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-login { width: 100%; justify-content: center; padding: 12px; font-size: 16px; margin-bottom: 15px; }
.forgot-password { display: block; text-align: center; color: var(--primary); font-size: 13px; }
.login-footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-light); font-size: 12px; }

/* ===== APP LAYOUT ===== */
.app-container { display: flex; flex-direction: column; min-height: 100vh; }
.app-header { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; height: 64px; background: var(--white); border-bottom: 2px solid var(--primary); box-shadow: var(--shadow); z-index: 100; }
.header-left { display: flex; align-items: center; gap: 15px; }
.header-logo { height: 40px; }
.header-title h1 { font-size: 1.1rem; color: var(--primary); }
.header-right { position: relative; display: flex; align-items: center; gap: 6px; }
.header-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 12px; border-radius: var(--radius); transition: background 0.2s; }
.header-user:hover { background: #f8f0f7; }
.user-avatar { font-size: 28px; color: var(--primary); }
.user-info { display: flex; flex-direction: column; }
.user-name { font-weight: 600; font-size: 13px; }
.user-role { font-size: 11px; color: var(--text-light); }
.user-menu { position: absolute; top: 100%; right: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 180px; z-index: 200; }
.user-menu a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); font-size: 13px; transition: background 0.2s; text-decoration: none; }
.user-menu a:hover { background: #f8f0f7; color: var(--primary); }

/* ===== NAVIGATION ===== */
/* 2026-06-11 v2: Reverted overflow-x:auto from .app-nav — it was
   creating a scroll container that CLIPPED the submenu dropdowns
   ("FLP", "Assessment", etc.), making them invisible AND unclickable.
   The real onclick handlers live on .submenu li, so hiding the
   submenu broke top-nav navigation entirely.
   white-space:nowrap on .nav-item still keeps "Target and Report" on
   one line; padding tightened so more items fit before any wrap. */
.app-nav { background: var(--primary); padding: 0 24px; }
.nav-menu { display: flex; list-style: none; gap: 0; flex-wrap: wrap; }
.nav-item { color: rgba(255,255,255,0.85); padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; position: relative; transition: all 0.2s; white-space: nowrap; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,0.15); color: white; }
.nav-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: white; }
.sub-arrow { font-size: 10px; margin-left: 4px; }
.has-submenu { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 220px; z-index: 150; list-style: none; }
.has-submenu:hover .submenu { display: block; }
/* Touch-device support — without this rule, tapping a parent like FLP /
   Survey / Assessment on a phone or tablet did nothing (the :hover rule
   above can't fire without a mouse). The .submenu-open class is toggled
   by the click handler in _initMobileNavToggle (app.js); both rules
   coexist so mouse-driven hover still works on desktop. */
.has-submenu.submenu-open .submenu { display: block; }
.submenu li { padding: 10px 16px; color: var(--text); font-size: 13px; cursor: pointer; transition: background 0.2s; }
.submenu li:hover { background: #f8f0f7; color: var(--primary); }

/* ===== MAIN CONTENT ===== */
.app-main { flex: 1; padding: 20px 24px; }
.page { display: none; }
.page.active { display: block; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.breadcrumb { color: var(--text-light); font-size: 13px; }
.breadcrumb i { margin-right: 5px; }
.breadcrumb a { color: var(--primary); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; color: var(--primary-dark); }
.breadcrumb .bc-sep { margin: 0 6px; color: #bbb; font-size: 12px; }

/* ===== FILTER PANEL =====
   Universally wraps onto multiple rows on narrow viewports — no more
   horizontal scrollbar at the bottom of the filter row on smaller
   laptops. Action buttons (Search/Reset/Export) share a uniform
   min-width so the trio sits in a clean grid. */
.filter-panel { display: flex; align-items: flex-end; gap: 10px; padding: 12px 20px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; flex-wrap: wrap; overflow-x: visible; }
.filter-group { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.filter-group label { font-size: 11px; font-weight: 600; color: var(--text-light); white-space: nowrap; line-height: 1.3; height: 16px; }
/* Force every filter input + select to the SAME height (34px) using
   box-sizing:border-box + zero vertical padding + line-height. Buttons
   below share this exact height so the whole row sits on a single
   baseline regardless of fields vs buttons. */
.filter-group input, .filter-group select {
  min-width: 110px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.2;
  box-sizing: border-box;
}
/* 2026-06-03: lock MGJ filter dropdowns + search input to a fixed width.
   Native <select> elements expand to fit their longest <option> text;
   when the State change re-populates the District/Centre dropdown with
   shorter or longer place names, the row visibly reflows. Pinning a
   fixed width per filter slot stops the State/District/Centre dropdowns
   and the Search input from changing size when their options or value
   change. MGJ-scoped so it doesn't perturb FLP/AK list layouts.
   2026-06-03 (v2): the Add-Assessment State + Centre were originally in
   this list but they live inside a .form-grid (not a .filter-panel), so
   pinning them to 180px shrank them below the Assessment Type field on
   the same row. Removed them so they fill the form-grid column like
   Assessment Type does. */
#page-mgjDashboard .filter-group select,
#page-mgjList .filter-group select,
#page-mgjList .filter-group input:not([type="date"]),
#page-mgjAssessmentList .filter-group select,
#page-mgjAssessmentList .filter-group input:not([type="date"]) {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  text-overflow: ellipsis;
}
.filter-group span { align-self: center; color: var(--text-light); font-size: 12px; }
.filter-group.filter-duration { display: flex; flex-direction: column; gap: 4px; }
.filter-group.filter-duration .duration-inputs { display: flex; align-items: center; gap: 6px; }
.filter-group.filter-duration .duration-inputs input { min-width: 120px; height: 34px; }

/* Filter-panel buttons — pinned to the SAME 34px height as filter
   inputs (above) so Search/Reset/Export sit on the same baseline as
   the dropdowns rather than appearing slightly lower. Border + zero
   vertical padding keep the box exactly 34px (outline variant
   included — its 1px border counts toward border-box height). */
.filter-panel .btn {
  height: 34px;
  min-width: 100px;
  padding: 0 14px;
  font-size: 13px;
  line-height: 1;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* Keep Search + Reset + Export glued together as a unit — if the row
   has to wrap, they wrap together so Export never strays onto a row
   by itself. */
.filter-panel .btn + .btn { margin-left: 0; }

/* Action-button cluster (Search / Reset / Export grouped in a single
   wrapper div on pages that opt-in). flex-wrap:nowrap inside this
   wrapper prevents Export from breaking onto its own row even when
   the outer .filter-panel wraps. Sits immediately after the last
   filter dropdown — no auto-margin, no big gap. */
.filter-panel .filter-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* FLP list — Batch dropdown often has the longest text ("Batch 1
   (2025-26)") so it tends to inflate the row width. Cap it tightly
   so Export can sit on the same row on common 1366px laptops.
   Also tighten the date-range inputs and name field for the same
   reason — the FLP list has the most filter columns of any page. */
#flpFilterBatch { min-width: 120px; max-width: 150px; }
#page-flpList .filter-group input,
#page-flpList .filter-group select { min-width: 100px; }
#page-flpList .filter-group.filter-duration .duration-inputs input { min-width: 110px; }
#page-flpList .filter-panel .btn { min-width: 90px; padding: 0 12px; }
#page-flpList .filter-actions { gap: 6px; }

/* ===== Alumni Tracking — form action bar ===== */
.alumni-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 18px 24px;
  border-top: 1px solid #eaeaea;
  background: #fafafa;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.alumni-form-actions .btn { padding: 10px 22px; font-size: 14px; }
.alumni-form-actions .btn i { margin-right: 6px; }
/* ===== AAG Registration modal — single-column, generous spacing ===== */
.aag-reg-modal { max-width: 460px; width: 92%; }
.aag-reg-body { padding: 22px 26px 8px; }
.aag-reg-banner {
  margin-bottom: 18px; padding: 14px 16px;
  background: linear-gradient(135deg, #faf5f9 0%, #fff 100%);
  border: 1px solid #efe0ec; border-left: 4px solid var(--primary);
  border-radius: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.aag-reg-banner small { color: var(--text-light); }
.aag-reg-grid {
  display: grid;
  grid-template-columns: 1fr;   /* always one column → field per row */
  gap: 16px;
}
.aag-reg-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.aag-reg-field input,
.aag-reg-field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ddd; border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.aag-reg-field input:focus,
.aag-reg-field select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(115, 34, 105, 0.12);
}
.aag-reg-field input[readonly] {
  background: #f5f5f5; cursor: not-allowed;
}
.aag-reg-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 26px 22px;
  border-top: 1px solid #eee; margin-top: 12px;
  background: #fafafa;
  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.aag-reg-footer .btn { padding: 9px 22px; font-size: 14px; min-width: 110px; }
@media (max-width: 520px) {
  .aag-reg-modal { width: 96%; }
  .aag-reg-body { padding: 18px 18px 6px; }
  .aag-reg-footer { padding: 14px 18px 18px; }
  .aag-reg-footer .btn { flex: 1; min-width: 0; }
}

/* Single right-aligned cluster — Cancel, Previous, Next, Submit sit side
   by side with consistent 14px gap (from .alumni-form-actions base rule).
   Keeps the footer pattern consistent with other forms across the app. */
.alumni-form-actions .alumni-nav-btn {
  min-width: 130px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .alumni-form-actions { flex-wrap: wrap; row-gap: 8px; justify-content: center; }
  .alumni-form-actions .alumni-nav-btn { min-width: 110px; }
}

/* ===== MGJ Topic Management — training-type tabs ===== */
.mgj-topic-tab {
  background: var(--white);
  border: 1px solid #d8d8d8;
  color: #555;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mgj-topic-tab:hover { border-color: var(--primary); color: var(--primary); }
.mgj-topic-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.mgj-topic-type-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: #f0f4ff;
  color: #3056d3;
  white-space: nowrap;
}
.mgj-topic-type-chip.tt-pakhwada-input    { background: #e8f4fd; color: #1976d2; }
.mgj-topic-type-chip.tt-pakhwada-sport    { background: #e8f5e9; color: #2e7d32; }
.mgj-topic-type-chip.tt-leadership-development { background: #fff3e0; color: #e65100; }
.mgj-topic-type-chip.tt-untyped { background: #f0f0f0; color: #888; }

/* ===== KPI CARDS ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 20px; }
.kpi-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; align-items: center; gap: 15px; border-left: 4px solid; transition: transform 0.2s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.kpi-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; flex-shrink: 0; }
.kpi-content h3 { font-size: 1.6rem; color: var(--text); }
.kpi-content p { font-size: 12px; color: var(--text-light); margin-top: 2px; }

/* ===== CHARTS ===== */
.charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px; }
.chart-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.chart-card h3 { font-size: 15px; color: var(--primary); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.chart-card canvas { max-height: 280px; }

/* ===== DATA TABLES ===== */
.table-container { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #f8f0f7; color: var(--primary); padding: 12px 15px; text-align: left; font-size: 13px; font-weight: 600; border-bottom: 2px solid var(--primary); white-space: nowrap; }
/* word-break + overflow-wrap let any single unbreakable token in a cell
   (long enrollment numbers, URLs, gibberish strings, etc.) wrap INSIDE
   the cell instead of forcing the whole table wider than the viewport.
   th above keeps `white-space:nowrap` so column titles stay one-line.   */
.data-table td { padding: 10px 15px; border-bottom: 1px solid var(--border); font-size: 13px; word-break: break-word; overflow-wrap: anywhere; }
.data-table tbody tr:hover { background: #faf5f9; }
.data-table.full-width { width: 100%; }

/* Detail-grid value spans (view pages): same wrap behaviour so a long
   single-token value doesn't blow out its grid column.                 */
.detail-item span { word-break: break-word; overflow-wrap: anywhere; }

/* Selects: cap width to their container so a long option label can't
   push the filter row past the viewport. The native dropdown popup is
   left untouched — users still see full option text on click.          */
select { max-width: 100%; text-overflow: ellipsis; }
.filter-group select { max-width: 100%; }
.table-input { width: 100%; padding: 6px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; }
.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: var(--white); border-radius: 0 0 var(--radius) var(--radius); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-light); }
.items-per-page select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 8px; }
.pagination span { padding: 4px 8px; cursor: pointer; }

/* ===== BADGES ===== */
.badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; display: inline-block; white-space: nowrap; }
.badge-active { background: #e6f9ee; color: #27ae60; }
.badge-walkout { background: #fde8e8; color: #e74c3c; }
.badge-approved { background: #e6f0ff; color: #3498db; }

/* ===== BUTTONS ===== */
.btn-icon { background: none; border: none; cursor: pointer; padding: 6px 8px; color: var(--primary); font-size: 14px; border-radius: 4px; transition: background 0.2s; }
.btn-icon:hover { background: #f8f0f7; }
.text-danger { color: #e74c3c !important; }
.fab { display: inline-flex; }

/* ===== TAB CONTAINER ===== */
.tab-container { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.tab-nav { display: flex; border-bottom: 2px solid var(--border); overflow-x: auto; }
.tab-btn { padding: 14px 20px; border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-light); position: relative; white-space: nowrap; transition: color 0.2s; }
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); }
.tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--primary); }
.tab-content { display: none; padding: 25px; }
.tab-content.active { display: block; }

/* AK Assessment form: compact tabs to match the FLP form's vertical rhythm. */
#page-akAssessmentForm .tab-content { padding: 20px 25px 16px; }
#page-akAssessmentForm .tab-container { margin-top: 0; }
#page-akAssessmentForm .form-group { margin-bottom: 0; }
#page-akAssessmentForm .flp-form-row { gap: 14px; }
#page-akAssessmentForm .flp-form-row > .form-group { margin-bottom: 0; }
/* Spacing between full-width questions (multi_choice / scale) — uniform 16px */
#page-akAssessmentForm .tab-content > .form-group { margin-bottom: 16px; }

/* ===== FORM GRID ===== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.form-grid .full-width { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border); }
.form-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 25px; }

/* ===== FIELD VALIDATION ERRORS ===== */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: #e74c3c; background: #fff5f5; }
.form-group.has-error label { color: #e74c3c; }
.field-error { color: #e74c3c; font-size: 12px; margin-top: 4px; display: block; }

/* ===== VIEW PROFILE ===== */
.view-profile { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 25px; }
.profile-header { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.profile-photo { width: 90px; height: 90px; border-radius: 50%; background: #f8f0f7; display: flex; align-items: center; justify-content: center; }
.profile-summary h2 { color: var(--primary); margin-bottom: 5px; }
.profile-summary p { color: var(--text-light); font-size: 13px; }
.view-section { margin-bottom: 25px; }
.view-section h3 { color: var(--primary); font-size: 15px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-item label { font-size: 11px; color: var(--text-light); font-weight: 600; text-transform: uppercase; }
.detail-item span { font-size: 14px; color: var(--text); }

/* ===== UPLOAD SECTION ===== */
.upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 30px; text-align: center; background: #faf5f9; }
.upload-icon { font-size: 40px; color: var(--primary); margin-bottom: 10px; }
.upload-area p { margin-bottom: 5px; }
.upload-area small { color: var(--text-light); }

/* ===== PER CAPITA DISPLAY ===== */
.per-capita-display { margin-top: 15px; padding: 12px 15px; background: #f8f0f7; border-radius: var(--radius); font-size: 14px; }

/* ===== INFO BANNER ===== */
.info-banner { display: flex; gap: 30px; padding: 15px 20px; background: #f8f0f7; border-radius: var(--radius); margin-bottom: 20px; flex-wrap: wrap; }
.info-item { font-size: 14px; }

/* ===== STAGE SELECT ===== */
.stage-select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; font-weight: 600; }

/* ===== INDIA MAP (Leaflet) ===== */
.map-section { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.map-section h3 { color: var(--primary); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
#leafletMap { width: 100%; height: 500px; border-radius: var(--radius); border: 1px solid var(--border); }

/* ===== PROCESS FLOW DIAGRAM ===== */
.process-flow-section { background: var(--white); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.process-flow-section h3 { color: var(--primary); margin: 0 0 16px 0; font-size: 16px; }
.process-flow { display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.flow-step { display: flex; flex-direction: column; align-items: center; min-width: 90px; transition: transform 0.18s ease; }
.flow-step[onclick] { cursor: pointer; }
.flow-step[onclick]:hover { transform: translateY(-3px); }
.flow-step[onclick]:hover .flow-icon { box-shadow: 0 6px 14px rgba(0,0,0,0.22); }
.flow-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin-bottom: 8px; box-shadow: 0 3px 8px rgba(0,0,0,0.15); transition: box-shadow 0.18s ease; }
.flow-label { font-size: 12px; font-weight: 600; color: #333; text-align: center; line-height: 1.3; }
.flow-label small { font-weight: 400; color: #888; }
.flow-arrow { color: var(--primary); font-size: 22px; margin: 0 4px; padding-bottom: 22px; align-self: center; }

/* ===============================================================
   2026-06-03 (v2): MGJ Programme Process Flow — pixel-perfect match
   to user reference (7 main steps + Pakhwada centered below).
   Layout uses CSS Grid: 13 alternating columns
     (step, arrow, step, arrow, step, arrow, step, arrow,
      step, arrow, step, arrow, step) = 7 step + 6 arrow.
   The Pakhwada sub-card sits in a second row spanning columns
   3..11 (Assessment ↔ Case Studies). A dashed-border-on-3-sides
   inner frame draws the U-shape connector.
   =============================================================== */

.process-flow-section.mgj-flow .process-flow {
  display: grid;
  grid-template-columns:
    minmax(82px, 1fr) auto
    minmax(82px, 1fr) auto
    minmax(82px, 1fr) auto
    minmax(82px, 1fr) auto
    minmax(82px, 1fr) auto
    minmax(82px, 1fr) auto
    minmax(82px, 1fr);
  align-items: start;
  gap: 6px;
  padding: 12px 0 4px;
  flex-wrap: nowrap;          /* override the flex rule from the base */
  justify-content: stretch;
}
.process-flow-section.mgj-flow .flow-step {
  min-width: 0;               /* grid-cell sized */
  max-width: 130px;
  margin: 0 auto;
}
.process-flow-section.mgj-flow .flow-icon {
  width: 68px;
  height: 68px;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}
.process-flow-section.mgj-flow .flow-label {
  font-size: 13px;
  font-weight: 600;
  color: #2b2b2b;
  text-align: center;
  line-height: 1.3;
  min-height: 2.6em;
  margin-top: 10px;
}
.process-flow-section.mgj-flow .flow-label small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}
.process-flow-section.mgj-flow .flow-arrow {
  color: #1f1f1f;
  font-size: 22px;
  display: flex;
  align-items: center;
  height: 68px;               /* center vertically beside the circle */
  padding: 0;
  margin: 0;
}

/* Detour row — second grid row, spans Assessment (col 3) → Case Studies (col 11) */
.mgj-flow-detour {
  grid-row: 2;
  grid-column: 3 / 12;
  position: relative;
  margin-top: 4px;
  height: 150px;
}
.mgj-flow-detour-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;               /* leaves room for the Pakhwada circle */
  border-left: 2px dashed #2b2b2b;
  border-right: 2px dashed #2b2b2b;
  border-bottom: 2px dashed #2b2b2b;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  pointer-events: none;
}
.mgj-flow-pakhwada {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 2;                 /* sits on top of the dashed frame */
  background: #fff;           /* hide the dashed line beneath the circle */
  padding: 0 10px;
}

/* Hover lift effect on every clickable step */
.process-flow-section.mgj-flow .flow-step[onclick] { cursor: pointer; transition: transform 0.18s ease; }
.process-flow-section.mgj-flow .flow-step[onclick]:hover { transform: translateY(-3px); }
.process-flow-section.mgj-flow .flow-step[onclick]:hover .flow-icon {
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

/* ─── Responsive breakpoints ─── */

/* Tablet: tighten circles + arrows but keep horizontal layout */
@media (max-width: 1100px) {
  .process-flow-section.mgj-flow .process-flow {
    grid-template-columns:
      minmax(72px, 1fr) auto
      minmax(72px, 1fr) auto
      minmax(72px, 1fr) auto
      minmax(72px, 1fr) auto
      minmax(72px, 1fr) auto
      minmax(72px, 1fr) auto
      minmax(72px, 1fr);
    gap: 4px;
  }
  .process-flow-section.mgj-flow .flow-icon { width: 56px; height: 56px; font-size: 21px; }
  .process-flow-section.mgj-flow .flow-arrow { font-size: 18px; height: 56px; }
  .process-flow-section.mgj-flow .flow-label { font-size: 12px; }
  .mgj-flow-detour { height: 130px; }
  .mgj-flow-detour-frame { bottom: 42px; }
}

/* Mobile: vertical flow, arrows pointing down, Pakhwada inline */
@media (max-width: 720px) {
  .process-flow-section.mgj-flow .process-flow {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
  }
  .process-flow-section.mgj-flow .flow-step { max-width: none; margin: 0 auto; padding: 6px 0; }
  .process-flow-section.mgj-flow .flow-arrow {
    height: auto;
    transform: rotate(90deg);  /* point down */
    margin: 2px 0;
  }
  .mgj-flow-detour {
    grid-row: auto;
    grid-column: auto;
    position: static;
    height: auto;
    margin: 4px 0;
    padding-top: 12px;
    border-top: 2px dashed #2b2b2b;
  }
  .mgj-flow-detour-frame { display: none; }
  .mgj-flow-pakhwada {
    position: static;
    transform: none;
    margin: 0 auto;
    padding: 0;
  }
}

/* 2026-05-29: .flow-step[data-ak-ongoing] halo + corner badge removed
   along with the dotted-continuation track. The AK Process Flow is now
   a single linear sequence with no parallel-ongoing visual cue. */

/* ===== MGJ Case Study — SOP-styled storytelling form (.cs-*) =====
   Card-based section layout mirroring a Statement of Purpose document.
   Each narrative beat (Story / Challenges / Actions / Impact / Status)
   gets its own card with a colored icon header, generous padding, and
   soft shadows. MGJ purple theme; mobile-responsive. */

/* Profile / identity card — photo on the left, member fields on the right */
.cs-profile-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  background: linear-gradient(135deg, #faf5f9 0%, #ffffff 100%);
  border: 1px solid #efe0ec;
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 22px 26px;
  margin-top: 14px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(115, 34, 105, 0.06);
}
.cs-profile-photo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cs-profile-photo-frame {
  width: 150px; height: 150px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #cdb6c5; font-size: 64px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(115, 34, 105, 0.18);
}
.cs-profile-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.cs-photo-upload {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: var(--primary); color: #fff;
  border-radius: 14px; cursor: pointer;
  transition: background .15s;
}
.cs-photo-upload:hover { background: #5e1c56; }
.cs-profile-fields { display: flex; flex-direction: column; gap: 14px; }
.cs-profile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cs-profile-row .form-group { margin-bottom: 0; }
.cs-req { color: #e74c3c; font-weight: 700; }

/* Generic section card used by every narrative beat */
.cs-section-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.cs-section-card:hover { box-shadow: 0 4px 14px rgba(115, 34, 105, 0.08); }
.cs-section-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 22px;
  background: #fafafa;
  border-bottom: 1px solid #eee;
}
.cs-section-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.10);
}
.cs-section-title {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--primary);
  line-height: 1.2;
}
.cs-section-sub {
  margin: 4px 0 0; font-size: 12.5px; color: var(--text-light);
  line-height: 1.4; font-weight: 500;
}
.cs-section-body { padding: 18px 22px 20px; }

/* Storytelling textarea — generous height, soft border */
.cs-textarea {
  width: 100%; min-height: 110px;
  padding: 12px 14px;
  font-family: inherit; font-size: 13.5px; line-height: 1.55;
  color: var(--text);
  background: #fcfaf8;
  border: 1px solid #e1d5dc;
  border-radius: 8px;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
.cs-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(115, 34, 105, 0.10);
}

/* Memorable quote callout */
.cs-quote-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--primary); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.cs-quote-input {
  width: 100%; padding: 12px 14px;
  font-family: Georgia, 'Segoe UI', serif;
  font-style: italic; font-size: 14px; line-height: 1.5;
  color: #5e1c56;
  background: #faf5f9;
  border: 1px dashed #cdb6c5;
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}
.cs-quote-input:focus {
  outline: none; border-color: var(--primary); background: #fff;
}

/* Supporting-document upload zone (drag-drop styled) */
.cs-upload-zone {
  border: 2px dashed #cdb6c5;
  border-radius: 10px;
  background: #faf5f9;
  padding: 18px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.cs-upload-zone:hover { border-color: var(--primary); background: #fff; }
.cs-upload-label {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; padding: 18px;
  color: var(--text);
}
.cs-upload-label i { font-size: 36px; color: var(--primary); }
.cs-upload-main { font-size: 14px; font-weight: 600; color: var(--primary); }
.cs-upload-sub { font-size: 12px; color: var(--text-light); }
.cs-attachments-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin-top: 14px;
}
.cs-attachments-list:empty { display: none; }
.cs-attachment-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #fff; border: 1px solid #e6d9e3; border-radius: 6px;
  font-size: 12px; color: var(--text);
  overflow: hidden;
}
.cs-attachment-chip i { color: var(--primary); flex-shrink: 0; }
.cs-attachment-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}

/* Footer actions — sticky-looking strip */
.cs-form-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 22px; padding: 18px 24px;
  background: #fafafa;
  border-top: 1px solid #eaeaea;
  border-radius: 10px;
  box-shadow: 0 -1px 2px rgba(0,0,0,0.02);
}
.cs-form-actions .btn { min-width: 140px; min-height: 42px; }

/* Mobile responsive — stack photo on top, then fields */
@media (max-width: 720px) {
  .cs-profile-card { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .cs-profile-photo { flex-direction: row; }
  .cs-section-head { padding: 14px 16px; }
  .cs-section-body { padding: 14px 16px 18px; }
  .cs-form-actions { flex-wrap: wrap; }
  .cs-form-actions .btn { flex: 1; min-width: 0; }
}

/* ===== Case Studies LIST page (.cs-list-*) ===== */

/* KPI strip — 4 totals */
.cs-list-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.cs-list-kpi {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cs-list-kpi-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.cs-list-kpi-body h3 {
  margin: 0; font-size: 24px; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.cs-list-kpi-body p {
  margin: 4px 0 0; font-size: 12px; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600;
}

/* Toolbar (count + view toggle) */
.cs-list-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 6px 0 12px;
}
.cs-list-count { font-size: 13px; color: var(--text-light); font-weight: 500; }
.cs-list-view-toggle {
  display: inline-flex; border: 1px solid #ddd; border-radius: 6px; overflow: hidden;
}
.cs-view-btn {
  width: 36px; height: 32px; background: #fff;
  border: none; border-right: 1px solid #ddd;
  color: var(--text-light); cursor: pointer;
  font-size: 13px;
  transition: background .15s, color .15s;
}
.cs-view-btn:last-child { border-right: none; }
.cs-view-btn:hover { background: #faf5f9; color: var(--primary); }
.cs-view-btn.active { background: var(--primary); color: #fff; }

/* Card grid — 3 columns at desktop, 2 at tablet, 1 at mobile */
.cs-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.cs-list-grid:empty { display: none; }

/* Individual case-study card */
.cs-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s, border-color .15s;
  cursor: pointer;
}
.cs-card:hover {
  box-shadow: 0 6px 18px rgba(115, 34, 105, 0.12);
  transform: translateY(-2px);
  border-color: #cdb6c5;
}
.cs-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #faf5f9 0%, #fff 100%);
  border-bottom: 1px solid #efe0ec;
}
.cs-card-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
  overflow: hidden;
}
.cs-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cs-card-identity { flex: 1; overflow: hidden; }
.cs-card-name {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-card-meta {
  margin: 3px 0 0; font-size: 11.5px; color: var(--text-light);
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cs-card-title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--primary);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-card-excerpt {
  margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.cs-chip-cat { background: #fef5e7; color: #e67e22; }
.cs-chip-status-ongoing  { background: #fff3e0; color: #e65100; }
.cs-chip-status-sustained{ background: #f3faf5; color: #1e8449; }
.cs-chip-status-followup { background: #fdecea; color: #c0392b; }
.cs-chip-status-completed{ background: #e6f0ff; color: #1d6fa5; }
.cs-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.cs-card-date {
  font-size: 11.5px; color: var(--text-light);
  display: inline-flex; align-items: center; gap: 4px;
}
.cs-card-actions { display: inline-flex; gap: 4px; }
.cs-card-actions .btn-icon {
  width: 30px; height: 30px;
  padding: 0; font-size: 12px;
  border-radius: 6px;
}

/* Empty state */
.cs-list-empty {
  text-align: center;
  padding: 50px 24px 40px;
  background: #fff;
  border: 1px dashed #cdb6c5;
  border-radius: 12px;
  margin-top: 16px;
}
.cs-empty-illustration {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%;
  background: #faf5f9;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 42px;
}
.cs-list-empty h3 {
  margin: 0 0 8px; font-size: 18px; color: var(--primary); font-weight: 700;
}
.cs-list-empty p {
  margin: 0 auto 22px; max-width: 480px; color: var(--text-light);
  font-size: 13px; line-height: 1.55;
}

@media (max-width: 480px) {
  .cs-list-grid { grid-template-columns: 1fr; }
  .cs-list-kpi-body h3 { font-size: 20px; }
}

/* ===== FLP FORM HEADER (Photo left + Fields right) ===== */
.flp-form-header { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 0; }
.flp-form-photo-col { flex: 0 0 160px; display: flex; flex-direction: column; align-items: center; }
.flp-form-fields-col { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.flp-form-fields-col .form-group { margin-bottom: 0; }
.flp-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.flp-form-row > .form-group { flex: 1; min-width: 160px; margin-bottom: 0; }

@media (max-width: 768px) {
  .flp-form-header { flex-direction: column; gap: 16px; }
  .flp-form-photo-col { flex: none; width: 100%; }
  .flp-form-row { flex-direction: column; gap: 14px; }
  .flp-form-row > .form-group { min-width: 100%; }
}

/* ===== MGJ Assessment form option labels (2026-05-30) =====
   Mirrors AK's `.ak-af-opt` plain-label pattern (radio/checkbox + text
   side-by-side, vertical stack, hover highlight in programme-purple).
   Matches `_mgjAfRenderControl` radio/scale/checkbox output. */
.mgjaf-opt { padding: 4px 6px; border-radius: 4px; transition: background 0.15s ease; }
.mgjaf-opt:hover { background: rgba(115, 34, 105, 0.06); }
.mgjaf-opt input[disabled] + span,
.mgjaf-opt:has(input[disabled]) { color: #888; cursor: not-allowed; }

/* ===== MGJ Case Study form helpers (2026-05-30) =====
   .cs-field-bad highlights a required field that failed validation;
   .cs-view-val styles a read-only value on the View page. */
.cs-field-bad,
input.cs-field-bad,
select.cs-field-bad,
textarea.cs-field-bad { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231,76,60,0.08); }
.cs-view-val { padding: 8px 12px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; font-size: 14px; color: #333; min-height: 18px; line-height: 1.45; }

/* ===== AK Multi-select picker (Adda details — leaders) =====
   Custom searchable checkbox panel used wherever the user must pick N>1
   items from a long list. Mirrors a typical "tags" widget but built with
   pure CSS + minimal JS so it works offline & in old WebViews. Chips above
   summarise the selection; clicking the header toggles the panel below. */
.ak-multiselect { position: relative; }
.ak-multiselect-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ak-multiselect-chip { background: #f3e9f1; color: #732269; padding: 4px 10px 4px 12px; border-radius: 18px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.ak-multiselect-chip .ak-chip-x { cursor: pointer; opacity: 0.6; font-size: 14px; line-height: 1; }
.ak-multiselect-chip .ak-chip-x:hover { opacity: 1; }
.ak-multiselect-header { padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; font-size: 14px; color: #555; }
.ak-multiselect-header:hover { border-color: #732269; }
.ak-multiselect-panel { border: 1px solid #ddd; border-top: none; border-radius: 0 0 6px 6px; background: #fff; max-height: 280px; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ak-multiselect-search { padding: 10px 12px; border: none; border-bottom: 1px solid #eee; font-size: 13px; outline: none; }
.ak-multiselect-list { overflow-y: auto; max-height: 220px; text-align: left; }
/* 2026-06-01: Row hardened with !important + explicit
   justify-content / flex-wrap so an unexpected ancestor rule (e.g. a
   centred form-card) can't push the checkbox into the middle of the
   row. The matching JS render wraps name + enrollment in a single
   .ak-leader-text span so the label only has two predictable flex
   children — input + text wrapper. */
.ak-multiselect-list label {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
  text-align: left;
}
.ak-multiselect-list label:hover { background: #faf5f9; }
.ak-multiselect-list label input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.ak-multiselect-list label .ak-leader-text { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-multiselect-list label .ak-leader-text small { margin-left: 6px; white-space: nowrap; }

/* ===== FLP PHOTO ===== */
.photo-upload-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.photo-preview { width: 120px; height: 150px; border-radius: var(--radius); border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #faf5f9; cursor: pointer; transition: border-color 0.2s; }
.photo-preview:hover { border-color: var(--primary); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview i { font-size: 36px; color: var(--text-light); }
.photo-preview-label { font-size: 11px; color: var(--text-light); text-align: center; }
.profile-photo-img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); }

/* ===== MODAL ===== */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 16px; }
.modal-content { background: var(--white); border-radius: var(--radius); width: 100%; max-width: 450px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,0.2); overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto; background: #fff; }
.modal-header h3 { color: var(--primary); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 20px; border-top: 1px solid var(--border); flex: 0 0 auto; background: #fff; }

/* Tighter, consistent spacing between form groups inside modals */
.modal-body .form-group { margin-bottom: 14px; }
.modal-body .form-group:last-child { margin-bottom: 0; }

/* Chip input (used by MGJ Overall Activities form) */
.chip-input-mgj { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; }
.chip-input-mgj input { flex: 1; min-width: 120px; border: none; outline: none; padding: 4px 6px; font-size: 13px; background: transparent; }
.chip-input-mgj .chip-mgj { background: #fff5eb; color: #c9600c; padding: 3px 9px; border-radius: 12px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.chip-input-mgj .chip-mgj i { cursor: pointer; opacity: 0.6; }
.chip-input-mgj .chip-mgj i:hover { opacity: 1; }

/* Clean custom scrollbar inside modal body */
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: #d0d5dc; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #a8aeb6; }

/* Responsive: collapse any 2-col form-grid inside modals on narrow screens */
@media (max-width: 640px) {
  .modal-body .form-grid { grid-template-columns: 1fr !important; }
}

/* ===== CAPABILITY LIST (role/user view) ===== */
.capability-list { list-style: none; padding: 0; margin: 0; }
.capability-list li { padding: 6px 0; font-size: 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f0f0f0; }
.capability-list li:last-child { border-bottom: none; }

/* ===== SURVEY VIEW ===== */
.survey-view { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 25px; }

/* ===== SURVEY FORM (PAPER STYLE) ===== */
.sf-paper { max-width: 960px; margin: 0 auto; border: 2px solid #333; font-size: 13px; background: #fff; }

/* Header */
.sf-header { display: flex; align-items: center; border-bottom: 2px solid #333; padding: 12px 16px; gap: 16px; }
.sf-logo { font-size: 16px; font-weight: 800; color: var(--primary); text-transform: uppercase; white-space: nowrap; letter-spacing: 0.5px; }
.sf-title { flex: 1; text-align: center; }
.sf-title-en { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.sf-title-hi { font-size: 13px; color: #555; margin-top: 2px; }

/* Metadata grid */
.sf-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid #333; }
.sf-meta-cell { border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 6px 10px; }
.sf-meta-cell:nth-child(3n) { border-right: none; }
.sf-meta-grid > .sf-meta-cell:nth-last-child(-n+3) { border-bottom: none; }
.sf-label { display: block; font-size: 10px; color: #777; font-weight: 600; text-transform: uppercase; margin-bottom: 2px; }
.sf-value { display: block; font-size: 13px; color: #222; min-height: 18px; }

/* Section title bar */
.sf-section-title { background: var(--primary); color: #fff; padding: 7px 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #333; }

/* Field table (Head of Family) */
.sf-field-table { width: 100%; border-collapse: collapse; border-bottom: 2px solid #333; }
.sf-field-table td { border: 1px solid #999; padding: 5px 10px; vertical-align: top; }
.sf-flabel { font-size: 10px; color: #777; font-weight: 600; text-transform: uppercase; width: 140px; background: #faf5f9; }
.sf-fvalue { font-size: 13px; color: #222; min-height: 20px; }
.sf-field-table .sf-full { border-left: none; border-right: none; }

/* Member tables (Men/Boys, Women/Girls) */
.sf-member-table { width: 100%; border-collapse: collapse; border-bottom: 2px solid #333; }
.sf-member-table th { background: #f3e8f1; color: var(--primary); padding: 6px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; border: 1px solid #999; text-align: center; white-space: nowrap; }
.sf-member-table td { border: 1px solid #999; padding: 5px 8px; font-size: 12px; text-align: center; min-height: 22px; }
.sf-member-table td:nth-child(2) { text-align: left; }
.sf-member-table tbody tr:hover { background: #fdf8fc; }
.sf-empty-cell { color: #ccc; }

/* Interview / text sections */
.sf-interview { border-bottom: 2px solid #333; padding: 10px 14px; }
.sf-interview-row { margin-bottom: 10px; }
.sf-interview-row:last-child { margin-bottom: 0; }
.sf-interview-label { font-size: 12px; font-weight: 600; color: #444; margin-bottom: 3px; }
.sf-interview-value { font-size: 13px; color: #222; min-height: 22px; padding: 4px 0; border-bottom: 1px dotted #999; }
.sf-interview-value:empty::after { content: '\00a0'; }

/* Checkbox group (document checklist) */
.sf-doc-section { border-bottom: 2px solid #333; padding: 10px 14px; }
.sf-doc-row { display: flex; gap: 30px; margin-top: 8px; flex-wrap: wrap; }
.sf-doc-col { flex: 1; min-width: 280px; }
.sf-doc-col-title { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 6px; text-transform: uppercase; }
.sf-checkbox-list { list-style: none; padding: 0; margin: 0; }
.sf-checkbox-list li { font-size: 12px; padding: 2px 0; color: #333; }
.sf-check { display: inline-block; width: 16px; height: 16px; border: 1.5px solid #666; border-radius: 2px; text-align: center; line-height: 14px; font-size: 11px; margin-right: 6px; vertical-align: middle; }
.sf-check.checked { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Remarks */
.sf-remarks { border-bottom: 2px solid #333; padding: 10px 14px; }
.sf-remarks-box { min-height: 40px; font-size: 13px; color: #222; padding: 6px 0; border-bottom: 1px dotted #999; }

/* Footer (GPS / Meta) */
.sf-footer { padding: 8px 14px; font-size: 11px; color: #888; display: flex; gap: 20px; flex-wrap: wrap; }
.sf-footer-item { display: inline-flex; gap: 4px; }
.sf-footer-item strong { color: #555; }

/* Print-friendly */
@media print {
  .sf-paper { border: 1px solid #000; box-shadow: none; max-width: 100%; }
  .page-header { display: none; }
}

/* ===== ASSESSMENT FORM ===== */
.assessment-question { background: var(--bg); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px; border-left: 3px solid var(--primary); }
.assessment-question > label { display: block; font-weight: 600; color: var(--text-dark); font-size: 13px; margin-bottom: 8px; line-height: 1.5; }
.radio-group { display: flex; flex-direction: column; gap: 1px; }
.radio-group-inline { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; padding: 5px 8px; line-height: 1.4; border-radius: 6px; transition: background 0.15s; white-space: nowrap; }
.radio-group:not(.radio-group-inline) .radio-label { white-space: normal; }
.radio-label:hover { background: rgba(115, 34, 105, 0.06); }
.radio-label input[type="radio"], .radio-label input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; position: relative; top: 0; }
.assessment-question input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }

/* ===== EMPLOYMENT CONDITIONAL ===== */
.employment-conditional { grid-column: 1 / -1; }

/* ===== PROGRESS BAR ===== */
.progress-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; width: 100px; display: inline-block; vertical-align: middle; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.progress-fill.on-track { background: #27ae60; }
.progress-fill.behind { background: #f39c12; }
.progress-fill.critical { background: #e74c3c; }

/* ===== TARGET SETTING ===== */
.target-category { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 15px; }
.target-category-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid var(--border); }
.target-category-header h4 { color: var(--primary); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.target-category-body { padding: 15px 20px; }
.metric-row { display: flex; align-items: center; gap: 15px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.metric-row:last-child { border-bottom: none; }
.metric-label { flex: 1; font-size: 13px; font-weight: 500; min-width: 150px; }
.metric-input { width: 100px; }
.metric-input input { width: 100%; padding: 6px 10px; font-size: 13px; text-align: right; border: 1px solid var(--border); border-radius: 4px; }
.metric-achieved { font-size: 12px; color: var(--text-light); min-width: 80px; text-align: right; }
.metric-pct { font-size: 12px; font-weight: 600; min-width: 50px; text-align: right; }

/* ===== FLP DETAIL ROW ===== */
.flp-detail-row { background: #faf5f9; }
.flp-detail-row td { padding: 0 !important; }
.flp-detail-content { padding: 15px 20px; }
.flp-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.flp-metric-item { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 8px; background: var(--white); border-radius: 4px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .login-container { flex-direction: column; }
  .login-left { min-height: 200px; }
  .hero-overlay h1 { font-size: 1.5rem; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-row { grid-template-columns: 1fr; }
  /* Filter panel wraps onto multiple rows on narrow viewports — same
     behaviour as the global rule; explicit here so legacy overrides
     don't sneak back in. */
  .filter-panel { flex-wrap: wrap; overflow-x: visible; }
  /* Wrap nav items onto multiple lines on narrow viewports rather than
     hiding them in a horizontal scroll container. The previous
     `overflow-x: auto` rule clipped any descendant whose box extended
     downward (a tapped submenu opens at top: 100%) — which was why the
     mobile-tap toggle worked logically but the dropdown was invisible. */
  .nav-menu { flex-wrap: wrap; overflow: visible; }
  .nav-item { padding: 10px 14px; font-size: 13px; }
  /* Anchor submenus to the visible viewport so they don't overflow off
     the right edge when their parent <li> sits near the end of a wrapped
     row. left:auto + right:0 makes them open leftward from the parent. */
  .submenu { left: auto; right: 0; min-width: 200px; }
  .form-grid { grid-template-columns: 1fr; }
  #leafletMap { height: 350px; }
}

/* ---- Notification Bell & Dropdown ---- */
.notif-bell-wrapper { position: relative; cursor: pointer; padding: 8px 14px; border-radius: var(--radius); transition: background 0.2s; display: flex; align-items: center; }
.notif-bell-wrapper:hover { background: #f8f0f7; }
.notif-bell-icon { font-size: 20px; color: #555; transition: color 0.2s; }
.notif-bell-wrapper:hover .notif-bell-icon { color: var(--primary); }
.notif-badge { position: absolute; top: 2px; right: 6px; background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; padding: 0 4px; box-sizing: border-box; pointer-events: none; }

.notif-dropdown { position: absolute; top: 100%; right: 60px; width: 370px; max-height: 440px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 300; display: flex; flex-direction: column; }
.notif-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notif-dropdown-title { font-weight: 700; font-size: 15px; color: var(--text); }
.notif-mark-all { font-size: 12px; color: var(--primary); text-decoration: none; cursor: pointer; }
.notif-mark-all:hover { text-decoration: underline; }
.notif-dropdown-body { overflow-y: auto; flex: 1; max-height: 380px; }
.notif-empty { text-align: center; padding: 40px 16px; color: #aaa; font-size: 14px; }

.notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.15s; }
.notif-item:hover { background: #faf5f9; }
.notif-item.unread { background: #f8f0f7; }
.notif-item.unread:hover { background: #f0e4ef; }
.notif-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.notif-icon.target_published { background: #e8f5e9; color: #2e7d32; }
.notif-icon.report_submitted { background: #e3f2fd; color: #1565c0; }
.notif-icon.info { background: #fff3e0; color: #e65100; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-msg { font-size: 12px; color: #777; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: 11px; color: #aaa; margin-top: 4px; }

/* Topic checklist for training form */
.topic-checklist { border: 1px solid #ddd; border-radius: 8px; max-height: 200px; overflow-y: auto; padding: 8px; background: #fafafa; }
.topic-checklist label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #333; transition: background 0.15s; }
.topic-checklist label:hover { background: #f0e4ef; }
.topic-checklist input[type="checkbox"] { width: 16px; height: 16px; accent-color: #732269; cursor: pointer; flex-shrink: 0; }
.topic-checklist label.checked { background: #f5e6f0; font-weight: 500; }

/* Vertical progress bar chart */
.vbar-chart-wrap { position: relative; margin-top: 15px; }
.vbar-yaxis { position: absolute; left: 10px; width: 36px; top: 0; }
.vbar-yaxis span { font-size: 10px; color: #666; text-align: right; display: block; padding-right: 6px; line-height: 1; position: absolute; right: 0; transform: translateY(50%); }
.vbar-yaxis-label { position: absolute; left: -6px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: 0 0; font-size: 10px; color: #555; white-space: nowrap; font-weight: 500; }
.vbar-yaxis-line { position: absolute; left: 48px; width: 2px; background: #555; top: 0; }
.vbar-xaxis-line { position: absolute; left: 48px; right: 10px; height: 2px; background: #555; }
.vbar-gridlines { position: absolute; left: 50px; right: 10px; top: 0; pointer-events: none; }
.vbar-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed #ccc; }
.vbar-bars-area { position: absolute; left: 50px; right: 10px; top: 0; display: flex; align-items: flex-end; justify-content: space-evenly; }
.vbar-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.vbar-outer { border: 1.5px solid #90CAF9; border-radius: 4px 4px 0 0; background: rgba(33,150,243,0.12); position: relative; min-height: 2px; }
.vbar-inner { width: 100%; background: #1565C0; position: absolute; bottom: 0; left: 0; border-radius: 3px 3px 0 0; transition: height 0.3s ease; }
.vbar-pct { font-size: 11px; font-weight: 700; color: #1565C0; white-space: nowrap; text-align: center; }
.vbar-label { font-size: 11px; color: #444; text-align: center; line-height: 1.2; max-width: 70px; word-break: break-word; font-weight: 500; }
.vbar-cat-sep { border-left: 1.5px dashed #bbb; align-self: stretch; margin: 0 4px; }
.vbar-legend { display: flex; gap: 18px; justify-content: center; font-size: 11px; color: #555; margin-top: 8px; }
.vbar-legend-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

/* =====================================================================
   MGJ Dashboard helpers — small additions on top of FLP's .chart-card /
   .kpi-card / .charts-row primitives. Same typography, same shadows,
   same purple palette as the rest of the MIS. Just the few widget
   shapes FLP doesn't have (progress bars, funnel, callout, heatmap,
   inline stats) are defined here.
   ===================================================================== */

/* =====================================================================
   AK (Azad Kishori) Dashboard — uses FLP's .filter-panel, .kpi-card,
   .chart-card and .data-table primitives so the dashboard reads as a
   natural extension of the FLP MIS. Only a few small additions below
   for things FLP doesn't ship: 4-up row, age bands, alumni stats.
   ===================================================================== */

/* Row variants — 3 and 4 columns side-by-side using the same gap as
   FLP's default 2-up .charts-row. The fallback below 1100px stacks to
   2-up, and below 640px to 1-up, matching FLP responsive behaviour. */
.ak-dash-row3 { grid-template-columns:repeat(3, 1fr); }
.ak-dash-row4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width: 1100px) { .ak-dash-row3, .ak-dash-row4 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:  640px) { .ak-dash-row3, .ak-dash-row4 { grid-template-columns:1fr; } }

/* 2026-06-04: Socio-economic row (By Category + By Religion).
   Row 3 used to be 3-up (Category + Religion + Family Monthly Income).
   Family Income was removed 2026-06-01 leaving 2 cards in a 3-column
   grid — the empty 3rd column made each card 1/3 of the row, the
   donuts were rendered narrow, the Chart.js bottom-legend then wrapped
   to multiple lines pushing the card height up, and the next row sat
   far below with a visible empty band. This scoped rule applies to
   the specific row instance (the only .charts-row.ak-dash-row3 left
   on the dashboard) — 2 columns to match the actual card count and
   align-items:start so neither card gets stretched beyond its content.

   2026-06-04 (Row 1 + Age Bands, revision):
   The `.process-flow-section + .charts-row.ak-dash-row3` selector
   below intentionally ALSO matches Row 1 (Leaders by State + Addas
   by State + Age Bands). Row 1 is forced to a 2-column grid so
   Leaders/Addas fill the first visual row at 1/2 width each with
   no trailing empty column, and the Age Bands rule (further down)
   then spans Age Bands across both columns of the second visual
   row. The combination eliminates BOTH potential empty regions —
   no gap to the right of Age Bands and no gap to its left. */
.process-flow-section + .charts-row.ak-dash-row3,
.charts-row.ak-dash-row3:not(:has(> .chart-card:nth-child(3))) {
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

/* 2026-06-04: Age Bands card width.
   User report 2026-06-04: Age Bands card occupies only the left
   portion of its row with empty horizontal space on the right.
   Cause: Age Bands is the 3rd child of Row 1 .ak-dash-row3 which
   currently renders as a 2-column grid (rule above). Cards 1+2
   (Leaders by State, Addas by State) fill the first grid row at
   1/2 width each; Age Bands wraps to grid row 2 alone at 1/2 width
   with the 2nd column empty — that's the visible "empty space".
   Fix (one line): the 3rd `.chart-card` in `.ak-dash-row3` spans
   from column 1 to the last column (`grid-column: 1 / -1`), so
   Age Bands now fills its row at 100% width. Leaders/Addas widths,
   Row 3 (By Category + By Religion) layout, Age Bands internal
   styling (padding, bars, colors, height), and all other rows are
   unchanged. Works at every breakpoint — at 640px and below where
   the grid resolves to a single column, `1 / -1` is identical to
   the natural full width, so no responsive regression. */
.charts-row.ak-dash-row3 > .chart-card:nth-child(3) {
  grid-column: 1 / -1;
}

/* Age bands — compact horizontal progress rows used inside a chart-card */
.ak-age-bands { display:grid; gap:10px; padding-top:4px; }
.ak-age-row { display:grid; grid-template-columns:60px 1fr 32px; gap:10px; align-items:center; font-size:13px; }
.ak-age-name { color:var(--text); font-weight:600; }
.ak-age-bar  { height:10px; background:#f0e6ed; border-radius:5px; overflow:hidden; }
.ak-age-bar > i { display:block; height:100%; background:linear-gradient(90deg, var(--primary), #9b3d8e); transition:width .35s; }
.ak-age-row > b { color:var(--primary); text-align:right; font-variant-numeric:tabular-nums; }

/* Adda Outreach — small share bar in last column of the data-table */
#akDashAddasBody td:last-child { width:120px; }
.ak-share-bar { display:block; width:100%; height:8px; background:#f0e6ed; border-radius:4px; overflow:hidden; }
.ak-share-bar > i { display:block; height:100%; background:var(--primary); transition:width .35s; }

/* Alumni stats — 2x2 inline-stat grid inside a chart-card */
.ak-alumni-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding-top:2px; }
.ak-alumni-stat { padding:12px 14px; border-radius:6px; background:#fafafa; border:1px solid var(--border); }
.ak-alumni-label { display:block; font-size:11px; color:var(--text-light); text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
.ak-alumni-value { display:block; font-size:22px; font-weight:700; color:var(--primary); margin-top:4px; line-height:1.1; }

/* 2026-06-01 (v3): Section titles + 3-tile stat strips removed per
   user request. The dashboard now flows as plain rows of chart-cards
   below the KPI strip + filters, with no per-section headers. The
   leftover CSS for those classes is harmless but dropped to keep
   styles.css lean. */

/* 2026-06-01 (v3): Education chart wrapper — fixes the alignment
   issue where the horizontal bar would render tall and uneven by
   pinning the canvas's container height and letting Chart.js handle
   its own responsive resize. */
.ak-edu-chart-wrap { position: relative; min-height: 240px; padding-top: 4px; }
.ak-edu-chart-wrap canvas { max-width: 100%; }

/* 2026-06-01 (v6): .ak-edu-passed* classes dropped — the
   "Passed by Level" callout was removed in favour of the single
   Education Progression line chart. .ak-edu-higher + .ak-state-compare
   were already dropped in v5. */

/* Pakhwada Coverage — single clear card with one big number + bar */
.mgj-coverage { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.mgj-coverage-stat { flex:0 0 280px; }
.mgj-coverage-num { font-size:32px; color:var(--primary); font-weight:700; line-height:1; }
.mgj-coverage-num small { font-size:14px; color:var(--text-light); font-weight:500; }
.mgj-coverage-label { font-size:13px; color:var(--text-light); margin-top:6px; }
.mgj-coverage-bar { flex:1; min-width:240px; position:relative; height:24px; background:#f0e6ed; border-radius:12px; overflow:hidden; }
.mgj-coverage-bar > div { height:100%; background:linear-gradient(90deg, var(--primary), #9b3d8e); transition:width .4s; }
.mgj-coverage-pct { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:700; color:var(--text); }

/* Compact inline stats — used inside .chart-cards as a 4-up grid of
   small numbered blocks. Same spacing/typography as FLP kpi cards but
   without the icon + border-left chrome. */
.mgj-inline-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:12px; }
.mgj-inline-stat { padding:12px 14px; background:#fafafa; border:1px solid var(--border); border-radius:6px; }
.mgj-inline-label { display:block; font-size:11px; color:var(--text-light); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.mgj-inline-value { display:block; font-size:22px; font-weight:700; color:var(--primary); line-height:1.1; margin-top:4px; }
.mgj-inline-sub { display:block; font-size:11px; color:var(--text-light); margin-top:2px; }
.mgj-inline-sub b { color:var(--text); font-weight:600; }

/* Funnel — stepped horizontal bars, FLP purple gradient feel */
.mgj-funnel { display:flex; flex-direction:column; gap:10px; }
.mgj-funnel-step { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:6px; background:#fafafa; border-left:4px solid var(--c); border:1px solid var(--border); border-left:4px solid var(--c); }
.mgj-funnel-label { font-size:12px; color:var(--text-light); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.mgj-funnel-value { font-size:22px; font-weight:700; color:var(--primary); }

/* Family-member dynamic rows on the Add/Edit MGJ form.
   Left column = count input; right column = auto-generated member cards.
   Used by renderMgjFamMembers() in app.js. Purple theme + soft shadows. */
.mgj-fam-row {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 18px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid #e6d9e3;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #faf6f9;
  margin-bottom: 14px;
}
.mgj-fam-count label { display:block; font-weight:600; font-size:13px; color:var(--text); margin-bottom:6px; }
.mgj-fam-count input { width:100%; padding:8px 12px; border:1px solid #ddd; border-radius:6px; font-size:13px; box-sizing:border-box; }
.mgj-fam-count input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(115,34,105,0.10); }
.mgj-fam-hint { display:block; font-size:11px; color:var(--text-light); margin-top:6px; font-style:italic; }
.mgj-fam-hint b { color:var(--primary); font-style:normal; }
.mgj-fam-members { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
/* Above-18 cards hold TWO horizontal fields per member, so they need
   wider columns. Below-18 (single Education dropdown) keeps the
   narrower 220px grid. */
.mgj-fam-members[data-kind="above18"] { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }
/* Horizontal row layout for above-18 fields (Currently Doing + Marital Status
   side by side). On very narrow screens fall back to stacked. */
.mgj-fam-fields-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 480px) { .mgj-fam-fields-row { grid-template-columns:1fr; } }
/* The "Specify, If any other" follow-up that appears when a dropdown
   value is "Other". Tinted to make the conditional nature obvious. */
.mgj-fam-spec-grp {
  margin-top:6px; padding:6px 8px;
  background:#fff7fd; border:1px dashed #d6b6cf; border-radius:4px;
}
.mgj-fam-spec-grp label { color:var(--primary); font-weight:600; }
.mgj-fam-card {
  border:1px solid #e0d4dd;
  border-radius:6px;
  background:#fff;
  padding:10px 12px;
  box-shadow:0 1px 3px rgba(115,34,105,0.06);
  transition:box-shadow .15s, border-color .15s;
}
.mgj-fam-card:hover { border-color:#cdb6c5; box-shadow:0 2px 6px rgba(115,34,105,0.10); }
.mgj-fam-card-h {
  font-weight:600; color:var(--primary); font-size:12px;
  margin-bottom:8px; padding-bottom:6px;
  border-bottom:1px dashed #e6d9e3;
  text-transform:uppercase; letter-spacing:.3px;
}
.mgj-fam-card .mgj-fam-field { margin-bottom:8px; }
.mgj-fam-card .mgj-fam-field:last-child { margin-bottom:0; }
.mgj-fam-card label {
  display:block; font-size:11px; color:var(--text-light);
  margin-bottom:3px; font-weight:500;
}
.mgj-fam-card select, .mgj-fam-card input {
  width:100%; padding:6px 8px; border:1px solid #ddd; border-radius:4px;
  font-size:12px; background:#fff; box-sizing:border-box;
}
.mgj-fam-card select.mgj-fam-error,
.mgj-fam-card input.mgj-fam-error { border-color:#e74c3c; background:#fff5f5; }
.mgj-fam-empty {
  grid-column:1/-1;
  padding:18px; text-align:center;
  color:#999; font-size:12px; font-style:italic;
  border:1px dashed #d8c7d3; border-radius:6px; background:#fff;
}
@media (max-width: 768px) {
  .mgj-fam-row { grid-template-columns: 1fr; }
}

/* Single-stat callout (used in GBV card) */
.mgj-callout { display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:6px; background:linear-gradient(135deg, #fdecea, #fff); border:1px solid #f5c6c0; }
.mgj-callout-icon { width:42px; height:42px; border-radius:50%; background:#e74c3c; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.mgj-callout-value { font-size:26px; font-weight:700; color:var(--text); line-height:1; }
.mgj-callout-label { font-size:12px; color:var(--text-light); margin-top:4px; }

/* Survey progress rows */
.mgj-survey-progress { display:grid; gap:14px; }
.mgj-survey-row { display:grid; grid-template-columns:90px 1fr 32px; gap:12px; align-items:center; font-size:13px; }
.mgj-survey-name { color:var(--text); font-weight:600; }
.mgj-survey-bar { display:block; height:10px; background:#f0e6ed; border-radius:5px; overflow:hidden; }
.mgj-survey-bar > i { display:block; height:100%; transition:width .35s; }
.mgj-survey-row > b { text-align:right; color:var(--primary); font-variant-numeric:tabular-nums; }


/* ============================================================================
   ALAP Performance — expandable detail row (FLP-style)
   ============================================================================ */
.alap-perf-detail-row { background:#faf5f9; }
.alap-perf-detail-row > td { padding:0 !important; }
.alap-perf-detail-content { padding:18px 22px; }
.alap-perf-cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.alap-perf-cat-card { background:#fff; border:1px solid #efe2eb; border-radius:8px; padding:12px 14px; box-shadow:0 1px 2px rgba(115,34,105,.04); }
.alap-perf-cat-card.alap-perf-cat-empty { background:#fbf8fa; border-style:dashed; }
.alap-perf-cat-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid #f1e5ec; }
.alap-perf-cat-name { font-weight:700; color:#732269; font-size:13px; line-height:1.25; }
.alap-perf-pill { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.alap-perf-pill-on  { background:#e6f9ee; color:#27ae60; }
.alap-perf-pill-off { background:#fdecea; color:#c0392b; font-weight:600; text-transform:none; letter-spacing:0; }
.alap-perf-fields { display:grid; grid-template-columns:1fr; gap:6px; }
.alap-perf-field { display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:12.5px; border-bottom:1px dashed #f1e5ec; }
.alap-perf-field:last-child { border-bottom:0; }
.alap-perf-label { color:#888; }
.alap-perf-value { color:#2c3e50; font-weight:600; text-align:right; word-break:break-word; }

/* ============================================================================
   Form field-level inline validation — used by saveAkRecord and any other
   form save handler that calls _showFieldError / _clearFieldErrors. Replaces
   the old alert()-per-missing-field UX with a quiet red border + helper
   text under each empty/invalid field. Errors clear automatically the next
   time the user submits.
   ============================================================================ */
.field-error-input,
.field-error-input:focus { border-color:#e74c3c !important; box-shadow:0 0 0 3px rgba(231,76,60,0.12) !important; }
.field-error-msg { color:#e74c3c; font-size:11px; font-weight:500; margin-top:4px; line-height:1.3; display:none; }
.form-error-banner { background:#fdecea; color:#c0392b; border:1px solid #f5c6c0; border-radius:6px; padding:10px 14px; margin-bottom:14px; font-size:13px; display:flex; align-items:center; gap:8px; }