/* 01 — KPI presentation and responsive grouping */
#homepageSection #kpiDashboard > div > button {
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(110deg, #164f3f, #1f6753) !important;
  color: #ffffff !important;
}
#homepageSection #kpiDashboard > div > button :is(.text-white,.text-slate-300) { color: #ffffff !important; }
#homepageSection #kpiDashboard > div > button .text-slate-400 { color: #d8eee5 !important; }
#homepageSection #kpiDashboard > div > button > div:first-child > div:first-child,
#homepageSection #kpiToggleIcon {
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.13) !important;
  color: #ffffff !important;
}

@media (max-width: 1023px) {
  .kpi-mobile-tabs { display: grid; }
  #kpiContent[data-mobile-kpi-tab="outcome"] [data-kpi-group]:not([data-kpi-group="outcome"]),
  #kpiContent:not([data-mobile-kpi-tab]) [data-kpi-group]:not([data-kpi-group="outcome"]),
  #kpiContent[data-mobile-kpi-tab="followup"] [data-kpi-group]:not([data-kpi-group="followup"]),
  #kpiContent[data-mobile-kpi-tab="activity"] [data-kpi-group]:not([data-kpi-group="activity"]) { display: none !important; }
  #kpiContent .kpi-primary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #kpiContent .kpi-activity-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 639px) {
  #kpiContent .kpi-primary-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #kpiContent .kpi-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ============================================================
   02 — Shared module surfaces
   Green boundaries + softly veiled photography keep every module
   recognizable without sacrificing text contrast for older users.
   ============================================================ */
/* Each application workspace receives a real photographic backdrop. The
   nearly-opaque veil is deliberate: decoration never sits directly under copy. */
.app-section:not(#homepageSection) > section,
.app-section:not(#homepageSection) > div[class*="min-h-screen"] {
  background-color: #f4f8f2 !important;
  background-image:
    linear-gradient(115deg, rgba(249,252,247,.975) 0%, rgba(244,250,245,.94) 52%, rgba(255,255,255,.965) 100%),
    url('/static/icons/tbcare-hero-community-v3.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-attachment: scroll, fixed !important;
}
#contactTreeSection > section { background-position: center, 64% center !important; }
#unitDetailSection > section { background-position: center, 42% center !important; }
#tambonDetailSection > section { background-position: center, 72% center !important; }
#guidesSection > section { background-position: center, 34% center !important; }

/* Main information surfaces only: chips, status pills and icon circles keep
   their semantic colours instead of receiving an accidental card outline. */
.app-section :is(
  .colorful-card-light,
  .colorful-card-dark,
  .app-action-card,
  .dashboard-report-launcher-card,
  .dashboard-report-modal-content,
  .modal-content,
  [class*="bg-white"][class*="rounded-2xl"],
  [class*="bg-white"][class*="rounded-xl"],
  [class*="bg-slate-50"][class*="rounded-2xl"],
  [class*="bg-gray-50"][class*="rounded-2xl"]
) {
  border-color: var(--module-card-border) !important;
}



/* Keep copy reliably dark even when legacy utility colours remain in markup.
.app-section :is(.colorful-card-light, .colorful-card-dark, .dashboard-report-launcher-card, .modal-content)
  :is(h1, h2, h3, h4, h5, h6, .text-white, .text-slate-900, .text-slate-800, .text-gray-900) {
  color: var(--module-copy) !important;
}
.app-section :is(.colorful-card-light, .colorful-card-dark, .dashboard-report-launcher-card, .modal-content)
  :is(p, small, label, td, th, .text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600, .text-gray-500, .text-gray-600) {
  color: var(--module-copy-muted) !important;
}
*/

@media (hover: hover) {
  .app-section :is(.colorful-card-light, .colorful-card-dark, .app-action-card, .dashboard-report-launcher-card):hover {
    border-color: var(--module-card-border-strong) !important;
    box-shadow: 0 12px 30px rgba(28, 82, 57, .13) !important;
  }
}

@media (max-width: 767px), (prefers-reduced-data: reduce) {
  .app-section:not(#homepageSection) > section,
  .app-section:not(#homepageSection) > div[class*="min-h-screen"] {
    background-attachment: scroll !important;
  }
}

/* Personal dashboard: compact cards, extra large numbers, single row layout */
#myPatientsSection #userStatsGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1.2vw, 16px) !important;
  width: 100% !important;
}

#myPatientsSection #userStatsGrid > div {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(8px, 1.2vw, 16px) clamp(4px, 1vw, 12px) !important;
  overflow: hidden !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 18px !important;
  text-align: center !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

#myPatientsSection #userStatsGrid > div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12) !important;
}

#myPatientsSection #userStatsGrid > div:nth-child(1) {
  border-color: #60a5fa !important;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%) !important;
}
#myPatientsSection #userStatsGrid > div:nth-child(2) {
  border-color: #34d399 !important;
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%) !important;
}
#myPatientsSection #userStatsGrid > div:nth-child(3) {
  border-color: #fb7185 !important;
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%) !important;
}
#myPatientsSection #userStatsGrid > div:nth-child(4) {
  border-color: #c084fc !important;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%) !important;
}

#myPatientsSection #userStatsGrid > div > * {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#myPatientsSection #userStatsGrid p.counter,
#myPatientsSection #userStatsGrid .text-2xl,
#myPatientsSection #userStatsGrid .text-3xl,
#myPatientsSection #userStatsGrid .text-4xl,
#myPatientsSection #userStatsGrid .text-5xl {
  font-size: clamp(1.65rem, 3.2vw, 2.85rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

#myPatientsSection #userStatsGrid > div:nth-child(1) p.counter { color: #1e3a8a !important; }
#myPatientsSection #userStatsGrid > div:nth-child(2) p.counter { color: #064e3b !important; }
#myPatientsSection #userStatsGrid > div:nth-child(3) p.counter { color: #881337 !important; }
#myPatientsSection #userStatsGrid > div:nth-child(4) p.counter { color: #581c87 !important; }

#myPatientsSection #userStatsGrid p:not(.counter) {
  font-size: clamp(0.72rem, 1.1vw, 0.92rem) !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin-top: 4px !important;
  line-height: 1.25 !important;
}

/* Investigation Work Summary: 3 Cards in single row */
#myPatientsSection #investigationWorkSummary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1.2vw, 14px) !important;
  width: 100% !important;
}

#myPatientsSection #investigationWorkSummary > button {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(10px, 1.2vw, 16px) clamp(6px, 1vw, 14px) !important;
  overflow: hidden !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 18px !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% + 14px) calc(100% + 14px) !important;
  background-size: 72px auto !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

#myPatientsSection #investigationWorkSummary > button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12) !important;
}

#myPatientsSection #investigationWorkSummary > button:nth-child(1) {
  border-color: #6ee7b7 !important;
  background-color: #ecfdf5 !important;
}
#myPatientsSection #investigationWorkSummary > button:nth-child(2) {
  border-color: #fcd34d !important;
  background-color: #fffbeb !important;
}
#myPatientsSection #investigationWorkSummary > button:nth-child(3) {
  border-color: #fda4af !important;
  background-color: #fff1f2 !important;
}

#myPatientsSection #investigationWorkSummary > button > * {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  max-width: 100% !important;
}

#myPatientsSection #investigationWorkSummary > button strong {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

#myPatientsSection #investigationWorkSummary > button:nth-child(1) strong { color: #064e3b !important; }
#myPatientsSection #investigationWorkSummary > button:nth-child(2) strong { color: #78350f !important; }
#myPatientsSection #investigationWorkSummary > button:nth-child(3) strong { color: #881337 !important; }

#myPatientsSection #investigationWorkSummary > button span {
  font-weight: 900 !important;
}

@media (max-width: 639px) {
  #myPatientsSection #userStatsGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  #myPatientsSection #userStatsGrid > div {
    padding: 8px 4px !important;
    border-radius: 14px !important;
  }
  #myPatientsSection #investigationWorkSummary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  #myPatientsSection #investigationWorkSummary > button {
    padding: 8px 4px !important;
    border-radius: 14px !important;
    background-image: none !important;
  }
}

/* ============================================================

   03 — Institutional palette, contrast and interaction
   ============================================================ */
:root {
  /* Shared institutional palette — the single authority for every module. */
  --ux-ink: #102f24;
  --ux-ink-soft: #294c3e;
  --ux-muted: #496358;
  --ux-green-strong: #0f5137;
  --ux-green-soft: #edf8f1;
  --ux-border: #8cbea4;
  --ux-border-strong: #39795b;
  --ux-warning: #8a4b00;
  --ux-danger: #a22727;
  --ux-info: #185a9d;
  --ux-surface: rgba(255, 255, 255, .975);
  --ux-shadow: 0 8px 24px rgba(22, 79, 55, .09);
  --ux-shadow-hover: 0 14px 34px rgba(22, 79, 55, .15);
  --action-home: #166534;
  --action-contact: #8a4b00;
  --action-screening: #5b21b6;
  --action-risk: #0f6474;
  --action-report: #1e4f91;
  --module-card-border: var(--ux-border);
  --module-card-border-strong: var(--ux-border-strong);
  --module-card-bg: var(--ux-surface);
  --module-copy: var(--ux-ink);
  --module-copy-muted: var(--ux-muted);
}

/* Copy always sits on an opaque, green-bounded reading surface. */
.app-section :is(
  .colorful-card-light,
  .colorful-card-dark,
  .app-action-card,
  .dashboard-report-launcher-card,
  .area-gallery-card,
  .area-summary-card,
  .risk-tambon-card,
  .modal-content,
  [class*="bg-white"][class*="rounded-2xl"],
  [class*="bg-white"][class*="rounded-xl"]
) {
  border: 1.5px solid var(--ux-border) !important;
  background-color: var(--ux-surface) !important;
  box-shadow: var(--ux-shadow) !important;
}

.app-section :is(.colorful-card-light, .colorful-card-dark, .app-action-card, .dashboard-report-launcher-card, .area-gallery-card, .area-summary-card, .risk-tambon-card)
  :is(h1, h2, h3, h4, h5, h6, strong) { color: var(--ux-ink) !important; }
.app-section :is(.colorful-card-light, .colorful-card-dark, .app-action-card, .dashboard-report-launcher-card, .area-gallery-card, .area-summary-card, .risk-tambon-card)
  :is(p, small, label, .text-slate-400, .text-slate-500, .text-slate-600, .text-gray-400, .text-gray-500, .text-gray-600) { color: var(--ux-muted) !important; }

/* Semantic KPI colours, darkened to meet contrast on pale cards. */
#kpiContent :is(.text-amber-400, .text-amber-500, .text-yellow-400, .text-yellow-500) { color: var(--ux-warning) !important; }
#kpiContent :is(.text-emerald-400, .text-emerald-500, .text-green-400, .text-green-500) { color: var(--ux-green-strong) !important; }
#kpiContent :is(.text-pink-400, .text-pink-500, .text-red-400, .text-red-500) { color: var(--ux-danger) !important; }
#kpiContent :is(.text-blue-400, .text-blue-500, .text-sky-400, .text-sky-500) { color: var(--ux-info) !important; }
#kpiContent [data-kpi-group] {
  border-color: var(--ux-border) !important;
}
#kpiContent .text-xs { font-size: .8125rem !important; line-height: 1.45 !important; }

/* Stable form and table reading rhythm for older users. */
.app-section :is(input, select, textarea) {
  min-height: 44px;
  color: var(--ux-ink) !important;
  background-color: #fff !important;
  border-color: #7eaa94 !important;
}
.app-section :is(input, select, textarea)::placeholder { color: #60766c !important; opacity: 1; }
.app-section :is(th, [role="columnheader"]) { color: var(--ux-ink) !important; background-color: var(--ux-green-soft) !important; }
.app-section td { color: var(--ux-ink-soft); }

/* Visible keyboard focus and predictable touch targets. */
.app-section :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #f0b429 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(240,180,41,.2) !important;
}
.app-section button:not(.text-xs), .app-section a[role="button"] { min-height: 44px; }

@media (hover: hover) and (pointer: fine) {
  .app-section :is(.app-action-card, .dashboard-report-launcher-card, .area-gallery-card, .risk-tambon-card):hover {
    border-color: var(--ux-border-strong) !important;
    box-shadow: var(--ux-shadow-hover) !important;
    transform: translateY(-2px);
  }
}

@media (max-width: 639px) {
  .app-section { font-size: 16px; }
  .app-section :is(.colorful-card-light, .colorful-card-dark, .app-action-card, .dashboard-report-launcher-card, .area-gallery-card, .risk-tambon-card) { border-radius: 18px !important; }
}

/* 04 — Homepage legibility */
#homepageSection .hero-copy {
  border: 2px solid #39795b !important;
  box-shadow: 0 18px 42px rgba(16, 81, 55, .17) !important;
}
#homepageSection .hero-copy::after {
  opacity: .28;
  z-index: 0;
}
#homepageSection .hero-copy img[alt="TB Care Plus Logo"] {
  border: 4px solid #166145 !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.94), 0 12px 28px rgba(15,81,55,.22) !important;
}
#homepageSection .hero-shell > .grid.grid-cols-2 > div {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid #76a98d !important;
}
#homepageSection .hero-shell > .grid.grid-cols-2 > div > * { position: relative; z-index: 1; }
#homepageSection .hero-shell > .grid.grid-cols-2 > div .counter {
  min-height: 1.1em;
  font-size: clamp(2.35rem, 6vw, 3.5rem) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
#homepageSection #kpiContent :is(.text-lg, .text-xl, .text-2xl) {
  font-size: clamp(1.55rem, 4vw, 2rem) !important;
  line-height: 1.1 !important;
}

/* Decorative motion must never flash over reading content. */
#homepageSection .hero-white > .absolute,
#homepageSection .hero-white > .absolute * { animation: none !important; }
#homepageSection :is(.hero-copy, .app-action-card, .dashboard-report-launcher-card)::before,
#homepageSection :is(.hero-copy, .app-action-card, .dashboard-report-launcher-card)::after {
  pointer-events: none !important;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  #homepageSection :is(.hero-shell > .grid.grid-cols-2 > div, .app-action-card, .dashboard-report-launcher-card) {
    transform: none !important;
    animation: none !important;
  }
}

@media (max-width: 639px) {
  #homepageSection .hero-copy { border-width: 2px !important; }
  #homepageSection .hero-shell > .grid.grid-cols-2 > div .counter { font-size: 2.5rem !important; }
}

/* 04.1 — Professional hero hierarchy */
#homepageSection .hero-copy {
  min-height: 350px !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(18rem, 29vw, 24rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.35rem, 4vw, 3.25rem) !important;
  border-color: #2f7658 !important;
  background-image: linear-gradient(96deg, rgba(255,255,255,.99) 0%, rgba(248,252,248,.97) 46%, rgba(244,250,246,.70) 66%, rgba(240,249,244,.18) 100%), url('/static/icons/tbcare-hero-community-v3.webp') !important;
  background-position: center, 64% center !important;
  box-shadow: 0 22px 55px -28px rgba(15,81,55,.48) !important;
}
#homepageSection .hero-intro { max-width: 690px; }
#homepageSection .hero-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; padding: .42rem .75rem;
  border: 1px solid #9fc8ae; border-radius: 999px; background: rgba(236,248,240,.94);
  color: #14583f; font-size: .78rem; font-weight: 800; letter-spacing: .015em;
}
#homepageSection .hero-copy h1 { margin-bottom: .25rem !important; color: #0d3f2e !important; line-height: 1.05 !important; }
#homepageSection .hero-description {
  max-width: 640px; margin: .8rem 0 0; color: #334e45; font-size: clamp(.92rem, 1.4vw, 1.04rem);
  font-weight: 500; line-height: 1.65; text-align: left;
}
#homepageSection .hero-trust-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
#homepageSection .hero-trust-row span {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .35rem .65rem;
  border: 1px solid #c7ddcf; border-radius: .7rem; background: rgba(255,255,255,.88);
  color: #214b3c; font-size: .78rem; font-weight: 700;
}
#homepageSection .hero-trust-row i { color: #087a57; }

@media (max-width: 767px) {
  #homepageSection .hero-copy {
    min-height: auto !important; padding: 1.15rem 1.15rem 7.5rem !important;
    background-image: linear-gradient(130deg, rgba(255,255,255,.985), rgba(239,248,242,.94)), url('/static/icons/tbcare-hero-community-v3.webp') !important;
    background-position: center, 72% center !important;
  }
  #homepageSection .hero-intro { align-items: flex-start !important; }
  #homepageSection .hero-copy img[alt="TB Care Plus Logo"] { width: 68px !important; height: 68px !important; }
  #homepageSection .hero-eyebrow { font-size: .82rem; line-height: 1.4; }
  #homepageSection .hero-description { font-size: 1rem; }
  #homepageSection .hero-trust-row { display: grid; grid-template-columns: 1fr; width: 100%; }
  #homepageSection .hero-trust-row span { width: 100%; font-size: .9rem; min-height: 40px; }
  body:has(#homepageSection.active) .module-mascot-shell {
    z-index: 11 !important; right: 1.25rem !important; width: 74px !important; height: 111px !important;
    opacity: .96 !important; pointer-events: none;
  }
}

/* ============================================================
   05 — Knowledge and guidance module
   Calm public-health palette, formal hierarchy and clear tabs.
   ============================================================ */
#guidesSection .guide-hero-bg {
  background:
    linear-gradient(120deg, rgba(246,250,247,.985), rgba(238,247,241,.965)),
    url('/static/icons/tbcare-hero-community-v3.webp') center / cover no-repeat !important;
  color: #173b2d;
}
#guidesSection .guide-hero-bg::before {
  background: linear-gradient(135deg, rgba(231,243,235,.72), rgba(239,247,242,.56)) !important;
}
#guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 {
  padding: 1rem 1.1rem;
  border: 1px solid #35765a;
  border-radius: 18px;
  background: linear-gradient(120deg, #164f3b, #246a50) !important;
  box-shadow: 0 10px 24px rgba(16,79,55,.16);
}
#guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 h1 { color: #fff !important; }
#guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 p { color: #e5f4eb !important; }
#guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 button {
  border: 1px solid rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

#guidesSection #guideTabs {
  gap: .5rem;
  padding: .45rem;
  border: 1px solid #a8c9b6;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  scrollbar-width: thin;
}
#guidesSection #guideTabs .guide-tab {
  min-height: 44px;
  border: 1px solid #85ad98 !important;
  background: #fff !important;
  color: #244b3c !important;
  box-shadow: none !important;
}
#guidesSection #guideTabs .guide-tab:hover { background: #edf7f0 !important; border-color: #39795b !important; }
#guidesSection #guideTabs .guide-tab.active {
  border-color: #0f5137 !important;
  background: #166145 !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(15,81,55,.18) !important;
}

#guidesSection .guide-panel > div {
  border: 1.5px solid #8eb9a1 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.975) !important;
  box-shadow: 0 6px 18px rgba(20,77,53,.08) !important;
  backdrop-filter: none !important;
}
#guidesSection .guide-panel > div > button { min-height: 74px; color: #173b2d !important; }
#guidesSection .guide-panel > div > button h3 { color: #173b2d !important; font-size: 1rem !important; line-height: 1.45; }
#guidesSection .guide-panel > div > button p { color: #4c665b !important; font-size: .8125rem !important; line-height: 1.45; }
#guidesSection .guide-panel > div > button > i { color: #527064 !important; }
#guidesSection .guide-panel > div > button .w-10.h-10 {
  border: 1px solid #9ec5b0 !important;
  background: #e7f4eb !important;
  color: #166145 !important;
  box-shadow: none !important;
}
#guidesSection .guide-panel > div > button .w-10.h-10 i { color: #166145 !important; }
#guidesSection .guide-accordion-body > div {
  border: 1px solid #c7ddd1;
  background: #f7faf8 !important;
  color: #294c3e !important;
}
#guidesSection .guide-accordion-body :is(p, li, strong) { color: #294c3e !important; }
#guidesSection .guide-accordion-body :is(.bg-yellow-500\/20, .bg-red-500\/20, .bg-blue-500\/20) {
  background: #fff8e6 !important;
  border-color: #d6a43c !important;
}
#guidesSection footer {
  border-color: #bed3c7 !important;
  background: #edf5f0 !important;
}
#guidesSection footer p { color: #496358 !important; }

/* Keep guide headings and instructions clearly separated from the artwork. */
#guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 {
  border-width: 2px;
  border-color: #8fc9aa;
  box-shadow: 0 14px 32px rgba(13,76,53,.22);
}
#guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 h1 { font-size: clamp(1.45rem,3vw,2rem) !important; }
#guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 p { font-size: .95rem !important; line-height: 1.55; }
#guidesSection .guide-panel > div { border-width: 2px !important; border-color: #679c80 !important; }
#guidesSection .guide-accordion-body :is(p,li,strong) { font-size: .95rem; line-height: 1.7; }

/* Accessible report cards: previous white normalization left white labels on
   white backgrounds in age/tambon report popups. */
.dashboard-report-modal-body :is(#genderDashboardPanel,#ageDashboardPanel,#tambonOverviewPanel) .colorful-card-dark,
.dashboard-report-modal-body :is(#genderDashboardPanel,#ageDashboardPanel,#tambonOverviewPanel).colorful-card-dark,
.dashboard-report-modal-body #tambonOverviewPanel > div {
  border: 2px solid #4f8f70 !important;
  background: #f8fcf9 !important;
  color: #173b2d !important;
  box-shadow: 0 8px 22px rgba(19,80,55,.10) !important;
}
.dashboard-report-modal-body :is(#genderDashboardPanel,#ageDashboardPanel,#tambonOverviewPanel) h3 { color: #173b2d !important; font-size: 1.1rem !important; }
.dashboard-report-modal-body #ageGroupChart > div {
  border: 1px solid #a7c8b5;
  background: #ffffff !important;
  color: #1e3a2f !important;
}
.dashboard-report-modal-body #ageGroupChart > div > div:first-child { color: #174d38 !important; font-size: .9rem !important; }
.dashboard-report-modal-body #ageGroupChart span { color: #173b2d !important; font-size: .88rem !important; }
.dashboard-report-modal-body #ageGroupChart .bg-slate-600 { background: #d9e8df !important; }
.dashboard-report-modal-body #tambonOverviewPanel :is(.text-white,.text-slate-400) { color: #294c3e !important; }

/* Reduce decorative saturation across information modules without muting status colours. */
.app-section:not(#homepageSection) :is(.colorful-card-light, .colorful-card-dark, .dashboard-report-launcher-card, .area-gallery-card, .risk-tambon-card) {
  background-image: none !important;
  background-color: rgba(255,255,255,.975) !important;
}

@media (max-width: 639px) {
  #guidesSection .relative.z-10 { padding: .75rem !important; }
  #guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 { padding: .85rem; margin-bottom: .8rem !important; }
  #guidesSection .relative.z-10 > .flex.items-center.justify-between.mb-6 h1 { font-size: 1.35rem !important; }
  #guidesSection #guideTabs { margin-bottom: .8rem !important; }
  #guidesSection .guide-panel > div > button { padding: .85rem !important; }
}

/* 06 — Module action colours */
#myPatientsSection #btnHomeVisit { background: var(--action-home) !important; color: #fff !important; }
#myPatientsSection #btnContact { background: var(--action-contact) !important; color: #fff !important; }
#myPatientsSection #btnTbScreening { background: var(--action-screening) !important; color: #fff !important; }
#myPatientsSection #btnRiskMap { background: var(--action-risk) !important; color: #fff !important; }
#myPatientsSection #btnMonthlyReport { background: var(--action-report) !important; color: #fff !important; }
#executiveSection button[onclick*="exportExecCSV"],
#tb03Section button[onclick*="exportTB03CSV"] {
  border-color: #14532d !important;
  background: #166534 !important;
  color: #fff !important;
}
#executiveSection button[onclick*="printExecDashboard"],
#tb03Section button[onclick*="printTB03"] {
  border: 1px solid rgba(255,255,255,.52) !important;
  color: #fff !important;
}

/* 07 — Notification delivery monitor */
#notificationMonitorSection main { color: var(--ux-ink); }
.notification-summary-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 108px;
  padding: 1rem;
  border: 1.5px solid var(--ux-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ux-shadow);
}
.notification-summary-card > i { grid-row: 1 / 3; font-size: 1.35rem; color: var(--ux-green-strong); }
.notification-summary-card strong { font-size: 1.8rem; line-height: 1; color: var(--ux-ink); font-variant-numeric: tabular-nums; }
.notification-summary-card span { margin-top: .3rem; color: var(--ux-muted); font-size: .82rem; font-weight: 700; }
.notification-summary-card.tone-danger { border-color: #d8a1a1; background: #fff8f8; }
.notification-summary-card.tone-danger > i { color: var(--ux-danger); }
.notification-summary-card.tone-warning { border-color: #d8b66d; background: #fffbef; }
.notification-summary-card.tone-warning > i { color: var(--ux-warning); }
.notification-status { display: inline-flex; padding: .3rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.notification-status.status-sent { color: #0f5137; background: #e7f6ec; }
.notification-status.status-failed { color: #8f1d1d; background: #fdeaea; }
.notification-status.status-queued { color: #704000; background: #fff3d6; }
.notification-retry-btn { min-height: 40px; padding: .45rem .75rem; border: 1px solid #b42323; border-radius: 10px; color: #8f1d1d; background: #fff; font-weight: 800; }
.notification-retry-btn:hover { color: #fff; background: #9b2525; }

/* 08 — Stable, consistent module headers (desktop PWA + mobile web) */
.module-page-header {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid rgba(167, 243, 208, .42) !important;
  background: linear-gradient(112deg, #123f31 0%, #075f46 58%, #0f766e 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(6, 78, 59, .2) !important;
}
div.module-page-header {
  min-height: 76px;
  padding: .9rem 1rem;
  border-radius: 18px;
}
header.module-page-header {
  padding-top: max(1rem, env(safe-area-inset-top)) !important;
}
.module-page-header-sticky {
  position: sticky !important;
  top: 0;
  z-index: 40;
}
.module-page-header h1,
.module-page-header h2 {
  color: #fff !important;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem) !important;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.module-page-header p { color: #d9f7e8 !important; }
.module-page-header > div,
.module-page-header > div > div { min-width: 0; }
.module-page-header button {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
.module-page-header button:first-child {
  border: 1px solid rgba(255, 255, 255, .4) !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
}
.module-page-header button:first-child:hover { background: rgba(255, 255, 255, .24) !important; }

@media (max-width: 639px) {
  div.module-page-header {
    min-height: 68px;
    padding: .75rem;
    border-radius: 16px;
  }
  header.module-page-header { padding: max(.75rem, env(safe-area-inset-top)) .75rem .75rem !important; }
  .module-page-header h1,
  .module-page-header h2 { font-size: 1.15rem !important; }
  .module-page-header p { font-size: .75rem !important; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .module-page-header *,
  .module-page-header *::before,
  .module-page-header *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* 09 — Homepage statistics: clean, high-contrast, professional medical cards */
#homepageSection .hero-stat-card {
  position: relative;
  overflow: hidden;
  min-height: auto !important;
  background: #ffffff !important;
  background-image: none !important;
  border-width: 1px !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#homepageSection .hero-stat-card::before,
#homepageSection .hero-stat-card::after {
  display: none !important;
  content: none !important;
}

#homepageSection .hero-stat-total { border-color: rgba(59, 130, 246, 0.35) !important; }
#homepageSection .hero-stat-active { border-color: rgba(20, 184, 166, 0.35) !important; }
#homepageSection .hero-stat-cured { border-color: rgba(168, 85, 247, 0.35) !important; }
#homepageSection .hero-stat-new { border-color: rgba(249, 115, 22, 0.35) !important; }

#homepageSection .hero-stat-card .counter {
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}
#homepageSection .hero-stat-total .counter { color: #1d4ed8 !important; }
#homepageSection .hero-stat-active .counter { color: #0f766e !important; }
#homepageSection .hero-stat-cured .counter { color: #7e22ce !important; }
#homepageSection .hero-stat-new .counter { color: #c2410c !important; }

#homepageSection .hero-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05) !important;
}
#homepageSection .hero-stat-total:hover { border-color: #3b82f6 !important; }
#homepageSection .hero-stat-active:hover { border-color: #14b8a6 !important; }
#homepageSection .hero-stat-cured:hover { border-color: #a855f7 !important; }
#homepageSection .hero-stat-new:hover { border-color: #f97316 !important; }

/* High Contrast: Feature Highlight Cards (3 cards) */
#homepageSection .feature-highlight-card {
  background: #ffffff !important;
}
#homepageSection .feature-highlight-card :is(.text-slate-900, .font-bold, .font-black) {
  color: #020617 !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
}
#homepageSection .feature-highlight-card :is(.text-slate-500, .text-\[9px\], .text-slate-700) {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
}

/* High Contrast: Quick Action Cards (8 cards) — Elderly Accessible */
#homepageSection .home-action-card {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
}
#homepageSection .home-action-card:hover {
  border-color: #0d9488 !important;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.16) !important;
}
#homepageSection .home-action-card :is(.text-slate-800, .font-bold, .font-black, .leading-tight) {
  color: #020617 !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
}
#homepageSection .home-action-card :is(.text-slate-400, .text-slate-600, .text-slate-700, .text-\[10px\], .text-xs) {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
}

/* High Contrast: Appointment Cards */
#homepageSection .home-appointment-card {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
}
#homepageSection .home-appointment-card :is(.text-slate-800, .font-bold, .font-black) {
  color: #020617 !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
}
#homepageSection .home-appointment-card :is(.text-slate-400, .text-slate-600, .text-slate-700, .text-\[10px\], .text-xs) {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
}

/* ============================================================
   10 — Responsive layout foundation (320px → ultrawide)
   Final authority for spacing, hierarchy, grids and touch layout.
   ============================================================ */
html {
  min-width: 320px;
  font-size: 16px;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  height: auto;
  min-height: 100%;
  font-size: 1rem;
  line-height: 1.6;
  overflow-y: visible;
  background: #f7faf8;
}

body :is(button, input, select, textarea) { font-family: inherit; }

.app-top-header {
  min-height: 60px;
  padding-inline: max(.75rem, calc((100vw - 1280px) / 2 + 1rem)) !important;
}

#homepageSection .hero-shell {
  width: min(100%, 1280px) !important;
  padding-inline: clamp(.75rem, 2.2vw, 2rem) !important;
  padding-top: clamp(.75rem, 1.8vw, 1.5rem) !important;
}

#homepageSection .hero-banner-card {
  min-height: clamp(14rem, 28vw, 20rem) !important;
  border: 1px solid #b9dcd4 !important;
  border-radius: clamp(1.25rem, 2.5vw, 2rem) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 47%, rgba(255,255,255,.46) 70%, rgba(255,255,255,.10) 100%),
    url('/static/illustrations/hero-district-overview-bg.png') center / cover no-repeat !important;
  box-shadow: 0 14px 38px rgba(15, 81, 55, .10) !important;
}

#homepageSection .hero-banner-card .hero-nurse-art {
  object-position: center 18%;
  filter: saturate(1.08) contrast(1.06) brightness(1.01);
  transform: scale(1.015);
  transform-origin: center;
  image-rendering: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .72) 14%, #000 28%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .72) 14%, #000 28%);
}

@media (max-width: 639px) {
  #homepageSection .hero-district-overview {
    background-position: 64% center !important;
  }
}

/* Generated community-care artwork has a transparent background, so it can
   sit over the clinical hero without dimming the copy on the left. */
#homepageSection .hero-banner-card .hero-care-team-art {
  object-position: right bottom;
  filter: saturate(1.04) contrast(1.03) brightness(1.02) drop-shadow(0 12px 14px rgba(15, 81, 55, .16));
}

#homepageSection .hero-banner-card > .relative {
  width: min(70%, 44rem) !important;
  padding: clamp(1rem, 3vw, 2.35rem) !important;
}

#homepageSection .hero-banner-card > .relative > :is(.text-xl, .sm\:text-3xl) {
  font-size: clamp(1.35rem, 3.3vw, 2.55rem) !important;
  line-height: 1.32 !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.65rem !important;
}

#homepageSection .hero-banner-card .hero-title-highlight {
  color: #0d9488 !important;
  background: transparent !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #0d9488 !important;
  display: inline !important;
}

#homepageSection .hero-banner-card p {
  max-width: 38rem;
  font-size: clamp(.78rem, 1.3vw, .98rem) !important;
  line-height: 1.55 !important;
  margin-bottom: 0.85rem !important;
}

/* Font Awesome integrity protection against generic font resets */
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands {
  font-family: "Font Awesome 6 Free" !important;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
}

#homepageSection .feature-highlights-grid,
#homepageSection .home-stat-grid,
#homepageSection .home-action-grid {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

#homepageSection .home-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(.65rem, 1.5vw, 1rem) !important;
}

@media (min-width: 640px) {
  #homepageSection .home-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

#homepageSection .feature-highlight-card {
  min-height: 98px;
  padding: clamp(.7rem, 1.8vw, 1.15rem) !important;
}

#homepageSection .feature-highlight-card > :nth-child(2) {
  font-size: clamp(.78rem, 1.4vw, .95rem) !important;
}

#homepageSection .feature-highlight-card > :last-child {
  font-size: clamp(.7rem, 1.1vw, .8rem) !important;
  line-height: 1.4 !important;
}

#homepageSection .home-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(.75rem, 1.8vw, 1.25rem) !important;
}

@media (min-width: 1024px) {
  #homepageSection .home-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

#homepageSection .home-stat-card {
  width: 100%;
  min-height: 108px !important;
  padding: clamp(.75rem, 1.5vw, 1.25rem) !important;
  align-items: center !important;
  text-align: left !important;
  border-radius: clamp(1.25rem, 2vw, 1.5rem) !important;
}

#homepageSection .home-stat-card > .flex { min-width: 0; }
#homepageSection .home-stat-card .counter {
  min-height: auto;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
}

#homepageSection .home-action-card {
  width: 100%;
  min-height: clamp(100px, 12vw, 124px);
  border-radius: 1.25rem !important;
}

#homepageSection .home-action-card > :nth-child(2) {
  font-size: clamp(.875rem, 1.2vw, 1rem) !important;
  font-weight: 900 !important;
  color: #020617 !important;
  line-height: 1.3 !important;
}

#homepageSection .home-action-card > :last-child {
  font-size: clamp(.75rem, 1vw, .8125rem) !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1.35 !important;
}

#homepageSection .home-appointment-card {
  min-height: 70px;
  gap: .75rem;
  border-color: #c7ddd2 !important;
}

#homepageSection .home-appointment-card > :first-child,
#homepageSection .home-appointment-card > :first-child > div { min-width: 0; }

#homepageSection .home-support-banner {
  border-color: #9fcdb5 !important;
  box-shadow: 0 8px 22px rgba(15, 81, 55, .06) !important;
}

/* Stable content width and reading gutters across operational modules. */
.app-section :is(main, .container) {
  width: 100%;
  min-width: 0;
}

.app-section main[class*="max-w-"],
.app-section > section > div[class*="max-w-"] {
  margin-inline: auto;
}

.app-section :is(summary, .module-page-header) > :first-child,
.app-section :is(summary, .module-page-header) > :first-child > div {
  min-width: 0;
}

.app-section summary :is(h2, h3, h4, p),
.module-page-header :is(h1, h2, p) {
  overflow-wrap: anywhere;
}

.app-section :is(.overflow-x-auto, [class*="overflow-x-auto"]) {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.modal-content {
  width: min(calc(100vw - 2rem), 56rem);
  max-height: min(92dvh, 56rem);
}

@media (min-width: 900px) {
  #homepageSection .home-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #homepageSection .home-appointment-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
  }

  #homepageSection .home-appointment-card { height: 100%; }
}

@media (max-width: 639px) {
  .app-top-header { min-height: 56px; }

  #homepageSection .hero-banner-card { min-height: 14rem !important; height: auto !important; }
  #homepageSection .hero-banner-card > .absolute {
    width: 38% !important;
    opacity: .88;
  }
  #homepageSection .hero-banner-card > .relative { width: 72% !important; }

  #homepageSection .home-stat-card {
    min-height: 90px !important;
    padding: .75rem .8rem !important;
    border-radius: 1.25rem !important;
  }

  #homepageSection .home-stat-card > .flex {
    width: 100%;
    align-items: center;
    gap: .65rem;
  }

  #homepageSection .home-stat-card .break-words {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  #homepageSection .home-stat-card::before {
    display: none !important;
  }

  #homepageSection .home-action-grid { gap: .6rem !important; }
  #homepageSection .home-action-card { min-height: 82px; padding: .55rem .45rem !important; }

  .module-page-header {
    gap: .65rem;
    padding-inline: .75rem !important;
  }

  .module-page-header :is(h1, h2) { font-size: 1.05rem !important; }
  .module-page-header p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .app-section details > summary { align-items: flex-start !important; }
  .app-section details > summary > :last-child { flex-shrink: 0; }

  .modal {
    padding: 0 !important;
    align-items: stretch !important;
  }

  .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal-content :is(input, select, textarea) { font-size: 16px !important; }
}

@media (max-width: 419px) {
  #homepageSection .feature-highlights-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .35rem !important;
  }

  #homepageSection .feature-highlight-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 86px !important;
    padding: .5rem .25rem !important;
    text-align: center !important;
  }

  #homepageSection .feature-highlight-card > :first-child {
    margin-bottom: .25rem !important;
  }

  #homepageSection .hero-banner-card > .relative { width: 70% !important; }
  #homepageSection .hero-banner-card > .absolute { width: 38% !important; }
  #homepageSection .hero-banner-card p { -webkit-line-clamp: 2; line-clamp: 2; }

  #homepageSection .home-appointment-card > :last-child > span { display: none; }
  #homepageSection .home-support-banner { align-items: flex-start; }
}

@media (min-width: 1600px) {
  #homepageSection .hero-shell { max-width: 1360px !important; }
  .app-top-header { padding-inline: calc((100vw - 1360px) / 2 + 1rem) !important; }
}

/* ============================================================
   CONTRAST FIX PATCH — WCAG AA compliance
   แก้ปัญหา text contrast ต่ำทุกจุดในระบบ (September 2026)
   ============================================================ */

/* --- Task 2: Footers บน bg-slate-900 ทุก section ---
   text-slate-400 (#94a3b8) บน #0f172a ≈ 3.5:1 → เพิ่มเป็น text-slate-300 (#cbd5e1) ≈ 7.5:1 */
footer.bg-slate-900 p,
footer.bg-slate-900 span,
[class*="bg-slate-900"] > div > p.text-slate-400,
[class*="bg-slate-900"] > div > p[class*="text-slate-4"],
footer p.text-xs.text-slate-400,
footer p[class*="text-slate-4"] {
  color: #cbd5e1 !important;
}
/* contactTree footer มี class ตรงไม่มี /90 */
footer.bg-slate-900.text-slate-400 {
  color: #94a3b8;
}
footer.bg-slate-900.text-slate-400 p {
  color: #cbd5e1 !important;
}
/* TB03 table info bar — bg-slate-800/60 text-slate-400 ≈ 3.5:1 → slate-300 */
.bg-slate-800\/60.text-xs.text-slate-400,
[class*="bg-slate-8"][class*="text-slate-4"] {
  color: #cbd5e1 !important;
}

/* --- Task 3: KPI card label text บน dark gradient ---
   text-*-50 ≈ 2.0:1 บน saturated gradient → เปลี่ยนเป็น text-white ≈ 4.5:1+ */
/* ครอบคลุมทุก kpi-card ที่มี gradient background */
#kpiContent .kpi-card [class*="text-emerald-50"],
#kpiContent .kpi-card [class*="text-amber-50"],
#kpiContent .kpi-card [class*="text-rose-50"],
#kpiContent .kpi-card [class*="text-blue-50"],
#kpiContent .kpi-card [class*="text-teal-50"],
#kpiContent .kpi-card [class*="text-fuchsia-50"],
#kpiContent .kpi-card [class*="text-purple-50"],
#kpiContent .kpi-activity-grid [class*="text-emerald-50"],
#kpiContent .kpi-activity-grid [class*="text-blue-50"],
#kpiContent .kpi-activity-grid [class*="text-amber-50"],
#kpiContent .kpi-activity-grid [class*="text-purple-50"] {
  color: rgba(255, 255, 255, 0.95) !important;
}
/* icon สี *-200, *-300 บน dark gradient — เพิ่มความสว่างขึ้นเล็กน้อย */
#kpiContent .kpi-card [class*="text-emerald-200"],
#kpiContent .kpi-card [class*="text-emerald-300"],
#kpiContent .kpi-card [class*="text-amber-200"],
#kpiContent .kpi-card [class*="text-rose-200"],
#kpiContent .kpi-card [class*="text-blue-200"],
#kpiContent .kpi-card [class*="text-blue-300"],
#kpiContent .kpi-card [class*="text-teal-200"],
#kpiContent .kpi-card [class*="text-teal-300"],
#kpiContent .kpi-card [class*="text-fuchsia-200"],
#kpiContent .kpi-card [class*="text-fuchsia-300"],
#kpiContent .kpi-activity-grid [class*="text-emerald-200"],
#kpiContent .kpi-activity-grid [class*="text-blue-200"],
#kpiContent .kpi-activity-grid [class*="text-amber-200"],
#kpiContent .kpi-activity-grid [class*="text-purple-200"] {
  color: rgba(255, 255, 255, 0.82) !important;
}
/* KPI badge bg-white/20 text-white — เพิ่มพื้นหลังให้ opaque ขึ้น */
#kpiContent .kpi-card .bg-white\/20,
#kpiContent .kpi-activity-grid .bg-white\/20 {
  background: rgba(255, 255, 255, 0.28) !important;
}

/* --- Task 4: Hero stat subtext + Quick Action subtext + Appointment subtext ---
   text-[10px] text-slate-400 (#94a3b8) บน white → text-slate-600 (#475569) ≈5.9:1 */
#homepageSection .hero-stat-card .text-\[10px\],
#homepageSection .home-stat-card .text-\[10px\] {
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}
#homepageSection .home-action-card .text-\[10px\],
#homepageSection .home-action-card [class*="text-slate-4"] {
  color: #475569 !important;
  font-size: 0.72rem !important;
}
#homepageSection .home-appointment-card .text-\[10px\],
#homepageSection .home-appointment-card [class*="text-slate-4"] {
  color: #475569 !important;
  font-size: 0.72rem !important;
}
/* "ข้อมูล ณ วันนี้" header hint */
#homepageSection .text-\[11px\].text-slate-400,
#homepageSection [class*="text-slate-4"][class*="text-\[11px\]"] {
  color: #475569 !important;
}

/* --- Task 5: Modal close button + loading state ---
   patientDetailModal close: text-slate-400 บน bg-slate-700/60 ≈ 2.5:1 → slate-200 */
#patientDetailModal > .modal-content > button.text-slate-400 {
  color: #e2e8f0 !important;
}
#patientDetailModal > .modal-content > button.text-slate-400:hover {
  color: #ffffff !important;
}
/* loading state text-slate-500 บน dark modal */
#patientDetailContent .text-slate-500,
#patientDetailContent .text-sm.text-slate-500 {
  color: #94a3b8 !important;
}
/* monthlyReportContent loading */
#monthlyReportContent .text-slate-500,
#dashboardReportModalBody .text-slate-500 {
  color: #64748b !important;
}

/* --- Task 6: Feature highlight subtext + TB03 filter label ---
   text-[9px] → min text-xs, slate-500 → slate-700 บน white */
#homepageSection .feature-highlight-card .text-\[9px\],
#homepageSection .feature-highlight-card [class*="text-slate-5"] {
  color: #374151 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}
/* TB03 filter placeholder: #94a3b8 บน dark → slate-400 (#94a3b8) ยังพอ แต่เพิ่ม contrast */
#tb03Section .placeholder-slate-400::placeholder {
  color: #94a3b8 !important;
}
/* "ข้อมูล ณ วันนี้" section label */
#homepageSection .text-\[11px\].text-slate-400 i.text-slate-400 {
  color: #64748b !important;
}
/* PDPA note */
#pdpaModal .text-xs.text-slate-400 {
  color: #475569 !important;
}
/* Checklist group helper text (เลือกรายการที่...) บน white */
.text-xs.text-slate-400.mb-2 {
  color: #475569 !important;
}
/* CID counter badge ใน form */
#scrCidCounter {
  color: #475569 !important;
}


/* ============================================================
   UI/UX ENHANCEMENT: Readable Typography, Proportions & Touch Targets
   (September 2026 Audit)
   ============================================================ */
/* Standardize minimum text size to 12px (0.75rem) across the app for senior/VHV readability */
.text-\[9px\], .text-\[10px\], .text-\[11px\] {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

/* Compact, content-dense cards with prominent numbers */
#homepageSection .home-stat-card {
  min-height: 90px !important;
  padding: 0.75rem 0.85rem !important;
}
#homepageSection .home-stat-card .counter {
  font-size: 1.85rem !important;
  font-weight: 900 !important;
}
#homepageSection .home-action-card {
  min-height: 96px !important;
  padding: 0.75rem 0.5rem !important;
}
#homepageSection .home-action-card .leading-tight {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #020617 !important;
}

/* Header back button accessibility and comfortable touch targets */
.module-page-header button[onclick*="navigateToSection"] {
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
}

/* ============================================================
   11 — ELDERLY ACCESSIBILITY: HIGH CONTRAST HEADINGS & ANTI-BLEND
   การออกแบบรองรับผู้สูงอายุ (อสม./ผู้ดูแล/เจ้าหน้าที่อาวุโส)
   หัวข้อทุกส่วนต้องคมชัด ไม่กลืนไปกับสีการ์ดและพื้นหลัง
   ============================================================ */

/* 1. Global section headings & summary bars */
#homepageSection details summary h2,
#homepageSection details summary h3,
#homepageSection details summary h4,
.dashboard-report-panel summary h3,
.dashboard-report-panel summary h4 {
  color: #020617 !important;
  font-weight: 900 !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  letter-spacing: -0.01em !important;
}

/* Dark-themed summary bars (e.g., unitDashboard, fyComparison) keep bright white headers */
#homepageSection #unitDashboard > summary h3,
#homepageSection #fyComparisonAccordion > summary h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) !important;
}

/* 2. Subtitles in summaries & headers */
#homepageSection details summary p,
.dashboard-report-panel summary p {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: clamp(0.8125rem, 1vw, 0.9rem) !important;
}
#homepageSection #unitDashboard > summary p,
#homepageSection #fyComparisonAccordion > summary p {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

/* 3. Hero Stat Cards (4 top cards) */
#homepageSection .hero-stat-card {
  border-width: 2px !important;
  border-color: #cbd5e1 !important;
}
#homepageSection .hero-stat-card :is(.text-xs, .text-sm, .font-bold, .font-black) {
  color: #020617 !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}
#homepageSection .hero-stat-card :is(.text-\[10px\], .text-slate-400, .text-slate-500) {
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
}

/* 4. Detail Showcase Cards (#quickNavDashboards .app-action-card) */
#homepageSection #quickNavDashboards .app-action-card {
  border-width: 2px !important;
  border-color: #cbd5e1 !important;
}
#homepageSection #quickNavDashboards .app-action-card h4 {
  color: #020617 !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
}
#homepageSection #quickNavDashboards .app-action-card p {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
}

/* 5. KPI Dashboard Outcome & Activity Cards (never blend into gradients) */
#homepageSection .kpi-card {
  border-width: 1.5px !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
#homepageSection .kpi-card :is([class*="text-emerald-50"], [class*="text-amber-50"], [class*="text-rose-50"], [class*="text-blue-50"], [class*="text-teal-50"], [class*="text-fuchsia-50"], [class*="text-purple-50"]) {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
#homepageSection .kpi-card :is([class*="text-emerald-200"], [class*="text-amber-200"], [class*="text-rose-200"], [class*="text-blue-200"], [class*="text-teal-200"], [class*="text-fuchsia-200"], [class*="text-purple-200"]) {
  color: #fef08a !important; /* High-contrast golden yellow for icons & symbols */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) !important;
}

/* High contrast target badge pills on KPI gradient cards */
#homepageSection .kpi-card span:is([class*="bg-white/20"], [class*="rounded-full"]) {
  background: rgba(2, 6, 23, 0.55) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* 6. Demographic & Chart Cards */
#demographicsDashboard .dashboard-report-panel h3,
#demographicsDashboard .dashboard-report-panel h4,
#homepageSection [id*="Chart"] ~ div h3 {
  color: #020617 !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
}
#demographicsDashboard .dashboard-report-panel p,
#homepageSection [id*="Chart"] ~ div p {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
}

/* 7. Badge contrast across all summary headers */
#homepageSection details summary span[class*="rounded-full"] {
  font-weight: 900 !important;
  border-width: 1.5px !important;
}

/* ============================================================
   12 — FINAL KPI CONTRAST AUTHORITY
   Legacy light-card rules in styles.css intentionally use two IDs and
   !important. Keep the colourful KPI surfaces, then restore their foreground
   colours here with higher specificity so labels, values and icons never fade.
   ============================================================ */
#homepageSection #kpiDashboard #kpiContent .kpi-card .text-white,
#homepageSection #kpiDashboard #kpiContent .kpi-activity-grid > div .text-white,
#homepageSection #kpiDashboard #kpiContent .kpi-primary-grid > div > .relative .text-white {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(2, 6, 23, .72) !important;
}

#homepageSection #kpiDashboard #kpiContent .kpi-card :is(
  [class*="text-emerald-200"], [class*="text-emerald-300"],
  [class*="text-blue-200"], [class*="text-blue-300"],
  [class*="text-cyan-200"], [class*="text-cyan-300"],
  [class*="text-teal-200"], [class*="text-teal-300"],
  [class*="text-amber-200"], [class*="text-amber-300"],
  [class*="text-rose-200"], [class*="text-rose-300"],
  [class*="text-fuchsia-200"], [class*="text-fuchsia-300"],
  [class*="text-purple-200"], [class*="text-purple-300"]
),
#homepageSection #kpiDashboard #kpiContent .kpi-activity-grid > div :is(
  [class*="text-emerald-200"], [class*="text-emerald-300"],
  [class*="text-blue-200"], [class*="text-blue-300"],
  [class*="text-cyan-200"], [class*="text-cyan-300"],
  [class*="text-amber-200"], [class*="text-amber-300"],
  [class*="text-purple-200"], [class*="text-purple-300"]
) {
  color: #fef3c7 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(2, 6, 23, .72)) !important;
}

/* The four service-activity cards were previously flattened to white by a
   legacy selector. Explicit dark gradients make the visual contract robust
   even if utility generation or stylesheet order changes later. */
#homepageSection #kpiDashboard #kpiContent .kpi-activity-grid > div:nth-child(1) {
  background: linear-gradient(135deg, #047857, #064e3b) !important;
  border-color: #34d399 !important;
}
#homepageSection #kpiDashboard #kpiContent .kpi-activity-grid > div:nth-child(2) {
  background: linear-gradient(135deg, #2563eb, #312e81) !important;
  border-color: #60a5fa !important;
}
#homepageSection #kpiDashboard #kpiContent .kpi-activity-grid > div:nth-child(3) {
  background: linear-gradient(135deg, #b45309, #7c2d12) !important;
  border-color: #fbbf24 !important;
}
#homepageSection #kpiDashboard #kpiContent .kpi-activity-grid > div:nth-child(4) {
  background: linear-gradient(135deg, #9333ea, #581c87) !important;
  border-color: #c084fc !important;
}

/* Coloured icon tiles in the KPI accordion headers must also keep white icons. */
#homepageSection #kpiDashboard #kpiContent details > summary > div:first-child > span.text-white {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Risk-map view controls remain outside the canvas for touch and keyboard use. */
.risk-view-toolbar, .risk-view-switch, .risk-camera-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.risk-view-toolbar { justify-content: space-between; margin-bottom: .5rem; }
.risk-view-toolbar button {
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid #94a3b8;
  border-radius: .65rem;
  background: #ffffff;
  color: #164e63;
  font-weight: 800;
  cursor: pointer;
}
.risk-view-toolbar button[aria-pressed="true"] { background: #155e75; color: #ffffff; border-color: #155e75; }
.risk-view-toolbar button:focus-visible, .risk-view-toolbar input:focus-visible,
#riskHeatMap3D button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.risk-camera-controls label { display: flex; align-items: center; gap: .5rem; color: #1e293b; font-weight: 700; }
.risk-camera-controls input { width: 100px; min-height: 44px; accent-color: #155e75; }
.risk-view-status { color: #334155; font-size: .8125rem; line-height: 1.6; margin: .5rem 0 .75rem; }
#riskHeatMap3D { width: 100%; height: clamp(22rem, 55dvh, 36rem); min-height: 22rem; background: #e2e8f0; }
#riskHeatMap3D[hidden], #riskHeatMap[hidden], .risk-camera-controls[hidden] { display: none !important; }
.risk-map-shell .risk-map-legend {
  position: static;
  max-width: none;
  padding: .65rem;
  background: #f1f5f9;
  box-shadow: none;
}
#riskHeatMap3D .risk-3d-label {
  max-width: 160px;
  padding: .35rem .6rem;
  background: #ffffff;
  border: 2px solid #155e75;
  border-radius: .55rem;
  color: #0f172a;
  font: 800 12px/1.5 inherit;
  box-shadow: 0 2px 8px #0f172a33;
  cursor: pointer;
}
#riskHeatMap3D .maplibregl-popup-content { color: #0f172a; background: #ffffff; padding: 16px 28px 16px 16px; }
#riskHeatMap3D .risk-3d-popup { font-size: 14px; line-height: 1.7; }
#riskHeatMap3D .maplibregl-popup-close-button { width: 28px; height: 28px; color: #0f172a; }
#riskHeatMap3D .maplibregl-ctrl-group button { width: 44px; height: 44px; }
@media (max-width: 639px) {
  .risk-view-switch { width: 100%; }
  .risk-view-switch button { flex: 1; padding-inline: .5rem; }
  .risk-camera-controls { gap: .4rem; }
  .risk-camera-controls button { padding-inline: .6rem; font-size: .8rem; }
  #riskHeatMap3D { height: 52dvh; min-height: 350px; }
}

/* ============================================================
   13 — FINAL TEXT CONTRAST + CARD ACTION AUTHORITY
   Legacy utility selectors use broad !important rules. These narrow
   selectors keep actionable text readable on light surfaces and preserve
   the dark-green module header treatment on every operational page.
   ============================================================ */
/* Header copy sits on the dark green module banner. */
.app-section .module-page-header p {
  color: #d9f7e8 !important;
  opacity: 1 !important;
}
.app-section .module-page-header button:first-child {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #166534 !important;
  text-shadow: none !important;
}
.app-section .module-page-header button:first-child:hover,
.app-section .module-page-header button:first-child:focus-visible {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
  color: #14532d !important;
}

/* KPI action buttons are deliberately light, so their labels must be dark. */
#homepageSection #kpiDashboard #kpiContent .kpi-card button.kpi-action-button,
#homepageSection #kpiDashboard #kpiContent .kpi-card button.kpi-action-button.text-white,
#homepageSection #kpiDashboard #kpiContent .kpi-card button#kpiNeverVisitedAction,
#homepageSection #kpiDashboard #kpiContent .kpi-card button#kpiNeverVisitedAction.text-white {
  background: #ecfdf5 !important;
  border: 2px solid #5eead4 !important;
  color: #115e59 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, .16) !important;
}
#homepageSection #kpiDashboard #kpiContent .kpi-card button.kpi-action-button:hover,
#homepageSection #kpiDashboard #kpiContent .kpi-card button.kpi-action-button:focus-visible,
#homepageSection #kpiDashboard #kpiContent .kpi-card button.kpi-action-button.text-white:hover,
#homepageSection #kpiDashboard #kpiContent .kpi-card button.kpi-action-button.text-white:focus-visible,
#homepageSection #kpiDashboard #kpiContent .kpi-card button#kpiNeverVisitedAction:hover,
#homepageSection #kpiDashboard #kpiContent .kpi-card button#kpiNeverVisitedAction:focus-visible,
#homepageSection #kpiDashboard #kpiContent .kpi-card button#kpiNeverVisitedAction.text-white:hover,
#homepageSection #kpiDashboard #kpiContent .kpi-card button#kpiNeverVisitedAction.text-white:focus-visible {
  background: #ccfbf1 !important;
  border-color: #0f766e !important;
  color: #134e4a !important;
}
#homepageSection #kpiDashboard #kpiContent button.kpi-action-button :is(i, span),
#homepageSection #kpiDashboard #kpiContent button#kpiNeverVisitedAction :is(i, span) {
  color: inherit !important;
  opacity: 1 !important;
}

/* Status chips retain their semantic colours; do not flatten them into
   white text on a dark translucent badge. */
#homepageSection #kpiDashboard #kpiContent .kpi-card span.bg-amber-100 {
  background: #fef3c7 !important;
  color: #78350f !important;
}
#homepageSection #kpiDashboard #kpiContent .kpi-card span.bg-emerald-100 {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
#homepageSection #kpiDashboard #kpiContent .kpi-card span.bg-rose-100 {
  background: #ffe4e6 !important;
  color: #9f1239 !important;
}
#homepageSection #kpiDashboard #kpiContent .kpi-card span[class*="opacity-75"] {
  opacity: 1 !important;
}

/* Dark gradient toolbars inherit white copy even when a legacy heading rule
   assigns the page ink colour to an unclassed h4. */
.app-section [class*="bg-gradient-to-r"][class*="text-white"] :is(h1, h2, h3, h4, h5, h6, p) {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* The catchment summary uses a pale cyan stat tile; the old cyan-200/100
   utilities are too light against it. */
#tambonDetailSection [class*="bg-cyan-400/15"] .text-cyan-200 {
  color: #0f766e !important;
}
#tambonDetailSection [class*="bg-cyan-400/15"] .text-cyan-100 {
  color: #155e75 !important;
}

/* Homepage headline totals: keep the four operational numbers unmistakably
   larger than their labels. This final rule intentionally wins over the
   legacy .font-black typography normalization above. */
#homepageSection .home-stat-card.hero-stat-card {
  min-height: 9.5rem !important;
}
#homepageSection .home-stat-card.hero-stat-card .counter {
  font-size: clamp(3.25rem, 5vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.055em !important;
  font-variant-numeric: tabular-nums !important;
}
#homepageSection .hero-stat-total .counter { color: #1d4ed8 !important; }
#homepageSection .hero-stat-active .counter { color: #0f766e !important; }
#homepageSection .hero-stat-cured .counter { color: #7e22ce !important; }
#homepageSection .hero-stat-new .counter { color: #c2410c !important; }

@media (max-width: 639px) {
  #homepageSection .home-stat-card.hero-stat-card {
    min-height: 8.5rem !important;
    padding: 0.75rem 0.5rem !important;
  }
  #homepageSection .home-stat-card.hero-stat-card .counter {
    font-size: clamp(3rem, 16vw, 3.75rem) !important;
  }
}