:root {
  /* Meghalaya emblem–aligned palette (2022 golden jubilee seal) */
  --navy-950: #061a33;
  --navy-900: #0a2f4d;
  --navy-800: #0e3d61;
  --navy-700: #14527a;
  --navy-100: #e8f1f8;
  --navy-50: #f3f8fc;
  --gold: #f4a54b;
  --gold-soft: #f8d9a8;
  --gold-dark: #a15c30;
  --bronze: #8b4518;
  --emblem-green: #397b38;
  --surface: #f6f4ef;
  --card: #ffffff;
  --border: #e5e0d6;
  --muted: #64748b;
  --ink: #0f172a;
  --green: #16a34a;
  --amber: #ca8a04;
  --orange: #ea580c;
  --red: #dc2626;
  --sky: #7dd3fc;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", Tahoma, "Noto Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app-shell { display: flex; flex-direction: column; min-height: 100%; }
.app-body { display: flex; flex: 1; min-height: 0; }

/* Top government ribbon — navy chrome + emblem gold (explicit hex so it always shows) */
.dept-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(180deg, #0a2f4d 0%, #08304e 100%);
  color: #fff;
  border-bottom: 4px solid #f4a54b;
  text-align: center;
}
.dept-banner .gov-line {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f4a54b; /* both labels default to emblem gold */
}
.dept-banner .gov-line .gov {
  color: #f4a54b;
  font-weight: 800;
}
.dept-banner .gov-line .dept {
  color: #f8d9a8;
  font-weight: 700;
}
.dept-banner .gov-line .dot {
  margin: 0 0.55rem;
  color: #c9893a;
  font-weight: 400;
}
.dept-banner .app-line {
  margin: 0.3rem 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}
.dept-banner .app-line .pipe {
  margin: 0 0.55rem;
  font-weight: 400;
  color: rgba(244, 165, 75, 0.45);
  font-size: 1.1rem;
}
.dept-banner .app-line .full {
  font-size: 1.15rem;
  font-weight: 600;
  color: #f8d9a8;
}

/* Sidebar */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--navy-900);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.sidebar-brand {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: flex-start;
}
.sidebar-brand img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: #fff;
  padding: 0.3rem;
  object-fit: contain;
  box-shadow: 0 0 0 2px var(--gold);
}
.sidebar-brand .dept {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gold-soft);
  line-height: 1.25;
}
.sidebar-brand .app {
  margin: 0.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.sidebar-brand .gov {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: var(--gold);
}
.sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.15rem;
  border-radius: 0.4rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
  font-weight: 500;
}
.nav-ico {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  opacity: 0.95;
}
.metric-ico {
  width: 1.1rem;
  height: 1.1rem;
}
.kpi-with-ico {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}
.kpi-body {
  min-width: 0;
  flex: 1;
}
.kpi-facility-mix .kpi-mix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  margin-top: 0.2rem;
}
.kpi-facility-mix .kpi-mix-item {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--text, #0f172a);
  white-space: nowrap;
}
.kpi-facility-mix .kpi-mix-item strong {
  font-size: 0.95rem;
  font-weight: 700;
  margin-right: 0.15rem;
}
.kpi-ico {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-ico.tone-blue { background: #e0f2fe; color: #075985; }
.kpi-ico.tone-green { background: #dcfce7; color: #166534; }
.kpi-ico.tone-purple { background: #f3e8ff; color: #6b21a8; }
.kpi-ico.tone-teal { background: #ccfbf1; color: #115e59; }
.kpi-ico.tone-red { background: #ffe4e6; color: #9f1239; }
.metric .ico {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cadre-card .ico {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cadre-card .ico .metric-ico {
  width: 1.6rem;
  height: 1.6rem;
  color: #fff;
}
.sidebar-brand img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: #fff;
  padding: 0.3rem;
  object-fit: contain;
  display: block;
}
.nav-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-link.active {
  background: rgba(244, 165, 75, 0.18);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--gold);
}
.nav-link .badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.nav-children {
  margin: 0 0 0.35rem 1rem;
  padding-left: 0.6rem;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.nav-children a {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: 0.35rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  font-weight: 500;
}
.nav-children a:hover, .nav-children a.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.sidebar-help {
  margin: 0 0.75rem 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: rgba(14, 74, 122, 0.8);
  ring: 1px solid rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
}
.sidebar-help strong { display: block; font-size: 0.9rem; }
.sidebar-help p { margin: 0.25rem 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.sidebar-help a { color: #7dd3fc; font-size: 0.8rem; font-weight: 600; }

/* Main column */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .crumb { margin: 0; font-size: 0.9rem; color: var(--muted); }
.topbar h1 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.user-block { display: flex; align-items: center; gap: 0.65rem; }
.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.user-meta { line-height: 1.25; }
.user-meta .name { margin: 0; font-weight: 600; font-size: 1rem; }
.user-meta .role { margin: 0; font-size: 0.85rem; color: var(--muted); }
.user-meta .access { margin: 0; font-size: 0.75rem; color: var(--navy-700); }
.btn-ghost {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.4rem 0.55rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
.btn-ghost:hover { background: #f1f5f9; color: var(--navy-900); }

.content {
  flex: 1;
  padding: 1.25rem;
  overflow: auto;
}

.demo-banner {
  margin: 0 0 1rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  background: #fff1f2;
  color: #9f1239;
  border: 1px solid #fecdd3;
  font-size: 0.85rem;
  font-weight: 600;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 1.1rem 1.25rem;
}
.card h2, .card h3 { margin: 0; }
.muted { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.impact-compare { gap: 1.25rem; }
.impact-compare .specialty-row td { color: #475569; background: #f8fafc; }
.impact-status-critical { color: #dc2626; font-weight: 700; }
.impact-status-surplus { color: #14532d; font-weight: 700; }
.impact-status-shortage { color: #ca8a04; font-weight: 700; }
.impact-status-ok { color: #4ade80; font-weight: 600; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.dash-facility-types .kpi .val { font-size: 1.45rem; }
.dash-facility-types .kpi .lbl { font-size: 0.72rem; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.gap-sm { gap: 0.75rem; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  padding: 1.35rem 1.5rem;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800) 55%, #0c4a6e);
  color: #fff;
}
.hero .eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(186, 230, 253, 0.9);
}
.hero h1 { margin: 0.35rem 0 0; font-size: 1.85rem; font-weight: 700; }
.hero .lead { margin: 0.5rem 0 0; color: rgba(224, 242, 254, 0.9); max-width: 40rem; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.5rem; margin-top: 1rem; }
.hero-stat {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
}
.hero-stat .lbl { margin: 0; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(186,230,253,0.85); }
.hero-stat .val { margin: 0.15rem 0 0; font-size: 1.45rem; font-weight: 700; }

.kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
}
.kpi .lbl { margin: 0; font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.kpi .val { margin: 0.15rem 0 0; font-size: 1.45rem; font-weight: 700; }
.kpi .hint { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted); }

.metric {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0.75rem 0.9rem;
}
.metric .ico {
  width: 2.25rem; height: 2.25rem; border-radius: 0.55rem;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem;
}
.metric .lbl { margin: 0; font-size: 0.875rem; opacity: 0.85; }
.metric .val { margin: 0; font-size: 1.2rem; font-weight: 700; }
.tone-red .ico { background: #ffe4e6; color: #9f1239; }
.tone-amber .ico { background: #fef3c7; color: #92400e; }
.tone-orange .ico { background: #ffedd5; color: #9a3412; }
.tone-blue .ico { background: #e0f2fe; color: #075985; }
.tone-green .ico { background: #dcfce7; color: #166534; }
.tone-teal .ico { background: #ccfbf1; color: #115e59; }
.tone-purple .ico { background: #f3e8ff; color: #6b21a8; }

.district-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.district-tile {
  text-align: center;
  border-radius: 0.55rem;
  padding: 0.65rem 0.4rem;
  border: 1.5px solid;
  background: rgba(22, 163, 74, 0.08);
  border-color: #16a34a;
}
.district-tile.bad {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
}
.district-tile.nurse-tile {
  background: rgba(15, 118, 110, 0.08);
  border-color: #0f766e;
}
.district-tile.nurse-tile .p { color: #0f766e; }
.district-tile .n { font-size: 0.75rem; font-weight: 600; }
.district-tile .p { display: block; margin-top: 0.2rem; font-size: 1.1rem; font-weight: 700; }

.dash-tri {
  grid-template-columns: 1.1fr 0.9fr 1fr;
  align-items: stretch;
}
.card-sub { margin: 0.25rem 0 0.75rem; font-size: 0.85rem; }
.card-footer-link { margin: 0.75rem 0 0; }
.empty-panel {
  border: 1px dashed #cbd5e1;
  border-radius: 0.55rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 600;
  background: #f8fafc;
}
.warn-note { margin: 0.35rem 0 0; font-size: 0.8rem; color: #92400e; }

.donut-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}
.donut {
  width: 9rem;
  height: 9rem;
  border-radius: 999px;
  margin: 0.75rem auto;
  background: conic-gradient(#16a34a 0 var(--in, 0%), #dc2626 var(--in, 0%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.donut.donut-empty {
  background: conic-gradient(#e2e8f0 0 100%);
}
.donut::after {
  content: "";
  position: absolute;
  inset: 1.35rem;
  background: #fff;
  border-radius: 999px;
  z-index: 0;
}
.donut .center {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0.5rem;
}
.donut .center .small { margin: 0; font-size: 0.75rem; color: var(--muted); }
.donut .center .big { margin: 0; font-size: 1.2rem; font-weight: 700; }
.legend { font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; }
.legend span { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 999px; margin-right: 0.35rem; }
.legend-muted { color: var(--muted); font-size: 0.8rem; padding-left: 0.15rem; }
.analysis-note {
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.45rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #334155;
}
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.alert-item {
  display: flex; gap: 0.65rem; align-items: flex-start;
  border-radius: 0.55rem; border: 1px solid; padding: 0.65rem 0.75rem;
}
.alert-item.critical { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.alert-item.high { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.alert-item.medium { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-item .title { margin: 0; font-size: 0.9rem; font-weight: 600; }
.alert-item .desc { margin: 0.15rem 0 0; font-size: 0.75rem; opacity: 0.8; }
.alert-item .act {
  margin-left: auto; align-self: center; background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 0.3rem; padding: 0.2rem 0.45rem;
  font-size: 0.7rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}

/* Transfer cadre cards */
.cadre-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  padding: 1.75rem 1.75rem 1.5rem;
  color: #fff;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cadre-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22); }
.cadre-card.doctor { background: linear-gradient(145deg, #0b3a66, #0e4a7a 50%, #0c4a6e); }
.cadre-card.nurse { background: linear-gradient(145deg, #115e59, #065f46 55%, #134e4a); }
.cadre-card .ico {
  width: 3.5rem; height: 3.5rem; border-radius: 1rem;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.cadre-card h3 { margin: 1.1rem 0 0; font-size: 1.75rem; font-weight: 700; }
.cadre-card p { margin: 0.5rem 0 0; max-width: 28rem; color: rgba(255,255,255,0.9); }
.cadre-card .cta { margin-top: auto; padding-top: 1.35rem; font-weight: 700; color: #bae6fd; }
.cadre-card.nurse .cta { color: #a7f3d0; }
.est-pill {
  display: inline-block;
  margin-left: auto;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(252, 211, 77, 0.4);
  color: #fef3c7;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pressure {
  border-radius: 1rem;
  border: 1px solid;
  padding: 1rem;
  background: linear-gradient(#fff, #fff);
}
.pressure.rose { border-color: #fecdd3; background: linear-gradient(#fff1f2, #fff); }
.pressure.amber { border-color: #fde68a; background: linear-gradient(#fffbeb, #fff); }
.pressure.orange { border-color: #fed7aa; background: linear-gradient(#fff7ed, #fff); }
.pressure.teal { border-color: #99f6e4; background: linear-gradient(#f0fdfa, #fff); }
.pressure .val { margin: 0.65rem 0 0; font-size: 1.85rem; font-weight: 700; }
.pressure .lbl { margin: 0.2rem 0 0; font-weight: 700; font-size: 0.95rem; }
.pressure .hint { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--muted); }

.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; }
.table th { background: #f8fafc; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-top: 2px solid var(--gold); }
.band-ok { color: #166534; font-weight: 700; }
.band-risk { color: #92400e; font-weight: 700; }
.band-bad { color: #9f1239; font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 0; border-radius: 0.45rem; padding: 0.55rem 0.95rem;
  font-weight: 600; cursor: pointer; background: var(--navy-800); color: #fff;
}
.btn:hover { background: var(--navy-900); }
.btn-primary { background: var(--navy-800); color: #fff; }
.btn-primary:hover { background: var(--navy-900); }
.btn-gold {
  background: linear-gradient(180deg, #c9893a 0%, var(--gold-dark) 100%);
  color: #fff;
}
.btn-gold:hover { background: linear-gradient(180deg, var(--gold) 0%, #8b4518 100%); }
.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f8fafc; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.85rem; }
.field label { display: block; margin-bottom: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.55rem 0.7rem;
  background: #fff;
}
.field input:focus, .field select:focus { outline: 2px solid rgba(20,90,140,0.25); border-color: var(--navy-700); }

.staff-typeahead { position: relative; }
.staff-typeahead input {
  width: 100%;
  box-sizing: border-box;
}
.staff-typeahead input.staff-typeahead-invalid {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.staff-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 40;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  max-height: 16rem;
  overflow: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.55rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.staff-suggest li[role="option"] {
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.staff-suggest li[role="option"]:hover,
.staff-suggest li[role="option"].is-active {
  background: #eff6ff;
}
.staff-suggest-name {
  font-weight: 700;
  color: #0b3a66;
  font-size: 0.9rem;
}
.staff-suggest-empid {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0e3d61;
  background: #e8f1f8;
  border: 1px solid #c5d8ea;
  vertical-align: middle;
}
.staff-emp-id-row {
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  background: #f3f8fc;
  border: 1px solid #d4e4f2;
  font-size: 0.85rem;
}
.staff-emp-id-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.staff-emp-id-row strong {
  font-family: Consolas, "Courier New", monospace;
  color: #0b3a66;
  letter-spacing: 0.02em;
}
.staff-suggest-meta {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}
.staff-suggest-empty {
  padding: 0.65rem 0.75rem;
  color: #64748b;
  font-size: 0.8rem;
}

/* Login */
.login-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  background: #0a1628;
  color: #fff;
  text-align: center;
  position: relative;
}
.login-page::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(244,165,75,0.22), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14,61,97,0.45), transparent 50%);
  pointer-events: none;
}
.login-inner { position: relative; z-index: 1; width: 100%; max-width: 28rem; }
.login-emblem {
  width: 14rem; height: 14rem; margin: 0 auto;
  border-radius: 999px; background: rgba(255,255,255,0.95); padding: 1rem;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(244,165,75,0.2);
}
.login-emblem img { width: 100%; height: 100%; object-fit: contain; }
.login-dept {
  margin: 1.5rem 0 0;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--gold-soft); text-transform: none;
}
.login-gov {
  margin: 0.65rem 0 0;
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--gold);
}
.login-rule { width: 4rem; height: 2px; margin: 1.75rem auto 0; background: var(--gold); }
.login-title { margin: 1.75rem 0 0; font-size: 1.25rem; font-weight: 600; }
.login-form { margin-top: 2rem; text-align: left; }
.login-form label {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #94a3b8;
}
.login-form input {
  width: 100%; margin-bottom: 0.9rem;
  border-radius: 0.45rem; border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.55); color: #fff; padding: 0.7rem 0.85rem;
}
.login-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(244,165,75,0.25);
}
.login-error {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  background: rgba(127,29,29,0.45);
  border: 1px solid rgba(252,165,165,0.35);
  color: #fecaca;
  font-size: 0.875rem;
}
.login-submit {
  width: 100%; margin-top: 0.35rem;
  border: 0; border-radius: 0.45rem; padding: 0.75rem;
  background: linear-gradient(180deg, #c9893a 0%, var(--gold-dark) 100%);
  color: #fff; font-weight: 700; cursor: pointer;
}
.login-submit:hover { background: linear-gradient(180deg, var(--gold) 0%, #8b4518 100%); }
.login-hint { margin-top: 1rem; font-size: 0.8rem; color: #94a3b8; text-align: center; }

.map-box {
  height: 420px;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #e0f2fe, #ecfdf5);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-weight: 600;
}

/* —— GIS map (Leaflet) —— */
.gis-page { display: flex; flex-direction: column; gap: 0.85rem; }
.gis-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: flex-start;
}
.gis-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gis-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border-radius: 0.4rem; padding: 0.35rem 0.65rem;
  font-size: 0.75rem; font-weight: 700;
  background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
}
.gis-pill-navy { background: #eff6ff; color: #0b3a66; border-color: #bfdbfe; }
.gis-pill-teal { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }

.gis-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0.85rem;
  min-height: calc(100vh - 14rem);
}
.gis-sidebar {
  padding: 0.85rem;
  overflow: auto;
  max-height: calc(100vh - 14rem);
}
.gis-side-block + .gis-side-block { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.gis-side-block h3 {
  margin: 0 0 0.5rem; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: #64748b; font-weight: 800;
}
.gis-side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gis-side-head h3 { margin: 0; }
.gis-type-colhead {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.gis-type-actions { display: flex; gap: 0.65rem; margin: 0.35rem 0 0.55rem; }
.gis-type-actions .linkish { font-size: 0.75rem; }
.linkish {
  border: 0; background: none; color: #0b3a66; font-size: 0.75rem; font-weight: 700; cursor: pointer; padding: 0;
}
.linkish:hover { text-decoration: underline; }

.gis-overlay-btn {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--border); background: #f8fafc; color: #334155;
  border-radius: 0.45rem; padding: 0.55rem 0.65rem; margin-bottom: 0.35rem;
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.gis-overlay-btn:hover { background: #f1f5f9; }
.gis-overlay-btn.active { background: #0b3a66; border-color: #0b3a66; color: #fff; }

.gis-label {
  display: block; font-size: 0.72rem; font-weight: 700; color: #64748b;
  margin: 0.45rem 0 0.25rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.gis-select, .gis-input {
  width: 100%; border: 1px solid var(--border); border-radius: 0.4rem;
  padding: 0.45rem 0.55rem; font: inherit; background: #fff;
}

.gis-type-list { display: flex; flex-direction: column; gap: 0.25rem; }
.gis-type-row {
  display: grid; grid-template-columns: auto 12px 1fr auto; gap: 0.45rem;
  align-items: center; font-size: 0.8rem; color: #1e293b; cursor: pointer;
  padding: 0.2rem 0;
}
.gis-type-row i {
  width: 10px; height: 10px; border-radius: 999px; display: inline-block;
}
.gis-type-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gis-type-count { font-variant-numeric: tabular-nums; color: #64748b; font-weight: 700; font-size: 0.75rem; }

.gis-map-wrap { padding: 0; overflow: hidden; min-height: 520px; }
.gis-map { height: calc(100vh - 14rem); min-height: 520px; width: 100%; background: #e2e8f0; }

.gis-popup { font-size: 12px; line-height: 1.35; color: #1e293b; min-width: 220px; max-width: 280px; }
.gis-popup-title { margin: 0; font-size: 13px; font-weight: 800; color: #0b3a66; }
.gis-popup-meta { margin: 0.15rem 0 0; color: #64748b; }
.gis-popup-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid #e2e8f0;
}
.gis-popup-grid span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; line-height: 1.25; }
.gis-popup-grid strong { display: block; margin-top: 0.15rem; font-size: 1.35rem; font-weight: 800; color: #0b3a66; font-variant-numeric: tabular-nums; }
.gis-popup-note { margin: 0.4rem 0 0; font-size: 10px; color: #475569; }
.gis-popup-src { margin: 0.35rem 0 0; font-size: 10px; color: #94a3b8; }
.leaflet-popup-content { margin: 0.65rem 0.85rem !important; }
.gis-leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: 0.65rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}

.gis-map-wrap { position: relative; padding: 0; overflow: hidden; }
.gis-legend {
  position: absolute;
  left: 0.85rem;
  right: auto;
  bottom: 0.85rem;
  z-index: 500;
  min-width: 11rem;
  max-width: 14rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  box-shadow: 0 8px 20px rgba(15,23,42,0.12);
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  color: #334155;
}
.gis-legend-title { margin: 0 0 0.4rem; font-weight: 800; color: #0b3a66; font-size: 0.8rem; }
.gis-legend-row { margin: 0.2rem 0; display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.gis-legend-row i {
  width: 0.7rem; height: 0.7rem; border-radius: 999px; display: inline-block;
  border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 0 0 1px rgba(15,23,42,0.08);
}
.gis-legend-note { margin: 0.45rem 0 0; font-size: 0.68rem; color: #64748b; line-height: 1.35; font-weight: 500; }

@media (max-width: 1100px) {
  .gis-layout { grid-template-columns: 1fr; }
  .gis-sidebar { max-height: none; }
  .gis-map { height: 520px; }
}

@media (max-width: 1100px) {
  .grid-6, .grid-5, .grid-4, .hero-stats, .district-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2:not(.impact-compare), .form-grid, .dash-tri { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .impact-compare { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { display: none; }
}

/* —— Institutions page (mock-aligned layout) —— */
.inst-page { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }
.inst-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.inst-title-row { display: flex; align-items: center; gap: 0.55rem; }
.inst-title-row h1 { margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--navy-900); letter-spacing: -0.02em; }
.inst-title-ico { font-size: 1.35rem; line-height: 1; }
.inst-lead { margin: 0.35rem 0 0; max-width: 40rem; font-size: 0.95rem; }
.inst-header-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.inst-district-form select {
  min-width: 14rem; height: 2.5rem; border-radius: 0.55rem; border: 1px solid var(--border);
  background: #fff; padding: 0 0.75rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.inst-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(9.5rem, 1.15fr);
  gap: 0.75rem;
}
.inst-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.9rem 0.85rem 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.inst-kpi::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, #0f766e);
}
.inst-kpi-ico {
  width: 1.65rem; height: 1.65rem; border-radius: 0.45rem; opacity: 0.9; margin-bottom: 0.55rem;
}
.inst-kpi-val { margin: 0; font-size: 1.85rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.inst-kpi-lbl { margin: 0.45rem 0 0; font-size: 0.78rem; font-weight: 600; color: #475569; line-height: 1.25; }
.inst-kpi-total {
  background: linear-gradient(145deg, #0f766e 0%, #115e59 55%, #0b3a66 100%);
  color: #fff;
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.25);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.inst-kpi-total::after {
  content: "";
  position: absolute; right: -1rem; bottom: -1.5rem;
  width: 6rem; height: 6rem; border-radius: 1rem;
  background: rgba(255,255,255,0.08);
  transform: rotate(18deg);
}
.inst-kpi-total-lbl { margin: 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.inst-kpi-total-val { margin: 0.35rem 0 0; font-size: 2.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.inst-kpi-total-hint { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.8; }

.inst-mid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 1rem;
  align-items: start;
}
.inst-side { display: flex; flex-direction: column; gap: 1rem; }
.inst-card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.inst-card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--navy-900); }
.inst-card-head .muted, .inst-table-card > .inst-card-head .muted { margin: 0.2rem 0 0; font-size: 0.85rem; }
.inst-card-head a { font-size: 0.85rem; font-weight: 700; color: var(--navy-800); white-space: nowrap; }
.inst-table-card { padding: 0; overflow: hidden; }
.inst-table-card > .inst-card-head { padding: 1rem 1.1rem 0.65rem; }
.inst-table-wrap { overflow: auto; }
.inv-table th, .inv-table td { white-space: nowrap; text-align: right; }
.inv-table th:first-child, .inv-table td:first-child { text-align: left; }
.inv-table thead th {
  background: #f8fafc; color: #334155; font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border);
}
.inv-table tbody tr:nth-child(even) { background: #f8fafc; }
.inv-table tfoot td { background: #f0fdfa; border-top: 2px solid #99f6e4; }

.inst-mix-card h2, .inst-hl-card h2 { margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 800; }
.inst-mix-body { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.inst-donut {
  width: 9.5rem; height: 9.5rem; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.06);
}
.inst-donut-hole {
  width: 5.6rem; height: 5.6rem; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.04);
}
.inst-donut-hole .n { font-size: 1.35rem; font-weight: 800; color: var(--navy-900); line-height: 1; }
.inst-donut-hole .l { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
.inst-mix-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 12rem; }
.inst-mix-legend li {
  display: grid; grid-template-columns: 0.65rem 1fr auto; gap: 0.45rem; align-items: start;
  padding: 0.28rem 0; font-size: 0.78rem;
}
.inst-mix-legend .dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; margin-top: 0.25rem; }
.inst-mix-legend .lab { color: #334155; font-weight: 600; line-height: 1.25; }
.inst-mix-legend .num { color: #0f172a; font-weight: 800; white-space: nowrap; }
.inst-mix-legend .num em { font-style: normal; font-weight: 600; color: #64748b; }

.inst-hl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.inst-hl-list .hl-title { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.inst-hl-list .hl-row { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; font-size: 0.92rem; }
.inst-hl-list .hl-val { font-weight: 800; }
.inst-hl-list .hl-bar { display: block; height: 0.35rem; background: #e2e8f0; border-radius: 999px; margin-top: 0.35rem; overflow: hidden; }
.inst-hl-list .hl-bar > span { display: block; height: 100%; border-radius: 999px; }

.inst-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.inst-cat {
  background: #fff; border: 1px solid var(--border); border-radius: 0.85rem;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04); overflow: hidden;
}
.inst-cat > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 0.95rem; font-weight: 700;
}
.inst-cat > summary::-webkit-details-marker { display: none; }
.inst-cat .cat-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; flex-shrink: 0; }
.inst-cat .cat-title { flex: 1; font-size: 0.88rem; color: var(--navy-900); line-height: 1.25; }
.inst-cat .cat-count {
  font-size: 0.85rem; font-weight: 800; color: #0f766e;
  background: #f0fdfa; border-radius: 999px; padding: 0.15rem 0.55rem;
}
.inst-cat .cat-chev { color: #94a3b8; font-size: 0.75rem; transition: transform 0.15s ease; }
.inst-cat[open] > summary { border-bottom: 1px solid var(--border); background: #f8fafc; }
.inst-cat[open] .cat-chev { transform: rotate(180deg); }
.inst-cat-body { padding: 0.85rem 0.95rem 1rem; max-height: 28rem; overflow: auto; }
.inst-cat-district { margin-bottom: 0.85rem; }
.inst-cat-district h4 { margin: 0 0 0.35rem; font-size: 0.88rem; color: var(--navy-800); }
.inst-cat-district h4 span { color: var(--muted); font-weight: 600; }
.inst-footer { font-size: 0.875rem; color: #334155; }
.inst-footer p { margin: 0; }
.inst-footer p + p { margin-top: 0.45rem; }

@media (max-width: 1200px) {
  .inst-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inst-kpi-total { grid-column: 1 / -1; }
  .inst-mid { grid-template-columns: 1fr; }
  .inst-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .inst-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inst-cat-grid { grid-template-columns: 1fr; }
}

/* —— Vacancies analytics —— */
.vac-hero-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: flex-start;
}
.vac-hero-badge {
  background: rgba(244,165,75,0.15); color: #a15c30; border: 1px solid rgba(244,165,75,0.45);
  border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 800;
}
.vac-kpi-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem;
}
.vac-kpi {
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.9rem 1rem;
  border-top: 4px solid var(--navy-800);
}
.vac-kpi .lbl { margin: 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.vac-kpi .val { margin: 0.35rem 0 0; font-size: 1.85rem; font-weight: 800; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.vac-kpi .hint { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.vac-kpi-rose { border-top-color: #be123c; }
.vac-kpi-rose .val { color: #9f1239; }
.vac-kpi-navy { border-top-color: #0b3a66; }
.vac-kpi-teal { border-top-color: #0f766e; }
.vac-kpi-teal .val { color: #0f766e; }
.vac-kpi-amber { border-top-color: #c9893a; }
.vac-kpi-amber .val { color: #a15c30; }

.vac-nav-form { margin: 0; }
.vac-nav-row {
  display: grid; grid-template-columns: 1.2fr 1.2fr auto; gap: 0.75rem; align-items: end;
}
.vac-select, .vac-nav-form .field select {
  width: 100%; border: 1px solid var(--border); border-radius: 0.45rem;
  padding: 0.55rem 0.65rem; background: #fff;
}
.vac-nav-go .btn { white-space: nowrap; }

.vac-split { align-items: start; }
.vac-cat-list { display: flex; flex-direction: column; gap: 0.65rem; }
.vac-cat-row .vac-cat-meta {
  display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.88rem; margin-bottom: 0.3rem;
}
.vac-cat-row .vac-cat-meta span { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.vac-bar {
  height: 0.55rem; border-radius: 999px; background: #eef2f7; overflow: hidden;
}
.vac-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #0e3d61, #f4a54b);
}

.table-wrap { overflow-x: auto; }
.vac-table th.num, .vac-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.vac-num { color: #9f1239; font-weight: 700; }
.vac-link { color: var(--navy-800); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.vac-band {
  display: inline-flex; border-radius: 999px; padding: 0.15rem 0.55rem;
  font-size: 0.72rem; font-weight: 800;
}
.vac-band-ok { background: #ecfdf5; color: #047857; }
.vac-band-watch { background: #fffbeb; color: #b45309; }
.vac-band-crit { background: #fff1f2; color: #be123c; }
.vac-band-nodata { background: #f1f5f9; color: #475569; }
.vac-total-row td {
  border-top: 2px solid #cbd5e1;
  background: #f8fafc;
  font-weight: 600;
}
.vac-row-crit { background: #fff7f8; }

.vac-kpi-clinical { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vac-context-list {
  margin: 0.65rem 0 0; padding-left: 1.1rem; line-height: 1.7;
}
.vac-context-list li { margin: 0; }
@media (max-width: 1100px) {
  .vac-kpi-clinical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .vac-kpi-grid { grid-template-columns: 1fr; }
}

/* ── Bonded Doctors Tracker ─────────────────────────────────────── */
.bd-hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.bd-completed-chip {
  font-size: 0.8rem;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 0.35rem;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
}
.bd-flash {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.bd-flash.ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.bd-flash.err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.bd-empty-note {
  margin: 0.75rem 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.45rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.9rem;
}
.bd-manage {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #c5d8ea;
  background: #f3f8fc;
}
.bd-manage-copy {
  flex: 1 1 16rem;
  min-width: 0;
}
.bd-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.bd-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.bd-file-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0b3a66;
  cursor: pointer;
}
.bd-file-label input[type="file"] {
  max-width: 14rem;
  font-size: 0.8rem;
}
.bd-asof-input {
  width: 11rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
}
.bd-clear-form { display: inline; }

/* Shared admin download + upload (one of each) */
.admin-data-panel {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #c5d8ea;
  background: #f3f8fc;
}
.admin-data-copy strong {
  display: block;
  color: #0b3a66;
}
.admin-data-copy .muted {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  max-width: 52rem;
}
.admin-data-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.75rem;
}
.admin-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.admin-file {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0b3a66;
}
.admin-file-caption { white-space: nowrap; }
.admin-file input[type="file"] {
  max-width: 16rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.admin-data-hint {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.45rem;
  background: #f3f8fc;
  border: 1px solid #c5d8ea;
  color: #0b3a66;
  font-size: 0.9rem;
}
.bb-edit-form { margin: 0; }
.bb-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
}
.bb-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.bb-edit-grid input {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.45rem 0.55rem;
}
.bb-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (max-width: 800px) {
  .bb-edit-grid { grid-template-columns: 1fr; }
}
.bd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}
.bd-kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bd-kpi {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy-700);
  border-radius: 0.45rem;
  padding: 0.75rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
a.bd-kpi:hover {
  border-color: var(--navy-700);
  background: var(--navy-50);
}
.bd-kpi .lbl {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bd-kpi .val {
  margin: 0.3rem 0 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bd-kpi .hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.bd-kpi-overdue {
  border-top-color: #be123c;
  background: #fff1f2;
  border-color: #fecdd3;
}
.bd-kpi-overdue .val { color: #9f1239; }
.bd-kpi-amber { border-top-color: #c9893a; }
.bd-kpi-amber .val { color: #a15c30; }

.bd-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}
.bd-link {
  color: var(--navy-700);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.bd-link:hover { color: var(--gold-dark); text-decoration: underline; }

.bd-pipeline { display: flex; flex-direction: column; gap: 0.55rem; }
.bd-pipe-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.65rem;
  align-items: center;
  font-size: 0.9rem;
}
.bd-pipe-row .yr { font-weight: 700; color: var(--navy-900); }
.bd-pipe-row .bar {
  height: 0.55rem;
  background: #e8eef4;
  border-radius: 999px;
  overflow: hidden;
}
.bd-pipe-row .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--navy-700), var(--navy-900));
  border-radius: 999px;
}
.bd-pipe-row .cap { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

.bd-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bd-action-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  border-radius: 0.4rem;
  color: #9f1239;
}
.bd-action-list a:hover { background: #ffe4e6; }
.bd-action-list .count {
  font-size: 1.25rem;
  font-weight: 800;
  min-width: 1.75rem;
}
.bd-action-list .lbl { flex: 1; font-weight: 600; font-size: 0.9rem; }
.bd-action-list .arrow { opacity: 0.7; }

.bd-table th.num,
.bd-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bd-num-alert { color: #9f1239; font-weight: 700; }

.bd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.bd-filters .field { min-width: 10rem; }
.bd-check-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  padding: 0.45rem 0;
}

.bd-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-blue { background: #e0f2fe; color: #075985; }
.chip-amber { background: #fef3c7; color: #92400e; }
.chip-purple { background: #f3e8ff; color: #6b21a8; }
.chip-green { background: #dcfce7; color: #166534; }
.chip-red { background: #ffe4e6; color: #9f1239; }
.chip-grey { background: #f1f5f9; color: #475569; }

.bd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.bd-tabs a {
  padding: 0.4rem 0.75rem;
  border-radius: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.bd-tabs a:hover { background: var(--navy-50); color: var(--navy-900); }
.bd-tabs a.active {
  background: var(--navy-900);
  color: #fff;
}
.bd-tabs-wrap { margin-top: 0.75rem; }

.bd-report-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.bd-report-card {
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.9rem 1rem;
  background: var(--navy-50);
}

.bd-profile-banner {
  border-left: 4px solid var(--navy-700);
}
.bd-profile-banner.chip-red { border-left-color: #be123c; background: #fff7f8; }
.bd-profile-banner.chip-purple { border-left-color: #7c3aed; background: #faf5ff; }
.bd-profile-banner.chip-green { border-left-color: #16a34a; background: #f0fdf4; }
.bd-profile-banner.chip-amber { border-left-color: #ca8a04; background: #fffbeb; }
.bd-profile-banner.chip-blue { border-left-color: #0284c7; background: #f0f9ff; }
.bd-banner-status {
  margin: 0.65rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bd-date-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.bd-date-trio .lbl {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bd-date-trio .val {
  margin: 0.2rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-900);
}
.bd-dl {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
}
.bd-dl dt { margin: 0; color: var(--muted); font-weight: 500; }
.bd-dl dd { margin: 0; font-weight: 600; }

@media (max-width: 1100px) {
  .bd-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-kpi-4, .bd-kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-report-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bd-kpi-grid, .bd-kpi-4, .bd-kpi-5 { grid-template-columns: 1fr; }
  .bd-date-trio { grid-template-columns: 1fr; }
  .bd-dl { grid-template-columns: 1fr; }
  .bd-dl dt { margin-top: 0.35rem; }
}

/* ——— Accessibility module ——— */
.acc-page { gap: 0.85rem; }
.acc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.15rem;
}
.acc-tab {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy-900);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.acc-tab:hover { border-color: #94a3b8; }
.acc-tab.active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.acc-hero { padding: 1rem 1.15rem 1.1rem; }
.acc-hero.compact { padding-bottom: 1rem; }
.acc-hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.85rem;
}
.acc-disclaimer {
  margin: 0;
  max-width: 18rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.acc-filters { padding: 0.85rem 1rem; }
.acc-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  align-items: flex-end;
}
.acc-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  min-width: 9.5rem;
}
.acc-filter-form .acc-search { min-width: 12rem; flex: 1; }
.acc-filter-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.acc-check {
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem !important;
  min-width: auto !important;
  color: var(--navy-900) !important;
  font-size: 0.88rem !important;
}
.acc-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.95fr);
  gap: 0.85rem;
  align-items: start;
}
.acc-overview-below {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.acc-map-card .acc-map {
  height: 420px;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  margin-top: 0.65rem;
  background: #e8eef5;
}
.acc-map-card-wide .acc-map {
  height: calc(100vh - 18rem);
  min-height: 520px;
  width: 100%;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: #e2e8f0;
}
.acc-map-card-wide {
  padding-bottom: 0.85rem;
  overflow: hidden;
}
.acc-map-card-wide .bd-section-head {
  padding: 0 0.15rem;
}
.acc-map-frame {
  position: relative;
  margin-top: 0.65rem;
}
.acc-map-card-wide .acc-map-frame {
  margin-top: 0.75rem;
}
.acc-map-frame .acc-map {
  margin-top: 0;
}
.acc-map-card { position: relative; }
.acc-map-legend-float {
  left: 0.85rem;
  right: auto;
  bottom: 0.85rem;
}
.acc-map-legend-below {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 1.25rem;
  min-width: 0;
  max-width: none;
  margin: 0.75rem 0.15rem 0;
  padding: 0.65rem 0.85rem;
  box-shadow: none;
  background: #f8fafc;
}
.acc-map-legend-below .gis-legend-title {
  width: 100%;
  margin-bottom: 0.15rem;
}
.acc-map-legend-below .gis-legend-row {
  margin: 0;
}
.acc-map-legend-below .gis-legend-note {
  width: 100%;
  margin-top: 0.25rem;
}
.acc-map-legend .dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.dot.risk-critical { background: #b91c1c; }
.dot.risk-high { background: #ea580c; }
.dot.risk-medium { background: #ca8a04; }
.dot.risk-low { background: #15803d; }
.acc-rank-list { display: flex; flex-direction: column; gap: 0.45rem; }
.acc-rank-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 2.4rem;
  gap: 0.5rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  font-size: 0.84rem;
}
.acc-rank-row:hover .name { text-decoration: underline; }
.acc-rank-row .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-rank-row .bar {
  height: 0.45rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.acc-rank-row .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ca8a04, #b91c1c);
  border-radius: 999px;
}
.acc-rank-row .score { text-align: right; font-weight: 700; color: var(--navy-900); }
.acc-top5 { list-style: none; margin: 0; padding: 0; }
.acc-top5 li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.acc-top5 li:last-child { border-bottom: 0; }
.acc-top5 .title { margin: 0; font-weight: 700; font-size: 0.9rem; }
.acc-top5 .meta { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); }
.acc-top5 .empty { color: var(--muted); font-size: 0.88rem; }
.acc-band {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.band-critical { background: #fee2e2; color: #991b1b; }
.band-high { background: #ffedd5; color: #9a3412; }
.band-medium { background: #fef9c3; color: #854d0e; }
.band-low { background: #dcfce7; color: #166534; }
.acc-pill {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.acc-pill.ok { background: #dcfce7; color: #166534; }
.acc-pill.bad { background: #fee2e2; color: #991b1b; }
.acc-table th.num, .acc-table td.num { text-align: right; }
.acc-table tr.row-active { background: #f0f7ff; }
.acc-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 0.85rem;
}
.acc-district-bars { display: flex; flex-direction: column; gap: 0.45rem; }
.acc-dbar {
  display: grid;
  grid-template-columns: 9.5rem 1fr minmax(10rem, auto);
  gap: 0.55rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0.35rem 0.4rem;
  border-radius: 0.45rem;
}
.acc-dbar:hover, .acc-dbar.active { background: #f1f5f9; }
.acc-dbar .name { font-weight: 600; font-size: 0.86rem; }
.acc-dbar .track {
  height: 0.5rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.acc-dbar .track i {
  display: block;
  height: 100%;
  background: #b45309;
}
.acc-dbar .meta { font-size: 0.78rem; color: var(--muted); text-align: right; }
.acc-side-form .gis-overlay-btn { width: 100%; margin-bottom: 0.35rem; text-align: left; }
a.metric-link {
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
a.metric-link:hover {
  border-color: #94a3b8;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
@media (max-width: 1100px) {
  .acc-overview-grid { grid-template-columns: 1fr; }
  .acc-overview-below { grid-template-columns: 1fr; }
  .acc-map-card-wide .acc-map {
    height: 520px;
    min-height: 420px;
  }
  .acc-dbar { grid-template-columns: 1fr; gap: 0.25rem; }
  .acc-dbar .meta { text-align: left; }
}
@media print {
  .sidebar, .dept-banner, .topbar, .acc-tabs, .acc-filters, .btn { display: none !important; }
  .main-col { margin: 0 !important; width: 100% !important; }
}

/* ——— Notifications & User Management ——— */
.notif-page, .users-page { gap: 0.85rem; }
.notif-hero { padding: 1rem 1.15rem; }
.notif-hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.notif-count-chip {
  align-self: flex-start;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #312e81;
  font-size: 0.82rem;
  font-weight: 600;
}
.notif-banner {
  padding: 0.65rem 0.85rem;
  border-radius: 0.55rem;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.notif-banner.ok { background: #dcfce7; color: #166534; }
.notif-banner.err { background: #fee2e2; color: #991b1b; }
.notif-post {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.notif-form {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 0.65rem 0.85rem;
}
.notif-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.notif-form label.full { grid-column: 1 / -1; }
.notif-form input,
.notif-form select,
.notif-form textarea {
  font: inherit;
  font-weight: 500;
  color: var(--navy-900);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.45rem 0.6rem;
  background: #fff;
}
.notif-form-actions { grid-column: 1 / -1; }
.notif-latest { list-style: none; margin: 0; padding: 0; }
.notif-latest li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.notif-latest li:last-child { border-bottom: 0; }
.notif-latest .title { margin: 0; font-weight: 700; font-size: 0.92rem; }
.notif-latest .meta { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); }
.notif-day { margin-bottom: 1.15rem; }
.notif-day:last-child { margin-bottom: 0; }
.notif-day-label {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.notif-list li:last-child { border-bottom: 0; }
.notif-time {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-900);
  padding-top: 0.15rem;
}
.notif-body .title { margin: 0; font-weight: 700; }
.notif-body .text { margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.45; }
.notif-body .meta { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted); }
.notif-mod {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  background: #e2e8f0;
  color: #334155;
  font-weight: 600;
}
.user-code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88rem;
  background: #f1f5f9;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
}
.users-pen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  color: #0b3a66;
  border: 1px solid #c5d8ea;
  background: #f3f8fc;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.users-pen:hover {
  background: #e8f1f8;
  border-color: #0b3a66;
  color: #061a33;
}
.users-row-editing td {
  background: #f8fafc;
  vertical-align: top;
}
.users-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 22rem;
}
.users-edit-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 0.25rem;
}
.users-edit-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.9rem;
}
.users-edit-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.users-flash {
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.users-flash.ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.users-flash.err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
@media (max-width: 800px) {
  .notif-form { grid-template-columns: 1fr; }
  .notif-list li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ——— Manpower Registry (two-step) ——— */
.mr-page { gap: 0.85rem; }
.mr-disclaimer {
  margin: 0;
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 600;
}
.mr-step-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mr-cadre-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}
.mr-cadre-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  border: 1.5px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  position: relative;
  min-height: 7rem;
}
.mr-cadre-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.mr-cadre-card.selected {
  border-color: #0b3a66;
  background: #f0f7ff;
  box-shadow: 0 0 0 1px #0b3a66;
}
.mr-cadre-card.nurse.selected {
  border-color: #0f766e;
  background: #f0fdfa;
  box-shadow: 0 0 0 1px #0f766e;
}
.mr-cadre-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
  background: #e0f2fe;
  color: #0b3a66;
}
.mr-cadre-card.nurse .mr-cadre-ico {
  background: #ccfbf1;
  color: #0f766e;
}
.mr-cadre-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mr-cadre-title { font-size: 1.15rem; font-weight: 800; color: var(--navy-900); }
.mr-cadre-count {
  font-size: 1.55rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--navy-900);
  line-height: 1.1;
}
.mr-cadre-sub { font-size: 0.82rem; color: var(--muted); }
.mr-cadre-check {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0b3a66;
  background: #dbeafe;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}
.mr-cadre-card.nurse .mr-cadre-check {
  color: #0f766e;
  background: #ccfbf1;
}
.mr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  align-items: flex-end;
  margin-top: 0.85rem;
}
.mr-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  min-width: 9.5rem;
}
.mr-field-grow { flex: 1; min-width: 12rem; }
.mr-field .req { color: #b91c1c; font-style: normal; }
.mr-filter-actions {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding-bottom: 0.1rem;
}
.mr-empty-banner {
  background: #fff7ed;
  border: 1px solid #fdba74;
  padding: 1rem 1.15rem;
}
.mr-empty-title {
  margin: 0;
  font-weight: 700;
  color: #9a3412;
  font-size: 0.95rem;
}
.mr-table-card { padding-bottom: 0.85rem; }
.mr-table-head { align-items: flex-start; }
.mr-table-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-end;
}
.mr-count {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}
.mr-table-wrap {
  margin-top: 0.65rem;
  max-height: min(70vh, 42rem);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
}
.mr-table { margin: 0; }
.mr-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 var(--border);
}
.mr-table td, .mr-table th { vertical-align: top; }
.mr-table .mono { font-variant-numeric: tabular-nums; font-size: 0.84rem; }
.mr-block-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.mr-actions-col { width: 3.25rem; text-align: center; }
.mr-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: #fff;
  color: var(--navy-900);
  cursor: pointer;
}
.mr-view-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.mr-no-rows {
  text-align: center;
  padding: 2rem 1rem !important;
  color: var(--muted);
  font-weight: 600;
}
.mr-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0 0.15rem;
}
.mr-page-size label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.mr-page-size .gis-select { min-width: 4.5rem; }
.mr-pages { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.mr-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy-900);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
}
.mr-page-btn:hover { background: #f1f5f9; }
.mr-page-btn.active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.mr-page-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.mr-page-ellipsis { color: var(--muted); padding: 0 0.2rem; }

.mr-modal[hidden] { display: none !important; }
.mr-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.mr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.mr-modal-panel {
  position: relative;
  width: min(28rem, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  animation: mr-slide-in 0.18s ease;
}
@keyframes mr-slide-in {
  from { transform: translateX(1rem); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}
.mr-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border);
}
.mr-modal-close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}
.mr-modal-body { padding: 1rem 1.15rem; overflow: auto; }
.mr-detail-grid {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}
.mr-detail-grid dt {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.mr-detail-grid dd {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-900);
}
.mr-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mr-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.85rem;
}
.mr-field > span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.mr-field input,
.mr-field select {
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.5rem 0.65rem;
  font: inherit;
  color: var(--navy-900);
  background: #fff;
}
.mr-field .mr-hint {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
}
.mr-date-input {
  min-height: 2.35rem;
}
.mr-field input:focus,
.mr-field select:focus {
  outline: 2px solid #0b3a66;
  outline-offset: 1px;
}
.mr-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.mr-save-msg {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.mr-save-ok { color: #047857; }
.mr-save-err { color: #b91c1c; }
.mr-edit-hint { margin: 0.85rem 0 0; font-size: 0.8rem; }
body.mr-modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .mr-cadre-grid { grid-template-columns: 1fr; }
  .mr-table-tools { justify-content: flex-start; }
}

/* ——— Data Updates hub ——— */
.du-page { gap: 0.85rem; }
.du-hero { padding: 1rem 1.15rem; }
.du-disclaimer {
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 600;
}
.du-sql-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.du-sql-pill.ok { background: #dcfce7; color: #166534; }
.du-sql-pill.warn { background: #fef3c7; color: #92400e; }
.du-perm-summary {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.du-perm-summary .lbl {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.du-perm-summary ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--navy-900);
  font-size: 0.84rem;
}
.du-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.85rem;
}
.du-card { display: flex; flex-direction: column; gap: 0.75rem; }
.du-card-disabled { opacity: 0.78; }
.du-card-top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}
.du-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.du-status.tone-ok { background: #dcfce7; color: #166534; }
.du-status.tone-warn { background: #fef3c7; color: #92400e; }
.du-status.tone-muted { background: #f1f5f9; color: #475569; }
.du-meta {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}
.du-meta dt {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.du-meta dd {
  margin: 0.15rem 0 0;
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.9rem;
}
.du-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}
.du-actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.du-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.du-dash-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: center;
  border: 1px solid #bfdbfe;
  background: linear-gradient(180deg, #f8fbff, #fff);
}

/* ——— Blood Banks & Blood Safety ——— */
.bb-page { gap: 0.85rem; }
.bb-unmapped-table {
  width: 100%;
  table-layout: fixed;
}
.bb-unmapped-table th:nth-child(1),
.bb-unmapped-table td:nth-child(1) { width: 34%; }
.bb-unmapped-table th:nth-child(2),
.bb-unmapped-table td:nth-child(2) { width: 18%; }
.bb-unmapped-table th:nth-child(3),
.bb-unmapped-table td:nth-child(3) { width: 16%; }
.bb-unmapped-table th:nth-child(4),
.bb-unmapped-table td:nth-child(4) { width: 18%; }
.bb-unmapped-table th:nth-child(5),
.bb-unmapped-table td:nth-child(5) { width: 14%; }
.bb-unmapped-table .bb-col-name {
  font-weight: 600;
  color: #0b3a66;
  word-wrap: break-word;
}
.bb-licence-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 0.35rem;
  white-space: nowrap;
}
.bb-licence-pill.ok {
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.bb-licence-pill.bad {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.bb-kpi-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.bb-filters { margin-top: 0.35rem; }
.bb-row2 { margin-top: 0; }
.bb-row3 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.bb-row2-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  align-items: start;
}
.bb-map { height: 380px; }
.bb-map-tall {
  height: calc(100vh - 16rem);
  min-height: 480px;
  margin-top: 0;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
}
.bb-map-side { height: 220px; margin: 0.35rem 0 0.65rem; }
.bb-map-wide {
  height: calc(100vh - 18rem);
  min-height: 560px;
  max-height: 720px;
  margin-top: 0.55rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: #e8eef5;
}
.bb-registry-map-card .bd-section-head {
  margin-bottom: 0;
}
.bb-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  margin-top: 0.65rem;
  font-size: 0.8rem;
  color: var(--muted);
  align-items: center;
}
.bb-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.bb-dot-centre { background: #b91c1c; }
.bb-dot-storage { background: #2563eb; }
.bb-dot-process { background: #d97706; box-shadow: inset 0 0 0 2px #fff; outline: 1px solid #d97706; }
.bb-rank-wrap { max-height: 420px; overflow: auto; }
.bb-bars { display: grid; gap: 1rem; }
.bb-bar-group { display: grid; gap: 0.35rem; }
.bb-bar-label { font-weight: 700; font-size: 0.85rem; color: var(--navy-900); }
.bb-bar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 4.5rem;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
}
.bb-bar-key { color: var(--muted); font-weight: 600; }
.bb-bar-track {
  height: 0.65rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.bb-bar-fill { height: 100%; border-radius: 999px; }
.bb-bar-collected { background: #1d4ed8; }
.bb-bar-issued { background: #15803d; }
.bb-bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bb-readiness-empty {
  padding: 1.25rem 0.5rem;
  text-align: center;
}
.bb-na-big {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #64748b;
}
.bb-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.bb-alert-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.bb-alert-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.bb-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.bb-pill-critical { background: #fee2e2; color: #991b1b; }
.bb-pill-high { background: #ffedd5; color: #9a3412; }
.bb-pill-watch { background: #fef3c7; color: #92400e; }
.bb-pill-ready { background: #dcfce7; color: #166534; }
.bb-pill-na { background: #f1f5f9; color: #475569; }
.bb-source-note {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid #bfdbfe;
  background: #f8fbff;
  color: #334155;
  font-size: 0.8rem;
  line-height: 1.4;
}
.bb-registry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.bb-side { display: none; }
.bb-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.bb-kpi-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.bb-kpi-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 900px) {
  .bb-kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-map-wide { height: 420px; min-height: 420px; max-height: none; }
}
@media (max-width: 640px) {
  .bb-kpi-4 { grid-template-columns: 1fr 1fr; }
  .bb-kpi-5 { grid-template-columns: 1fr 1fr; }
}
.bb-centres-table-wrap { margin-top: 0.65rem; }
.bb-centres-table {
  width: 100%;
  table-layout: auto;
}
.bb-centres-table th,
.bb-centres-table td {
  padding: 0.55rem 0.65rem;
  vertical-align: top;
  font-size: 0.88rem;
  line-height: 1.35;
}
.bb-centres-table th.num,
.bb-centres-table td.num {
  width: 3rem;
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
}
.bb-centres-table td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  white-space: nowrap;
}
.bb-centres-table .bb-status {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.78rem;
  font-weight: 700;
}
.bb-centres-table .bb-row-act {
  width: 3.5rem;
  text-align: right;
  white-space: nowrap;
}
.bb-centres-table .bb-row-act a {
  font-weight: 700;
  text-decoration: none;
}
.bb-quick { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.bb-pager { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.bb-pager a {
  display: inline-block;
  min-width: 1.75rem;
  text-align: center;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  text-decoration: none;
  color: var(--navy-900);
  font-size: 0.8rem;
  font-weight: 600;
}
.bb-pager a.active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.bb-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
  margin: 0;
}
.bb-dl dt {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.bb-dl dd { margin: 0.2rem 0 0; font-weight: 600; color: var(--navy-900); }
.bb-profile-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; }
.bb-designation-list {
  columns: 2;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}
.bb-infra-empty-lead {
  margin: 0;
  font-size: 0.95rem;
  color: #0f172a;
  line-height: 1.4;
}
.bb-infra-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bb-infra-chips li {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  line-height: 1.2;
}
.bb-infra-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.bb-infra-stat {
  padding: 0.65rem 0.75rem;
  border-radius: 0.45rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.bb-infra-stat .lbl {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.bb-infra-stat strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.35rem;
  color: #0f172a;
}
.bb-infra-stat.tone-crit {
  background: #fef2f2;
  border-color: #fecaca;
}
.bb-infra-stat.tone-crit strong { color: #b91c1c; }
.bb-infra-critical {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-infra-critical li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.88rem;
}
.bb-infra-critical li:last-child { border-bottom: none; }
.bb-infra-critical strong { color: #b91c1c; }
.bb-infra-details {
  margin-top: 0.85rem;
  font-size: 0.86rem;
  color: #334155;
}
.bb-infra-details summary {
  cursor: pointer;
  font-weight: 700;
  color: #0b3a66;
}
.bb-popup { font-size: 0.85rem; line-height: 1.35; min-width: 12rem; }
.bb-popup .muted { color: #64748b; }
.bb-popup a { display: inline-block; margin-top: 0.35rem; font-weight: 700; }
.bb-map-tooltip {
  background: #0f172a;
  color: #f8fafc;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}
.bb-map-tooltip::before { border-top-color: #0f172a; }

/* ——— FRU Strengthening (network + pipeline) ——— */
.fru-page { gap: 0.9rem; }
.fru-title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: flex-start;
}
.fru-page-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.fru-page-sub {
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.92rem;
  max-width: 40rem;
  line-height: 1.45;
}
.fru-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.fru-updated { font-size: 0.82rem; }
.fru-filters { padding: 0.9rem 1rem; }
.fru-filter-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.75rem 1rem;
  align-items: end;
}
.fru-filter-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 0.3rem;
}
.fru-filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.fru-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.fru-kpi {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
}
.fru-kpi-ico {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fru-kpi-ico.tone-green { background: #dcfce7; color: #15803d; }
.fru-kpi-ico.tone-blue { background: #dbeafe; color: #1d4ed8; }
.fru-kpi-ico.tone-orange { background: #ffedd5; color: #c2410c; }
.fru-kpi-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.fru-kpi-val {
  margin: 0.15rem 0 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}
.fru-kpi-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}
.fru-mid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}
.fru-side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.fru-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.fru-card-head h3 {
  margin: 0;
  font-size: 0.98rem;
}
.fru-map {
  height: 420px;
  min-height: 320px;
  border-radius: 0.65rem;
  border: 1px solid var(--border);
}
.fru-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.15rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: #334155;
}
.fru-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 23, 42, 0.12);
}
.fru-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.fru-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.84rem;
  margin-bottom: 0.3rem;
}
.fru-bar-track {
  height: 0.55rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.fru-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 0.35rem;
}
.fru-pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fru-pipeline li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.9rem;
}
.fru-pipeline li:last-child { border-bottom: none; }
.fru-pipeline-total {
  margin-top: 0.25rem;
  padding-top: 0.7rem !important;
  border-top: 1px solid #e2e8f0;
  font-weight: 700;
}
.fru-tables {
  display: grid;
  grid-template-columns: 1.35fr minmax(16rem, 0.85fr);
  gap: 0.85rem;
  align-items: start;
}
.fru-table { font-size: 0.84rem; }
.fru-table th { white-space: nowrap; }
.fru-table-note {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 0.8rem;
  line-height: 1.4;
}
.fru-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.fru-dir-count {
  font-size: 0.8rem;
  font-weight: 600;
}
.fru-dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fru-dir-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #eef2f7;
}
.fru-dir-list li:last-child { border-bottom: none; }
.fru-dir-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.fru-dir-main strong {
  font-size: 0.92rem;
  color: #0f172a;
}
.fru-dir-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.4rem;
  border-radius: 0.3rem;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.fru-dir-district {
  font-size: 0.84rem;
  color: #64748b;
  text-align: right;
}
.fru-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}
.fru-pager a {
  min-width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.82rem;
  text-decoration: none;
  background: #fff;
}
.fru-pager a.active {
  background: #0b3a66;
  border-color: #0b3a66;
  color: #fff;
  font-weight: 700;
}
.fru-about {
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
}
.fru-about strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}
.fru-about p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #1e40af;
}
.fru-source {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .fru-mid,
  .fru-tables { grid-template-columns: 1fr; }
  .fru-filter-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .fru-kpi-row { grid-template-columns: 1fr; }
  .fru-filter-form { grid-template-columns: 1fr; }
  .fru-map { height: 320px; }
}

/* ——— MACS Facilities ——— */
.macs-page { gap: 0.85rem; }
.macs-note {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.45rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.82rem;
  line-height: 1.45;
}
.macs-type {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}
.macs-type-DSRC { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.macs-type-ICTC { border-color: #86efac; background: #ecfdf5; color: #166534; }
.macs-type-MobileICTC { border-color: #c4b5fd; background: #f5f3ff; color: #5b21b6; }
.macs-map {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
}
.macs-map.ok { color: #166534; background: #ecfdf5; border: 1px solid #a7f3d0; }
.macs-map.bad { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.macs-table td { vertical-align: top; }
.macs-map-legend { margin-top: 0.65rem; }
.macs-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.macs-dot-dsrc { background: #eab308; }
.macs-dot-ictc { background: #38bdf8; }
.macs-dot-mobile { background: #b8956c; }
.macs-popup { font-size: 0.85rem; line-height: 1.35; }




/* ===== Facility Network ===== */
.fn-page { gap: 0.85rem; }
.fn-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.fn-page-title {
  margin: 0;
  font-size: 1.45rem;
  color: #0b3a66;
  font-weight: 700;
}
.fn-page-sub {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.92rem;
}
.fn-title-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.fn-updated { font-size: 0.82rem; }
.fn-filters { padding: 0.85rem 1rem; }
.fn-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  align-items: flex-end;
}
.fn-filter-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fn-filter-search { min-width: 10rem; flex: 1 1 10rem; }
.fn-filter-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.fn-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
}
.fn-kpi {
  padding: 0.75rem 0.85rem;
  border-left: 3px solid #cbd5e1;
}
.fn-kpi.tone-chc { border-left-color: #3730a3; }
.fn-kpi.tone-phc { border-left-color: #0f766e; }
.fn-kpi.tone-sc { border-left-color: #a16207; }
.fn-kpi.tone-ok { border-left-color: #15803d; }
.fn-kpi-label {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fn-kpi-val {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.35rem;
  color: #0f172a;
}
.fn-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  align-items: stretch;
}
.fn-explorer { padding: 0; overflow: hidden; }
.fn-explorer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 420px;
  max-height: calc(100vh - 22rem);
}
.fn-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e8f0;
  min-width: 0;
}
.fn-col:last-child { border-right: 0; }
.fn-col-head {
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fn-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  color: #fff;
}
.fn-badge.chc { background: #3730a3; }
.fn-badge.phc { background: #0f766e; }
.fn-badge.sc { background: #a16207; }
.fn-col-list {
  flex: 1;
  overflow: auto;
  padding: 0.35rem;
}
.fn-col-foot {
  padding: 0.45rem 0.75rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.8rem;
  color: #475569;
  background: #f8fafc;
}
.fn-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0.35rem;
  padding: 0.55rem 0.6rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.fn-row:hover { background: #f1f5f9; }
.fn-row.is-selected {
  background: #eef2ff;
  border-color: #a5b4fc;
}
.fn-row strong {
  display: block;
  font-size: 0.86rem;
  color: #0f172a;
}
.fn-row-meta {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.1rem;
}
.fn-row-stats {
  display: block;
  font-size: 0.72rem;
  color: #475569;
  margin-top: 0.15rem;
}
.fn-status {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.08rem 0.35rem;
  border-radius: 0.25rem;
}
.fn-status.complete,
.fn-status.linked { color: #166534; background: #ecfdf5; }
.fn-status.partial { color: #1d4ed8; background: #eff6ff; }
.fn-status.needs-validation,
.fn-status.name-match-pending { color: #92400e; background: #fffbeb; }
.fn-status.no-scs-listed { color: #64748b; background: #f1f5f9; }
.fn-empty, .fn-info-state {
  padding: 0.85rem 0.6rem;
  color: #64748b;
  font-size: 0.85rem;
  margin: 0;
}
.fn-info-state { color: #334155; font-weight: 600; }
.fn-info-hint { padding: 0 0.6rem 0.85rem; font-size: 0.8rem; }
.fn-map-panel {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fn-map-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}
.fn-map-head h3 { margin: 0; font-size: 0.95rem; color: #0b3a66; }
.fn-map-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  font-size: 0.75rem;
  color: #475569;
}
.fn-map {
  height: calc(100vh - 26rem);
  min-height: 360px;
  border: 1px solid #e2e8f0;
  border-radius: 0.35rem;
  background: #f8fafc;
}
.fn-info-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.35rem;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
}
.fn-info-card h4 {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: #0b3a66;
}
.fn-info-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.78rem;
}
.fn-info-card dt { color: #64748b; }
.fn-info-card dd { margin: 0; font-weight: 600; color: #0f172a; text-align: right; }
.fn-lower {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.fn-lower-wide { width: 100%; }
.fn-coverage-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.fn-coverage-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #0b3a66;
}
.fn-coverage-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  max-width: 46rem;
  line-height: 1.4;
}
.fn-table-card { padding: 0.85rem 1rem; }
.fn-table-card-wide { padding: 0.35rem 0.5rem 0.75rem; }
.fn-table-card h3 {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  color: #0b3a66;
}
.fn-table-wrap {
  max-height: none;
  overflow: auto;
}
.fn-table { font-size: 0.82rem; }
.fn-table-spacious {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.fn-table-spacious th,
.fn-table-spacious td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #e2e8f0;
}
.fn-table-spacious thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  color: #475569;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  z-index: 1;
}
.fn-table-spacious td.num,
.fn-table-spacious th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fn-table-spacious .fn-fac-name { font-weight: 600; color: #0f172a; min-width: 14rem; }
.fn-table-spacious .fn-status { margin-top: 0; font-size: 0.78rem; padding: 0.2rem 0.5rem; }
.fn-table tbody tr[data-jump-hub] { cursor: pointer; }
.fn-table tbody tr[data-jump-hub]:hover { background: #f8fafc; }
.fn-lower-side { display: flex; flex-direction: column; gap: 0.85rem; }
.fn-insights { display: none; }
.fn-review-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}
.fn-review-card p { margin: 0; font-size: 0.9rem; }
.fn-admin-actions { padding: 0.85rem 1rem; }
.fn-review-actions { white-space: nowrap; }
.fn-review-actions .btn { margin-left: 0.25rem; }
.btn-sm {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
}
.flash {
  padding: 0.65rem 0.85rem;
  border-radius: 0.35rem;
  font-size: 0.88rem;
}
.flash-ok { background: #ecfdf5; color: #166534; border: 1px solid #a7f3d0; }
.flash-err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.fn-pin { color: #0f766e; font-weight: 700; }

@media (max-width: 1200px) {
  .fn-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fn-main, .fn-lower { grid-template-columns: 1fr; }
  .fn-explorer-cols { max-height: 360px; }
  .fn-map { height: 360px; min-height: 320px; }
}
@media (max-width: 900px) {
  .fn-explorer-cols { grid-template-columns: 1fr; max-height: none; }
  .fn-col { border-right: 0; border-bottom: 1px solid #e2e8f0; max-height: 240px; }
  .fn-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}