/* ============================================================
   HealthINTEL — Design System v2  (white sidebar)
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --hi-primary:        #FF8DA1;
  --hi-primary-hover:  #e0416a;
  --hi-primary-light:  #FFBECA;
  --hi-primary-pale:   #fff0f3;
  /* The brand pink is a fill, not an ink. As text on white it measures 2.19:1,
     far under the 4.5:1 WCAG AA needs for body-sized text, which is what made
     outlined buttons ("Edit", "Approve Selected") hard to read. This is the
     same hue darkened until it passes -- 5.66:1 on white, and 5.66:1 the other
     way round so white still reads on it when an outline button fills in on
     hover. Use it wherever the brand colour carries words rather than paints
     an area; keep --hi-primary for fills, borders and accents. */
  --hi-primary-text:   #c2255c;
  /* Links darken on hover rather than lightening, so the hover state is never
     the harder one to read: 7.17:1 on white against the resting 5.66:1.
     --hi-primary-hover is a fill tone and only reaches 4.09:1 as text. */
  --hi-primary-text-hover: #a81b4d;

  --hi-cyan:           #06b6d4;
  --hi-cyan-light:     #ecfeff;
  --hi-success:        #10b981;
  --hi-success-light:  #d1fae5;
  --hi-warning:        #f59e0b;
  --hi-warning-light:  #fef3c7;
  --hi-danger:         #ef4444;
  --hi-danger-light:   #fee2e2;
  --hi-purple:         #8b5cf6;
  --hi-purple-light:   #ede9fe;
  --hi-blue:           #3b82f6;
  --hi-blue-light:     #dbeafe;
  --hi-amber:          #f59e0b;
  --hi-amber-light:    #fef3c7;

  /* Ink scale. Every hue above is a fill: each was being used as text on its
     own -light background, where the two are close enough in luminance that
     nothing read -- the warning badge managed 1.93:1 against the 4.5:1 AA
     wants. These are the same hues (hue and saturation held, lightness
     lowered) darkened until they clear ~5:1 on both their own light
     background and on white, so one token is safe on either.

     Pair each with its own family: --hi-success-text on --hi-success-light,
     never across. Backgrounds, borders and fills keep the bright tokens --
     this changes ink only, so the palette still looks like itself. */
  --hi-success-text:   #0a7552;  /* 5.03:1 on -light, 5.71:1 on white (was 2.24:1) */
  --hi-warning-text:   #905d06;  /* 5.02:1 on -light, 5.59:1 on white (was 1.93:1) */
  --hi-danger-text:    #c41111;  /* 5.00:1 on -light, 6.11:1 on white (was 3.08:1) */
  --hi-cyan-text:      #04778b;  /* 5.03:1 on -light, 5.23:1 on white (was 2.33:1) */
  --hi-purple-text:    #7036f4;  /* 5.02:1 on -light, 5.96:1 on white (was 3.57:1) */
  --hi-blue-text:      #0a58d9;  /* 5.05:1 on -light, 6.16:1 on white (was 3.01:1) */
  --hi-amber-text:     #905d06;  /* --hi-amber duplicates --hi-warning, so this does too */

  /* Layout surfaces */
  --hi-sidebar-bg:     #ffffff;
  --hi-sidebar-w:      220px;
  --hi-sidebar-border: #eef0f6;
  --hi-topbar-h:       52px;
  --hi-canvas-bg:      #f5f7fb;
  --hi-surface:        #ffffff;
  --hi-border:         #eef0f6;
  --hi-border-soft:    #f5f7fb;

  /* Navy — hero banner backgrounds */
  --hi-navy:           #0f1729;
  --hi-navy-2:         #1a2545;

  /* Text */
  --hi-text:           #0f172a;
  --hi-text-muted:     #64748b;
  --hi-text-light:     #94a3b8;

  /* Elevation */
  --hi-shadow-sm:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.03);
  --hi-shadow:     0 2px 12px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.04);
  --hi-shadow-md:  0 8px 24px rgba(15,23,42,0.09), 0 3px 6px rgba(15,23,42,0.04);
  --hi-shadow-lg:  0 16px 40px rgba(15,23,42,0.12), 0 6px 12px rgba(15,23,42,0.05);

  /* Shape / motion */
  --hi-radius:    12px;
  --hi-radius-sm:  8px;
  --hi-radius-lg: 16px;
  --hi-transition: all 0.18s ease;
}

/* ---------- Base Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { font-size: 15px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hi-text);
  background: var(--hi-canvas-bg);
  -webkit-font-smoothing: antialiased;
}

/* Links carry words, so they take the ink rather than the fill pink -- which
   read at 2.19:1 on white. Component rules (.btn, sidebar items, anything on a
   dark surface) set their own colour and are unaffected: this declares no
   !important, so any of them still wins. */
a { color: var(--hi-primary-text); text-decoration: none; }
a:hover { color: var(--hi-primary-text-hover); }
::selection { background: var(--hi-primary-light); color: var(--hi-primary-hover); }

/* ---------- App Shell ---------- */
.hi-shell {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.hi-sidebar {
  width: var(--hi-sidebar-w);
  background: var(--hi-sidebar-bg);
  border-right: 1px solid var(--hi-sidebar-border);
  box-shadow: 2px 0 8px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform 0.25s ease;
}

.hi-sidebar__brand {
  height: var(--hi-topbar-h);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--hi-sidebar-border);
  flex-shrink: 0;
  text-decoration: none;
}

.hi-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hi-sidebar__logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hi-primary);
  flex-shrink: 0;
}

.hi-sidebar__logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(20,30,60,.12));
}

.hi-sidebar__logo-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hi-text);
  letter-spacing: -0.02em;
}

.hi-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0;
}

.hi-sidebar__nav::-webkit-scrollbar { width: 3px; }
.hi-sidebar__nav::-webkit-scrollbar-thumb { background: var(--hi-border); border-radius: 2px; }

.hi-nav-section {
  padding: 0.85rem 1rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hi-text-light);
}

.hi-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  margin: 1px 0.6rem;
  border-radius: var(--hi-radius-sm);
  color: var(--hi-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--hi-transition);
  position: relative;
}

.hi-nav-item:hover {
  background: var(--hi-canvas-bg);
  color: var(--hi-text);
  text-decoration: none;
}

.hi-nav-item.active {
  background: var(--hi-primary-pale);
  /* The label of the page you are on, so it has to be the most readable item
     in the sidebar rather than the least. The fill pink on this pale pink
     measured 1.99:1 -- the worst pairing in the stylesheet. The ink gives
     5.12:1 against the same background, and the accent bar below keeps the
     lighter brand pink so the item still reads as pink at a glance. */
  color: var(--hi-primary-text);
  font-weight: 600;
}

.hi-nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--hi-primary);
  border-radius: 0 2px 2px 0;
}

.hi-nav-item i {
  font-size: 1.05rem;
  width: 1.2rem;
  flex-shrink: 0;
  text-align: center;
}

.hi-sidebar__user {
  border-top: 1px solid var(--hi-sidebar-border);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.hi-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hi-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hi-user-info { flex: 1; min-width: 0; }

.hi-user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hi-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hi-user-role {
  font-size: 0.7rem;
  color: var(--hi-text-light);
}

/* ---------- Main Content Area ---------- */
.hi-main {
  flex: 1;
  margin-left: var(--hi-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Topbar ---------- */
.hi-topbar {
  height: var(--hi-topbar-h);
  background: var(--hi-surface);
  border-bottom: 1px solid var(--hi-border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.hi-topbar__toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.35rem;
  border-radius: var(--hi-radius-sm);
  color: var(--hi-text-muted);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.hi-topbar__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hi-text);
  flex: 1;
}

.hi-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hi-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--hi-radius-sm);
  border: 1px solid var(--hi-border);
  background: var(--hi-surface);
  color: var(--hi-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--hi-transition);
  text-decoration: none;
}

.hi-icon-btn:hover {
  background: var(--hi-primary-pale);
  border-color: var(--hi-primary-light);
  /* Same pale-on-pale pairing as the active nav item -- see --hi-primary-text. */
  color: var(--hi-primary-text);
  text-decoration: none;
}

.hi-icon-btn--danger:hover {
  background: var(--hi-danger-light);
  border-color: #fca5a5;
  /* The danger twin of .hi-icon-btn:hover above -- same pairing, 3.08:1. */
  color: var(--hi-danger-text);
}

/* ---------- Canvas (scrollable content) ---------- */
.hi-canvas {
  flex: 1;
  background: var(--hi-canvas-bg);
  padding: 1.75rem 2rem;
}

/* ---------- Hero Banner (Dashboard) ---------- */
.hi-hero {
  background: linear-gradient(135deg, var(--hi-navy-2) 0%, var(--hi-navy) 100%);
  border-radius: var(--hi-radius-lg);
  padding: 2rem 2rem 3.5rem;
  position: relative;
  overflow: hidden;
}

.hi-hero__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.4rem;
}

.hi-hero__title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 0.3rem;
}

.hi-hero__subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

/* KPI cards floating up from hero */
.hi-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: -2rem;
  padding: 0 0.25rem;
}

.hi-kpi {
  background: var(--hi-surface);
  border: 1px solid var(--hi-border);
  border-radius: var(--hi-radius);
  padding: 1.25rem;
  box-shadow: var(--hi-shadow-md);
  position: relative;
  overflow: hidden;
}

.hi-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.hi-kpi--pink::before   { background: var(--hi-primary); }
.hi-kpi--blue::before   { background: var(--hi-blue); }
.hi-kpi--green::before  { background: var(--hi-success); }
.hi-kpi--amber::before  { background: var(--hi-amber); }

.hi-kpi__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--hi-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.85rem;
}

/* Darkened as a set. Each of these was its hue on that hue's own -light
   background -- around 2:1, under even the 3:1 non-text graphics need. They
   move together so no one card's icon reads heavier than its neighbours. */
.hi-kpi--pink  .hi-kpi__icon { background: var(--hi-primary-pale);   color: var(--hi-primary-text); }
.hi-kpi--blue  .hi-kpi__icon { background: var(--hi-blue-light);     color: var(--hi-blue-text); }
.hi-kpi--green .hi-kpi__icon { background: var(--hi-success-light);  color: var(--hi-success-text); }
.hi-kpi--amber .hi-kpi__icon { background: var(--hi-amber-light);    color: var(--hi-amber-text); }

.hi-kpi__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hi-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hi-kpi__value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--hi-text);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0.25rem 0;
}

.hi-kpi__sub {
  font-size: 0.72rem;
  color: var(--hi-text-light);
}

/* ---------- Bootstrap Override: Cards ---------- */
.card {
  background: var(--hi-surface) !important;
  border: 1px solid var(--hi-border) !important;
  border-radius: var(--hi-radius) !important;
  box-shadow: var(--hi-shadow-sm) !important;
}

.card-header {
  background: var(--hi-surface) !important;
  border-bottom: 1px solid var(--hi-border-soft) !important;
  padding: 1rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--hi-text) !important;
}

.card-body { padding: 1.25rem !important; }

.card-footer {
  background: var(--hi-border-soft) !important;
  border-top: 1px solid var(--hi-border) !important;
  padding: 0.75rem 1.25rem !important;
}

/* ---------- Bootstrap Override: Buttons ---------- */
.btn-primary {
  background: var(--hi-primary) !important;
  border-color: var(--hi-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--hi-radius-sm) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--hi-primary-hover) !important;
  border-color: var(--hi-primary-hover) !important;
  box-shadow: 0 0 0 3px rgba(255,141,161,0.25) !important;
}

.btn-outline-primary {
  /* Ink, not fill -- see --hi-primary-text. The border keeps the lighter brand
     pink, so the button still reads as pink at a glance. */
  color: var(--hi-primary-text) !important;
  border-color: var(--hi-primary) !important;
}

.btn-outline-primary:hover {
  background: var(--hi-primary-text) !important;
  color: #fff !important;
}

.btn-danger { border-radius: var(--hi-radius-sm) !important; }

/* ---------- Bootstrap Override: Forms ---------- */
.form-control,
.form-select {
  border: 1px solid var(--hi-border) !important;
  border-radius: var(--hi-radius-sm) !important;
  font-size: 0.875rem !important;
  color: var(--hi-text) !important;
  background: var(--hi-surface) !important;
  transition: var(--hi-transition) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hi-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,141,161,0.18) !important;
  outline: none !important;
}

.form-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--hi-text-muted) !important;
  margin-bottom: 0.35rem !important;
}

/* ---------- Bootstrap Override: Tables ---------- */
.table {
  font-size: 0.875rem !important;
  color: var(--hi-text) !important;
}

.table th {
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--hi-text-muted) !important;
  border-bottom: 1px solid var(--hi-border) !important;
  padding: 0.75rem 1rem !important;
  background: var(--hi-border-soft) !important;
}

.table td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--hi-border-soft) !important;
  vertical-align: middle !important;
}

.table-hover tbody tr:hover { background: var(--hi-primary-pale) !important; }

/* ---------- Bootstrap Override: Badges ---------- */
.badge {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 0.3em 0.6em !important;
  border-radius: 6px !important;
}

.bg-label-primary { background: var(--hi-primary-pale) !important; color: var(--hi-primary-text) !important; }
.bg-label-success { background: var(--hi-success-light) !important; color: var(--hi-success-text) !important; }
.bg-label-warning { background: var(--hi-warning-light) !important; color: var(--hi-warning-text) !important; }
.bg-label-danger  { background: var(--hi-danger-light) !important; color: var(--hi-danger-text) !important; }
.bg-label-info    { background: var(--hi-cyan-light) !important; color: var(--hi-cyan-text) !important; }

.bg-primary { background: var(--hi-primary) !important; color: #fff !important; }

.text-primary { color: var(--hi-primary) !important; }
.text-muted   { color: var(--hi-text-muted) !important; }
.text-success { color: var(--hi-success) !important; }
.text-warning { color: var(--hi-warning) !important; }
.text-danger  { color: var(--hi-danger) !important; }

/* ---------- Bootstrap Override: Alerts ---------- */
.alert {
  border-radius: var(--hi-radius-sm) !important;
  border: none !important;
  font-size: 0.875rem !important;
  padding: 0.85rem 1rem !important;
}

.alert-success { background: var(--hi-success-light) !important; color: #065f46 !important; }
.alert-warning { background: var(--hi-warning-light) !important; color: #92400e !important; }
.alert-danger  { background: var(--hi-danger-light) !important; color: #991b1b !important; }
.alert-info    { background: var(--hi-cyan-light) !important; color: #164e63 !important; }

/* ---------- Bootstrap Override: Pagination ---------- */
.pagination .page-link {
  border: 1px solid var(--hi-border) !important;
  border-radius: var(--hi-radius-sm) !important;
  color: var(--hi-text-muted) !important;
  margin: 0 2px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 0.35rem 0.7rem !important;
}

.pagination .page-item.active .page-link {
  background: var(--hi-primary) !important;
  border-color: var(--hi-primary) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  background: var(--hi-primary-pale) !important;
  border-color: var(--hi-primary-light) !important;
  color: var(--hi-primary-text) !important;
}

/* ---------- Bootstrap Override: Modals ---------- */
.modal-content {
  border: 1px solid var(--hi-border) !important;
  border-radius: var(--hi-radius) !important;
  box-shadow: var(--hi-shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--hi-border-soft) !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-footer {
  border-top: 1px solid var(--hi-border-soft) !important;
  padding: 0.85rem 1.5rem !important;
}

/* ---------- Bootstrap Override: Progress ---------- */
.progress {
  height: 6px !important;
  border-radius: 3px !important;
  background: var(--hi-border-soft) !important;
}

.progress-bar {
  background: var(--hi-primary) !important;
  border-radius: 3px !important;
}

/* ---------- Barangay Stats Strip ---------- */
.hi-barangay-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.hi-barangay-chip {
  background: var(--hi-surface);
  border: 1px solid var(--hi-border);
  border-radius: var(--hi-radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.8rem;
  min-width: 100px;
  position: relative;
  overflow: hidden;
}

.hi-barangay-chip::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hi-primary);
}

.hi-barangay-chip__name {
  font-weight: 600;
  color: var(--hi-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hi-barangay-chip__count {
  color: var(--hi-text-muted);
  font-size: 0.72rem;
}

/* ---------- Filter Bar ---------- */
.hi-filter-bar {
  background: var(--hi-surface);
  border: 1px solid var(--hi-border);
  border-radius: var(--hi-radius-sm);
  padding: 0.75rem 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}

.hi-filter-bar .form-control,
.hi-filter-bar .form-select {
  height: 36px !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.82rem !important;
}

/* ---------- Household Member Chip ---------- */
.household-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--hi-primary-pale);
  /* Carries a member's name, so it takes the ink like the nav item does. */
  color: var(--hi-primary-text);
  border-radius: 6px;
  padding: 0.25em 0.6em;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---------- Legacy stat-card (existing pages) ---------- */
.stat-card {
  background: var(--hi-surface);
  border: 1px solid var(--hi-border);
  border-radius: var(--hi-radius);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--hi-shadow-sm);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: var(--hi-radius) 0 0 var(--hi-radius);
}

.stat-card--primary::before { background: var(--hi-primary); }
.stat-card--cyan::before    { background: var(--hi-cyan); }
.stat-card--success::before { background: var(--hi-success); }
.stat-card--warning::before { background: var(--hi-warning); }
.stat-card--purple::before  { background: var(--hi-purple); }
.stat-card--danger::before  { background: var(--hi-danger); }

.stat-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--hi-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}

/* Same set-wide darkening as the KPI icons above. */
.stat-card--primary .stat-card__icon { background: var(--hi-primary-pale);   color: var(--hi-primary-text); }
.stat-card--cyan    .stat-card__icon { background: var(--hi-cyan-light);     color: var(--hi-cyan-text); }
.stat-card--success .stat-card__icon { background: var(--hi-success-light);  color: var(--hi-success-text); }
.stat-card--warning .stat-card__icon { background: var(--hi-warning-light);  color: var(--hi-warning-text); }
.stat-card--purple  .stat-card__icon { background: var(--hi-purple-light);   color: var(--hi-purple-text); }
.stat-card--danger  .stat-card__icon { background: var(--hi-danger-light);   color: var(--hi-danger-text); }

.stat-card__body { display: flex; align-items: flex-start; gap: 1rem; }

/* ---------- Login Page ---------- */
.hi-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hi-canvas-bg);
  padding: 2rem;
}

.hi-auth-card {
  background: var(--hi-surface);
  border: 1px solid var(--hi-border);
  border-radius: var(--hi-radius-lg);
  box-shadow: var(--hi-shadow-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
}

.hi-auth-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hi-auth-logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hi-primary);
}

.hi-auth-logo-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--hi-text);
  letter-spacing: -0.02em;
}

/* ---------- Mobile Responsive ---------- */
@media (max-width: 900px) {
  .hi-sidebar {
    transform: translateX(-100%);
    z-index: 200;
  }

  .hi-sidebar.open { transform: translateX(0); }

  .hi-main { margin-left: 0; }

  .hi-topbar__toggle { display: flex; }

  .hi-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.4);
    z-index: 150;
  }

  .hi-overlay.active { display: block; }

  .hi-kpi-row { grid-template-columns: repeat(2, 1fr); }

  .hi-canvas { padding: 1.25rem; }
}

/* ============================================================
   HealthINTEL — Premium Visual Layer v3
   Appended on top of design system — no deletions
   ============================================================ */

/* ---------- 1. Content Page Header Strip ---------- */
.content-wrapper > .container-fluid > .row > .col-12:first-child .card:first-child,
.card.page-header-card {
  border: none !important;
  background: linear-gradient(135deg, #0f1f3d 0%, #1a3560 100%) !important;
  color: white !important;
  border-radius: 12px !important;
  margin-bottom: 1.5rem !important;
}
.card.page-header-card .card-body h4,
.card.page-header-card .card-body h5,
.card.page-header-card .card-body p {
  color: rgba(255,255,255,0.9) !important;
}

/* ---------- 2. Premium Card Styling ---------- */
.card {
  border: 1px solid #f0f4f8 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.2s ease !important;
}
.card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
.card-header {
  background: #fff !important;
  border-bottom: 2px solid #f8fafc !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  padding: 1rem 1.25rem !important;
  border-radius: 12px 12px 0 0 !important;
}

/* ---------- 3. Premium Table Styling ---------- */
.table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding: 0.875rem 1rem !important;
  white-space: nowrap !important;
}
.table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s ease !important;
}
.table tbody tr:hover {
  background: #fdf2f5 !important;
}
.table tbody td {
  padding: 0.875rem 1rem !important;
  vertical-align: middle !important;
  color: #334155 !important;
  font-size: 0.875rem !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #fafbfc !important;
}

/* ---------- 4. Filter Toolbar — Horizontal Compact Panel ---------- */
.filter-section,
.filters-card,
form.filter-form {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
}
.filter-section input[type="text"],
.filter-section input[type="date"],
.filter-section input[type="number"],
.filter-section select,
form input[type="text"],
form input[type="date"],
form select {
  height: 38px;
  font-size: 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  background: #f8fafc;
  transition: border-color 0.15s, box-shadow 0.15s;
}
form input[type="text"]:focus,
form input[type="date"]:focus,
form select:focus {
  border-color: #FF8DA1 !important;
  box-shadow: 0 0 0 3px rgba(255,141,161,0.15) !important;
  background: #fff !important;
  outline: none !important;
}

/* ---------- 5. Premium Button Styles ----------
   Shape (radius, weight, size) is shared by every button; colour is per
   variant. Keep those two concerns apart: this block used to also match
   `button[type="submit"].btn`, which painted the pink primary gradient over
   EVERY submit button -- success, danger and outline variants included -- and
   with `!important`, so a page could not opt out. Buttons kept their own text
   colour, which is how "Confirm + Approve" ended up green-on-pink. Style the
   variant, never the element type. */
.btn-primary {
  background: linear-gradient(135deg, #FF8DA1 0%, #ff6b8a 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1.25rem !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(255,141,161,0.3) !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,141,161,0.4) !important;
  background: linear-gradient(135deg, #ff7a93 0%, #ff5878 100%) !important;
}
.btn-outline-primary {
  border: 1.5px solid var(--hi-primary) !important;
  /* This block wins over the one above it, so the readable ink has to be set
     here too -- the earlier rule alone would have looked fixed and changed
     nothing on screen. */
  color: var(--hi-primary-text) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}
.btn-outline-primary:hover {
  /* Filling with the pale pink left white-on-pink at 2.19:1 -- the hover state
     was less readable than the resting one. */
  background: var(--hi-primary-text) !important;
  color: #fff !important;
}
/* Success is the confirming counterpart to primary -- same shape, palette
   green rather than the vendor's lime, so it reads as part of the system. */
.btn-success {
  /* Filled with --hi-success (#10b981) this put white on green at 2.54:1 --
     I introduced that when replacing the vendor lime. The ink tone carries the
     fill instead: white on it reads at 5.71:1 and it is the same green. */
  background: var(--hi-success-text) !important;
  border: 1px solid var(--hi-success-text) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1.25rem !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.25) !important;
}
.btn-success:hover {
  transform: translateY(-1px);
  /* Darkens from the resting fill, so hover is never the harder read (#0e9f6e
     was 3.39:1 against white). */
  background: #08663f !important;
  border-color: #08663f !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(16,185,129,0.35) !important;
}
.btn-outline-success {
  border: 1.5px solid var(--hi-success) !important;
  color: var(--hi-success) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}
.btn-outline-success:hover {
  /* Matches .btn-success -- filling with --hi-success put white at 2.54:1. */
  background: var(--hi-success-text) !important;
  color: #fff !important;
}
.btn-outline-danger {
  border-radius: 8px !important;
}
.btn-sm {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.8rem !important;
}

/* ---------- 6. Badge Improvements ---------- */
.badge {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 0.3em 0.65em !important;
  border-radius: 20px !important;
  letter-spacing: 0.02em !important;
}
.bg-label-primary {
  background: rgba(255,141,161,0.15) !important;
  /* This block overrides the .bg-label-primary above, so it is the one that
     actually renders the "Staff" and "Active" badges. #e8365d on this tint
     measured 3.66:1; the ink gives 5.05:1. */
  color: var(--hi-primary-text) !important;
  border: 1px solid rgba(255,141,161,0.3) !important;
}
/* These two override the .bg-label-* set above, so they are what actually
   renders. Left on their old hardcoded hexes they measured 3.43:1 and 2.95:1
   and silently defeated the ink applied upstream -- the same two-blocks-one-
   wins trap as .bg-label-primary. */
.bg-label-success {
  background: rgba(16,185,129,0.1) !important;
  color: var(--hi-success-text) !important;
}
.bg-label-warning {
  background: rgba(245,158,11,0.1) !important;
  color: var(--hi-warning-text) !important;
}

/* ---------- 7. Sidebar Polish ---------- */
.menu-header {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 1.25rem 1.25rem 0.4rem;
  margin-top: 0.5rem;
}
.menu-item.active > .menu-link,
.menu-link.active {
  background: linear-gradient(90deg, rgba(255,141,161,0.15) 0%, rgba(255,141,161,0.05) 100%);
  color: #e8365d !important;
  border-left: 3px solid #FF8DA1;
  border-radius: 0 8px 8px 0;
  font-weight: 600;
}

/* ---------- 8. Pagination ---------- */
.pagination .page-link {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 0.85rem !important;
  padding: 0.4rem 0.75rem !important;
  margin: 0 2px !important;
  transition: all 0.15s !important;
}
.pagination .page-item.active .page-link {
  background: #FF8DA1 !important;
  border-color: #FF8DA1 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(255,141,161,0.35) !important;
}
.pagination .page-link:hover {
  background: #fdf2f5 !important;
  border-color: #FF8DA1 !important;
  /* Overrides the rule above; 3.75:1 before, 5.17:1 with the ink. */
  color: var(--hi-primary-text) !important;
}

/* ---------- 9. Login Page — Split-Screen ---------- */
.hi-login-wrap {
  display: flex;
  min-height: 100vh;
}
.hi-login-left {
  flex: 1;
  background: linear-gradient(135deg, #0f1f3d 0%, #1a3560 60%, #FF8DA1 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  color: white;
}
.hi-login-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.hi-login-logo { font-size: 1.75rem; }
.hi-login-logo-img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.hi-login-tagline h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.hi-login-tagline p { opacity: 0.8; font-size: 1rem; }
.hi-login-right {
  width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  padding: 2rem;
}
.hi-login-card {
  width: 100%;
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}
.hi-login-card h2 {
  font-weight: 800;
  font-size: 1.5rem;
  color: #0f1f3d;
  margin-bottom: 0.25rem;
}
.hi-login-sub { color: #64748b; margin-bottom: 1.75rem; }
.hi-pin-link { color: #FF8DA1; font-size: 0.85rem; text-decoration: none; }
.hi-pin-link:hover { color: #e8365d; }
@media (max-width: 768px) {
  .hi-login-left { display: none; }
  .hi-login-right { width: 100%; background: white; }
}

/* =====================================================
   Filter toolbar — compact single/two-row layout
   ===================================================== */
.filter-toolbar-unified {
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.filter-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.filter-toolbar-row:last-child {
  margin-bottom: 0;
}
.filter-toolbar-spacer {
  flex: 1;
}
.filter-toolbar-row .form-control,
.filter-toolbar-row .form-select {
  height: 36px;
  font-size: 0.82rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.25rem 0.6rem;
}
.filter-toolbar-row .form-control:focus,
.filter-toolbar-row .form-select:focus {
  border-color: #FF8DA1;
  box-shadow: 0 0 0 3px rgba(255,141,161,0.15);
  outline: none;
}
.filter-toolbar-row .input-group {
  flex-wrap: nowrap;
}
.filter-toolbar-row .input-group-text {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: #94a3b8;
  height: 36px;
  padding: 0 0.6rem;
  font-size: 0.9rem;
}
.filter-toolbar-row .input-group .form-control {
  border-left: none;
  border-radius: 0 8px 8px 0;
}

/* =====================================================
   intel-layout / intel-topbar (page header + layout)
   ===================================================== */
.intel-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intel-main { width: 100%; }
.intel-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 0 0.5rem;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 1.25rem;
}
.intel-topbar h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f1f3d;
  margin: 0;
}

/* =====================================================
   Household table column widths
   ===================================================== */
.household-check-cell { width: 36px; }
.household-selected-count { white-space: nowrap; }

/* =====================================================
   Registry stats KPI row (top of household list)
   ===================================================== */
.registry-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.registry-kpi-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  border-left: 4px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(15,31,61,0.05);
  transition: box-shadow 0.15s, transform 0.15s;
}
.registry-kpi-card:hover {
  box-shadow: 0 4px 14px rgba(15,31,61,0.09);
  transform: translateY(-1px);
}
.registry-kpi-card--primary { border-left-color: #FF8DA1; }
.registry-kpi-card--blue    { border-left-color: #4e73df; }
.registry-kpi-card--green   { border-left-color: #1cc88a; }
.registry-kpi-card--amber   { border-left-color: #f6c23e; }
.registry-kpi-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
/* A third icon family, on hardcoded hexes rather than tokens -- which is why
   it survived the token-based sweep. The amber icon was the faintest mark on
   the site at 1.57:1. Reuses the ink scale rather than minting more hexes. */
.registry-kpi-card--primary .registry-kpi-card__icon { background: #fff0f3; color: var(--hi-primary-text); }
.registry-kpi-card--blue    .registry-kpi-card__icon { background: #eef2ff; color: var(--hi-blue-text); }
.registry-kpi-card--green   .registry-kpi-card__icon { background: #e6f9f2; color: var(--hi-success-text); }
.registry-kpi-card--amber   .registry-kpi-card__icon { background: #fef9e7; color: var(--hi-amber-text); }
.registry-kpi-card__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.registry-kpi-card__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f1f3d;
  line-height: 1;
}

/* =====================================================
   Barangay breakdown bars
   ===================================================== */
.registry-barangay-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
}
.registry-barangay-bars::-webkit-scrollbar { width: 4px; }
.registry-barangay-bars::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
.registry-bar-row {
  display: block;
  text-decoration: none;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.registry-bar-row:hover {
  background: #fcfdff;
  border-color: #dbe3ee;
  box-shadow: 0 6px 18px rgba(15, 31, 61, 0.07);
  transform: translateY(-1px);
}
.registry-bar-row--active {
  background: #fff0f3;
  border-color: #FF8DA1;
  box-shadow: 0 4px 14px rgba(232, 54, 93, 0.10);
}
.registry-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.registry-bar-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f1f3d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.registry-bar-row--active .registry-bar-label { color: #e8365d; }
.registry-bar-count {
  font-size: 1rem;
  font-weight: 800;
  color: #0f1f3d;
  white-space: nowrap;
  flex-shrink: 0;
}
.registry-bar-count small { font-size: 0.62rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; }
.registry-bar-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}
.registry-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF8DA1, #ff6b9d);
  border-radius: 99px;
  min-width: 6px;
  transition: width 0.5s ease;
}
.registry-bar-row--active .registry-bar-fill { background: linear-gradient(90deg, #e8365d, #FF8DA1); }
.registry-bar-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.registry-bar-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 9px;
  background: #f8fafc;
}
.registry-bar-stat__label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.registry-bar-stat__value { font-size: 0.86rem; font-weight: 800; color: #0f1f3d; line-height: 1.1; }
.registry-bar-stat--hh { background: #eef2ff; }
.registry-bar-stat--hh .registry-bar-stat__value { color: #4e73df; }
.registry-bar-stat--fam { background: #eafaf3; }
.registry-bar-stat--fam .registry-bar-stat__value { color: #1aa179; }
.registry-bar-stat--total { background: #fff4e6; }
.registry-bar-stat--total .registry-bar-stat__value { color: #d6840a; }

/* =====================================================
   Household list — row text styles
   ===================================================== */
.household-main-text {
  font-weight: 600;
  color: #0f1f3d;
  font-size: 0.875rem;
  line-height: 1.3;
}
.household-sub-text {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.2;
  margin-top: 1px;
}
.household-row-link {
  cursor: pointer;
}
.household-badge {
  font-size: 0.72rem !important;
  padding: 0.3em 0.7em !important;
}
.household-member-chip {
  background: #f0f4ff !important;
  color: #3b5bdb !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  min-width: 24px;
  text-align: center;
}
.household-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.household-pagination .page-link {
  border-radius: 6px !important;
  margin: 0 1px;
  font-size: 0.8rem;
}

/* =====================================================
   Household & member action buttons (list + detail)
   ===================================================== */
.household-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.household-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.household-action-btn:hover {
  background: #fff0f3;
  color: #FF8DA1;
  border-color: #FF8DA1;
  text-decoration: none;
}
.household-action-btn.household-delete-btn:hover {
  background: #fff0f0;
  color: #e53e3e;
  border-color: #e53e3e;
}

/* =====================================================
   Detail page — KPI stat cards
   ===================================================== */
.intel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.intel-stat-card {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  border-top: 3px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(15,31,61,0.05);
  transition: box-shadow 0.15s;
}
.intel-stat-card:hover {
  box-shadow: 0 4px 12px rgba(15,31,61,0.09);
}
.intel-stat-card--primary {
  border-top-color: #FF8DA1;
}
.intel-stat-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.intel-stat-card__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f1f3d;
  word-break: break-word;
}

/* =====================================================
   Detail page — sneat widget cards
   ===================================================== */
.sneat-widget {
  border-radius: 10px !important;
  border: 1px solid #e8ecf4 !important;
  box-shadow: 0 2px 8px rgba(15,31,61,0.06) !important;
}
.sneat-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fafbff !important;
  border-radius: 10px 10px 0 0 !important;
}
.sneat-widget__body {
  padding: 1.25rem !important;
}

/* =====================================================
   Detail page — photo & placeholder
   ===================================================== */
.premium-photo {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e8ecf4;
}
.premium-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 140px;
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  color: #94a3b8;
  margin-bottom: 1rem;
}
.household-signature {
  max-height: 80px;
  object-fit: contain;
}

/* =====================================================
   Detail page — member table
   ===================================================== */
.sneat-table-wrap,
.premium-table-wrap {
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.sneat-table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.6rem 1rem !important;
  border-bottom: 2px solid #e8ecf4 !important;
}
.sneat-table tbody tr.member-row {
  cursor: pointer;
}
.sneat-table tbody tr.member-row:hover {
  background: #fff8fa !important;
}

/* =====================================================
   Detail page — chart shells
   ===================================================== */
.chart-shell {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  padding: 0.875rem;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sneat-chart-shell {
  border-radius: 10px;
  overflow: hidden;
}

/* =====================================================
   Detail page — topbar action area
   ===================================================== */
.premium-pagehead__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* =====================================================
   Household Detail — hero
   ===================================================== */
.hd-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(120deg, #0f1f3d 0%, #1e3a6e 60%, #2d5294 100%);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  color: #fff;
  flex-wrap: wrap;
}
.hd-back-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  margin-bottom: 0.5rem;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}
.hd-back-btn:hover { color: #FF8DA1; }
.hd-hero__name {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.6rem;
  color: #fff;
}
.hd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.hd-hero__chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  border-radius: 99px;
  padding: 0.25em 0.8em;
  font-size: 0.75rem;
  font-weight: 500;
}
.hd-hero__actions {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}
.hd-hero__actions .btn-primary {
  background: #FF8DA1 !important;
  border-color: #FF8DA1 !important;
}
.hd-hero__actions .btn-outline-primary {
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}
.hd-hero__actions .btn-outline-primary:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* =====================================================
   Household Detail — shared card
   ===================================================== */
.hd-card {
  border-radius: 12px !important;
  border: 1px solid #e8ecf4 !important;
  box-shadow: 0 2px 10px rgba(15,31,61,0.06) !important;
  overflow: hidden;
}
.hd-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbff;
}
.hd-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f1f3d;
  margin: 0;
}
.hd-card__sub {
  font-size: 0.74rem;
  color: #94a3b8;
  display: block;
  margin-top: 1px;
}
.hd-members-badge {
  background: #fff0f3 !important;
  color: #FF8DA1 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}

/* =====================================================
   Household Detail — profile card
   ===================================================== */
.hd-cover-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.hd-cover-placeholder {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #f0f4ff 0%, #fce4ec 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #FF8DA1;
}
.hd-profile-body {
  padding: 1rem 1.25rem;
}
.hd-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f8fafc;
  gap: 0.5rem;
}
.hd-profile-row:last-child { border-bottom: none; }
.hd-profile-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.hd-profile-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f1f3d;
  text-align: right;
}
.hd-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.75rem; }
.hd-profile-row--sig { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.hd-signature { max-height: 56px; border: 1px solid #e8ecf4; border-radius: 6px; padding: 4px; background: #fff; }

/* =====================================================
   Household Detail — family tree
   ===================================================== */
.tree { min-height: 220px; }
.tree-board {
  position: relative;
  width: 100%;
  overflow-x: auto;
}
.tree-connectors {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.tree-levels {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem 0.25rem 0.5rem;
  position: relative;
  z-index: 1;
}
.tree-level { display: flex; flex-direction: column; gap: 0.4rem; }
.tree-level__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  padding-left: 0.25rem;
  margin-bottom: 0.1rem;
}
.tree-level__track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.tree-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  cursor: pointer;
  padding: 0.5rem 0.35rem 0.6rem;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,31,61,0.07);
}
.tree-person:hover {
  background: #fff8fa;
  border-color: var(--tree-ring, #FF8DA1);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15,31,61,0.12);
}
.tree-person__avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--tree-ring, #e2e8f0);
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}
.tree-person__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tree-person__name {
  font-size: 0.7rem;
  font-weight: 700;
  color: #0f1f3d;
  text-align: center;
  margin: 0 0 2px;
  line-height: 1.2;
  word-break: break-word;
  max-width: 82px;
}
.tree-person__role {
  font-size: 0.62rem;
  color: #94a3b8;
  text-align: center;
  margin: 0;
  line-height: 1.2;
  max-width: 82px;
  word-break: break-word;
}
.tree-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-style: italic;
}
.tree--compact .tree-person { width: 76px; }
.tree--tiny .tree-person { width: 66px; }

/* =====================================================
   Household Detail — members table
   ===================================================== */
.hd-table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.6rem 1rem !important;
  border-bottom: 2px solid #e8ecf4 !important;
  white-space: nowrap;
}
.hd-table tbody td {
  padding: 0.65rem 1rem !important;
  vertical-align: middle !important;
  font-size: 0.83rem;
  border-bottom: 1px solid #f8fafc !important;
}
.hd-member-row { cursor: pointer; }
.hd-member-row:hover td { background: #fff8fa !important; }
.hd-member-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4e73df, #36b9cc);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hd-member-avatar--f { background: linear-gradient(135deg, #FF8DA1, #f6c23e); }
.hd-member-name {
  font-weight: 600;
  color: #0f1f3d;
  font-size: 0.83rem;
  line-height: 1.2;
}
.hd-member-id {
  font-size: 0.7rem;
  color: #94a3b8;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.hd-sex-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
}
.hd-sex-chip--m { background: #eef2ff; color: #4e73df; }
.hd-sex-chip--f { background: #fff0f3; color: #FF8DA1; }
.hd-role-badge { font-size: 0.65rem !important; padding: 0.2em 0.55em !important; border-radius: 4px !important; }
.hd-role-badge--head { background: #fff0f3 !important; color: #e8365d !important; }
.hd-role-badge--fh   { background: #eef2ff !important; color: #4e73df !important; }

/* =====================================================
   Household Detail — analytics charts
   ===================================================== */
.hd-chart-shell {
  background: #fafbff;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  padding: 0.75rem;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================================
   Household Detail v2 — Photo hero, tabs, family tree, gallery
   ====================================================================== */

/* Hero */
.hd2-hero {
  position: relative;
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg,#1a2545 0%,#2c3f6e 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hd2-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,22,45,.92) 0%, rgba(35,50,85,.78) 50%, rgba(255,141,161,.55) 100%);
}
.hd2-back-btn {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .85rem;
  background: rgba(255,255,255,.18);
  color: #fff; text-decoration: none;
  border-radius: 999px;
  font-size: .8rem; font-weight: 500;
  margin: 1rem 1.25rem 0;
  transition: background .15s;
}
.hd2-back-btn:hover { background: rgba(255,255,255,.3); color: #fff; }
.hd2-hero__content {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem 1.5rem 1.75rem;
  flex-wrap: wrap;
}
.hd2-hero__avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 4px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  font-size: 2.5rem; font-weight: 700; color: #fff;
}
.hd2-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hd2-hero__text { flex: 1 1 320px; min-width: 0; }
.hd2-hero__chip-row { display: flex; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.hd2-hero__chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .65rem;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .02em;
}
.hd2-hero__name {
  font-size: 2rem; font-weight: 700; margin: 0 0 .35rem 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hd2-hero__meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-size: .85rem; opacity: .92;
}
.hd2-hero__meta i { margin-right: .25rem; }
.hd2-hero__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.hd2-hero__actions .btn { font-weight: 500; }

/* Tabs */
.hd2-tabs { gap: .35rem; border-bottom: 0; }
.hd2-tabs .nav-link {
  background: #f4f5f9; color: #5a6584;
  border: 0; border-radius: 10px;
  padding: .55rem 1.05rem;
  font-size: .85rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all .15s;
}
.hd2-tabs .nav-link:hover { background: #e8ebf3; color: #2c3554; }
.hd2-tabs .nav-link.active {
  background: linear-gradient(135deg,#FF8DA1,#ff6f88);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,141,161,.35);
}
.hd2-tabs .nav-link.active .badge { background: rgba(255,255,255,.25) !important; }
.hd2-tabs .nav-link i { font-size: 1rem; }

/* Cards */
.hd2-card { border: 1px solid #e7e9f1; border-radius: 14px; box-shadow: 0 1px 2px rgba(20,30,60,.04); }
.hd2-section-title { font-weight: 600; font-size: 1rem; color: #2c3554; margin-bottom: 1rem; }

/* Profile info grid */
.hd2-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: .75rem 1rem; }
.hd2-info-item { display: flex; flex-direction: column; gap: .15rem; padding: .35rem 0; border-bottom: 1px solid #f0f1f6; }
.hd2-info-label { font-size: .7rem; text-transform: uppercase; color: #95a0bd; letter-spacing: .05em; font-weight: 600; }
.hd2-info-value { font-size: .9rem; color: #2c3554; font-weight: 500; word-break: break-word; }
.hd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hd2-chart-shell { background: #fafbfd; border-radius: 10px; padding: .75rem; height: 220px; position: relative; }
.hd2-chart-shell canvas { max-width: 100%; max-height: 100%; }
.hd2-signature { max-width: 100%; max-height: 100px; background: #fff; border: 1px solid #e7e9f1; border-radius: 8px; padding: .5rem; }

/* Family tree */
.ft-tree {
  padding: 1.5rem 1rem;
  overflow-x: auto;
  background: #fafbfd;
  border-radius: 12px;
}
.ft-level { display: flex; justify-content: center; }
.ft-subtree {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 .5rem;
}
/* vertical connector from a node down to its children block */
.ft-subtree:has(> .ft-children)::after {
  content: ""; display: block;
  width: 2px; height: 28px;
  background: #d0d6e4;
  margin: 4px 0 0 0;
}
.ft-children {
  display: flex; justify-content: center;
  position: relative;
  padding-top: 28px;
  gap: 0;
}
/* horizontal connector across siblings */
.ft-children::before {
  content: ""; position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2px; background: #d0d6e4;
}
/* single-child case: no horizontal bar needed */
.ft-children:has(> .ft-subtree:only-child)::before { display: none; }
/* vertical drop from horizontal bar to each child */
.ft-children > .ft-subtree::before {
  content: ""; position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 28px;
  background: #d0d6e4;
  transform: translateX(-50%);
}
.ft-children > .ft-subtree:only-child::before {
  top: -28px; height: 28px;
}

/* Nodes */
.ft-node {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: .5rem .75rem;
  min-width: 110px; max-width: 150px;
}
.ft-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 4px 14px rgba(20,30,60,.12);
  background: #e8ebf3;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; color: #5a6584;
  margin-bottom: .55rem;
  flex-shrink: 0;
}
.ft-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ft-avatar-hh { background: linear-gradient(135deg,#FF8DA1,#ff6f88); color: #fff; box-shadow: 0 6px 20px rgba(255,141,161,.4); border-color: #fff; }
.ft-avatar-fh { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #fff; }
.ft-avatar-f  { background: linear-gradient(135deg,#fda4af,#fb7185); color: #fff; }
.ft-avatar-m-color { background: linear-gradient(135deg,#7dd3fc,#38bdf8); color: #fff; }
.ft-name {
  font-size: .82rem; font-weight: 600; color: #1f2a4a;
  line-height: 1.2; word-break: break-word;
}
.ft-role {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #95a0bd; margin-top: .15rem;
}
.ft-role-hh { color: #FF6F88; }
.ft-role-fh { color: #f59e0b; }
.ft-rel { font-size: .7rem; color: #6b7390; margin-top: .15rem; }

/* QA accordion */
.hd2-accordion .accordion-item { border: 1px solid #e7e9f1; border-radius: 10px !important; margin-bottom: .5rem; overflow: hidden; }
.hd2-accordion .accordion-button { font-weight: 600; font-size: .9rem; color: #2c3554; background: #fafbfd; }
.hd2-accordion .accordion-button:not(.collapsed) { background: #fff5f7; color: #d63d5d; box-shadow: none; }
.hd2-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.hd2-qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: .5rem 1rem; }
.hd2-qa-item { display: flex; flex-direction: column; gap: .1rem; padding: .35rem 0; border-bottom: 1px dashed #eef0f5; }
.hd2-qa-label { font-size: .7rem; color: #95a0bd; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.hd2-qa-value { font-size: .88rem; color: #2c3554; word-break: break-word; }
.hd2-qa-multirow { padding: .75rem; background: #fafbfd; border-radius: 8px; margin-bottom: .75rem; }
.hd2-qa-multirow-label { font-size: .7rem; font-weight: 700; color: #FF6F88; text-transform: uppercase; margin-bottom: .5rem; letter-spacing: .06em; }

/* Members table */
.hd2-members-table th { background: #fafbfd; font-size: .72rem; text-transform: uppercase; color: #95a0bd; letter-spacing: .05em; font-weight: 600; }
.hd2-mem-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#7dd3fc,#38bdf8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.hd2-mem-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hd2-mem-avatar-f { background: linear-gradient(135deg,#fda4af,#fb7185); }
.hd2-sex-chip { display: inline-block; min-width: 22px; padding: .1rem .4rem; border-radius: 6px; font-size: .7rem; font-weight: 700; text-align: center; }
.hd2-sex-chip-m { background: #e0f2fe; color: #0369a1; }
.hd2-sex-chip-f { background: #ffe4e6; color: #be123c; }

/* Gallery */
.hd2-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: .75rem;
}
.hd2-gallery-item {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f4f5f9;
  cursor: zoom-in;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(20,30,60,.08);
  transition: transform .2s, box-shadow .2s;
}
.hd2-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20,30,60,.18);
}
.hd2-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd2-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .55rem .65rem;
  background: linear-gradient(180deg, rgba(20,30,60,0) 0%, rgba(20,30,60,.85) 100%);
  color: #fff;
}
.hd2-gallery-title { font-size: .75rem; font-weight: 600; line-height: 1.2; }
.hd2-gallery-subtitle { font-size: .65rem; opacity: .8; }

/* Lightbox */
.hd2-lightbox .modal-content {
  background: rgba(15,22,45,.96);
  border: 0;
  color: #fff;
}
.hd2-lightbox-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  z-index: 5;
}
.hd2-lightbox img {
  width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: 8px;
}
.hd2-lightbox-info { padding: 1rem 1.25rem 1.25rem; }
.hd2-lightbox-title { font-size: 1rem; font-weight: 600; }
.hd2-lightbox-subtitle { font-size: .85rem; opacity: .75; }

/* ======================================================================
   Family tree v2 — generational layout with spouse pairing
   ====================================================================== */
.ft2 {
  padding: 1rem 0.5rem;
  background: #fafbfd;
  border-radius: 12px;
  overflow-x: auto;
}
.ft2-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0.75rem;
  position: relative;
  border-bottom: 1px dashed #e3e6ef;
}
.ft2-row:last-child { border-bottom: 0; }
.ft2-row-label {
  flex-shrink: 0;
  width: 120px;
  font-size: .68rem;
  font-weight: 700;
  color: #95a0bd;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-top: 1.5rem;
  text-align: right;
  border-right: 2px solid #e3e6ef;
  padding-right: 1rem;
}
.ft2-row-nodes {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  align-items: flex-start;
  min-width: 0;
}

.ft2-row-hh {
  background: linear-gradient(90deg, rgba(255,141,161,0.06) 0%, rgba(255,141,161,0.02) 100%);
  border-radius: 8px;
}
.ft2-row-down::before {
  content: ""; position: absolute;
  left: 50%; top: 0; height: 18px; width: 2px;
  background: #d0d6e4; transform: translateX(-50%);
}

/* Couple block — HH ◇ Spouse */
.ft2-couple {
  display: flex; align-items: center; gap: 0;
  padding: .5rem .75rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ffd1da;
  box-shadow: 0 4px 14px rgba(255,141,161,.15);
}
.ft2-marriage {
  width: 36px; height: 4px;
  background: linear-gradient(90deg,#FF8DA1,#ff6f88);
  border-radius: 2px;
  margin: 0 0.25rem;
  align-self: center;
  margin-top: -1.5rem;
  position: relative;
}
.ft2-marriage::before, .ft2-marriage::after {
  content: ""; position: absolute; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF8DA1;
  transform: translateY(-50%);
}
.ft2-marriage::before { left: -4px; }
.ft2-marriage::after { right: -4px; }

/* Node */
.ft2-node {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  min-width: 90px; max-width: 130px;
}
.ft2-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(20,30,60,.12);
  background: #e8ebf3;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  margin-bottom: .45rem;
  flex-shrink: 0;
}
.ft2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ft2-avatar-m { background: linear-gradient(135deg,#7dd3fc,#38bdf8); }
.ft2-avatar-f { background: linear-gradient(135deg,#fda4af,#fb7185); }
.ft2-avatar-u { background: linear-gradient(135deg,#cbd5e1,#94a3b8); }

.ft2-name {
  font-size: .78rem; font-weight: 600; color: #1f2a4a;
  line-height: 1.2; word-break: break-word;
  margin-bottom: .15rem;
}
.ft2-role {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .07em;
  color: #95a0bd;
}
.ft2-role-hh       { color: #d63d5d; }
.ft2-role-spouse   { color: #d63d5d; }
.ft2-role-gp       { color: #b45309; }
.ft2-role-parent   { color: #c2410c; }
.ft2-role-sibling  { color: #6366f1; }
.ft2-role-child    { color: #0891b2; }
.ft2-role-gc       { color: #15803d; }
.ft2-role-extended { color: #7c3aed; }
.ft2-role-other    { color: #64748b; }

/* Color the avatar ring of the HH and spouse */
.ft2-couple .ft2-avatar { border-color: #ffd1da; }

@media (max-width: 768px) {
  .ft2-row { flex-direction: column; gap: 0.5rem; }
  .ft2-row-label { width: auto; text-align: left; border-right: 0; border-bottom: 1px solid #e3e6ef; padding: 0 0 .35rem 0; }
}

/* Enumerator survey detail — expandable rows */
.esd-expand-btn {
  background: transparent;
  border: 1px solid #e3e6ef;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #95a0bd;
  cursor: pointer;
  transition: all .15s;
}
.esd-expand-btn:hover { background: #f4f5f9; color: #FF6F88; border-color: #FF6F88; }
.esd-expand-btn i { font-size: 1rem; transition: transform .2s; }
.esd-expand-btn--open { background: #FF8DA1; color: #fff; border-color: #FF8DA1; }
.esd-expand-btn--open i { transform: rotate(90deg); }

.esd-members-row td.esd-members-cell {
  background: #fafbfd;
  padding: 0 !important;
  border-top: 0;
}
.esd-members-panel {
  padding: 1rem 1.25rem;
  border-left: 3px solid #FF8DA1;
  margin: 0 .5rem .5rem 2rem;
  background: #fff;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 3px rgba(20,30,60,.05);
}
.esd-members-header {
  font-size: .8rem; font-weight: 700;
  color: #FF6F88;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.esd-members-header i { margin-right: .35rem; }
.esd-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}
.esd-member-card {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem;
  background: #fafbfd;
  border-radius: 8px;
  border: 1px solid #eef0f5;
}
.esd-member-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.esd-avatar-m { background: linear-gradient(135deg,#7dd3fc,#38bdf8); }
.esd-avatar-f { background: linear-gradient(135deg,#fda4af,#fb7185); }
.esd-avatar-u { background: linear-gradient(135deg,#cbd5e1,#94a3b8); }
.esd-member-info { flex: 1; min-width: 0; }
.esd-member-name { font-size: .85rem; font-weight: 600; color: #1f2a4a; }
.esd-member-meta { font-size: .7rem; color: #95a0bd; display: flex; gap: .5rem; }
.esd-member-badges { display: flex; gap: .25rem; margin-top: .15rem; }
.esd-member-badges .badge { font-size: .6rem; padding: .15rem .35rem; }

/* Enumerator survey summary — Report Stats banner */
.esd-stats {
  background: linear-gradient(135deg,#fff 0%,#fff8fa 100%);
  border: 1px solid #ffe2e8;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 2px 6px rgba(255,141,161,.08);
}
.esd-stats__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap; gap: .75rem;
}
.esd-stats__title {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #FF6F88;
}
.esd-stats__subtitle { font-size: 1.05rem; font-weight: 600; color: #1f2a4a; }
.esd-stats__totals { display: flex; gap: .5rem; flex-wrap: wrap; }
.esd-stats__pill {
  padding: .3rem .75rem;
  background: #fff;
  border: 1px solid #ffd1da;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: #d63d5d;
}
.esd-stats__pill i { margin-right: .3rem; }

.esd-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.esd-stat-card {
  display: flex; align-items: center; gap: .75rem;
  background: #fff;
  border: 1px solid #f0e6ea;
  border-radius: 12px;
  padding: .85rem 1rem;
  transition: transform .15s, box-shadow .15s;
}
.esd-stat-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20,30,60,.08); }
.esd-stat-card__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  flex-shrink: 0;
}
.esd-stat-card--top         .esd-stat-card__icon { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.esd-stat-card--top-month   .esd-stat-card__icon { background: linear-gradient(135deg,#FF8DA1,#ff6f88); }
.esd-stat-card--most        .esd-stat-card__icon { background: linear-gradient(135deg,#34d399,#10b981); }
.esd-stat-card--least       .esd-stat-card__icon { background: linear-gradient(135deg,#94a3b8,#64748b); }
.esd-stat-card__body { min-width: 0; flex: 1; }
.esd-stat-card__label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: #95a0bd;
  margin-bottom: .15rem;
}
.esd-stat-card__value {
  font-size: 1.05rem; font-weight: 700;
  color: #1f2a4a;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esd-stat-card__sub {
  font-size: .72rem;
  color: #6b7390;
  margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.esd-stat-card--most-all  .esd-stat-card__icon { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.esd-stat-card--least-all .esd-stat-card__icon { background: linear-gradient(135deg,#f472b6,#db2777); }

/* ======================================================================
   AI Studio polish — chip groups, header glow, surface treatment
   ====================================================================== */
.ai-shell {
  background: linear-gradient(135deg,#fff 0%,#fff8fa 50%,#fef0f3 100%) !important;
  border: 1px solid #ffd1da !important;
  box-shadow: 0 4px 18px rgba(255,141,161,.08) !important;
}
.ai-shell .sneat-widget__header {
  border-bottom: 1px dashed #ffd1da;
  background: transparent;
}
.ai-shell .card-title {
  background: linear-gradient(135deg,#FF6F88,#d63d5d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Chip group layout */
.ai-suggestions-grouped {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.ai-chip-group {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .35rem 0;
}
.ai-chip-group__label {
  flex-shrink: 0;
  min-width: 200px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #95a0bd;
  padding: .35rem .5rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-right: 2px solid #ffe2e8;
}
.ai-chip-group__label i { font-size: 1rem; color: #FF6F88; }
.ai-chip-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  flex: 1;
}

/* Chips */
.ai-chip {
  border: 1px solid transparent;
  background: #fff;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(20,30,60,.04);
}
.ai-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(20,30,60,.1);
}
.ai-chip--health    { color: #d63d5d; border-color: #ffd1da; background: #fff5f7; }
.ai-chip--health:hover    { background: linear-gradient(135deg,#FF8DA1,#ff6f88); color: #fff; border-color: #FF8DA1; }
.ai-chip--residence { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; }
.ai-chip--residence:hover { background: linear-gradient(135deg,#7dd3fc,#0284c7); color: #fff; border-color: #0284c7; }
.ai-chip--livelihood { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.ai-chip--livelihood:hover { background: linear-gradient(135deg,#34d399,#10b981); color: #fff; border-color: #10b981; }
.ai-chip--demo { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
.ai-chip--demo:hover { background: linear-gradient(135deg,#a78bfa,#7c3aed); color: #fff; border-color: #7c3aed; }
.ai-chip--decision { color: #b45309; border-color: #fde68a; background: #fffbeb; font-weight: 600; }
.ai-chip--decision:hover { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #fff; border-color: #f59e0b; }

/* Search input glow */
.ai-shell .search-wrap input {
  border: 1px solid #ffd1da;
  border-radius: 12px;
  padding: .65rem .9rem;
  background: #fff;
  transition: all .15s;
}
.ai-shell .search-wrap input:focus {
  border-color: #FF8DA1;
  box-shadow: 0 0 0 4px rgba(255,141,161,.18);
  outline: 0;
}

/* Result surfaces */
.ai-surface {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #f0e6ea !important;
  padding: .75rem;
}
.ai-chart-shell { min-height: 280px; padding: 1rem; }
.ai-chart-shell canvas { max-height: 280px !important; }

/* Provider status pill */
#aiProviderStatus {
  display: inline-block;
  padding: .25rem .7rem;
  background: #fff;
  border-radius: 999px;
  border: 1px solid #ffd1da;
  color: #d63d5d !important;
  font-weight: 500;
}

@media (max-width: 768px) {
  .ai-chip-group { flex-direction: column; gap: .35rem; }
  .ai-chip-group__label { min-width: auto; border-right: 0; border-bottom: 1px solid #ffe2e8; padding: 0 0 .25rem 0; }
}

/* Dashboard map filter chips */
.map-filter-chip {
  border: 1px solid #ffd1da;
  background: #fff;
  color: #d63d5d;
  border-radius: 999px;
  padding: .15rem .65rem;
  font-size: .7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.map-filter-chip:hover { background: #fff5f7; border-color: #FF8DA1; }
.map-filter-chip.is-active {
  background: linear-gradient(135deg,#FF8DA1,#ff6f88);
  color: #fff;
  border-color: #FF6F88;
  box-shadow: 0 2px 8px rgba(255,141,161,.4);
}